Emanuele Feronato

Talking about Construct, Game development, HTML5, iOS and Javascript.

Welcome to the post with the longest title of the blog, but what I wasn’t able to describe what I am about to show you in a shorter way.

Since I am quite satisfied of my first HTML5 game worDrop, I decided to make things serious with HTML5 game development and I think you should do the same.

The template I am about to show you is made with Construct2 and features:

* A title screen
* Full tap/mouse control
* Level select screen scrollable with swipes
* Level progress locally saved

That is, you only need to create the game engine itself and design levels.

This is what you’ll get:

Tap the screen to begin, you can then swipe left/right to select levels, then play the “game”, solve a couple of levels and try to reload the page to see if your progress has been saved.

To play it with your mobile devices, point it to http://emanueleferonato.com/stuff/mobiletemplate/.

Now, let me show you how it’s done:

MAIN MENU LAYOUT

The main menu is a 480×320 layout with a couple of texts

We only have to load previously saved progress and detect if the player tapped the screen

playableLevel: the highest level playable, set by default at 1 since at the beginning you can only play the first level

Event 1: detects when a touch ends (the player tapped the screen) and sends the player to level select layout

Event 2: loads the previously saved highest playable level, if it exists

LEVEL SELECT LAYOUT

Level select layout is the core of the example, it’s made by 480*3 = 1440×320 pixels and features three sets of levels which can be selected by swiping on the screen and played by tapping the level thumbnail

We have some events in this layout, let’s see them:

levelSelected: the level number the player will select

scrollSpeed: scrolling speed, according to swipe direction

Event 1: at the beginning of the layout, we set to semi-transparent the levels which cannot be played. Every level has a local variable called level which is compared with playableLevel

Event 2: if the player touches the screen with a speed greater than 1000 pixels/second (that’s what I call a swipe) and scrollSpeed variable is still at zero meaning the layout is not already scrolling…

Event 3: checking if the touch angle is between 30 and -30, meaning the player swiped from left to right so we have to scroll left

Event 4: checking if the touch angle is between 150 and -150, meaning the player swiped from right to left so we have to scroll right

Event 5: if scrollSpeed variable is different than zero, then scroll the layout by its value.

Event 6: if current scroll position is 240, 720 or 1200 (dont’ ask them why I had to use the second or condition, it seems some kind of but, anyway it won’t work without it), that is we are on easy, medium or hard level set then set scrollSpeed variable to zero

Event 7: if the touch ended (a tap), and we are touching a level thumbnail and scrollSpeed variable is zero (not a swipe) and it’s a level we can play, then set levelSelected variable to level thumbnail local variable and move onto Game Level layout

GAME LEVEL LAYOUT

This is the awesome game I made: clicking on Win button you will win the level, clicking on Lose button you will lose!! Try to beat all levels!!

The event sheet here is way simpler than before:

Event 1: sets the title of the level

Event 2: if the player wins the level we update playableLevel variable and save it to web storage, to use it next time the game loads

Event 3: if the player does not win, we simply show the level select layout

And now you can create your HTML5 level based game with a professional looking level selection screen.

Download the project.