Emanuele Feronato

Talking about Totem Destroyer game, Construct, Game development, HTML5 and Javascript.

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.