CTS

COLLEGE OF BUSINESS AND COMPUTER SCIENCE LTD.

Construct 2
Ghost Shooter

1. Creating a new project

a. Click File and choose new empty project

2. Setting up the canvas

a. Setting up the layout
i. Choose the Layout in the Projects bar
ii. In the Properties tab, change the Layout Size to 1280, 1024
b. Setting up background
i. Double click on the layout open space to open the Insert new object
dialogue
ii. On the dialogue, double click Tiled background image
iii. Click on the layout when the crosshair pointer appears to place the
object. This will then open the texture editor
iv. Click the folder icon and navigate to the image. Select the image and
open. Close the editor.
v. Resize the image to the entire layout
In the properties bar, choose the background
Set the Position property to 0,0
Set the Size property to 1280, 1024
vi. Renaming, adding and locking the background
On the layout tab, do the following:
Renaming and locking
o Click on Layout 0, choose the pencil (edit) and rename
the layer to Background
o Next to the Background layer, click on the lock button to
lock the layer
Adding a layer
o Click on the green plus button to add another layer
o Rename this to Main
o Ensure that the Main layer is selected by clicking on it.
This is the layer that the game will be built on.
 CTS COLLEGE OF BUSINESS AND COMPUTER SCIENCE LTD.

c. Setting up screen
i. In the Projects tab, click on the name of the project
ii. In the project settings, located in the Properties tab, set:
Fullscreen in browser -> Off
Window Size -> 640,480
3. Adding input objects
a. Double click on an empty space to open the Insert new object dialogue
b. Select the Mouse object, to add input from your mouse
c. Double click on an empty space to open the Insert new object dialogue
d. Select the Keyboard object, to add input from your keyboard
4. Adding game objects
a. Double click again to open the Insert new object dialogue
b. Double click on the Sprite object
c. When the crosshair pointer appears, click the position (on the layout) where your
object should appear
d. On the Texture Editor, click the open button, navigate to the player object and
click open. Close the editor.
e. Rename the object to player using the PropertiesP editor
f. Do the same for Ghost, Bullet and Explosion objects. Position the bullet and
explosion object at the edge of the screen, outside of the layout screen.
5. Adding behavior
a. Player
i. Click on the Player to select it
ii. In the Properties bar, click on edit behaviors
iii. On the Behaviors dialogue that appears, choose the 8-directional under
the Player movements category
iv. Now add, Scroll to (makes the screen follow the player), Bound to layout
(keeps the player inside the layout)
b. Bullet
i. Click on the Bullet object to select it
ii. In the Properties bar, click on edit behaviors
iii. On the Behaviors dialogue, add to the bullet:
Bullet movement
Destroy outside layout
 CTS COLLEGE OF BUSINESS AND COMPUTER SCIENCE LTD.

c. Monster
i. To the monster object, add:
Bullet movement
d. Explosion
i. To the explosion object, add:
Fade
e. Changing speed
i. On the monster objects Properties under Behaviors, change the Speed
from 400 to 80
ii. On the bullet objects Properties under Behaviors, change the Speed from
400 to 600
iii. On the explosion objects Properties under Behaviors, change the Fade
out time from 1 to 0.5
f. Adding more monsters
i. While holding control, click and drag the Monster object.
ii. Create about 6 8 monster objects

6. Adding events
a. Click on the Event Sheet
b. To let the Player face the mouse:
i. Double click on the event sheet.
ii. In the Event dialogue, add a System event and click next.
iii. In the General category, add Every tick
iv. Click on the add action button on the even that was created and choose
the Player object, click next
v. In the Angle category, choose the Set angel toward position
vi. In the Parameters dialogue box that appears:
X : Mouse.X
Y: Mouse.Y
Click done
7. Adding game functionality
a. Adding shooting effect
i. Click the Add event option on the Event sheet
ii. Choose Mouse on the Event dialogue, click Next
 CTS COLLEGE OF BUSINESS AND COMPUTER SCIENCE LTD.

