Building Windows Store Games With Construct 2

What's here for you

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

What is available

Based on how much detail you want to put into the game, the gaming engines and framework have been divided into the following 3 major categories.

• Low-level HTML5 Canvas API
• Mid-level gaming APIs
  
  
  1. ImpactJS
  2. CreateJS
  3. Box2D
     
• Game Creation Studios
  
  
  1. Scirra Construct 2
  2. Yo Yo Game Studio
  3. GameSalad Creator

Let's start with where to download Scirra Contruct 2.



So today the demo would be possible to do in the free download copy from scirra.

Getting Familiarized with the UI of Contruct 2



The preceding image is self-explanatory to show what are the various parts of the IDE.

Some major stuff one should understand before getting their hands dirty are:

• Projects Pane: Similar to the Visual Studio project pane, this shows all the files and assets to the project.
  
  
• Layer Tab: Depicts the various layers in the game. For example, background and foreground.
  
  
• Objects Pane: On the bottom-right the object pane 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.

Objects



The objects can be loads of various 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 to the project.

Behaviors



The behaviors are to be bound with the objects and these are built-in logic. For example, let's say you fire a bullet and the bullet goes at a specific angle. So the angle is the bullets property and the 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 let's you pick the size and where the objects will be placed and are mostly pre-defined. The event sheet is although the list of actions and events that are mapped to all the objects 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 of the specific block where the result is true.

Events

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

Actions

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

Let the Game Begin

Adding a 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 browsed it from my the explorer.



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



Now, move ahead and 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 entire screen as background.


And finally the background is set.



Now let's fix the background to a layer such that when we have multiple objects the background doesn't get funny.

Adding Another Layer

In this I will add a new layer named "game" and this layer will contain 4 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 whatever you want. Here I named it "Game". Now you can directly click anywhere in the layout and add sprites to the Game layer or for you guys the new layer.

Provide the name to the sprite layer and select an image for the character and then 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 don't 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. Therefore kept outside the layout.

Here is how you will add behaviors.

Adding Behaviors to the Objects

Behaviors:

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

I will show just the player behavior 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.

Events

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

Now I will go and add events to my sprites.



That's the event sheet where I can add the tick event.



So for 60 times/sec the player should do something and this is where I use the mouse and asks 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 understand how to add events and I have my character following my mouse pointer, I will simply let us have the ability to shoot as well. Here's how.

So the 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 an "IMAGE POINT" and here is how we will do that.

Select the player on the layout. Get the properties and select the "Image Point" and create a new Image point. Now, put it on the Guns's tip.

 

So I will select the mouse and configure its left-click to send out a bullet.

Configuring my left-click.

 

Spawning 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 will place the on collision with the bullet with the monster that 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 must be spawned, just be sure you do it in the same layer as 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 got rid of that Black property.

That's the additive property after being changed from normal as the 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 want to 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 that is the health and we can keep a counter for it and when it's equal to or less than zero we can destroy the monster or player. I have mapped the monster's heath here which is by initiating a initial value of 3 and that implies that only after 3 bullets the monsters will die. For each time a bullet hits the monster the value of the instance variable drops by 1. The following are the screenshots of how to do it.















Keep Score

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



The following shows adding a global variable by right-clicking on the event sheet.
.

 

Adding the score variable with an initial value of zero.

 

Finally adding the score to my collision event when my bullet hits the monster.

The Heads Up Display AKA HUD

For this we will create a new layer and name it HUD. In the new layer we will add the object type "text" and name it score. And it can be done by adding the score variable with the score text and disabling the parallax so that the score doesn't move.







Regeneration of Monster and the player kill

Here I will generate a monster every 3 seconds and kill the player when the monster hits the player. So a couple of more events.

First, 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 collides with any of the monsters.

 

The X seconds can be specified to perform regeneration of monsters.

 

I have set it to 5 seconds.

 

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 destroyed the player.

And finally this is how your game will look like in Contract 2.



The final game!

But yes, guys need to push it to store. So you will need 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 in the Project Name, Author and Description before exporting.

 

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





Soon after that you hit Export and select the option for your project to 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 will be a problem when you try to build it or run in your local machine. The problem is that Construct 2 never signs the certificate and hence when you try to build it, 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 to the game or app dev then you can create your certificate in the same way as the following:

 

Fill in the name and give it a key.

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