# How is the environment moved in endless runner games like Tiny Wings

I've always wondered how the background scene is scrolled endlessly as the main player is moving (usually to the right). With Tiny Wings I suspect that it's somehow drawn dynamically because when investigated a little deeper, one can see that the hills can easily be drawn. All in all it's just some parabola shaped curves, some texture and mini sprites on them. In Cocos2D the hills themselves could be drawn by a very convenient class called CCRenderTexture. Of course this will involve some maths too, but that shouldn't be a problem. But how about a scene that I want to be composed of images but not easily drawable shapes?

1. Is this even done in practice?

2. Is it possible to dynamically customize the same images so that they look a bit different the next time they appear on the screen again?

3. How is smooth transition achieved between different images?

4. And finally how are the images swapped one after another?

For this game I'm going to be using Cocos2D V3.

Number 3 is easiest if you have an image that is tileable, meaning that if you put them next to each other you wouldn't be able to pick out the seam.

Then you can draw the same image twice once on x,y and once on x+image.width,y. each frame you decrement x until x < -image.width where you add image.width to it.

Adding details is easy by drawing some sprites after you draw the background and moving them at the same pace as the background.

But how about a scene that I want to be composed of images but not easily drawable shapes?

Is this even done in practice?

Yes and this is the more common by far too.

Is it possible to dynamically customize the same images so that they look a bit different the next time they appear on the screen again?

In runtime? Possible but maybe not very commonplace unless the textures are simple. At the most you might find a tile type made up of a single "base" tile that is colorized to give it some variation. Games with scenes made up of tiles tend to store these variations in the map metadata. E.g. you might have a normal "grass" tile then a few pre-made variations of that that are placed from the start.

For games that use geometric shapes instead of textures or tiles, you're always at liberty to tweak color, scale and rotation of course. In fact, often times these parameters are randomly generated. In the same way, a cloudscape can also just be randomly generated noise.

How is smooth transition achieved between different images?

They're made in such a way that they can tile.

And finally how are the images swapped one after another?

On a small scale, they're simply translated. More practically, your scene's camera is the one that's moving and these images are simply rendered at their set positions.

On a medium scale, you do something called "Frustum Culling" where you only draw images/tiles that are completely or partially within your viewport. The rest of the scene may be loaded in RAM but you only draw the parts that the user sees so it doesn't lag by drawing a million things. When the camera pans far enough, you draw a different set of tiles.

On a large scale, you can save parts of the scene in files and only have "chunks" loaded that are close enough to where the player/camera is for them to actually be useful. When you move enough, you can load more chunks and free the ones you've moved away from from memory.