iii. Choose On Click, leave the options as default and click done
iv. Click Add action, on the mouse event and in the dialogue that appears
choose the Player object and click next
v. In the Misc. category, choose the Spawn another object.
vi. In the dialogue appears, in the object menu, choose bullet.
vii. In Layer, change 0 to 1
viii. Make bullet fire from the gun
Right click on the Player object in the Projects bar and choose
Edit Animations in the drop-down that appears.
In the Image Editor, click the Set Origin and Image Points tools.
When the crosshair pointer appears, click at the edge of the
players gun
Double click on the Spawn an object action and change the image
point from 0 to 1
Adding sound effects for fire
a. On Sounds in the Projects bar, right click and choose
Import Sounds. Import the audio file.
b. On Object Types in the Projects bar, right click and choose
Insert New Object
c. In the Media category, choose the Audio Object
d. On the Mouse event (that spawns the bullet), choose the
Add Action option, choose Audio object and click Next.
e. In the General category, choose Play and choose the
audio file
f. Leave other options as default and click done
ix. Get the bullets kill monsters
Click the Add event option on the Event sheet
Choose Bullet and click next
In the Collisions category, choose the On collision with another
object option and click next
In the dialogue that appears, choose the Monster object
Click the Add action option on the event and choose the Monster
object.
 CTS COLLEGE OF BUSINESS AND COMPUTER SCIENCE LTD.

In the dialogue that appears, in the Misc. category, choose

Destroy and click done
b. Adding explosion effect
i. Click the Add action option on the event and choose the Bullet object and
click next
ii. In the Misc. category, choose the Spawn another object.
iii. In the Parameters dialogue, in the object drop-down choose Explosion
and change Layer 0 to Layer 1
iv. Click the Add action option on the event and choose the Bullet object and
next
v. In the Misc. category, choose Destroy and choose done
vi. In the Projects bar, choose the Explosion object
vii. In the Properties tab, in the Effects option, change the Blend Mode to
Additive
viii. Adding sound effects for fire
On Sounds in the Projects bar, right click and choose Import
Sounds. Import the audio file.
On Object Types in the Projects bar, right click and choose Insert
New Object
In the Media category, choose the Audio Object
On the Mouse event (that spawns the bullet), choose the Add
Action option, choose Audio object and click Next.
In the General category, choose Play and choose the audio file
Leave other options as default and click done
c. Randomize Monster behavior
i. Choose the Add Event and choose System in the dialogue that appears
in the Start & End category choose On start of Layout
ii. Click the Add Action on the event and choose the Monster object.
iii. In the Angle category, choose the Set Angle
iv. In the dialogue that appears, type random(360) and click done
v. Add Another Event on the Monster
d. Preventing monsters from leaving the layout
i. Choose the Add Event and choose Monster
 CTS COLLEGE OF BUSINESS AND COMPUTER SCIENCE LTD.

ii. In the Size and Position category, choose the Is outside layout option and
click done
iii. Add action using the Add Action option on the event, choose Monster
iv. In the Angle category, choose the Set angle toward position
v. In the dialogue that appears
In X type: Player.X
In Y type: Player.Y
vi. Click done
8. Instance variables (Health for monsters)
a. Click on the Monster object in the Projects bar
b. Choose edit under the Instance variables in the Properties tab
c. In the dialogue that appears, choose the Add button
d. In the dialogue, do:
i. In Name input type Health
ii. Change Initial value from 0 to 5
iii. Click done and close the dialogue
e. Change event to allow health of monsters
i. On the Bullet -> On collision with monster event, right click on the Destroy
action and choose Replace action from the drop-down
ii. Choose Monster from the dialogue and in the Instance variables category
choose the Subtract from option and click next
iii. Leave the defaults and click Done
iv. Add another event using the Add Event button and choose System from
the dialogue
v. In the Global & local variables category, choose Add to
vi. In Variable put MonsterSpeed and in Value type 1
f. Destroy Monster when health reaches zero
i. Add another event using the Add Event button and choose Monster from
the dialogue
ii. In the Instance variables category, choose the Compare instance variable
and click next
iii. In the Comparison input change to Less or equal to and click done
iv. Add another action, choose Monster and in the Misc. category, choose
Spawn another object and click next
 CTS COLLEGE OF BUSINESS AND COMPUTER SCIENCE LTD.

v. From the drop-down, choose Explosion. Change Layer to 1 and click

