2
\$\begingroup\$

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(hills,{time=600,y=153})
    transition.to(hills2,{time=600,y=153})
    transition.to(hills3,{time=600,y=153})
    transition.to(tree,{time=600,y=153})
    transition.to(trees,{time=600,y=180})
    transition.to(cloudsBig,{time=500,y=cloudsBig.y-6})
    transition.to(cloudsBig2,{time=500,y=cloudsBig2.y-6})
    transition.to(cloudsSmall,{time=500,y=cloudsSmall.y-2})
    transition.to(cloudsSmall2,{time=500,y=cloudsSmall2.y-2})
    transition.to(sky,{time=500,y=sky.y-3})
    transition.to(sky2,{time=500,y=sky2.y-3})
    transition.to(sky3,{time=500,y=sky3.y-3 })
    transition.to(floor,{time=500,y=floor.y-15})
`}`

`backgroundJumpStart = function (){
    transition.to(hills , {time=500, y=180,onComplete=backgroundJumpEnd })
    transition.to(hills2,{time=500,y=180})
    transition.to(hills3,{time=500,y=180})
    transition.to(tree,{time=500,y=185})
    transition.to(trees,{time=500,y=220})
    transition.to(cloudsBig,{time=500,y=cloudsBig.y+6})
    transition.to(cloudsBig2,{time=500,y=cloudsBig2.y+6})
    transition.to(cloudsSmall,{time=500,y=cloudsSmall.y+2})
    transition.to(cloudsSmall2,{time=500,y=cloudsSmall2.y+2})
    transition.to(sky,{time=500,y=sky.y+3})
    transition.to(sky2,{time=500,y=sky2.y+3})
    transition.to(sky3,{time=500,y=sky3.y+3})
    transition.to(floor,{time=500,y=floor.y+15})
}`
\$\endgroup\$
11
  • 2
    \$\begingroup\$ I guess you should specify what programming language you're using by adding a tag. \$\endgroup\$ Commented Mar 5, 2013 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\$ Commented Mar 5, 2013 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\$ Commented Mar 5, 2013 at 17:26
  • 2
    \$\begingroup\$ Try using the golden ratio. \$\endgroup\$ Commented Mar 5, 2013 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\$ Commented Mar 5, 2013 at 23:13

2 Answers 2

Reset to default
1
\$\begingroup\$

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.

\$\endgroup\$
0
\$\begingroup\$

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.

\$\endgroup\$

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.