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/ashley

1. Windows 8  Windows Phone 8  Web  Mobile  … and more!
@shahedC
WakeUpAndCode.com

2. Intro
> Construct 2 Basics
> Characters and Objects
> Bringing It All Together
Wrap-Up

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

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

5. Source: Official Xbox Magazine, March 2014, Page 65
`

6. Tools & Technologies
http://aka.ms/dcmeetup201406 http://aka.ms/PhillyBizSpark

7. Source: https://www.scirra.com/construct2

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

12. https://www.scirra.com/
Download!

13. Run it!

14. Click
File  New

15. Filter
Scroll
Up
Or
Down
Open!

16. Toolbar Projects/Layers
ObjectsLayoutProperties
Tabs for Layouts & Event Sheets

17. Click
File  Save

18. Save!
Enter
File name

21. Click
File  Export project…

25. Right-Click
Inside Layout

26. Select
“Tiled Background”
then
Click Insert

27. Click inside
Layout

28. Click
Open
icon
to load an image

29. Select
bg.png from the
images folder
NOTE: this may look different on your computer
Open!

30. Close this
popup window

31. Notice the extra space?

32. Graphs in Math class Graphs in Computer Graphics

33. Update:
Position:
• X = 0
• Y = 0
Size:
• Width = 1280
• Height = 1024

34. Update:
Size:
• Width = 1280
• Height = 1024
Select Layout 1

35. Zoom Out:
• Ctrl + Scroll

36. Zoom To 100%:
• Ctrl + 0 (zero)

39. Click the
Layers tab

40. Click the
Edit icon
(pencil)
to
rename
Layer 0

41. Enter
“Background”

42. Lock it!
(lock symbol)

43. Add a
new layer
(plus sign)

44. Click the
Edit icon
(pencil)
to
rename
new layer

45. Enter
“Main”

48. Make sure
Main layer
is selected

49. Right-click to
insert new object

50. Select
“Mouse”
then
Click Insert

51. Right-click *again* to
insert another object

52. Select
“Keyboard”
then
Click Insert

53. Notice
both
Keyboard
and
Mouse
here

55. Right-click to
insert new object

56. Select
“Sprite”
then
Click Insert

57. Click inside
Layout

58. Click
Open
icon
to load an image

59. Select
player.png
from the
images folder
NOTE: this may look different on your computer
Open!

60. Close this
popup window

63. Right-click to
insert new object

64. Select
“Sprite”
then
Click Insert

65. Click inside
Layout

66. Click
Open
icon
to load an image

67. Select
monster.png
from the
images folder
NOTE: this may look different on your computer
Open!

68. Close this
popup window

71. Right-click to
insert new object

72. Select
“Sprite”
then
Click Insert

73. Click inside Layout

74. Click
Open
icon
to load an image

75. Select
bullet.png
from the
images folder
NOTE: this may look different on your computer
Open!

76. Close this
popup window

77. Right-click to
insert new object

78. Select
“Sprite”
then
Click Insert

79. Click inside Layout

80. Click
Open
icon
to load an image

81. Select
explode.png
from the
images folder
NOTE: this may look different on your computer
Open!

82. Close this
popup window

85. Right-click to
Rename
each sprite

86. Name them:
• Player
• Monster
• Bullet
• Explosion

87. Change Blend Mode
to Additive

88. Zoom Out:
• Ctrl + Scroll

89. Move the
bullet and
explosion
outside the
Layout

92. Select Player

93. Click

94. Click Add New
(plus sign)

95. Scroll
Up
Or
Down

96. Select
“8 Direction”
then
Click Add

97. Click
Again

98. Click Add New
(plus sign)
again

99. Select
“Scroll To”
then
Click Add

100. Click Add New
(plus sign)
again

101. Select
“Bound To
layout”
then
Click Add

102. Close
popup

105. Select Bullet

106. Click

107. Click Add New
(plus sign)

108. Select
“Bullet”
then
Click Add

109. Click Add New
(plus sign)
again

110. Select
“Destroy
outside layout”
then
Click Add

111. Close
popup

112. Select
Explosion

113. Click

114. Click Add New
(plus sign)

115. Select
“Fade”
then
Click Add

116. Close
popup

117. Update Bullet
Speed = 600
Update Explosion
Fade out time = 0.5

120. Select
Monster

121. Click

122. Click Add New
(plus sign)

123. Select
“Bullet”
then
Click Add

124. Close
popup

125. Update Monster’s
Bullet Behavior
Speed = 80

126. Select Monster
Ctrl-Click and Drag
to create more!

129. Add events to the
Event Sheet

130. Object
Condition
Event
An “Event” happens
when a Condition
is True
for an Object

131. Right-Click, then
Add
Event

132. Select
“System”
then
Next!

133. Select
“Every tick”
then
Done!

134. Click to
Add Action

135. Select
“Player”
then
Next!

136. Select
“Set angle toward position”
then
Next!

137. Enter Parameters
• X = Mouse.X
• Y = Mouse.Y
Done!

140. Click to Add Event

141. Select
“Mouse”
then
Next!

142. Select
“On click”
then
Next!

143. Done!

144. Click to Add Action

145. Select
“Player”
then
Next!

146. Select
“Spawn another object”
then
Next!

147. Click to Choose

148. Select
“Bullet”
then
OK!

149. Done!
Enter
• Layer = 1
• Image point = 0

152. Right-Click
Player
then
Edit animations

153. Click to
Set origin and image points

154. Click to add

155. Click in
front of gun
Then, close
popup

156. Right-Click
Spawn
then
Click Edit

157. Done!
Update
• Image point = 1

159. Click to Add Event

160. Select
“Bullet”
then
Next!

161. Select
“On collision with another object”
then
Next!

162. Click to choose

163. Select
“Monster”
then
OK!

164. Done!

165. Click to Add Action

166. Select
“Monster”
then
Next!

167. Select
“Destroy”
then
Done!

168. Click to Add Action

169. Select
“Bullet”
then
Next!

170. Select
“Spawn another object”
then
Next!

171. Click to Choose

172. Select
“Explosion”
then
OK!

173. Done!
Enter
• Layer = 1
• Image point = 0

174. Click to Add Action

175. Select
“Bullet”
then
Next!

176. Select
“Destroy”
then
Done!

179. Go to your
Event Sheet

180. Click to Add Event

181. Select
“System”
then
Next!

182. Select
“On start
of layout”
then
Done!

183. Click to Add Action

184. Select
“Monster”
then
Next!

185. Select
“Set angle”
then
Next!

186. Enter Angle
• random(360)
Done!

189. Go to your
Event Sheet

190. Click to Add Event

191. Select
“Monster”
then
Next!

192. Select
“Is outside
layout”
then
Done!

193. Click to Add Action

194. Select
“Monster”
then
Next!

195. Select
“Set angle
towards position”
then
Next!

196. Enter paramters
• X = Player.X
• Y = Player.Y
Done!

199. Select Monster

200. Click

201. Click Add New
(plus sign)

202. Enter the following:
• Name: health
• Type: Number
• Initial Value = 5
• Description (optional)
OK!

204. Right-click
Monster – Destroy
then
click
Replace action

205. Select
“Monster”
then
Next!

206. Select
“Subtract from”
then
Next!

207. Enter
• Value = 1
“Monster”“Monster”
Done!

210. Go to your
Event Sheet

211. Click to Add Event

212. Select
“Monster”
then
Next!

213. Select
“Compare instance variable”
then
Next!

214. Done!
Enter:
• Comparison: ≤ Less or equal
• Value = 0

215. Click to Add Action

216. Select
“Monster”
then
Next!

217. Select
“Spawn another object”
then
Next!

218. <click to choose>

219. Select
“Explosion”
then
OK!

220. Done!
Enter:
• Layer = 1
• Image point = 0

221. Click to Add Action

222. Select
“Monster”
then
Next!

223. Select
“Destroy”
then
Done!

226. Right-click,
then click
Add global variable

227. Enter:
• Name: Score
• Type: Number
• Initial value: 0
• Description (optional)
• Constant?
OK!

228. Scroll to the top
to see it!

229. Click Add action
Scroll back
to the bottom

230. Select
“System”
then
Next!

231. Select
“Add to”
then
Next!

232. Enter:
• Value = 1
Done!

235. Click
Layers

236. Add a
new layer
(plus sign)

237. Right-click
then
click Rename

238. Change
the name
to “HUD”

239. Let’s update
the Parallax
values…

240. When the
background layers
scroll separately
Source: Super Mario Bros, from Nintendohttp://wakeupandcode.com/c2/parallax.html

241. Set the HUD’s
Parallax to
0, 0

244. then
Insert new object
Right-click
top left
of Layout 1

245. Select
“Text”
then
Click Insert

246. Click to place
Text object
(HUD layer)

247. Notice
Text
object

248. Change Properties
• Font
• Style: Bold Italic
• Size: 24
• Color: Yellow

251. "Score: " & Score
String Variable
&
(ampersand)
spacequote quotetext

252. Score: 100
"Score: " & Score
displays

253. Click
Add action
For System,
Every tick

254. Select
“Text”
then
Next!

255. Select
“text”
then
Next!

256. Enter:
• “Score: “ & Score
Done!

259. Click to Add Event

260. Select
“System”
then
Next!

261. Select
“Every X seconds”
then
Next!

262. Done!
Enter:
• Interval (seconds): 3

263. Click to Add Action

264. Select
“System”
then
Next!

265. Select
“Create object”
then
Next!

266. <click to choose>

267. Select
“Monster”
then
OK!

268. Done!
Enter:
• Layer = 1
• X = 1400
• Y = random(1024)

271. Click to Add Event

272. Select
“Monster”
then
Next!

273. Select
“On collision with another object”
then
Next!

274. <click to choose>

275. Select
“Player”
then
OK!

276. Done!

277. Click to Add Action

278. Select
“Player”
then
Next!

279. Select
“Destroy”
then
Done!

282. Online: http://www.scirra.com/tutorials

283. FB: https://www.facebook.com/groups/construct2devs/
Forum: https://www.scirra.com/forum/

284. Email: shchowd@microsoft.com  Twitter: @shahedC