Developing Games For Windows Store 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
  1.ImpactJS
  2.CreateJS
  3.Box2D
• Game Creation Studios
  1.Scirra Construct 2
  2.Yo Yo Game Studio
  3.GameSalad Creator

Lets Start with where to download Scirra Contruct 2

http://4.bp.blogspot.com/-roPrxEQ1z9s/VKC9-8nixvI/AAAAAAAACVk/CW36W7VaRwc/s1600/Screenshot%2B(33).png

So today all whatever Im about to demo will be possible to perform in the free download copy from http://scirra.com/

**Getting Familiarised with the UI of Contruct2 **

http://1.bp.blogspot.com/-WxsvdwMdHxc/VKDBSDprOJI/AAAAAAAACVw/YrgTcPF7lfs/s1600/Screenshot%2B(34).png

**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.

Objects

**
**

http://3.bp.blogspot.com/-1L4AfI910IU/VKDHEEulU9I/AAAAAAAACWA/AVzfXsbDQ_I/s1600/Screenshot%2B(36).png

**
**

**
**

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 dialog box" viz Sprite ; this creates the 'Object Type' and then can be replicated as many times in the project.

Behaviours

http://4.bp.blogspot.com/-P221gm_b8z4/VKDJMa6onRI/AAAAAAAACWI/yHghAfnD9oA/s1600/Screenshot%2B(37).png

The behaviours are to be binded with the objects and these are built in logic 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 predefined.The event sheet is although the list of actions and events which 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 the that 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 particular condition comes true. 
• We can have nested events.

Actions

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

Let the Game Begin

Adding an Background to the layout.

http://4.bp.blogspot.com/-havKqNvGGR8/VKDRJ3_hvgI/AAAAAAAACWY/ai4nGIXhkdA/s1600/Screenshot%2B(40).png

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

http://2.bp.blogspot.com/-tnzLctzp7uQ/VKDRKDx_DcI/AAAAAAAACWc/LkyRoq69Bp0/s1600/Screenshot%2B(41).png

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.

http://3.bp.blogspot.com/-tH6yJQsSgjo/VKDRKHuMKJI/AAAAAAAACWg/o_lIXUT0SkM/s1600/Screenshot%2B(42).png

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

http://2.bp.blogspot.com/-miYRv2TnosE/VKDRMUKj6aI/AAAAAAAACWw/MBZX3xLwfgA/s1600/Screenshot%2B(43).png

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

http://4.bp.blogspot.com/-LxnCUuRWlcM/VKDROVC497I/AAAAAAAACW4/IFaWzIIlDZA/s1600/Screenshot%2B(44).png

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

http://3.bp.blogspot.com/-XD0bFMcCzkE/VKDRP0sJvvI/AAAAAAAACXA/xbLzuepd5GY/s1600/Screenshot%2B(45).png

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

http://2.bp.blogspot.com/-pHyB8LvSE3M/VKDRUPFegrI/AAAAAAAACXQ/2foCJS_3Hhw/s1600/Screenshot%2B(47).png

And finally the background is set

http://3.bp.blogspot.com/-hEJmuWY_5uI/VKDVVF5nFAI/AAAAAAAACXc/gS5GYYTMVrU/s1600/Screenshot%2B(48).png

Now lets 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 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

http://1.bp.blogspot.com/-1E4VCDliQrc/VKDYiaVR0_I/AAAAAAAACXo/hhDa5-EUyRA/s1600/Screenshot%2B(50).png

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

http://1.bp.blogspot.com/-wRu74V1E6a4/VKDYjb55oLI/AAAAAAAACX0/tSCDfXdfAT4/s1600/Screenshot%2B(51).png

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

http://2.bp.blogspot.com/-rqmYQ5qcqYk/VKDYi-Z9jiI/AAAAAAAACXs/7E8Creiu1io/s1600/Screenshot%2B(52).png

I have added my player .

http://2.bp.blogspot.com/-8D814fN7QmE/VKDYlr4DI4I/AAAAAAAACYA/UPJFqGE8Dsc/s1600/Screenshot%2B(53).png

My monster is also added

http://4.bp.blogspot.com/-E-NS-pRCUmk/VKDYoIFsEfI/AAAAAAAACYI/nhm5rtaKirc/s1600/Screenshot%2B(54).png

Explosion Added**

http://1.bp.blogspot.com/-SlGT_m2ASp0/VKDYqUaopEI/AAAAAAAACYQ/vOId7UOc8CA/s1600/Screenshot%2B(55).png

**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.

http://1.bp.blogspot.com/-NaT-zwFZUow/VKDdO6y4e0I/AAAAAAAACYc/nPOQLeIdVGc/s1600/Screenshot%2B(56).png

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"

