1. Construct 2 Game Development: Flapping Bird
9/20/2019
Construct 2 Game Development: Flapping Bird
Windows 8  Windows Phone 8  Web  Mobile  … and more!
By Shahed Chowdhuri
Sr. Technical Evangelist
Title Page: Intro to Indie Game Development Windows  Web  Xbox  Mobile
By Shahed Chowdhuri
Technical Evangelist
Blog: WakeUpAndCode.com
WakeUpAndCode.com
@shahedC
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

2. Getting Started

3. Getting Started: Step 1
Download!

4. Getting Started: Step 2
Run it!

5. Getting Started: Step 3
Click
File  New

6. Getting Started: Step 4
Filter
Scroll Up Or
Down
Open!

7. Getting Started: Step 5 Toolbar Projects/Layers
Tabs for Layouts & Event Sheets
Properties
Layout
Objects

8. Getting Started: Step 6
Click
File  Save

9. Getting Started: Step 7
Enter
File name
Save!

10. Getting Started: Done!

11. Prepare Your Layouts

12. Prepare Your Layouts: Step 1
Right-Click to
Rename Layout

13. Prepare Your Layouts: Step 2
Enter “Start”

14. Prepare Your Layouts: Step 3
Right-click
Layouts folder
to Add layout

15. Prepare Your Layouts: Step 4
Add event sheet

16. Prepare Your Layouts: Step 5
Right-Click
new Layout
to Rename it

17. Prepare Your Layouts: Step 6
Enter “Game”

18. Prepare Your Layouts: Step 7
Change Layout Size
for the “Game” Layer
Layout Size:
Width: 400
Height: 500

19. Prepare Your Layouts: Step 8
Change Layout Size
for the “Start” Layer
Layout Size:
Width: 400
Height: 500

20. Prepare Your Layouts: Step 9
Select project

21. Prepare Your Layouts: Step 10
Update project
properties
Window Size:
Width: 400
Height: 500
Fullscreen in browser: Off

22. Prepare Your Layouts: Done!

23. Add Play Button

24. Add Play Button: Step 1
Go to
“Start” screen

25. Add Play Button: Step 2
Right-click, then
Insert New Object

26. Add Play Button: Step 3
Select
“Button”
Click “Insert”

27. Add Play Button: Step 4
Click
anywhere

28. Add Play Button: Step 5
Update the Text

29. Add Play Button: Step 6
Enter
“Play”

30. Add Play Button: Done!

31. Add Button Event

32. Add Button Event: Step 1
Go to “Event sheet 1”
for “Start” layout

33. Add Button Event: Step 2
Click “Add event”

34. Add Button Event: Step 3
Select
“Button”
Click “Next”

35. Add Button Event: Step 4
Select
“On clicked”
Click “Done”

36. Add Button Event: Step 5
Click “Add action”

37. Add Button Event: Step 6
Select
“System”
Click “Next”

38. Add Button Event: Step 7
Select
“Go to layout”
Click “Next”

39. Add Button Event: Step 8
Click “Done”

40. Add Button Event: Done!

41. Add Game Graphics

42. Add Game Graphics: Step 1
Go to the
“Game”
layout

43. Add Game Graphics: Step 2
Drag in these 4 images
image one by one

44. Add Game Graphics: Step 3
Arrange
them
like this.

45. Add Game Graphics: Step 4
Top-left
outside
Near
left
edge

46. Add Game Graphics: Done!

47. Add Tiled Background

48. Add Tiled Background: Step 1
Right-click
then
Insert new
object

49. Add Tiled Background: Step 2
Select
“Tiled
Background”
Click “Insert”

50. Add Tiled Background: Step 3
Click
near
the
bottom

51. Add Tiled Background: Step 4
Load
an image

52. Add Tiled Background: Step 5
Select
“floor.png”
Click “Open”

53. Add Tiled Background: Step 6
Close popup

54. Add Tiled Background: Step 7
Size
Width: 1000
Height: 28
Drag to
lower left

55. Add Tiled Background: Done!

56. Add Floor

57. Add Floor: Step 1
Right-click
again
then
Insert new
object

58. Add Floor: Step 2
Select
“Tiled
Background”
Click “Insert”

