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.

APE – Actionscript Physics Engine tutorial

Emanuele Feronato Flex

October, 23rd update: Part 2 released

With the increasing performances of Actionscript and modern computers, now we have enough power to simulate physics in a Flash movie.

All we need is… let’s say… an huge knowledge of physics, constraints, integrations and so on. With all those things to think about, we cannot focus on the main goal: produce our game/application.

Someone should develop an Actionscript physics engine… APE (Actionscript Physics Engine) is a free AS3 open source 2D physics engine for use in Flash and Flex, released under the MIT License.

I started playing with it yesterday, and results are really amazing. While I need much more time for some experiments, I want to share with you my first steps.

The documentation about this project is very poor (some kind of API without examples, one tutorial and two demos….) so this tutorial could be a bit unclear, but I am doing my best.

Moreover, it’s my first time with APE and my first time with Flex… two new tools to learn quickly, but I am a geek and I am a PROgrammer, so that’s no problem!

First, download the alpha version (yes… just an alpha…).

Now, we need Flex. Let’s say Flex 2. From its official site: “Adobe® Flexâ„¢ 2 is a cross-platform development framework for creating rich Internet applications (RIAs). Flex enables you to create expressive, high-performance applications that run identically on all major browsers and operating systems.”

If it’s your first time with Flex, you can download a complete 30 days evaluation version from this page.

When you have Flex installed on your computer the unzipped APE folder, you are ready to go.

Launch Flex and create a new ActionScript project

APE

Call you project “ape” (you can call it as you want, but later in the code you will have to use this name, so if it’s your first time call it “ape”), don’t click on “Finish” but go to “Next >”.

APE

Seletc “Library Path” and click on “Add SWC…”

APE

Now in the dialog box select the ape.swc file, normally located in the bin directory of your APE package, then click OK and Finish.

APE

You should have an actionscript window with this content:

The public class ape and public function ape are called in this way because I named the project ape.

Now it’s time to show you what can I do in less than 40 lines

Lines 2-4: Importing necessary libraries

Line 5: Setting width, height, bgcolor and framerate of the movie we are going to create. This is the way you have to define attributes in pure actionscript projects.

Note: Width and height must be specified in pixels. You are not allowed to use percentage values such as 50%.

Line 6: Definining the ape class as an extension of the built in Sprite class.

The Sprite class is new in ActionScript 3.0 A Sprite object is similar to a movie clip, but does not have a timeline.

Line 7: Declaring the main function

Line 8: Adding an event listener. Since the on(event) syntax is no longer supported in ActionScript 3.0, we need to use addEventListener to trig for some events. In our case, the event is ENTER_FRAME. So it’s basically an onEnterFrame = function(){} coded in AS3, where the “function” is run (the function defined at lines 32-35).

Line 9: Initializing the APE engine. The parameter 1/4 (0.25) is used to set the speed of the simulation. Typical values are 1/3 or 1/4. Lower values result in slower, but more accurate simulations, and higher ones result in faster, less accurate ones.

Line 10: Definining the default container used by the default painting methods of the particles and constraints. In other words, the area where the simulation takes place.

Line 11: Adding a “massless” force to the system. What is a “massless” force? It’s a force that acts on all particles in the same way even if they have different masses… such as gravity. Particles with larger masses are affected by gravity same as those with smaller masses. The Vector represents the… vector of the force, splitted in fx and fy. fx is the horizontal component of the force, while fy is the vertical component of the force. In our case, we have a force that does not have horizontal force, but only a vertical one (like gravity). Changing the vector values will result in different gravity types (reverse, horizontal, and so on).

Line 12: Creating a group called defaultGroup. The Group class can contain Particles, Constraints, and Composites. Groups can be assigned to be checked for collision with other Groups or internally. This means that I can have a group of particles that can collide only with particles of another group, or a group of particles that are checked for collision one with each other. As you can see from Line 13, I want my particles inside defaultGroup to collide, and I specify it with the collideInternal property

Line 14: Creating a circle haped particle. The CircleParticle has some interesting parameters:

x:Number: The initial x position of this particle.

y:Number: The initial y position of this particle.

radius:Number: The radius of this particle.

fixed:Boolean (default = false): Determines if the particle is fixed or not. Fixed particles are not affected by forces or collisions and are good to use as surfaces. Non-fixed particles move freely in response to collision and forces.

mass:Number (default = 1): The mass of the particle.

elasticity:Number (default = 0.3): The elasticity of the particle. Higher values mean more elasticity or “bounciness”.

friction:Number (default = 0): The surface friction of the particle

So in my case I have a circle particle located at (250,10) with a radius of 5 pixels, that is not fixed (it will fall, bounce, etc), with a mass equal to 1 and an elasticity equal to 0.3 and no friction.

Line 15: Adding the circle particle to the group defined at line 12

Line 16: Introducing the most interesting particle of the engine, in my opinion: the wheel particle. A wheel particle is… a particle that simulates the behavior of a wheel.

Let’s see its parameters:

x:Number: The initial x position.

y:Number: The initial y position.

radius:Number: The radius of this particle.

fixed:Boolean (default = false): Determines if the particle is fixed or not. Fixed particles are not affected by forces or collisions and are good to use as surfaces. Non-fixed particles move freely in response to collision and forces.

mass:Number (default = 1): The mass of the particle

elasticity:Number (default = 0.3): The elasticity of the particle. Higher values mean more elasticity.

friction:Number (default = 0): The surface friction of the particle.

traction:Number (default = 1): The surface traction of the particle.

So basically a wheel is a circle that can rotate and with a traction

Line 17: Adding the wheel particle to the group

Line 18: Another particle… this time a rectangle particle. Look at the parameters:

x:Number: The initial x position.

y:Number: The initial y position.

