Monday, December 29, 2014

Building games with HTML5 with Construct 2

What's here for you..

The gaming world has surpassed all the expectations since some time now,and people have started choosing game dev and design as a career option.Many gaming studios have emerged and many gaming engines and frameworks have been created in the last decade.Now , today I will walk you through how to build some decent games using an HTML5 framework - 'Construct 2' and also I will tell you how to get it published on the store and also how it can be made cross platform.

What are the things you can choose from..
Based on how much details you want to put into the game , the gaming engines and framework have been divided into 3 major categories.
  • Low Level HTML5 Canvas API
  • Mid Level gaming APIs
  • Game Creation Studios
    1.Scirra Construct 2
    2.Yo Yo Game Studio
    3.GameSalad Creator

Lets Start with where to download Scirra Contruct 2

So today all whatever Im about to demo will be possible to perform in the free download copy from

Getting Familiarised with the UI of Contruct2 

This is the pretty self explanatory picture of what are the different part of IDE 

Some major stuffs one should know before getting their hands dirty are:

  • Projects Pane: Similar to Visual Studio project pane, this shows all the files and assets in the project.
  • Layer Tab: Depicts the different layers in the game Ex. Background and foreground.
  • Objects Pane: On the bottom right the object pae will show you all the objects , you have in the game.
  • Event Sheet: Will help any developer to trigger events and add or remove events to any object in the game.
  • Layout :will deal with the looks and the UI of the game.


The objects can be loads of different things such as Tiles,Sprites(Image for any character) and Text.To add any object double click "Layout" and select "insert an object".When inserting any new object one should select the "plugin in the dailog box" viz Sprite ; this creates the 'Object Type' and then can be replicated as many times in the project.


The behaviours are to be binded with the objects and these are built in logics for example lets say you fire a bullet and the the bullet goes in one specific angle. So the angle is the bullets property and bullet is the object here.And it can be added from the properties pane of the respective objects.

Layout VS Event Sheet

Layout determines the arrangement of objects and their orientation in the game .This lets you pick the size and where the objects will be placed and are most pre defined.The event sheet is although the list of actions and events which are mapped to all the onjects in the game and in simple terms is the logic of the objects.

Event Sheet  - Events and Actions

To be very precise,The Events and Actions are like If and Else Statements.The Event stands for the condition of If Or Else and the Actions stands for the execution the that specific block where the result is true.


  • A logical block that helps the user decide how the game works 
  • The events are triggered on the arrival or when a particular condition comes true. 
  • We can have nested events.

  • Appears when a particular even gets executed 
  • Can have multiple actions for one event.

Let the Game Begin

Adding an Background to the layout.

On the Left hand side you will get the value of layout.keep a note of that , we will require it in sometime

Double Click the Layout and select tiled background.and you will find your pointer turning into a cross.when you click on the layout you will have the same screen that of mine.

I have Background here and I have browsed it from my explorer.

Now I have the background but I need the background to cover the whole layout as well as start from the (0,0) of my layout

I Go ahead an change the values to (0,0) and my titled background starts from the beginning now

Now I will change the size to the same that of the layout and now finally end up having the  whole screen as background

And finally the background is set 

Now lets fix the background to a layer such that when we have multiple objects the background doesnt get funny 

Adding Another Layer 

In this I m going to add a new layer name "game" and this layer will contain 4 different sprites and we will look into how they interact 
  • Player 
  • Monster
  • Bullet
  • Explosion
  • Mouse
  • Keyboard

To add a new Layer just click on the + button situated above the background layer and name it to whatever you want.Here I have named it to "Game". Now you can directly click anywhere in the layout and add sprites to they Game layer or for you guys the new layer

Give the name to the sprite layer and select an image for the character and they drop it anywhere in the layout.

I have added my player .

My monster is also added

Explosion Added**

**I added a bullet and now the explosion. The thing is whatever is in the layout is visible in the game but i dont want my bullets and explosion to be visible right in the beginning of the game ; rather I want them to appear on some condition or context .Hence are kept outside the layout.

Here is how you get to add behaviours

Adding Behaviours to the Objects..

  • Behaviours
    1.Player : 8 Direction,Scroll To,Bound to layout.
    2.Bullet: Bullet and Destroy outside layer.
    3.Monster- Bullet
    4.Explosion - Fade.

I'm listing showing just the player behaviour here.Make sure you assign all the values to the objects the exact ones that i wrote above ; if you are following this specific demo!

Since I don't want "Mano E Mano"

