#### Create HTML5 Vertical Endless Runner cross platform games

##### Using Phaser framework and other FREE software
Endless runner games are gaining more and more popularity and they are really easy to code.
I will take you by hand through the creation of a complete HTML5 vertical endless runner cross platform game with a lot of features and room for customization.
100 pages + 31 source code examples with a free update to come in a few days.

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

Emanuele Feronato

Do you know Tiny Wings?

It’s a cute and addictive game for iPhone featuring a bird with tiny wings – too tiny to fly – which tries to fly anyway using a procedural generated terrain as a ramp.

What makes the game interesting is the physics response of the bird running along slopes.

At a first glance it seems the author is using some kind of physics engine which allows the creation of curves. But at a closer look (or playing on an iPad with zoom mode) we can see hills are made by a series of segments.

So we are going to reproduce such hills with Box2D. But before we dive into physics, some theory.

Tiny Wings hills are generated by trigonometric functions. The more complex the functions, the more interesting the result. In my example I am using a simple cosine, but feel free to try your own formulas and send me your results. I will be happy to publish them.

Once you defined your function, you’ll obviously end with a curve.

The trick is to divide such curve into an amount of slices, having the curve made of segments rather than points.

The higher the number of segments, the better will look the curve, the more CPU consuming will be the game.

In this example, I am assuming I want two hills in a 640×480 stage, with a slice width of 10 pixels.

I won’t use any physics engine, I will just draw two hills:

The script is quite simple and it’s fully commented, and produces this result:

Click on the movie to generate new hills.

Now it’s time to achieve the same results using Box2D. We can say slices are polygons made by four vertices, and we know the coordinates of all vertices, so we just have to create a series of static bodies built starting from such vertices.

To create the polygons, we’ll use the same concept seen in the second part of the slicing tutorial, storing vertices in a Vector, finding polygon centroid starting from such Vector and finally drawing it and placing in the right place.

And this is the script:

The concept is the same of the previous script, we are just building Box2D polygons rather than drawing them on the stage.

And this is the result:

Click on the movie to generate new hills.

Now I have two questions:

1) How would you produce more various shaped hills?

2) How would you scroll/zoom the hills?

###### Stay up to date
Follow me on the social networks and never miss a post.

#### From null to full HTML5 cross platform game

I will take you by hand from the bare bones of JavaScript programming through the creation of a full cross platform HTML5 game, with detailed explainations and source code.

If you don't know where to start, then From null to full HTML5 cross platform game is the book for you.

1. Chris

Interesting article!
It’s nice to see your ideas on how it was achieved and spreading it :)
I’ve come across a nice github project that was actually trying to achieve the effect aswell and has a really nice result:

Maybe it would be nice to try to port that into Flash since it was accomplished using Box2D aswell :]

2. Chris Moeller

Very nice! I’m also going to be going through your procedural textures tutorials- going to be using them a lot for a big project in the near future.

Thanks for posting this! Lots of ideas based on these two!

3. Ovidiu

Awesome, awesome article! Never thought this would be so simple!
Thank you, really!

Keep up!

4. Fintan

cool tutorial. how would you get the tiny bird to always be oriented to the slope of the hill if it was in contact with it?

5. Ramon Fritsch

Isn’t it too performance intence to have a that many polygons running on box2d inside flash? I’m wondering if you could group some polygons at the top of the hills. I’ve created a game with smooth slopes like that but I couldn’t realise what was the best way to reproduce with a smooth framerate.

Cheers

6. Post
Author
Emanuele Feronato

@chris: the demo looks god, I’ll try to port it into AS3

@ramon: do you remove polygons when as they leave the stage on the left side?

7. Ant

Purely for the shape generation (no box2d stuff) you could use the BezierSegment class in Flash for smooth and efficient curves

8. Janitha

Just need to know what the “|” does in the following piece of code.

worldDebugDraw.SetFlags(b2DebugDraw.e_shapeBit|b2DebugDraw.e_jointBit);