width:Number: The width of this particle.

height:Number: The height of this particle.

rotation:Number (default = 0): The rotation of this particle in radians. Read carefully! RADIANS!!

fixed:Boolean (default = false): Determines if the particle is fixed or not. Fixed particles are not affected by forces or collisions and are good to use as surfaces. Non-fixed particles move freely in response to collision and forces.

mass:Number (default = 1): The mass of the particle

elasticity:Number (default = 0.3): The elasticity of the particle. Higher values mean more elasticity.

friction:Number (default = 0): The surface friction of the particle.

Line 19: Adding the rectangle particle to the group

Lines 20-23: Adding two more rectangle particles

Lines 24-27: Adding two more wheel particles

Line 28: The feature I love: the spring constraint. The spring constraint is a spring-like constraint that connects two particles. If you need more information about constraints, refer to Creation of a Ragdoll with Flash part 2: Constraints.

I am going to connect the last two wheels I created with a constraint. This means I am going to create a car. Look at the parameters:

p1:AbstractParticle: The first particle this constraint is connected to.

p2:AbstractParticle: The second particle this constraint is connected to.

stiffness:Number (default = 0.5): The strength of the spring. Valid values are between 0 and 1. Lower values result in softer springs. Higher values result in stiffer, stronger springs.

collidable:Boolean (default = false): Determines if the constraint will be checked for collision

rectHeight:Number (default = 1): If the constraint is collidable, the height of the collidable area can be set in pixels. The height is perpendicular to the two attached particles.

rectScale:Number (default = 1): If the constraint is collidable, the scale of the collidable area can be set in value from 0 to 1. The scale is percentage of the distance between the the two attached particles.

scaleToLength:Boolean (default = false): If the constraint is collidable and this value is true, the collidable area will scale based on changes in the distance of the two particles.

In my case, I am connecting the last two wheels with a semi-strong collidable spring, with an height of 3 pixels.

Line 29: Adding the constraint to the group

Line 30: Adding the group to the engine

Line 32: Beginning of the function to be executed at every frame, like declared at line 8

Line 33: The main step function of the engine. This method should be called continously to advance the simulation. The faster this method is called, the faster the simulation will run. Usually you would call this in your main program loop.

Line 34: Calling this method will in turn call each particle and constraint’s paint method. Generally you would call this method after stepping the engine in the main program cycle.

The last two lines advance the simulation and display the result.

And this is what I got with this simple script (you may need to reload the page to see the movie work properly)

As you can see, results are really exciting. The ball, the wheel and the car go down the slope bouncing and moving in a very realistic way. I am sure I will be able to create a “Moster Truck” game in a few hours.

And I’ll publish it as soon as it create it.

Meanwhile, download the entire project and give me feeback. Then, move to part 2

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 31

  1. Samuel

    I’m sorry for asking, but what differences must be implemented if I wish to recreate this excact same animation in Flash, not Flex?

    This is definitively a engine I will use and learn, it’s AMAZING! Thanx for sharing this with us!

  2. Samuel

    Aah, I figured it out…

    Save the code in ape.as, but remove the line that starts with:
    [SWF…

    Then use the ape.as as the document class, and it works just as well as it would have done in Flex :)

    Now I’m starting to experiment!

  3. Michael

    WOW! That is absolutely amazing.

    I hate getting pumped on something when I suck at Flash, lol.

    I can just imagine the cool games people can make with a package like this. It looks very good.

  4. Pingback: APE - Actionscript Physics Engine tutorial - Part 2 : Emanuele Feronato - blog of an italian geek

  5. Pingback: Box2DFlashAS3 - a library to watch : Emanuele Feronato - italian geek and PROgrammer

  6. Pingback: David Says: Perhaps I should be using APE… « FTV488B’s Weblog

  7. Pingback: blog Boreal Kiss» ブログアーカイブ » [FLASH]ばくだんいわが あらわれた!

  8. Pingback: Flash physics engines galore : Emanuele Feronato - italian geek and PROgrammer

  9. devis

    hi i’m making a game i flash8..’bike ride’ but stuck with the physics part…..the collisions with obstacles and other things…………can u help?

  10. Pingback: Tuorials | AS3 and Physics « Flash Enabled Blog

  11. Pingback: Colisiones y motores de física en Action Script | 2flash2furious :: diseño gráfico, web & multimedia :: por [Q] interactiva

  12. Pingback: Rapport Flash Fysik Ape vs Box2D › Title

  13. Inxentas

    The only thing I dislike about APE is the fact it causes a naming conflict with the Vector class when compiling for FP10. This can be fixed by renaming APE’s Vector class though. It’s very easy to use and easy to implement.

  14. Pingback: flex??:APE?????? | flex??|flex ????|flex ??|flex java|jinFlex

  15. Pavel

    Good engine! Im really thinking about it in my game. Tell me please – Does this engine have a force? (as example radius/mass/dimension)? Im really need this and dont know how i can realize it with help this engine. PS I write on AS3.

  16. Pavel

    update
    APEngine.addMasslessForce(new Vector(0,2));

    What mean this MasslessForce? Dimension? Several massless force (as example planets)?

  17. Pingback: Rapport Flash Fysik Ape vs Box2D › Dinolab

  18. R Star

    Hi,

    While I try to run the application I get two errors of code line no 11.

    1067: Implicit coercion of a value of type_AS3_.vec:Vector to an unrelated type org.cove.ape:Vector
    1137: Incorrect number of arguments. Expected no more than 0

    Can any one solve out these errors?

  19. Thiago Bardez

    To use this class in Flash AS3, do you change the name of the class VECTOR to other name, because the base of the As3 contains the VECTOR class and a conflict will appear.

    I think resolve so much of problems.

    ;)

Leave a Reply

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