http://3.bp.blogspot.com/-77OHah7zObc/VKDg6LD-knI/AAAAAAAACYo/R-nOlBJjAT8/s1600/Screenshot%2B(57).png

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 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.

http://3.bp.blogspot.com/-pzvmDe1YFMU/VKDlCab9JWI/AAAAAAAACY0/g6UhayK1x0U/s1600/Screenshot%2B(58).png

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

http://1.bp.blogspot.com/-u095xWsdT_g/VKDloW_JnYI/AAAAAAAACZI/zemqveyqTHE/s1600/Screenshot%2B%2859%29.png

So for 60 times/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

http://3.bp.blogspot.com/-ytT7xp6rjUk/VKDlpHR3KvI/AAAAAAAACZM/tK3BT0Vu3fM/s1600/Screenshot%2B%2860%29.png

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

http://4.bp.blogspot.com/-6tVfnEtgsuM/VKDlo32CqBI/AAAAAAAACZQ/gwKg6E3FdmE/s1600/Screenshot%2B%2861%29.png

Fetches the value of Mouse X,Y

http://3.bp.blogspot.com/-pKtPEOS272c/VKDlqR-r3wI/AAAAAAAACZY/xrG-L7or-LU/s1600/Screenshot%2B%2862%29.png

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.

http://1.bp.blogspot.com/-lOgcqJ_DF1I/VKDppt-NNiI/AAAAAAAACZg/fTyhmlrzLns/s1600/Screenshot%2B(63).png

http://4.bp.blogspot.com/-YG8cH8tXAow/VKDrIvvt-7I/AAAAAAAACZs/A-iHLhYds5Q/s1600/Screenshot%2B(64).png

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

http://1.bp.blogspot.com/-x8-n5gNNt-Q/VKDrJVWOjkI/AAAAAAAACZ0/Mij6nBhsKtA/s1600/Screenshot%2B(65).png

Configuring my left click

http://3.bp.blogspot.com/-J672jqOOD9U/VKDrJRsymJI/AAAAAAAACZw/eIfxve6BMCE/s1600/Screenshot%2B(66).png

Spawn another object will create another object

http://1.bp.blogspot.com/-uhmyJFGuy2E/VKDrW850ZcI/AAAAAAAACaE/Z9rszd5GEZA/s1600/Screenshot%2B(68).png

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

http://2.bp.blogspot.com/--P8pjvF2fBM/VKDuAUXh5KI/AAAAAAAACaY/77_9TNUFJRg/s1600/Screenshot%2B(69).png

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

http://2.bp.blogspot.com/-3cJkjwSu-lI/VKDuAQc7ZII/AAAAAAAACaU/ebHy87TNaNw/s1600/Screenshot%2B(70).png

On Collision with the Monster

http://3.bp.blogspot.com/-9j0UjybiImY/VKDuAAydDII/AAAAAAAACaQ/yLy4ZCEaUWU/s1600/Screenshot%2B(71).png

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

http://2.bp.blogspot.com/-fciX_rbwM-w/VKDuB8VKllI/AAAAAAAACao/KWadHQu4D9o/s1600/Screenshot%2B(72).png

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.

http://3.bp.blogspot.com/-2RIDS3WLMSw/VKDuCc83BhI/AAAAAAAACas/7qQIjJr9SsU/s1600/Screenshot%2B(73).png

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.

http://3.bp.blogspot.com/-rqg6i5fJCnI/VKDwZVWT3OI/AAAAAAAACbI/wQcDHNmmBh4/s1600/Screenshot%2B(76).png

That is 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

http://3.bp.blogspot.com/-okW8BoW4waM/VKDxdUxSc-I/AAAAAAAACbU/KWVOgChNy6w/s1600/Screenshot%2B(77).png

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 screenshots of how to do it.

http://2.bp.blogspot.com/-JuFbAciYBH4/VKD1acqwsmI/AAAAAAAACb4/iTH8_ahvb54/s1600/Screenshot%2B(78).png

http://3.bp.blogspot.com/-FEQzhBZSiwo/VKD1Z8mGnwI/AAAAAAAACb0/cOnbg_okLb8/s1600/Screenshot%2B(79).png

http://3.bp.blogspot.com/-UEfbhfUY3ZU/VKD1VB03yZI/AAAAAAAACbk/GHWWbGLg720/s1600/Screenshot%2B(80).png

http://2.bp.blogspot.com/-OaowS7yUDwA/VKD1YpLmLOI/AAAAAAAACbs/nP9RvbJ_JB0/s1600/Screenshot%2B(81).png

