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 awesome Flash games in no time with StencylWorks – Selecting levels

Emanuele Feronato Actionscript 3, Flash, Game design, Stencyl

Before we start, let me say one thing: I love StencylWorks. It’s an incredible tool which will allow you to save a lot of time, and you should definitively try it.

Now, let’s see how to make a level selection screen like the one I am making for my StencylWorks game called Kira the Witch. You will be able to create stuff like this:

And obviously clicking on the first cave will make you play level 1, clicking on the second cave you’ll be playing level 2, and so on.

First, you need to create a new actor which we’ll call “Level Icon”

Then, create a new scene called “Level select”…

… and fill it with as much “Level Icon” actors as you want

At this time, create a new behavior for the actor which will be bound to the “Level Icon” actor, and call it “Click to play level”

Create two attributes for this behavior called “scene to play” (type:Scene) and “level label” (type:Text), and don’t make them hidden.

Let’s place some “code” in the behavior:

The “when drawing” part just places the content of “level label” attribute horizontally centered as seen in this post, while the “always” part checks for the mouse, then switches with a transition to the content of “scene to play” attribute.

Now, where to define such attributes? Go back to Level Select scene, right click on a door actor and select “Customize Behavior”

Here you will be able to add the “Click to play level” behavior and edit the attributes you defined before. Place the right level label and the scene you want to play, and the game is done, you have your select level screen in less than five minutes.

Unfortunately I can’t show you the working example because it contains some behaviors related to the game I am making, but feel free to post questions if you don’t find it clear.

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 12

  1. SM

    I prefer construct.

    You can make your own plugins, which I have!

    And its kinda similar to AS3. — I know that probably sounds odd. But the way you assign events…

  2. BNG

    Amazing job as always. I was working on a level selector screen too, but your solution is much more easier and better.
    By the way, is there an easy method to lock levels on the level selector until the actor finish the previous stages?
    Thx for the tutorial and Stencyl.

  3. Faris

    Iam not saying stencyl isnt great… but the program run slowly … plus I can make a select level screen in flash in 5 minutes … again Iam not saying stencyl dont save U alot of time ^^

  4. Bitstream

    @BNG: Create a global variable (called “Game Attributes” in Stencyl) and on finishing a level set the variable to the level number if its not already greater.

    On the level selection screen in the “always” block check for game level <= global variable before the fade out block.

    You could also make an addidtional animation for the "Level Icon" with a closed door or chains as a visual indicator and set the corresponding animation in the "when created" block checking the global variable.

  5. Itoshigo

    Wow! How topical, I was just constructing a level editor in Stencyl this morning. I’ve built mine in much the same way. Enjoying Stencyl so far. Thanks for sharing.

  6. Vector

    I have always read this blog for the Actionscript 3 code tutorials but if it has to be anything else then Stencyl would probably the next best thing.

    In my opinion Stencyl is much better than the other game maker programs, you can also easily re-use your own custom AS3 code so it’s probably the next best thing to using Flixel with Flash Develop.

  7. Pingback: Cool Stuff with the Flash Platform – 12/16/2011 | Android Developers

  8. vice

    I’m new to Stencyl… i made your tutorial on Catapult Kit example… but it keeps playing level 1 and 2. How i make the level selection screen show first? Thanks!

Leave a Reply

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