I am currently building my first Mobile game. The concept is pretty simple, it's a sideways scroller.

I have implemented 5 layers to act as parallax scrolling, these are working quite well for general movement. However they look a bit weak when jumping, I would like to apply some sort of ratio which gives a 3d effect to the jump. I made a basic attempt, however it just looks a bit naff.

I have struggled to find any tutorials on this , could anyone provide any help?

As requested, here is some example code

    backgroundJumpEnd = function(){
    transition.to(sky3,{time=500,y=sky3.y-3 })

`backgroundJumpStart = function (){
    transition.to(hills , {time=500, y=180,onComplete=backgroundJumpEnd })
  • 2
    \$\begingroup\$ I guess you should specify what programming language you're using by adding a tag. \$\endgroup\$ – user1306322 Mar 5 '13 at 12:37
  • 2
    \$\begingroup\$ I was after a kind of general ratio / guide really. I didn't want to get too hung up on languages or frameworks, more principles of how this can work effectively \$\endgroup\$ – user499846 Mar 5 '13 at 12:55
  • 2
    \$\begingroup\$ Why exactly do you think it looks poor when a sprite jumps? It should look exactly the same. Could you give an example of what you want it to look like? \$\endgroup\$ – Tony Mar 5 '13 at 17:26
  • 2
    \$\begingroup\$ Try using the golden ratio. \$\endgroup\$ – aglassman Mar 5 '13 at 17:29
  • 1
    \$\begingroup\$ @tony hey, so horizontal scrolling seems to look and feel fine, however vertically the I have played around with a few different ratios however it doesn't seem to give any depth of field. It seems to be a common technique used in most Mobile games - (ski safari - wimp are a couple of examples) but I can't seem to find any resources or tutorials, everything seems to cover horizontal only \$\endgroup\$ – user499846 Mar 5 '13 at 23:13

I have used Parallax background in my game and I don't understand, why should the vertical and horizontal ratio should be any different. I have only 3 layers. Static background, parallax layer that moves half the speed as the front (game) layer. In my game, there's a lot of vertical and horizontal movement and it simply looks the best when the vertical and horizontal movement is the same.

Now adding one more layer that moves 1/4 of the speed horizontally (so it is further), why shouldn't it be the same ratio vertically?

If I just consider mathematical point of view, parallax layers are like slices of the real world. We make a lot of simplifications when making games, so let's do some:

Draw a hypothetical line from your eye all the way the infinity, so the line is perpendicular to your body. The point in infinity never moves.

When you move left one meter, the start point of the line moves one meter to the left. The point that we will consider placement of parallax layer with horizontal ratio 0.5 (let's call it X, it moves half the distance) will move half a meter left. Now go back and duck. The line will move 1 meter down (depends on your height, really...) and the point X moves half a meter down, doesn't it?

So doesn't it look "weak" simply because your run left and right for a long distance, but you jump only a little?

TLDR: Same ratio.


It's hard to answer without seeing what you have and how it compares to what you want.

First thing's first, change all those values to variables. That'll make it much easier to update.

Second, your JumpStart and JumpEnd have different time values for your hills, which from what little I know of your code, should make things look weird. Also, their y values are different, which should slowly pull them out of sync.

Third, a picture would help. Most parallax games use foreground, midground, and background. Occasionally, games throw in more layers, but they're not necessary. This naturally groups your elements into the segments that move together (the further you get from the screen, the less they should move). With the code you have here, it's hard to tell which elements should move more than others.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.