http://2.bp.blogspot.com/-laER-0OfASc/VKD1a1_AUbI/AAAAAAAACb8/ceJ_uEUi210/s1600/Screenshot%2B(82).png

http://3.bp.blogspot.com/-R541U3HYDmA/VKD1brwHOSI/AAAAAAAACcI/TGYHI3CgPEE/s1600/Screenshot%2B(83).png

http://2.bp.blogspot.com/-7vr6246EM9k/VKD1cVlD2YI/AAAAAAAACcQ/gOa4ULgr2jk/s1600/Screenshot%2B(84).png

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.

http://4.bp.blogspot.com/-dSjqzS9x4W0/VKD4QCRN8KI/AAAAAAAACcg/bkytW3Zyk-c/s1600/Screenshot%2B(85).png

Adding a global Variable by right clicking on the event sheet

.

http://2.bp.blogspot.com/-tS_VfMBG3x8/VKD4iKcAkZI/AAAAAAAACcs/12J7g-gPzS0/s1600/Screenshot%2B%2888%29.png

Adding the score variable with initial value of zero

http://2.bp.blogspot.com/-3ZuXYDCYV4s/VKD5lEA3bCI/AAAAAAAACc8/spvbbIV6oDQ/s1600/Screenshot%2B(87).png

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 doesn't move.

http://2.bp.blogspot.com/-rQ775grWoqE/VKD_4oc6ijI/AAAAAAAACdM/vtEZYquS2n0/s1600/Screenshot%2B(90).png

http://1.bp.blogspot.com/-k20lsK_C6qw/VKD_4zwJsVI/AAAAAAAACdQ/dTBXPEjx2A8/s1600/Screenshot%2B(91).png

http://1.bp.blogspot.com/-Ebo2sApCVxU/VKD_44di7DI/AAAAAAAACdU/Hi1GfMR7_0o/s1600/Screenshot%2B(92).png

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.

http://3.bp.blogspot.com/-RSmQ6knaEiE/VKECx1IxRPI/AAAAAAAACdo/Fd3sw4Vs8Nk/s1600/Screenshot%2B(93).png

The X seconds can be specified to perform regeneration of monsters

http://1.bp.blogspot.com/-uxam5au50Z4/VKECyNcx2UI/AAAAAAAACds/8ojKbERAaKY/s1600/Screenshot%2B(94).png

I have set it to 5secs

http://1.bp.blogspot.com/-TZ1aL3XWbNw/VKECyA6jy2I/AAAAAAAACdw/xLBkVmrpfmI/s1600/Screenshot%2B(95).png

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

http://4.bp.blogspot.com/-PS_Bhpd9ShY/VKEC0zxgG-I/AAAAAAAACeI/83yibtF7MxA/s1600/Screenshot%2B(97).png

When my player collides with the monster it dies

http://4.bp.blogspot.com/-CC0Naq40TZs/VKEC1ZpMaZI/AAAAAAAACeM/Mh3wsGLdZ1k/s1600/Screenshot%2B(98).png

The monster is selected from the menu of objects

http://3.bp.blogspot.com/-3azcNt2gLXA/VKEC111_-UI/AAAAAAAACeU/xZAHFsuaMGE/s1600/Screenshot%2B(99).png

And this is where I destroy the player

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

http://3.bp.blogspot.com/-20vGIPfzL6I/VKEIlgcLFAI/AAAAAAAACe8/diSxQb__odg/s1600/Screenshot%2B%28100%29.png

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.

http://3.bp.blogspot.com/-amUCF8TXXAo/VKEKjLJDzLI/AAAAAAAACfo/kWhW9BAROsA/s1600/Screenshot%2B(105).png

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

 

http://3.bp.blogspot.com/-PZSWItRawuk/VKENExJqmcI/AAAAAAAACf8/ZSyhO0EYdSA/s1600/Screenshot%2B(103).pnghttp://3.bp.blogspot.com/-ANm4YnDChUs/VKENDWR4FFI/AAAAAAAACf0/OQx6Pgjyk10/s1600/Screenshot%2B(104).png

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 Construct 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.

http://3.bp.blogspot.com/-DGhQunNUd_w/VKEOvUl99iI/AAAAAAAACgU/CF0mAtTYKLU/s1600/Screenshot%2B(107).png

** 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.**

http://2.bp.blogspot.com/-NGwkfN--5yI/VKEOmzyxC7I/AAAAAAAACgI/NrOT1E8DwAA/s1600/Screenshot%2B(108).png

Fill the name and give it a passkey

http://1.bp.blogspot.com/-pC6xu2aGz44/VKEOxgW7KHI/AAAAAAAACgo/FY7Nh5mYxgs/s1600/Screenshot%2B(118).png

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