##Microsoft Student Partner Technical Workshop at UChicago

Download Construct 2: https://www.scirra.com/

Run Construct 2:

Once application is open click, "File>New"

Open up a new 'Empty Project' or choose from a variety of 'Templates'

Here is a breakdown of the Project Environment:

Once you've opened your Template or Empty Project go ahead and click "File>Save"

First you'll need to export your project. Click "File>Export project"

Select HTML5 website unless you have another preference. An error may appear but just click out of it.

Right-click Inside the Layout area and select "Insert new object"

Select "Tiled Background" and click "Insert"

Then click inside the Layout area then click "Open Icon" to load an image:

Select bg.png from the images folder. (Also feel free to choose your own images!)

Close the preview pop-up window and you'll notice extra space in the Layout area.

Now update your tile positions:

Select Layout 1 and Update your sizes:

To ensure your background image fills the entire layer, make sure the image dimensions are the same size as the layout dimensions. Click outside the image to see layout dimensions.

Start by clicking the layers tab on the right:

Click the "Edit icon" (pencil) to rename Layer 0. Rename it to "Background". Lock this layer by clicking the lock icon.

Add a new layer by pressing the "Plus Sign Icon". Rename it to "Main".

Start by selecting the "Main Layer"

Right click and select "Insert new object":

Select "Mouse Icon" then click "Insert"

Again, right click andselect "Insert new object":

Select "Keyboard Icon" then click "Insert"

Notice both Mouse and Keyboard are added to objects:

As before, right click and select "Insert new object"

Select the "Sprite" then click "Insert"

Click inside Layout area: then click the "Open Icon (folder)" to load an image.

Select player.png from the images folder and click "Open"

Close the pop-up window and you'll see your Sprite character in the Layout window.

For this game we're going to add Monsters! Very similar to adding playable Sprites.

As before, right click and select "Insert new object"

As before, select the "Sprite" then click "Insert"

Click inside Layout area: then click the "Open Icon (folder)" to load an image.

Select monster.png from the images folder and click "Open"

Close the pop-up window and you'll see your Monster character in the Layout window.

We'll be adding in bullets and explosions!

As before, right click and select "Insert new object"

Select the "Sprite" then click "Insert"

Click inside Layout area: then click the "Open Icon (folder)" to load an image.

Select bullet.png from the images folder and click "Open"

Close the pop-up window and you'll see your Bullet in the Layout window.

As before, right click and select "Insert new object"

Select the "Sprite" then click "Insert"

Click inside Layout area then click the "Open Icon (folder)" to load an image.

Select explode.png from the images folder and click "Open"

Close the pop-up window and you'll see your Explosion in the Layout window.

Now we're going to rename your Sprites and arrange them properly.

First, Right-click to rename each Sprite:

Rename them:

Player

Monster

Bullet

Explosion

Next, Zoom-out in the Layout window so you can see the end of the Background Tile.

Then move the Bullet and Explosion outside the Layout, like:

It should now look like:

Let's get things moving!

First, select your Player from the Projects window on the right.

Click, "Behaviors"

Then "Add New"

Choose your Movement:

Select "8 Direction" and then click "Add"

Repeat to select "Scroll To" from the Movement selector.

Now add "Bound to Layout" from the Movement selector.

Then close the pop-up.

Very similar to adding Player Movements.

As before, select "Bullet" from the Projects window. Then "Behaviors"

Then "Add New"

Select "Bullet" and then click "Add"

With "Bullet" still selected click "Add New" again and select "Destroy Outside Layout" and then click "Add"

Close the pop-up

Repeat those steps but this time first select "Explosion" from the Project window, then select "Fade" from the Behaviors list.

Close the pop-up.

Now we need to update the speed and fade out timing.

Update the Properties of each item to:

First let's move the Monster.

Very similar to adding previous Movements.

As before, select "Monster" from the Projects window. Then "Behaviors"

Then "Add New"

Select "Bullet" and then click "Add"

Close the pop-up.

Now we need to update the speed like before.

Once updated let's add more Monsters.

##Accepting User Input

Let's add events to the Event Sheet:

An "Event" happens when a Condition is true for an object:

Right-click then "Add Event":

Select "System" then "Next" Select "Every Tick" then "Done" Click to "Add Action":

Select "Player" then "Next" Select "Set angle toward position" then "Next"

Enter Parameters:

Should end up looking like this:

Other objects, for example, bullets.

Click to "Add Event":

Select "Mouse" then "Next" Select "On click" then "Next"

Click "Done":

Click to "Add Action":

Select "Player then" then "Next" Scroll down a bit and select "Spawn another object" under Misc then "Next"

In the pop-up window click "Click to choose" Select "Bullet" then "OK"

Enter Layer and Image Point values:

Should look like this:

Here we'll fix your Bullets.

To start Right-click "Player" then "Edit Animations":

Then:

Click to "Add (plus symbol+)"

Then:

Then:

Then update "Image Point" to equal "1" and click "Done"

Let's Destroy some Monsters.

As before, click to "Add Event"

Select "Bullet" then "Next" Select "On collision with another object" then "Next"

In the Object select click "Click to choose"

Select "Monster" then "OK" Then click "Done"

Next, click to "Add Action"

Select "Monster" then "Next" Scroll down a bit, then select "Destroy" then "Done"

As before, click to "Add Action"

Select "Bullet" then "Next" Scroll down a bit, then select "Spawn another object" then "Next"

In the Object select click "Click to choose"

Select "Explosion" and then "OK"