59. Add Floor: Step 3
Click
above
ground

60. Add Floor: Step 4
Load
an image

61. Add Floor: Step 5
Select
“floor2.png”
Click “Open”

62. Add Floor: Step 6
Close popup

63. Add Floor: Step 7
Size
Width: 1000
Height: 19
Drag above
ground

64. Add Floor: Done!

65. Add Movement

66. Add Movement: Step 1
Select
the bird

67. Add Movement: Step 2
Click
Behaviors

68. Add Movement: Step 3
Click to
“Add new”

69. Add Movement: Step 4
Select
“Platform”
Click “Add”

70. Add Movement: Step 5
Close popup

71. Add Movement: Step 6 Reduce Max Speed to 0 (prevents left-right

72. Add Globals

73. Add Globals: Step 1
Double-click
“Event sheet 2”

74. Add Globals: Step 2
Right-click, then
“Add global variable”

75. Add New Global Variable 3 times
Add Globals: Step 3
Add New Global Variable 3 times
Name: SECONDSPEROBSTACLE
Type: Number
Initial Value: 1
Constant: [checked]
Name: JUMPSTRENGTH
Type: Number
Initial Value: 500
Constant: [checked]
Name: SCROLLSPEED
Type: Number
Initial Value: 1
Constant: [checked]

76. Also, add another global variable for Score
Add Globals: Step 4
Also, add another global variable for Score
Name: Score
Type: Number
Initial Value: 0
Constant: [NOT checked]

77. Add Globals: Done!

78. Add Touch Support

79. Add Touch Support: Step 1
Right-click
then
Insert new
object

80. Add Touch Support: Step 2
Select
“Touch”
Click “Insert”

81. Add Touch Support: Step 3
Verify
that
“Touch”
has been
added

82. Add Touch Input

83. Add Touch Input: Step 1
Stay on
“Event sheet 2”

84. Add Touch Input: Step 2
Click “Add event”

85. Add Touch Input: Step 3
Select
“Touch”
Click “Next”

86. Add Touch Input: Step 4
Select
“On any
touch start”
Click “Done”

87. Add Touch Input: Step 5
Click “Add action”

88. Add Touch Input: Step 6
Select
“bird”
Click “Next”

89. Add Touch Input: Step 7
Select
“Set vector Y”
Click “Next”

90. Add Touch Input: Step 8
Enter:
Vector Y: -JUMPSTRENGTH
Click “Done”

91. Add Touch Input: Step 9
Click “Add action”

92. Add Touch Input: Step 10
Select
“bird”
Click “Next”

93. Add Touch Input: Step 11
Select
“Set angle”
Click “Next”

94. Add Touch Input: Step 12
Enter:
Angle: 320
Click “Done”

95. Add Touch Input: Done!

96. Rotate Bird

97. Rotate Bird: Step 1
Click “Add event”

98. Rotate Bird: Step 2
Select
“System”
Click “Next”

99. Rotate Bird: Step 3
Select
“Every tick”
Click “Done”

100. Rotate Bird: Step 4
Click “Add action”

101. Rotate Bird: Step 5
Select
“bird”
Click “Next”

102. Rotate Bird: Step 6
Select
“Rotate
clockwise”
Click “Next”

103. Rotate Bird: Step 7 Enter: Degrees: 60 * dt Click “Done”
(dt means delta time)

104. Rotate Bird: Done!

105. Add Collisions

106. Add Collisions: Step 1
Click “Add event”

107. Add Collisions: Step 2
Select
“bird”
Click “Next”

108. Add Collisions: Step 3 Select “Is overlapping another object”
Click “Next”

109. <click to choose>
Add Collisions: Step 4
<click to choose>

110. Add Collisions: Step 5
Select
“TiledBackground2”
Click “OK”

111. Add Collisions: Step 6
Click “Done”

112. Add Collisions: Step 7
Click “Add action”

113. Add Collisions: Step 8
Select
“System”
Click “Next”

114. Add Collisions: Step 9
Select
“Go to layout”
Click “Next”

115. Add Collisions: Step 10
Select “Start” Layout
Click “Done”

116. Repeat previous steps for pipe top and bottom
Add Collisions: Step 11…
Repeat previous steps for pipe top and bottom

117. Add Collisions: Done!

118. Enforce Boundary

119. Enforce Boundary: Step 1
Click “Add event”

120. Enforce Boundary: Step 2
Select
“bird”
Click “Next”

121. Enforce Boundary: Step 3
Select
“Is outside
layout”
Click “Done”

122. Enforce Boundary: Step 4
Click “Add action”

123. Enforce Boundary: Step 5
Select
“System”
Click “Next”

124. Enforce Boundary: Step 6
Select
“Go to layout”
Click “Next”

125. Enforce Boundary: Step 7
Select “Start” Layout
Click “Done”

126. Enforce Boundary: Done!

127. Repeat Background

128. Repeat Background: Step 1
Click “Add event”

129. Repeat Background: Step 2
Select
“TiledBackground”
Click “Next”

130. Repeat Background: Step 3
Select
“Compare X”
Click “Next”

131. Repeat Background: Step 4
Select/Enter:
Comparison: ≤ Less or Equal
X co-ordinate: -560
Click “Done”

132. Repeat Background: Step 5
Click “Add action”

133. Repeat Background: Step 6
Select
“TiledBackground”
Click “Next”

134. Repeat Background: Step 7
Select
“Set X”
Click “Next”

135. Repeat Background: Step 8
Enter 0
Click “Done”

136. Repeat Background: Step 9…
Repeat previous steps for TileBackground2,
… but check for X ≤ -410

137. Repeat Background: Done!

138. Scroll Background

139. Scroll Background: Step 1
Click “Add event”

140. Scroll Background: Step 2
Select
“System”
Click “Next”

141. Scroll Background: Step 3
Select
“Every tick”
Click “Done”

142. Scroll Background: Step 4
Click “Add action”

143. Scroll Background: Step 5
Select
“pipebottom”
Click “Next”

144. Scroll Background: Step 7
Select
“Set X”
Click “Next”

145. Scroll Background: Step 8
Enter
pipebottom.X – SCROLLSPEED * dt
Click
“Done”

146. Scroll Background: Step 9…
Add similar actions for:
pipetop, TiledBackground, TileBackground2

147. Scroll Background: Done!
Hint: Set X to [object].X – SCROLLSPEED * dt

148. Create Pipes

149. Create Pipes: Step 1
Click “Add event”

150. Create Pipes: Step 2
Select
“System”
Click “Next”

151. Create Pipes: Step 3
Select
“Every X seconds”
Click “Next”

152. Create Pipes: Step 4
Enter:
Interval: SECONDSPEROBSTACLE
Click
“Done”

153. Create Pipes: Step 5
Click “Add action”

154. Create Pipes: Step 6
Select
“System”
Click “Next”

155. Create Pipes: Step 7
Select
“Create object”
Click “Next”

156. Create Pipes: Step 8 Click “Done” Select/Enter:
Object to create: pipetop
Layer: 0
X: 440
Y: random(50, -250)
Click
“Done”

157. Create Pipes: Step 9… Add similar action for pipebottom
… but use Y = TopPipe.Y + 750

158. Create Pipes: Done!

159. Add Instance Variable

160. Add Instance Variable: Step 1
Select
“pipebottom”

161. Add Instance Variable: Step 2
Click
Instance
variables

162. Add Instance Variable: Step 3
Click
“Add new”

163. Add Instance Variable: Step 4
Enter:
Name: Scored
Type: Boolean
Initial value: false
Description (optional)
Click “OK”

164. Add Instance Variable: Step 5
Close
popup

165. Add Instance Variable: Step 6
Click “Add action”

166. Add Instance Variable: Step 7
Select
“pipebottom”
Click “Next”

167. Add Instance Variable: Step 8
Select
“boolean”
Click “Next”

168. Add Instance Variable: Step 9
Click
“Done”
Select
Value: False

169. Add Instance Variable: Done!

170. Add Score TextBox

171. Add Score TextBox: Step 1
Right-click
then
Insert
new
object

172. Add Score TextBox: Step 2
Select
“Text”
Click “Insert”

173. Add Score TextBox: Step 3
Click inside
Layout
to place
TextBox

174. Add Score TextBox: Step 3
Rename to
“ScoreText”

175. Add Score TextBox: Step 4
Click “Add action”in Event Sheet 2

176. Add Score TextBox: Step 5
Select
“ScoreText”
Click “Next”

177. Add Score TextBox: Step 6
Select
“Move to top”
Click “Done”

178. Add Score TextBox: Done!

179. Add OnStart Events

180. Add OnStart Events: Step 1
Click “Add event”

181. Add OnStart Events: Step 2
Select
“System”
Click “Next”

182. Add OnStart Events: Step 3
Select
“On start of layout”
Click “Done”

183. Add OnStart Events: Step 4
Click “Add action”

184. Add OnStart Events: Step 5
Select
“ScoreText”
Click “Next”

185. Add OnStart Events: Step 6
Select
“Set text”
Click “Next”

186. Add OnStart Events: Step 8
Enter:
Text: 0
Click
“Done”

187. Add OnStart Events: Step 9…
Add more actions:
TiledBackground2: Set X to 0
TiledBackground: Set X to 0
System: Set Score to 0

188. Add OnStart Events: Done!

189. Destroy Pipes

190. Destroy Pipes: Step 1
Click “Add action”

191. Destroy Pipes: Step 2
Select
“pipetop”
Click “Next”

192. Destroy Pipes: Step 3
Select
“Destroy”
Click “Done”

193. for pipebottom to Destroy it
Destroy Pipes: Step 4…
Add a similar action
for pipebottom to Destroy it

194. Destroy Pipes: Done!

195. Initialize Bird

196. Initialize Bird: Step 1
Click “Add action”

197. Initialize Bird: Step 2
Select
“bird”
Click “Next”

198. Initialize Bird: Step 3
Select
“Set Vector Y”
Click “Next”

199. Initialize Bird: Step 4
Enter:
Vector Y: -JUMPSTRENGTH
Click
“Done”

200. Initialize Bird: Step 5
Click “Add action”

201. Initialize Bird: Step 6
Select
“bird”
Click “Next”

202. Initialize Bird: Step 7
Select
“Set angle”
Click “Next”

203. Initialize Bird: Step 8
Enter:
Angle: 320
Click
“Done”

204. Initialize Bird: Done!

205. Add Scoring Events

206. Add Scoring Events: Step 1
Click “Add event”

207. Add Scoring Events: Step 2
Select
“pipebottom”
Click “Next”

208. Add Scoring Events: Step 3
Select
“Compare X”
Click “Next”

209. Add Scoring Events: Step 4
Select/Enter:
Comparison: ≤ Less or equal
X co-ordinate: Bird.X
Click
“Done”

210. Add Scoring Events: Step 5
Click “Add action”

211. Add Scoring Events: Step 6
Select
“System”
Click “Next”

212. Add Scoring Events: Step 7
Select
“Add to”
Click “Next”

213. Add Scoring Events: Step 8
Click
“Done”
Select/Enter:
Variable: Score
Value: 1

214. Add Scoring Events: Step 9
Right-click, then
Add another condition (C)

215. Add Scoring Events: Step 10
Select
“pipebottom”
Click “Next”

216. Add Scoring Events: Step 11
Select
“Is boolean instance
Variable set”
Click “Next”

217. Add Scoring Events: Step 12
Click
“Done”
Select:
Instance variable: Scored

218. Add Scoring Events: Step 13
Click “Add action”

219. Add Scoring Events: Step 14
Select
“ScoreText”
Click “Next”

220. Add Scoring Events: Step 15
Select
“Set text”
Click “Next”

221. Create Pipes: Step 16
Click
“Done”
Enter:
Text: Score

222. Add Scoring Events: Step 17
Click “Add action”

223. Add Scoring Events: Step 19
Select
“pipebottom”
Click “Next”

224. Add Scoring Events: Step 20
Select
“Set boolean”
Click “Next”

225. Add Scoring Events: Step 16
Click
“Done”
Select/Enter:
Instance variable: Scored
Value: True

226. Add Scoring Events: Step 17
Right-click,
then
Invert

227. Add Scoring Events: Done!

228. (END of Flapping Bird tutorial)
Derived from ‘Make your own "Flappy Bird" game in 10 minutes’ originally published by Tom
Updated with enhancements from Flappy Bird template