done
vi. Add another action, choose Monster and in the Misc. category, choose
Destroy and click done
9. Keeping the score
a. Right click on an empty space on the event list and choose Add global variable
from the drop-down menu
b. In the dialogue that appears, name the variable Score. Leave others as default
and click ok
c. Points for killing monster
i. On the Monster -> health <0 action, add System action on the event.
ii. On the Global & local variables category, choose Add to and click Next
iii. In the Variable drop-down, choose Score and leave Value as 1
iv. Click Done
d. Creating Score display
i. In the Layer bar, add a new layer and name it Display
ii. Click the layer and in the Properties tab, change the Parallax property to
0,0
iii. In the Layout tab, double click and insert a Text object
iv. In the Properties bar, change the colour of the fontetc.
v. Change the Name of the object
vi. In the Event Sheet, in the System -> Every tick event, add the Text action
vii. In the Text category, choose the Set Text option
viii. In the input dialogue that appears. Type Score: &Score
10. Finishing touches
a. Randomising monsters on start
i. Create a System event (an reposition to position 1)
ii. In the Start & End category, choose the On start of layout option
iii. Add a Monster action to the event. From the Angle category, choose Set
Angle
iv. On the dialogue that appears, type random(360)
b. Spawn a new monster (every 3 seconds)
i. Choose the Add Event and choose System in the dialogue that appears
in the Time category choose Every X seconds
 CTS COLLEGE OF BUSINESS AND COMPUTER SCIENCE LTD.

ii. Type 3 in the input and click done

iii. Add action using the Add Action option on the event, choose System
iv. In the General category, choose Create Object, click next and in the drop-
down choose Monster
v. Change Layer from 0 to 1, change X from 0 to 1500, change Y from 0 to
random(1024) and click done
vi. Add another action on the event using the Add Action option on the event,
choose Monster
vii. Set the speed for newly spawned monsters
Right click on an empty space on the Event Sheet and choose the
Add global variable
In the dialogue that appears, change the name to MonsterSpeed
Change the Initial value to 80
viii. Add action to the Monster object and in the Animations category, choose
Set speed and click next
ix. In the input that appears, type MonsterSpeed and click Done
c. Kill player on collision with Monster
i. Add a new Monster event and in the Collisions category, choose On
collision with another object and click next
ii. In the drop-down, choose the Player object and click done
iii. Add an action to the event, using the Add action button
iv. On the dialogue, choose Player object and in the Misc. category, choose
Destroy and click done
d. Showing Game over text
i. Click on the Display layer from the Layers tab and choose the Display
layer
ii. Go to the Layout tab and double click on an empty space to open the
Insert new object dialogue
iii. Choose the Text object and place on the screen and type Game Over.
Change the font colour and size to suit. Also, change the name of the
object
iv. On the first Event (System->On start of layout), add the game over Text
event.
v. In the Appearance category, choose Set Visible and then click next
 CTS COLLEGE OF BUSINESS AND COMPUTER SCIENCE LTD.

vi. Change Visible to Invisible

vii. In the Monster -> Collision with Player event, add the Game Over Text
object
viii. In the Appearance category, choose Set Visible
ix. Leave the option as Visible
e. Restarting the game
i. Click the add event button, and choose the Keyboard object, in the
Keyboard category, choose the On key pressed option. Click on the <click
to choose option>. When the dialogue appears, click the spacebar on
your keyboard. Space should now appear on the dialogue, now click
Done
ii. Add a System action, in the Global & local variables category, choose Set
Value and click next. Choose MonsterSpeed (from the drop-down) and
set Value to 80
iii. Add a System action, in the Global & local variables category, choose Set
Value and click next. Choose Score (from the drop-down) and set Value
to 0
iv. Add a System action, in the General category, choose Go to layout and
click next. In the drop-down, choose Layout 1 and click Done
v. Add System event and in the General category choose Compare two
values.
vi. In the dialogue that appears.
In the First value, type Player.Count
In the Comparison, choose Equal to
vii. Merge this System event to the Keyboard event
11. Exporting the game
a. Choose the Export Project option on the programs ribbon menu
b. Choose HTML5 Website and click next
c. In the Export options window that appear, you can leave as default and click Next
d. Choose Normal style template and click Export