Set Layer to equal "1" Set Image Point to equal "0" Click "Done"

Next we'll do these steps again. As before, click to "Add Event"

Select "Bullet" then "Next" Scroll down a bit, then select "Destroy" then "Done"

Your items should look like this:

Let's Randomize Monsters.

First, go to your "Event Sheet":

Click to "Add Event":

Select "System" then "Next" Scroll down a bit, then select "On start of layout" then "Done"

Click to "Add Action" Select "Monster" then "Next" Select "Set angle" then "Next" Enter Angle = "random(360)" then "Done"

Should look like this:

Let's make the Monsters smarter.

As before, go to your "Event Sheet"

Click to "Add Event"

Select "Monster" then "Next" Scroll down a bit, then select "Is outside layout" then "Done"

Click to "Add Action"

Select "Monster" then "Next" Then select "Set angle toward position" then "Next"

Enter Parameters:

X= Player.X

Y= Player.Y

Should look like this:

The Monsters won't go down easy!

Select "Monster" front the Projects window

Select "Instance Variables":

Click to "Add New (plus sign)"

Enter the following into the form:

Name = health

Type = Number

Initial Value = 5

Description = (optional)

Click "OK"

Right-click "Monsters - Destroy" Then click "Replace Action":

Select "Monster" then "Next" Then select "Subtract from" then "Next"

Enter Value = 1

Then "Done"

Should look like this:

Time to destroy those Monsters!

As before, go to your "Event Sheet"

Click to "Add Event"

Select "Monster" then "Next" Scroll down a bit, then select "Compare instance variable" then "Next"

Enter Values for:

Comparison: is less or equal

Value = 0

Click "Done"

Next, click to "Add Action"

Select "Monster" then "Next" Scroll down a bit, then select "Spawn another object" then "Next"

In the window next to "Object" click click to choose

Select "Explosion" then "OK"

Enter Values for:

Layer = 1

Image Point = 0

Click "Done"

Next, click to "Add Action" again. Select "Monster" then "Next" Scroll down a bit, then select "Destroy" then "Done"

Should look like this:

Now we need to add some scoring.

First, Right-click in the Event sheet 1 area:

Enter Values for:

Name = Score

Type = Number

Initial Value = 0

Description = (optional)

Constant = (do not check the box)

Click "OK"

Then scroll up and it should show:

Scroll back to the bottom and click "Add Action" under Event 6 (Monster health)

Select "System" then "Next" Select "Add to" then "Next"

Enter Value = 1 click "Done"

Should look like this:

Start by clicking "Layers"

Add a new layer by clicking the "+ symbol"

Right-click the new layer and click "Rename" Change the name to "HUD"

Now let's change the Parallax values:

Parallax is when the background layers scroll separately, e.g., the classic Super Mario Bros.

Learn more about Parallax here: http://wakeupandcode.com/c2/parallax.html

Let's set the HUD's parallax:

It's that simple!

Wait what's the score??

First:

Select "Text" then "Insert" Click to place Text object:

You'll notice:

Now let's change properties:

First we need to know how to combine text. See below:

In the game it will look like:

Now, find "System>Every Tick" and click "Add Action"

Select "Text" then "Next" Scroll down to select "Set text" then "Next"

Enter in the Text box:

"Score: " & Score

Click "Done"

Should look like:

Let's add some more Monsters.

Scroll to the bottom of Event sheet window and click "Add Event"

Select "System" then "Next" Scroll down to select "Every X seconds" then "Next"

Enter Interval (seconds) = 3

Click "Done"

Then click "Add Action"

Select "System" then "Next" Select "Create object" then "Next"

Click click to choose and select "Monster" then click "OK"

Enter Values for:

Layer = 1

X = 1400

Y = random(1024)

And click "Done"

Should look like this:

Sigh...

Scroll to the bottom of Event sheet window and click "Add Event"

Select "Monster" then "Next" Select "On collision with another object" then "Next"

Click click to choose and select "Player" then click "OK"

Click "Done"

Next, click "Add Action"

Select "Player" then "Next" Select "Destroy" then "Done"

Should look like this:

Ready to play? Click the play button on the top of the screen to launch your game. If you chose HTML as the platform, a browser will open up with your game. To play, simply move the player around with the direction keys, shoot by clicking on the keypad, and rotate the player by moving your finger on the keyboard!

Bonus:

If you don't like having to click the keypad to shoot, you can easily change how to shoot by changing the mouse action from left click to another click or to a key on the keyboard.

Also, if you would like to add sounds, go back to the layout and insert in audio object. .wav files work best. Then connect the sound with actions.

Thanks for coming to our workshop! Feel free to contact us with any questions/comments and be sure to join the Facebook page for the latest updates!

Find more Construct 2 tutorials here: http://www.scirra.com/tutorials

Check out the Construct 2 Facebook Group here: https://www.facebook.com/groups/construct2devs/

Check out the Construct 2 forums for great threads here: https://www.scirra.com/forum/

Shahed Chowdhuri

with edits by Grace Lu

Web: OnekSoft.com

Email: [email protected]

Twitter: @OnekSoftGames

Microsoft email: [email protected]

Personal Twitter: @shahedC

R&D: OnekSoftLabs.com

Dev Blog: WakeUpAndCode.com

FB: http://facebook.com/groups/XboxOneIndieDevs

Markdown formatting by: Matt Secord

##Resource Page Find the image files, PowerPoints, SlideShare, etc. here:http://wakeupandcode.com/construct2/ghost-shooter-step-by-step/