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.

Box2D joints: Prismatic Joints

Emanuele Feronato Actionscript 3, Box2D, Flash

Time to learn something about Box2D prismatic joints.

A prismatic joint provides one degree of freedom: translation along an axis fixed relative to the first body. Relative rotation is prevented.

In other words, prismatic joints can be used to represent pistons and other sliding objects.

In this tutorial I am going to show how to create a prismatic joint, and later I’ll show you some real-world examples.

The script is the one you can find at Box2D joints: Revolute Joint – Building motors with some modifications in order to create prismatic joints.

Line 15: Declaring the_prism_joint variable, b2PrismaticJointDef type. This is how I define prismatic joints.

Line 49: Initializing the prismatic joint. This is the most difficult and unclear part of the process. The first two parameters represent the objects tied by the joint, the third one is the point where to tie the joint and the fourth is a vector representing the movement allowed. In this case, being an horizontal vector, the movement allowed is horizontal

Notice about this 4th parameter that values inside b2Vec2() cannot be greater than 1 or you may experience strange results.

All in all, there is no need to write (100,0) to represent an horizontal vector, when you can just use (1,0)

Lines 50-51: upperTranslation and lowerTranslation represent the upper and lower translation limits, in meters. To avoid strange results, try to keep

lowerTranslation <= 0 <= upperTranslation

Line 52: Enabling the limits for upper and lower translations. If you don't set enableLimit to true, limits won't be considered.

Lines 53-55: Adding a simple motor. For a brief introduction about motors, refer to Box2D joints: Revolute Joint - Building motors.

Line 56: Adding the joint.

And this is the result. Try to drag the box

And this is the source code ready to be downloaded.

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

Official Emanuele Feronato Facebook page

Official Emanuele Feronato Twitter account

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.

Comments 11

  1. RedRail

    In unrelated news: ‘My works’ page is still empty. Seems like a good place to showcase your games(I don’t see them listed anywhere else on the site).

    Now on topic, I’m sure those will be usefull when I’ll finally start makeing something box2d

  2. Pingback: Box2D breakout prototype : Emanuele Feronato

  3. Dinkyfish

    Just wanted to stop by and say a massive thank you for all your tutorials. You’ve clearly put a huge amount of work into them and they’ve helped me out on many occasions. Keep up the good work!

  4. Viraj

    Very good tutorial..But i am just not getting how the body goes back to original position after mouse up or where is the code for that..

Leave a Reply

Your email address will not be published. Required fields are marked *