intro to construct 2: ghost shooter - step by step
DESCRIPTION
Derived from Beginner’s Guide to Construct 2 originally published by Ashley, it expands upon the written tutorial by providing detailed screenshots of every step and is grouped into concepts that I identified from my learning. Also, the steps and screenshots from a recent version (as of 2014). Finally, it explains relevant concepts such as Parallax and X-Y Coordinates for Graphics Programming. * Original Tutorial: https://www.scirra.com/tutorials/37/beginners-guide-to-construct-2 * Ashley from Scirra: https://www.scirra.com/users/ashleyTRANSCRIPT
By Shahed ChowdhuriSr. Technical Evangelist
Intro to Construct 2 Game DevelopmentWindows 8 Windows Phone 8 Web Mobile … and more!
@shahedC
WakeUpAndCode.com
Agenda
Intro
> Construct 2 Basics> Characters and Objects> Bringing It All Together
Wrap-Up
My BackgroundPeriod Background/Experience
1997 – present
Microsoft web/software development
2011 XNA games on XBLIG• 2D Math Panic• Angry Zombie Ninja Cats
2012 Tools for XNA developers• XBLIG Sales Data Analyzer (OnekSoftLabs.com)• XNA Basic Starter Kit (CodePlex)
Online: http://facebook.com/OnekSoftGames
My Background (continued)Period Background/Experience
2013 • Ninja Cat Runner on Win8, WP8, Web (Construct2)• Video Q&A with MS Tech Evangelist Frank La Vigne• Founder/Admin of FB groups: Construct 2, Xbox One & Unity Indie
Devs• Attended ID@Seattle, Microsoft’s ID@Xbox summit
2014 • Public Speaking on Indie Game Development• Joined Microsoft as a Technical Evangelist• Attended ID@Chicago
Video: http://youtu.be/lRjrQPvVOpo
Official Xbox Magazine
Source: Official Xbox Magazine, March 2014, Page 65
`
Tools & Technologies
Tip: Get free dev software via BizSpark!http://aka.ms/dcmeetup201406 http://aka.ms/PhillyBizSpark
How This Presentation Was Put Together
Derived from Beginner's Guide to Construct 2 originally published by Ashley
Concepts
Steps
Step-by-Step
Screenshots, Grouped
into Concepts
Get pptx file and images from: http://WakeUpAndCode.com/downloads
1. Going Multiplatform2. Tiled Backgrounds3. Layers and Locks4. Mouse and Keyboard
Support5. Sprites and Game
Characters6. Adding NPCs7. Other Game Objects8. Organizing Your Layout9. Moving the Player10. Adding Behaviors11. Moving NPCs12. Accepting User Input13. Spawning Other Objects
Construct 2 Concepts14. Image Points15. Collision Detection16. Basic AI 17. Improved AI18. Instance Variables19. Affecting NPC Health20. Global Variables21. Adding a HUD22. Displaying Text23. Updating the HUD24. Spawning NPCs25. Destroying the Player
Construct 2 Basics
Getting Started: Step 2
Run it!
Getting Started: Step 3
ClickFile New
Getting Started: Step 4
Filter
ScrollUpOrDown
Open!
Getting Started: Step 5Toolbar Projects/Layers
ObjectsLayoutProperties
Tabs for Layouts & Event Sheets
Getting Started: Step 6
ClickFile Save
Getting Started: Step 7
Save!
EnterFile name
Getting Started: Done!
1. Going Multiplatform
Export Project: Step 1
ClickFile Export project…
• Choose a platform…
Export Project: Step 2
Export Project: Step 3• Publish anywhere…
2. Tiled Backgrounds
Add a Tiled Background: Step 1
Right-ClickInside Layout
Add a Tiled Background: Step 2
Select“Tiled Background”
then
Click Insert
Add a Tiled Background: Step 3
Click inside Layout
Add a Tiled Background: Step 4
ClickOpenicon
to load an image
Add a Tiled Background: Step 5
Select bg.png from theimages folder
NOTE: this may look different on your computer
Open!
Add a Tiled Background: Step 6
Close thispopup window
Add a Tiled Background: Step 7
Notice the extra space?
BUT FIRST… KNOW YOUR X and Y!
Graphs in Math class Graphs in Computer Graphics
Add a Tiled Background: Step 8
Update:
Position: • X = 0• Y = 0
Size:• Width = 1280• Height = 1024
Add a Tiled Background: Step 9
Update:
Size:• Width = 1280• Height = 1024
Select Layout 1
Add a Tiled Background: Step 10
Zoom Out:
• Ctrl + Scroll
Add a Tiled Background: Step 11
Zoom To 100%:
• Ctrl + 0 (zero)
Add a Tiled Background: Done!
3.Layers and Locks
Add Layers: Step 1
Click the Layers tab
Add Layers: Step 2
Click the Edit icon(pencil)
to rename Layer 0
Add Layers: Step 3
Enter“Background”
Add Layers: Step 4
Lock it!(lock symbol)
Add Layers: Step 5
Add a new layer(plus sign)
Add Layers: Step 6
Click the Edit icon(pencil)
to rename
new layer
Add Layers: Step 7
Enter“Main”
Add Layers: Done!
4. Mouse and Keyboard Support
Add Hidden Objects: Step 1
Make sureMain layeris selected
Add Hidden Objects: Step 2
Right-click to insert new object
Add Hidden Objects: Step 3
Select“Mouse”
then
Click Insert
Add Hidden Objects: Step 4
Right-click *again* to insert another object
Add Hidden Objects: Step 5
Select“Keyboard”
then
Click Insert
Add Hidden Objects: Done!
Noticeboth
Keyboardand
Mousehere
5. Sprites and Game Characters
Add Player to Game: Step 1
Right-click to insert new object
Add Player to Game: Step 2
Select“Sprite”
then
Click Insert
Add Player to Game: Step 3
Click inside Layout
Add Player to Game: Step 4
ClickOpenicon
to load an image
Add Player to Game: Step 5
Select player.png
from theimages folder
NOTE: this may look different on your computerOpen!
Add Player to Game: Step 6
Close thispopup window
Add Player to Game: Done!
6. Adding NPCsi.e. non-playable characters
Add Monster to Game: Step 1
Right-click to insert new object
Add Monster to Game: Step 2
Select“Sprite”
then
Click Insert
Add Monster to Game: Step 3
Click inside Layout
Add Monster to Game: Step 4
ClickOpenicon
to load an image
Add Monster to Game: Step 5
Select monster.png
from theimages folder
NOTE: this may look different on your computerOpen!
Add Monster to Game: Step 6
Close thispopup window
Add Monster to Game: Done!
7. Other Game Objectse.g. bullets and explosions
Add Objects to Game: Step 1
Right-click to insert new object
Add Objects to Game: Step 2
Select“Sprite”
then
Click Insert
Add Objects to Game: Step 3
Click inside Layout
Add Objects to Game: Step 4
ClickOpenicon
to load an image
Add Objects to Game: Step 5
Select bullet.png from the
images folder
NOTE: this may look different on your computerOpen!
Add Objects to Game: Step 6
Close thispopup window
Add Objects to Game: Step 7
Right-click to insert new object
Add Objects to Game: Step 8
Select“Sprite”
then
Click Insert
Add Objects to Game: Step 9
Click inside Layout
Add Objects to Game: Step 10
ClickOpenicon
to load an image
Add Objects to Game: Step 11
Select explode.png
from theimages folder
NOTE: this may look different on your computerOpen!
Add Objects to Game: Step 12
Close thispopup window
Add Objects to Game: Done!
8. Organizing Your Layout
Organize Your Layout: Step 1
Right-click to Rename
each sprite
Organize Your Layout: Step 2
Name them:• Player• Monster• Bullet• Explosion
Bonus Step: Update Blend Mode
Change Blend Modeto Additive
Organize Your Layout: Step 3
Zoom Out:
• Ctrl + Scroll
Organize Your Layout: Step 4
Move thebullet andexplosion
outside theLayout
Organize Your Layout: Done!
9. Moving the Player
Move The Player: Step 1
Select Player
Move The Player: Step 2
Click
Move The Player: Step 3
Click Add New(plus sign)
BUT FIRST… KNOW YOUR MOVEMENTS!
ScrollUpOrDown
Move The Player: Step 4
Select“8 Direction”
then
Click Add
Move The Player: Step 5
Click Again
Move The Player: Step 6
Click Add New(plus sign) again
Move The Player: Step 7
Select“Scroll To”
then
Click Add
Move The Player: Step 8
Click Add New(plus sign) again
Move The Player: Step 9
Select“Bound Tolayout”
then
Click Add
Move The Player: Step 10
Closepopup
Move The Player: Done!
10. Adding Behaviors
Add Behaviors: Step 1
Select Bullet
Add Behaviors: Step 2
Click
Add Behaviors: Step 3
Click Add New(plus sign)
Add Behaviors: Step 4
Select“Bullet”
then
Click Add
Add Behaviors: Step 5
Click Add New(plus sign) again
Add Behaviors: Step 6
Select“Destroyoutside layout”
then
Click Add
Add Behaviors: Step 7
Closepopup
Add Behaviors: Step 8
Select Explosion
Add Behaviors: Step 9
Click
Add Behaviors: Step 10
Click Add New(plus sign)
Add Behaviors: Step 11
Select“Fade”
then
Click Add
Add Behaviors: Step 12
Closepopup
Add Behaviors: Step 13
Update BulletSpeed = 600
Update ExplosionFade out time = 0.5
Add Behaviors: Done!
11. Moving NPCsi.e. non-playable characters
Move Monsters: Step 1
Select Monster
Move Monsters: Step 2
Click
Move Monsters: Step 3
Click Add New(plus sign)
Move Monsters: Step 4
Select“Bullet”
then
Click Add
Move Monsters: Step 5
Closepopup
Move Monsters: Step 6
Update Monster’s Bullet BehaviorSpeed = 80
Move Monsters: Step 7
Select Monster
Ctrl-Click and Dragto create more!
Move Monsters: Done!
12. Accepting User Input
Add Mouse Event: Step 1
Add events to theEvent Sheet
BUT FIRST… KNOW ABOUT EVENTS!
ObjectCondition
Event
An “Event” happens
when a Condition is True
for an Object
Add Mouse Event: Step 2
Right-Click, then Add
Event
Add Mouse Event: Step 3
Select “System”
then
Next!
Add Mouse Event: Step 4
Select “Every tick”
then
Done!
Add Mouse Event: Step 5
Click to Add Action
Add Mouse Event: Step 6
Select “Player”
then
Next!
Add Mouse Event: Step 7
Select “Set angle toward position”then
Next!
Add Mouse Event: Step 8
Enter Parameters• X = Mouse.X• Y = Mouse.Y
Done!
Add Mouse Event: Done!
13. Spawning Other Objectse.g. Bullets
Shoot Bullets: Step 1
Click to Add Event
Shoot Bullets: Step 2
Select “Mouse”
then
Next!
Shoot Bullets: Step 3
Select “On click”
then
Next!
Shoot Bullets: Step 4
Done!
Shoot Bullets: Step 5
Click to Add Action
Shoot Bullets: Step 6
Select “Player”
then
Next!
Shoot Bullets: Step 7
Select “Spawn another object”then
Next!
Shoot Bullets: Step 8
Click to Choose
Shoot Bullets: Step 9
Select “Bullet”
then
OK!
Shoot Bullets: Step 10
Done!
Enter• Layer = 1• Image point = 0
Shoot Bullets: Done!
14. Image Points
Fix Bullets: Step 1
Right-ClickPlayerthenEdit animations
Fix Bullets: Step 2
Click to Set origin and image
points
Fix Bullets: Step 3
Click to add
Fix Bullets: Step 4
Click infront of gun
Then, close popup
Fix Bullets: Step 5
Right-ClickSpawnthenClick Edit
Fix Bullets: Step 6
Done!
Update• Image point = 1
15. Collision Detection
Destroy Monsters: Step 1
Click to Add Event
Destroy Monsters: Step 2
Select “Bullet”
then
Next!
Destroy Monsters: Step 3
Select “On collision with another object”then
Next!
Destroy Monsters: Step 4
Click to choose
Destroy Monsters: Step 5
Select “Monster”
then
OK!
Destroy Monsters: Step 6
Done!
Destroy Monsters: Step 7
Click to Add Action
Destroy Monsters: Step 8
Select “Monster”
then
Next!
Destroy Monsters: Step 9
Select “Destroy”then
Done!
Destroy Monsters: Step 10
Click to Add Action
Destroy Monsters: Step 11
Select “Bullet”
then
Next!
Destroy Monsters: Step 12
Select “Spawn another object”then
Next!
Destroy Monsters: Step 13
Click to Choose
Destroy Monsters: Step 14
Select “Explosion”
then
OK!
Destroy Monsters: Step 15
Done!
Enter• Layer = 1• Image point = 0
Destroy Monsters: Step 16
Click to Add Action
Destroy Monsters: Step 17
Select “Bullet”
then
Next!
Destroy Monsters: Step 18
Select “Destroy”then
Done!
Destroy Monsters: Done!
16. Basic AI e.g. enemy placement
Randomize Monsters: Step 1
Go to yourEvent Sheet
Randomize Monsters: Step 1
Click to Add Event
Randomize Monsters: Step 3
Select “System”
then
Next!
Randomize Monsters: Step 4
Select “On start of layout”
then
Done!
Randomize Monsters: Step 5
Click to Add Action
Randomize Monsters: Step 6
Select “Monster”
then
Next!
Randomize Monsters: Step 7
Select “Set angle”then
Next!
Randomize Monsters: Step 8
Enter Angle• random(360)
Done!
Randomize Monsters: Done!
x
17. Improved AI e.g. follow the player
Improve Monsters: Step 1
Go to yourEvent Sheet
Improve Monsters: Step 2
Click to Add Event
Improve Monsters: Step 3
Select “Monster”
then
Next!
Improve Monsters: Step 4
Select “Is outside
layout”then
Done!
Improve Monsters: Step 5
Click to Add Action
Improve Monsters: Step 6
Select “Monster”
then
Next!
Improve Monsters: Step 7
Select “Set angletowards position”then
Next!
Improve Monsters: Step 8
Enter paramters• X = Player.X• Y = Player.Y
Done!
Improve Monsters: Done!
18. Instance Variablese.g. NPC Health
Add Health: Step 1
Select Monster
Add Health: Step 2
Click
Add Health: Step 3
Click Add New(plus sign)
Add Health: Step 4
Enter the following:• Name: health• Type: Number• Initial Value = 5• Description (optional)
OK!
Add Health: Done!
Update Health: Step 1
Right-clickMonster – Destroy
then
click Replace action
Update Health: Step 2
Select “Monster”
then
Next!
Update Health: Step 3
Select “Subtract from”then
Next!
Update Health: Step 4
Enter• Value = 1
“Monster”“Monster”
Done!
Update Health: Done!
19. Affecting NPC Healthi.e. destroying monsters!
Destroy Monsters: Step 1
Go to yourEvent Sheet
Destroy Monsters: Step 2
Click to Add Event
Destroy Monsters: Step 3
Select “Monster”
then
Next!
Destroy Monsters: Step 4
Select “Compare instance variable”then
Next!
Destroy Monsters: Step 5
Done!
Enter:• Comparison: ≤ Less or equal• Value = 0
Destroy Monsters: Step 6
Click to Add Action
Destroy Monsters: Step 7
Select “Monster”
then
Next!
Destroy Monsters: Step 8
Select “Spawn another object”then
Next!
Destroy Monsters: Step 9
<click to choose>
Destroy Monsters: Step 10
Select “Explosion”
then
OK!
Destroy Monsters: Step 11
Done!
Enter:• Layer = 1• Image point = 0
Destroy Monsters: Step 12
Click to Add Action
Destroy Monsters: Step 13
Select “Monster”
then
Next!
Destroy Monsters: Step 14
Select “Destroy”then
Done!
Destroy Monsters: Done!
20. Global Variablese.g. player score
Add Score: Step 1
Right-click, then click Add global variable
Add Score: Step 2
Enter:• Name: Score• Type: Number• Initial value: 0• Description (optional)• Constant?
OK!
Add Score: Step 3
Scroll to the topto see it!
Add Score: Step 4
Click Add action
Scroll back to the bottom
Add Score: Step 5
Select “System”
then
Next!
Add Score: Step 6
Select “Add to”
then
Next!
Add Score: Step 7
Enter:• Value = 1
Done!
Add Score: Done!
21. Adding a HUD i.e. Heads-Up Display
Add HUD Layer: Step 1
ClickLayers
Add HUD Layer: Step 2
Add a new layer(plus sign)
Add HUD Layer: Step 3
Right-clickthen
click Rename
Add HUD Layer: Step 4
Changethe nameto “HUD”
Add HUD Layer: Step 5
Let’s updatethe Parallax
values…
BUT FIRST… WHAT IS PARALLAX?
When the background layers
scroll separately
Source: Super Mario Bros, from Nintendohttp://wakeupandcode.com/c2/parallax.html
Add HUD Layer: Step 6
Set the HUD’sParallax to
0, 0
Add HUD Layer: Done!
22. Displaying Texte.g. player score
Display Text: Step 1
then Insert new object
Right-clicktop left
of Layout 1
Display Text: Step 2
Select“Text”
then
Click Insert
Display Text: Step 3
Click to placeText object(HUD layer)
Display Text: Step 4
NoticeText object
Display Text: Step 5
Change Properties
• Font• Style: Bold Italic• Size: 24
• Color: Yellow
Display Text: Done!
23. Updating the HUDe.g. showing player score
BUT FIRST… HOW DO YOU COMBINE TEXT?
"Score: " & ScoreString Variable
&(ampersand)
spacequote quotetext
Score: 100
WHAT WILL IT LOOK LIKE IN THE GAME?
"Score: " & Scoredisplays
Display Score: Step 1
ClickAdd action
For System, Every tick
Display Score: Step 2
Select “Text”then
Next!
Display Score: Step 3
Select “text”then
Next!
Display Score: Step 4
Enter:• “Score: “ & Score
Done!
Display Score: Done!
24. Spawning NPCsi.e. more monsters
Spawn Monsters: Step 1
Click to Add Event
Spawn Monsters: Step 2
Select “System”
then
Next!
Spawn Monsters: Step 3
Select “Every X seconds”then
Next!
Spawn Monsters: Step 4
Done!
Enter:• Interval (seconds): 3
Spawn Monsters: Step 5
Click to Add Action
Spawn Monsters: Step 6
Select “System”
then
Next!
Spawn Monsters: Step 7
Select “Create object”then
Next!
Spawn Monsters: Step 8
<click to choose>
Spawn Monsters: Step 9
Select “Monster”
then
OK!
Spawn Monsters: Step 10
Done!
Enter:• Layer = 1• X = 1400• Y = random(1024)
Spawn Monsters: Done!
25. Destroying the Player
Destroy Player: Step 1
Click to Add Event
Destroy Player: Step 2
Select “Monster”
then
Next!
Destroy Player: Step 3
Select “On collision with another object”then
Next!
Destroy Player: Step 4
<click to choose>
Destroy Player: Step 5
Select “Player”
then
OK!
Destroy Player: Step 6
Done!
Destroy Player: Step 7
Click to Add Action
Destroy Player: Step 8
Select “Player”
then
Next!
Destroy Player: Step 9
Select “Destroy”then
Done!
Destroy Player: Done!
Wrap-Up
Construct 2 Forum & FB group
FB: https://www.facebook.com/groups/construct2devs/
Forum: https://www.scirra.com/forum/
