Save the Totem: HTML5 game prototype made with Construct2

As promised, let me show you how to make a game with Construct2.

First, let’s introduce the two main actors in the game: Layouts and Event sheets.

Layouts are basically the equivalent of Flash Scenes and represent the “stuff” you place in your game, such as the splash screen, the level selection screen, the game itself, the game over screen, and so on.

Event sheets contain what happens behind the scenes, such as events and subsequent actions.

While I recommend you to learn the bare bones (how to create a a project, how to import graphics, and so on) in the official tutorial page, I’ll show you the logic I used in the making of this little one-level game:

First of all, let’s look at the project assets:

And now let’s see the game, layout by layout

Splash Screen

The splash screen just contains the background and a couple of texts: one with the name of the game, and one with the “click to play” message.

Once the player clicks anywhere on the screen, the game will begin, so the Event Sheet will be:

You should read it this way: when an On any click event on the Mouse occurs, the System will make the action Go to Game.

That is, when the player clicks, the game begins.

Game

The game itself has just a few more events on the Event sheet. Let’s see them all:

First, I am declaring a new global variable called destroyed. Now, look at the events:

Event 1: on the start of the layout (think about ADDED_TO_STAGE if you love AS3) I am setting destroyed variable to zero and set the dynamic text to “Destroyed: 0/6”.

Look at the & operator to concatenate strings.

Event 2: this is a mouse event. When the player clicks with the left button on the small brick, the small brick is destroyed, the global variable destroyed is incremented and the dynamic text is updated.

Event 3: same thing for the big brick, I just destroy it rather than updating everything for the sake of simplicity of this tutorial.

Event 4: if the totem collides with the ground, the totem is destroyed, I show a game over message and set destroyed variable to -1.

Event 5: if the mouse clicks anywhere and destroyed is equal to -1 (game over), then restart this layout.

Event 6: if destroyed is equal to 6 (game completed) show a congratulations message.

Event 7: if the mouse clicks anywhere and destroyed is equal to 6 (game completed), then restart from the splash screen.

And that’s it, in a few minutes with a grand total of eight events this prototype is done. I will try to make a real game in a couple of days, and show you some ways to monetize HTML5 games.

  • James

    Why doesn’t the big block the totem is on count when I click it?

  • Emanuele Feronato

    to make the Event sheet shorter. Just copy/paste the same actions you can see in the small brick

  • Pingback: Save the Totem: HTML5 game prototype made with Construct2 – Emanuele Feronato « iLearn javascript()

  • Orlando

    Perfect timing Emanuele. This week I started a quest to find out a HTML5 game engine and yesterday I was checking Construct. I have a question: From your point of view this engine is mature enough to take the decision to design a game with it?

    Thanks

  • Headfizz

    looks pretty nice, I’m far more interested in the money side though. is it possible to make as much as you can off flash sponsorships?

  • Emanuele Feronato

    @orlando: it seems mature enough to make a casual multilevel platform – puzzle. At least, I am working on it

    @headfizz: surely you can’t, if you just release the HTML5 version. That’s where FB integration as well as store publishing should come into play

  • alex

    Not working on iPad :(

  • Orlando

    Thanks Emanuele. I think a big plus is physics integration and how easy it is to use it. What I am going to do it is multilevel platform game, so maybe I am going in the right direction.

    A good tutorial would be a platform game using 100% physics and not Platform behavior

    Regards

  • Emanuele Feronato

    @alex: to make it work on touch devices, you have to change mouse events into tap events during game design

  • Darek Jasinski

    Is it possible to make a more complicated games using HTML5? For example, tower defence games?

  • James

    I am not really interested in HTML5 or these “no coding needed” tools but there is a few more i know of that people might be interested in:

    GameMaker (Has a HTML5 version)

    Stencyl (Free and saves to flash and iOS)

    Clickteam MMF2 (Saves to flash, iOS java and others)

    GameSalad Creator (Saves to iPhone, iPad, Android, Mac, and HTML5)

  • Orlando

    This is an interisting comparation made by Scirra using Construct 2, GameMaker, GameSalad and Stencyl
    http://www.scirra.com/blog/59/construct-2-vs-gamemaker-vs-gamesalad-vs-stencyl/comments#comments