I am a beginner in game development. I want to create a parallax background that merges at the front and expands at the bottom. I'm sure there is a way to do this, but I'm missing something. My parallax background is working fine but didn't merge from start to bottom.

Any guidance? Thanks!

Code for my parallax:

private BitmapTextureAtlas mAutoParallaxBackgroundTexture;
private TextureRegion mParallaxLayerMid;

createFromAsset(this.mAutoParallaxBackgroundTexture, this,"road.png", 0, 0);

back_ground = new Sprite(0,0,CAMERA_WIDTH,CAMERA_HEIGHT,this.mParallaxLayerMid);

autoParallaxBackground = new AutoParallaxBackground(20, 30, 40, 50);

I'm trying to make parallax background like in these screen shots.

  • \$\begingroup\$ I'm sure you tried trying but you kinda missed it. How could anyone answer such a specific question without any source code? Please consider adding further details and ABOVE ALL mentioning the source code next time. You won't have any answer otherwise. \$\endgroup\$ – user14170 Mar 15 '12 at 11:10
  • \$\begingroup\$ Sorry, your best is not enough. \$\endgroup\$ – o0'. Mar 15 '12 at 11:10
  • \$\begingroup\$ Sorry :(,I tried again to express my problem \$\endgroup\$ – sheraz amin Mar 15 '12 at 11:57
  • \$\begingroup\$ Are you talking about how the road starts out skinny at the top of the screen and gets wider at the bottom? Or is it something else? I really don't know what you mean by merge and expand. \$\endgroup\$ – SpartanDonut Mar 15 '12 at 12:15
  • \$\begingroup\$ Exactly it starts tinny at starts and then expands ... how can i able to achieve this in andengine??? I didnr find anyhelp regarding this. \$\endgroup\$ – sheraz amin Mar 15 '12 at 16:38

Your question is a bit rough but if I'm following correctly, you want to make it so the background is stretched horizontally as it moves towards the bottom of the screen, giving it a somewhat isometric view and a more angled perspective.

Just as a warning, I've no direct android development experience myself so this is going to be largely theoretical. Others may be able to tell you what parts of this are feasible or better methods to do so.

Camera Method

Easy way to do this off the top of my head is to tilt an overhead camera pointed at a top down surface.

                           Rough Camera Example

That would allow you to do all your game logic without regards to the perspective drift (something moving forward along the road would naturally shrink as it moved away). Of course this means that there will be parts of your surface that are clipped by the bounds of the screen, but depending on how you handle your gameplay this may or may not be an issue.

Shader Method

Another way to handle it would be to implement some form of shader that sampled the surface differently based on Y position on screen. Again, I'd likely render my scene as a rectangle (straight top-down, no perspective) and use that as what gets sampled so all the assets get the effect and not just the background. Using a system like that you could specify a percent amount to sample from at the bottom of the screen and the top and adjust them to taste.

An example of using that method. Say you had a surface and you wanted 50% at the bottom and 100% at the top:

                         Rough Shader Example

When you go to draw to your screen, what is actually displayed is entirely within the red. At the bottom of the screen, the left most pixel samples from the 25% mark and the right most pixel samples from the 75%. This does mean you'll have to deal with stretching up close/loss of detail at distance, but things like image resolution and how dramatic you make the difference between "near" and "far" will allow you to adjust it until it feels right.


If both of those have issue, or if it just sounds like too much of a pain, then I'd recommend cheating. Make your background relatively static with the proper tilt to it and only move non-static elements along it.

Using the road example, the lines down the middle and the things along the sides of the road. You'll have to scale them up slightly as you move them down the screen, but you can get a fairly decent illusion of perspective/depth with very little cost this way provided you either don't turn or come up with a decent way of handling them. This is something very similar to what a number of old resource limited games would do in this situation.

Hope one of these is something close to what you were looking for.


I use that for full screen

autoParallaxBackground.attachParallaxEntity(new ParallaxEntity(0.0f, new Sprite(0, 0, camera.getWidth() ,camera.getHeight() ,this.mParallaxLayerBack, vertexBufferObjectManager)));
autoParallaxBackground.attachParallaxEntity(new ParallaxEntity(-5.0f, new Sprite(0, 80, this.mParallaxLayerMid, vertexBufferObjectManager)));
autoParallaxBackground.attachParallaxEntity(new ParallaxEntity(-10.0f, new Sprite(0, cameraHeight - this.mParallaxLayerFront.getHeight(), this.mParallaxLayerFront, vertexBufferObjectManager)));

camera is a globar var, i hope that help you! it works for me

  • 1
    \$\begingroup\$ It would be good to add a little bit of explanation. How did you choose the parameters ? \$\endgroup\$ – Heckel Sep 17 '14 at 15:13
  • \$\begingroup\$ the first parameter is the movement speed for the image, for example -5 equals that the image moves left with 5 speed for second. The others parameters are for the sprites, you can see how to make a sprite there link \$\endgroup\$ – El0din Dec 12 '14 at 14:07

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.