Multiple Backgrounds for depth...

bladeolson

This might be sort of a newbie question, but I am wondering what is the trick to make multiple backgrounds. You know the ones in many games have like a very far away backgound like a mountainside. Then a closer one like buildings or trees or something. Then the foreground where the game takes place. I see this in a lot of games. The look is something that makes it look like there is more depth. Can someone explain how this is done?

design219

The illusion works by things in the distance moving slower than things closer. So if you had a car moving from left to right, your mountains in the background would move from right to left very slowly, but you might have a fence that would move rather fast, and maybe some trees between the fence and the mountain that would move at a speed somewhere in between.

Is that what you are asking?

nulo

different actors for different distances. 3 actors for example.
actor 1 - sky & clouds
actor 2 - mountains
actor 3 - trees

make actor 1 (the farthest away) move speed the smallest
make actor 2 have a movement speed between actor 1 and 3
make actor 3 move speed really high

this way they will move in different speeds, giving the idea of depth.
to make actors seem closer or farther away, play with the speeds.

iDeveloperz

Layers...

design219

You should check out Huge Graphic's game Orbots Attack.

http://itunes.apple.com/us/app/orbots-attack/id353356009?mt=8

They did some nice work with the 3d illusion by animating a little fog and out of focus buildings in the far distance with a foreground (the controls) sharp and the enemies as a mid range 3d graphic.

Very well done.

synthesis

Just put foreground stuff on higher layers than background stuff within the scene manager tab. Also organize the layer as too which you want to move around and which are stationary (ie. a static HUD or panning backgrounds). Its fairly simple.

As for animation of layer actors (ie. scolling layered background elements at different speeds)...that's up to your creativity/imagination.

jonmulcahy

someone made a nice paralax demo showing the countryside looking out of a moving car, search for paralax under shared games.

scitunes

maybe this is obvious, but not sure how much of a noob you are (there are levels of noobiness after all!) but be sure to use transparent png files so that the layer behind each png can be seen.

Eastbound

@Mulcahy: Searched paralax and couldn't find anything. I know how to do them, but if its a good example I'd love to just implement that one.

quantumsheep

@Mulcahy

You mean this example by Mr. Ford: http://gamesalad.com/game/play/33976

It *is* awesome...

synthesis

Good sample QS...but you have do be careful you don't overwhelm the processor with that many animated PNG that are that big.

bladeolson

That car demo is really cool. And that is totally the effect I am talking about. Seems like those must be some pretty huge images. Do you guys think the big image is in the back and the middle is smaler looping and the grass is even smaller looping? I don't want my app to be to heavy on the device. I am also trying to make my animation going vertical so it is a bit different than this but I guess the concept is the same.

one more question if you guys care. Does your character trigger these background movements as long as it is moving? or should this kind of movement just happen automatically?

quantumsheep

You could make a speed variable and have the character trigger that.

So at the start , speed could = 0

Set the background motion to speed (which is 0) multiplied by 2, say. This would make the background stand still.

Then when you want it to start moving, trigger another variable (say, 'moving' to true).

Then if 'moving' = 'true'
Let speed = 10

This would then make the background move as its speed would be 20 (speed (10) * 2)

Does that make sense? It's 5am here so I may not have described it well enough - sorry!

QS

bladeolson

Yeah that makes sense logically. I think i will need to play around with things to implement. I have been dinking around with things for a while, but lately I am finally starting to understand how GS works and having a ton of fun. I like drawing and making music and sounds , so this is a cool tool to have my ideas come to life. I will let you know how it goes.

synthesis

You shouldn't "Dink and Drive". (jk

Be sure to not display any imagery where it is not seen. Clip your images at the bottom where they are not visible. This will lighten the image load. Also...use 8 bit PNGs at ALL TIMES...unless transparency is involved.

Keep those images tight and efficient too.

bladeolson

Sythesis

I was thinking that too. How do you perform clipping? I would imagine it is some kind of rule that if things are not in the view area, don't make them visible. Any good examples?

JCFord

HI Bladeolson,

I made the car parallax demo here with GameSalad that is mentioned above and the images are very small they neatly wrap left to right giving the illusion that they are very long, and each layer is also very shallow in height as they overlay each other.

So the file size is small and I have tested it on the iphone and it runs very fast - so anything is possible. Good luck

JCFord

synthesis

To clip...
Just make the image smaller then position the Y at its correct center point.

eg:
the background layer (the slow moving mountains) would be only 150 px tall (with 30 px to allow for overlap of the layer in front). So make the image 150 px tall and then position on the scene with the Y at 275 px. Then manipulate your X position to make it roll and wrap sideways.

Its that simple.
Repeat for each layer as you come forward.

bladeolson

I think my brain is not working to good. Having a hard time figuring this one out. I want to make a guy that runs on the ground and the backgrounds do the parallax scroll effect. Any samples projects out there that might be helpful? I looked but could not find much.

homelesswombat

Ive done this in my platform jumper game. First make a background actor of your choice. Then open it as a prototype so you can access scene attributes.

Constrain self.x to scene.camera.x/2+(offset)
Constrain self.y to scene.camera.y/2+(offset)

To make a second layer that looks "farther away" make another prototype with behaviors:

Constrain self.x to scene.camera.x/5+(offset)
Constrain self.y to scene.camera.y/5+(offset)

The offset will center the image over the center of your scene. Remember this solution is for a platform jumper, so I bet it would be even easier to make one for a side scrolling shooter. My solution is also not necessarily the best, so anyone with good ideas on how to optimize this more I'm all ears.

bladeolson

Guys, I got it going FINALLY. It works great now. thanks for all your help!