Create a terrain like the one in Tiny Wings with Flash and Box2D – adding textures

If you are following the series about the creation of a Tiny Wings-like terrain, you should know one of the most popular requests once I placed a car running on the hills was how to get rid of the debug draw graphics and use your own textures.

First, you need a seamless texture, or a texture without seam at least horizontally. I suggest you to pick a texture of the same length of the hills (640 pixels in this case) or a texture which width divides the lenght of the hills.

I used a rock texture taken from 40 watt.

Then, as soon as you place the polygons representing the hill slices, you also have to draw on a sprite the same shape you are giving your hill.

This will act as a mask for your seamless texture. And obviously remember to remove both the mask and the texture when they leave the screen to the left side.

This is what you will get:

Use UP and DOWN arrow keys to control the cart, and LEFT/RIGHT to balance it while in the air.

This is the fully commented source code:

Download the full source code and give me feedback.

  • MC

    is it possible to use the bitmap-fill method used in the slice-with-texture tutorial in this case?

  • Man you are awesome! Thank you for being so generous with your knowledge. Thank you! May God Bless you!

  • Mike

    Man, this tut is slower than my grandma. Try to use BitmapData and draw method.
    Thx for it anyway

  • aseneo


  • aseneo

    Hope you can keep make the next step of this game :)

  • Emanuele Feronato

    @mike: it’s slow mainly because of the debug draw. Remove it and it will fly (but you’ll need to render the car on your own)

  • @emanuele: this is off topic, but anyway i will post it! Lately i was playing with box2d, just to implement it’s collision detection features. Have no time to dig deeply in the source, so i don’t know too much about the environment. Basically i have a custom library which I use for numerical integration, and i need the box2d to handle the collision functions. I tried to implement the collision detection algorithm in the classical way, but i was facing with the common “stacked together” phenomenon. So my question is: is possible to depict only the collision functions, but assign the b2Body positions to the position of ex. particle, which is updated inside my custom library, or the box2d world is a hermetical world?
    Don’t know if I expressed myself clearly :) but hope You understand my concerns. Thanks

  • Emanuele Feronato

    do you mean you need to update bodies position manually, and detect collisions with box2d routines?

  • Yes, exactly!

  • Vinay

    Can we use edgeshapes (b2SetAsEdge) instead of the polygon slices. They are easier to draw and offer the same collision properties. Or is there a drawback in using the Edge shapes ?

    Great tut series by the way . Learnt a lot from it .
    Thanks !

  • Emanuele Feronato

    It’s an interesting theory, I’ll try to use b2SetAsEdge and see what happens

  • Henrik

    This is nice, but when I’ve tried making a “tiny wings”-like gameplay like this the game in general and groundsprites in particular keeps lagging. I know scrolling fullscreen fast is a problem in flash, but I saw this other tiny wings clone called “dillo hills” in flash so I’m guessing it could be done. That game uses air though. Do you know if there is any difference performance wise?

  • I have been looking for tutorial like this since last year for my flash game project, Emanuele you are the man, thanks for sharing!

  • Avesome! Many thanks Emanuele!!!

  • really interesting technique, thx for the share!

  • luis

    @emanuele : Hola Emanuele,yo sé que este es un tema muy viejo, peo es el único que tienes de este tipo, me preguntaba si se podría utilizar un símbolo del archivo .fla, o una imagen externa para usar como modelo, para crear un juego de una motocicleta,si fuera así te agradecería mucho que me dieras por lo menos una idea de como hacerlo,de antemano muchas gracias.

  • luis

    @emanuele: Hello Emanuele, I know this is a very old, peo is the only thing you like this, I wondered if you could use a command file. fla, or an external image to use as a model to create a set of a motorcycle, if so grateful that you at least give me an idea of ??how, in advance thank you very much.

  • Jop

    You rock! Thanks for sharing this :)

  • Anu

    Thanks for putting this up Emanuele! Has anybody tried this in processing?

  • faisal

    How can I restrict vehicle from crashing, i just want to go slow instead of flip.