Wednesday, May 24, 2017

android - Road parallax background



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;

this.mParallaxLayerMid=BitmapTextureAtlasTextureRegionFactory.
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);
autoParallaxBackground.attachParallaxEntity(newParallaxEntity(15.0f,back_ground));
scene.setBackground(autoParallaxBackground);

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



Answer



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.


Cheating!


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.


No comments:

Post a Comment

Simple past, Present perfect Past perfect

Can you tell me which form of the following sentences is the correct one please? Imagine two friends discussing the gym... I was in a good s...