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

Some days ago I posted an example of a Box2D terrain like the Tiny Wings one.

Today I tried to make it endless and scrollable.

It’s very easy as it requires only a little modification to the original script.

Basically you have to attach a new hill to the right before the last hills will be completely visible , and remove the slices when they leave the screen to the left side, to save memory.

In this example, I am removing slices 20 pixels before they leave the screen, to make you see it works:

If you are afraid about Box2D world boundaries, I tested the terrain scrolling it for more than two million pixels, and everything worked like a charm.

Do you think it could be enough?

This is the script:

Next time I think I am adding a little car… No need to download anything, just replace the code used in the original example.

  • looks amazing!, now i’m sure it’s easy to drop a box2d circle that rounds downhill

  • Ari

    Instead of scrolling the whole world, one could scroll all the box2d bodies of the hills to the left. That way you won’t even have to worry about the inevitable (although a far shot since most levels won’t be that long) overflow of the x position’s number variable.

  • Ben

    Pretty neat, although I’m noticing an intermittent delay in the framerate on my machine. I’m assuming it’s related to the garbage collector running, but I wouldn’t want that happening in-game.

  • Great tutorial! One issue I found was that if you watch the animation for long enough, you will realize that the bottom of the hill is always the same Y value. Just put your mouse at the bottom of the hill, and wait for the next hill to show up.

  • Emanuele Feronato

    Roland, that’s due to the cosine function, which allows to have different “hills” but not different “valleys”.

  • Rennan

    Great job!

  • Great tutorial.
    I have one question. How would you add a texture that adjusts to the hills height and follows the scrolling?

  • Pingback: Create a terrain like the one in Tiny Wings with Flash and Box2D – Adding a car - Emanuele Feronato()

  • I like your tutorial, Thanks for sharing.

  • JUAN

    I have a problem with the script says can not find the tipe or not is a compile-time constant b2Vec2 at line 62. but I import Box2D.Common.Math.b2Vec2; that is the library for b2Vec2.

    Anyone know how to fix it?

  • Aare

    I wrote by myself a similar implementation of box2d based indefinitely scrolling environment, and found out that instead of destroying bodies it is faster to transform it`s position to the beginning, remove all fixtures from it and then add a new ones. Nice tutorial btw :)

  • akt

    i’m just trying to figure box2dweb with javascript and canvas. since there is not much tutorials for that i’m trying to move with this tuts.

    i don’t know if thats a noob question but what is that “x” in the updateWorld function? where is it comes from?