1

Topic: Environment backgrounds

I've been working on some background/environment ideas. Do we have a nice way of adding new ones?
http://twolofbees.com/uploads/2014/neverball/volcano.png

It's still a work in progress (the moon needs some attention and I plan to put some glow on the volcano mouths), but does anybody have any comments?

Cheese
==========
cheesetalks.net

2

Re: Environment backgrounds

http://twolofbees.com/uploads/2014/neverball/volcano2.png

I think I'm just about happy with it now.

Cheese
==========
cheesetalks.net

3

Re: Environment backgrounds

That looks pretty nice. apocalyptic...

Will you do the billboardization ( smile ) of that, or will you provide the image components in separate pngs/svgs?

4

Re: Environment backgrounds

Whatever's needed. I'm expecting to separate it into different components like the mount*.png ones, and maybe if it's doable, have the meteorites move like the jet in the environment used for the first easy levels.

At the moment, I don't know enough about how it all goes together. Looking at the existing environments, it seems like there's a lot of options (stretching al-la the loops and waves, straight translation like the jet, stuff like the streets in the city environment, etc etc etc).

Cheese
==========
cheesetalks.net

5

Re: Environment backgrounds

So, split into background + 4 mountains, 4 volcanoes (one of which doesn't have lava), the Sun, and the meteorites.  and maybe there should be some extra clouds...

As I understand it, the loops and waves aren't really stretched, they're rotating, and as the billboards only have one side, when they face away from the camera, they're not visible.

6

Re: Environment backgrounds

Nice, Cheese.  That's gonna look great.  Basically do as paxed says: separate each component into a PNG image, 256 pixels on the longest side.  The gradient should go in a separete 16x128 PNG like the ones in data/back.  Everything should have a mask in the alpha channel.

In fact, billboards do stretch instead of rotating.  The waves stretch to have a negative width, effectively turning them backwards, which is why they disappear.

When it's all done, just hand-edit the background MAP file.  There's no way to edit these in Radiant because they don't use the normal positioning mechanism.

Getting the motion of the meteors right may be a challenge, but we'll figure something out.

What's on the bottom of the environment?

7

Re: Environment backgrounds

Thats lookin hawt Cheese.

Mac OS X Xcode project & package maintainer.

If you have some Neverball related files you need hosted somewhere, please send a me forum PM/email.

8

Re: Environment backgrounds

rlk wrote:

Nice, Cheese.  That's gonna look great.  Basically do as paxed says: separate each component into a PNG image, 256 pixels on the longest side.  The gradient should go in a separete 16x128 PNG like the ones in data/back.  Everything should have a mask in the alpha channel.

Thanks
smile

Since this is the first time (that I'm aware of), anyone other than yourself has attempted to make a new background/environment/whatever we're calling them, I guess there's no style guide. I expect that giving the mountains and so forth a solid -> transparent gradient is favourable over a solid->solid gradient (for file size if not reusability), or is that what you meant by having a mask in the alpha channel?

I have another few ideas that I want to do some stuff with. Is the 16x128 background stretched to cover the entire horizon, or is it tiled (city is different from the others - I expect I'll learn more when I look at its MAP file)?

rlk wrote:

What's on the bottom of the environment?

Nothing at the moment. I'm trying to wrap my head around whether swaying grass could be achievable in the same way the water's done, or whether it'd just look silly (I had considered lava veins done like the bottom of city, but I think that's going a bit far). Any suggestions?

Cheese
==========
cheesetalks.net

9

Re: Environment backgrounds

Cheeseness wrote:

Thanks
smile

Since this is the first time (that I'm aware of), anyone other than yourself has attempted to make a new background/environment/whatever we're calling them, I guess there's no style guide. I expect that giving the mountains and so forth a solid -> transparent gradient is favourable over a solid->solid gradient (for file size if not reusability), or is that what you meant by having a mask in the alpha channel?

I have another few ideas that I want to do some stuff with. Is the 16x128 background stretched to cover the entire horizon, or is it tiled (city is different from the others - I expect I'll learn more when I look at its MAP file)?

This is the only documentation there is.

The mountains don't necessarily need a transparency gradiant.  But if not, then the bottom of the mountains should be of the same color as the center of the background gradient, to give the illusion that they connect.  In your case, you could do it either way.  I suppose a transparency gradient in the mountains themselves would be most reliable.

The 16x128 gradient is stretched over the entire sky.  It doesn't actually need to be 16x128, that's what I just used in the past.  Notice that data/back/city.png is 64x128 and includes a bright spot in the middle which, when stretched, gives the impression of a broad band of setting sunlight.  You might want to do something similar, but more subtle, and position your sun sprite near the bright spot.

Cheeseness wrote:
rlk wrote:

What's on the bottom of the environment?

Nothing at the moment. I'm trying to wrap my head around whether swaying grass could be achievable in the same way the water's done, or whether it'd just look silly (I had considered lava veins done like the bottom of city, but I think that's going a bit far). Any suggestions?

I'd try a few things.  I'd say glowing lava veins layed flat like the city is most likely to work.  You could apply slow rotations or motions to them to give a subtle motion effect.  You could combine that with some close-up billboards, like maybe big rocks floating slowly in the lava.

Once you have some images, send them my way and I'll help you try a few configurations.

I gotta say again, your design is completely awesome.  I love the little dinosaur.

10

Re: Environment backgrounds

rlk wrote:

This is the only documentation there is.

Ah, sweet. I feel like an idiot for not reading through the wiki before posting.

rlk wrote:

I suppose a transparency gradient in the mountains themselves would be most reliable.

The only downside there is that overlap looks pretty rough (you do it with the mount images in city, but they're completely black).


rlk wrote:

I love the little dinosaur.

He's so awesome. Unfortunately, he seems aware of his impending doom.
;_;

Cheese
==========
cheesetalks.net

11

Re: Environment backgrounds

rlk wrote:

I love the little dinosaur.

cheeseness wrote:

He's so awesome. Unfortunately, he seems aware of his impending doom.
;_;

That isn't a dinosaur, it's a very small man, wearing a very big cap!!  big_smile

Currently Playing:
Celeste and Electronic Super Joy

12

Re: Environment backgrounds

Oh... in that case, he should be safe then.

Cheese
==========
cheesetalks.net

13

Re: Environment backgrounds

I've been having a fiddle with it, and I think I'm right so far as positioning and stuff goes.

I'm getting some interesting alpha blending issues though. I've checked them in a couple of graphics editors/previewers to make sure there wasn't an obscure white outline hiding somewhere.
It doesn't seem to happen with the meteorite or the sun, only the clouds and the hills.
http://cheeseness.no-ip.org/stuff/never … reen00.png

Cheese
==========
cheesetalks.net

14

Re: Environment backgrounds

Yes those kind of alpha issues are extremely common.  Out of curiosity, how are you generating those?  Inkscape?  Photoshop?  Gimp?

The problem is that the background color of the image is white, and that the modulation (the anti-aliasing blending) is being done in both the color channels and the alpha channel.  Thus, instead of blending black toward the red, it's blending black toward white toward red.  Ideally, modulation is done only in the alpha channel.

So for the mountain image, the color channels should be entirely black, and the anti-aliased mountain shape and blending should only exist in the alpha channel.  It's a little annoying, I know, but that's how blending works.

15

Re: Environment backgrounds

Ahhh, OK. That makes sense.

I did it up in Inkscape.

I work a half day today, so I should be able to jump on it when I get home at lunch.

Another question: they look fairly low res there. I can't increase the distance beyond 255. Is it just a matter of specifying a smaller width/height, or am I missing something (the waves for example seem for have far smoother  edges).

Cheese
==========
cheesetalks.net

16

Re: Environment backgrounds

256, not 255.  Gotta be a power of two.

You can use 512, but please do so sparingly to keep the total image size down.  I believe there's only one 512 image in the current image set, and that's the Jupiter image, because it's huge on-screen.   The waves appear to be high-res, but that's just because they're tiny on-screen.  They're actually 256x64.  And yes, the on-screen size is a combination of the distance and the width and height.

17

Re: Environment backgrounds

No worries. I haven't got anything bigger than 256px at this stage anyway.

For future reference, having an object with no fill behind everything in Inkscape overrides the document's background colour and allows exported PNGs to have a transparent background (the meteor and sun were heavily blurred and had such an object behind them that I used so that I could export the region around them - blurred objects extend beyond their own borders). The edges seem to be properly anti-aliased now, and nowhere near as blocky.

Huzzah

Cheese
==========
cheesetalks.net

18 (edited by Cheeseness 2008-01-06 11:54:06)

Re: Environment backgrounds

I seem to be sucking immensely at getting a 'ground' to line up (I'm trying to 'tile' an image to create a flat surface). How did you do it with the city stuff, rlk? Did you work out placement in cartesian coordinates and then convert to spherical?

Cheese
==========
cheesetalks.net

19

Re: Environment backgrounds

Yes, I probably did convert cartesian to spherical.

Are you creating lava?  Maybe lava would look good randomly distributed?

20

Re: Environment backgrounds

I've got a ground texture with transparent cracks in it, and I was going to move a lava coloured one around below it. It's pretty rough at the moment - I was going to see if I could execute it properly before I made it look nice -, so I'm happy to take suggestions on other 'ground' ideas.

Cheese
==========
cheesetalks.net

21

Re: Environment backgrounds

I'm still tweaking my cartesian -> sperical coordinates, but this is kinda what it's all looking like at the moment ('floor' texture is temporary).

I'll probably end up scaling down the meteorite(s) a lot, and maybe adjust the hill/volcano gradients to match a bit better with the horizon mountains (which at the moment I think look nicer). I also want to look at putting some stars and maybe some whispy clouds higher up (at the moment reflections are pretty boring).

http://cheeseness.no-ip.org/stuff/never … lcano3.png

Cheese
==========
cheesetalks.net

22

Re: Environment backgrounds

I'm feeling like I'm not getting anywhere with this (at least not fast enough to finish it before I fly out of the country).

Any help anyone would be willing to give me would be greatly appreciated.

Cheese
==========
cheesetalks.net

23

Re: Environment backgrounds

Send me your images and your MAP.  I'll see what I can do.

24

Re: Environment backgrounds

Any luck?
I haven't been able to play with it at all (work's picking up and I've got a ton of stuff to finish before I go away).

Cheese
==========
cheesetalks.net

25 (edited by Cheeseness 2008-05-03 14:18:47)

Re: Environment backgrounds

Finally!
After much perseverance (and some vague dodginess), I've ironed out my cartesian conversion problem. Expect updates on my environments.

http://cheeseness.no-ip.org/stuff/never … lcano4.png

Some tweaks: cirrus clouds move (at varying speeds). There's now some stars (copied from Alien wink ). The ground plane (which is obviously a placeholder) is a square texture with pransparent lines, and I've got a coloured texture that sits behind it  and moves. The paralaxing gives the impression that there's some movement/undulation going on there, and I'm going to use this technique to make nice looking lava filled cracks.

Cheese
==========
cheesetalks.net