This is some FPS

I can replicate sprites or for that matter any object as many times I want time on the layout.


The events are generally triggered as a cause of an condition. So here i m going to take "ticks" and every tick = 60/sec. So wherever, I implement tick,will execute itself in that fashion.

Now I will go and add events to my sprites.

Thats the event sheet and thats where I can add the tick event.

So for 60times/Sec the player should do something and this is where I use the mouse and ask it to move towards the X,Y where the pointer of my mouse is on the layout

So this is where the person needs to fill in the X,Y values

Fetches the value of Mouse X,Y

This is how the event sheet will look after the event is complete

Let's Shoot

Well, Now that you know how to add events and I have my character following my mouse pointer. I will simply let is have the ability to shoot as well. Here's how

So first thing is , I need my player's gun to interact with the bullet. Hence, I need a point from where the bullets will be coming out from. I need to create a 'IMAGE POINT'.. and here is how. Select the player on the layout .. Get the properties and select the "Image Point" and create a new Image point . and put it on the Guns's tip.

So I m to select mouse and configure its left click to send out a bullet

Configuring my left click

Spawn another object will create another object

And finally I add the bullet as my new spawn object and image point 1 as where from the bullet will originate when the mouse click happens

The Explosion and The Monster Destruction

Here I m putting the on collision with the bullet with the monster and which will result in the monster going away

On Collision with the Monster

The monster will be destroyed ,so the Destroy property is selected

From where the bullet was, the explosion has to be spawned just make sure  you do it in the same layer to that of the game.

And finally the bullet needs to be destroyed

**just a tip: since my explosion had a black background,what i did was changed the blend property of the explosion to "additive" and hence it gets rid of that black property.

Thtats the additive property after being changed from normal as blend value.
***Note:The monster's speed can be controlled by selecting them and lessening their speed

I have eventually changed the speed to 80 ..and maybe when i make level two.. I might wanna increase the speed to 100 and it will give a difficulty level for the player

Health and Instance Variables

The health of the player and the monster can be kept in check by initiating an instance variable. The instance variable has an initial value which is the health and we can keep an counter for it and when its equal to or less than zero we can destroy the monster or player.I have mapped the monsters heath here which is by initiating a initial value of 3 and which implies that only after 3 bullets the the monsters will die.For each time a bullet hits the monster the value of the instance variable drops by 1.Below are the Sreenshots of how to do it.

Keep Score

Score is going to be a global variable which is going to keep a count of how many monsters is hit or killed. So all I require is a global variable named "Score" on the event sheet with a initial value of 0 and mapped with "add to" when the bullet hits the monster.

Adding a global Variable by right clicking on the event sheet

Adding the score variable with initial value of zero
Finally adding the score to my collison event when my bullet hits the monster.

The Heads Up Display AKA HUD

For this we create a new layer, and name it HUD . The new layer we add the object type "text" and name it as score.and it can be done by adding the sore variable with the score text.and disabling parallex so that the score doesnt move.

Regeneration of Monster and The player kill

Here I will generate a monster in every 3 seconds and kill the player when the monster hits the player.So couple of more events, Firstly, we pick up a random width or height or height and width and repopulate the monster and finally have the player killed if the player is collides with any of the monster.

The X seconds can be specified to perform regeneration of monsters 

I have set it to 5secs

The regeneration of the monsters can happen from any random width and height of the layout

When my player collides with the monster it dies

The monster is selected from the menu of objects

And this is where I destroy the player

And finally This is how your game will look like in Contruct 2

The final game!!

But yes, guys need to push it to store. So you will require to export this to Visual Studio where from you can package it and push it to the store.

Construct 2 gives this awesome feature to simply port your game to any platform.

**NOTE: You need to fill the Project Name ,Author and Description Before exporting.

You can find the export option in the home tab of Construct 2


Soon after you hit Export and select the option your project will be exported to a desired folder with all the resources inside it!

Now I have all my resources and the .sln file ready for Visual Studio.

Now there is going to be a Problem and when you try to build it or run in your local machine.The problem is Contrcut 2 never signs the certificate and hence when you try to build it fails.Here is how you can give it a certificate and make your app store ready.

 SO ,this is the package.appxmanifest file where you need to give it a certificate. If you are new with game or app dev you can create your certificate the same way its shown below.

Fill the name and give it a passkey

This is how your game looks when deployed and if you have noticed it didnt take much time to make such a game!

1 comment:

  1. This is a really nice tutorial!
    I want more.
    Hope they are well on their way!