Derived from ’Make your own “Flappy Bird” game in 10 minutes‘ originally published by Tom, it has been expanded into a full-featured game, by reverse-engineering the Flapping Bird template that ships with Construct 2, explaining how it was really made. * Original Tutorial: https://www.scirra.com/tutorials/857/flappy-birds-clone-in-10-minutes * Tom from Scirra: https://www.scirra.com/users/tom

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

2. Getting Started

3. Getting Started: Step 1
• https://www.scirra.com/ 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
ObjectsLayoutProperties
Tabs for Layouts & Event Sheets

8. Getting Started: Step 6
Click
File  Save

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

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
Click “Open”
Select
“floor.png”

53. Add Tiled Background: Step 6
Close popup

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

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
Click “Open”
Select
“floor2.png”

62. Add Floor: Step 6
Close popup

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

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
movement)

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 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: 300
• Constant: [checked]

76. 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
Click “Done”
Enter:
• Vector Y: -JUMPSTRENGTH

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
Click “Done”
Enter:
• Angle: 320

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
Click “Done”
Enter:
• Degrees: 60 * dt
(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. 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
Click “Done”Select “Start” Layout

116. 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
Click “Done”Select “Start” Layout

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
Click “Done”Select/Enter:
• Comparison: ≤ Less or Equal
• X co-ordinate: -560

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
Click “Done”Enter 0

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
Click
“Done”
Enter
pipebottom.X – SCROLLSPEED * dt

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
Click
“Done”
Enter:
• Interval: SECONDSPEROBSTACLE

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)

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
Click “Insert”
Select
“Text”

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
Click
“Done”
Enter:
• Text: 0

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. 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
Click
“Done”
Enter:
• Vector Y: -JUMPSTRENGTH

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
Click
“Done”
Enter:
• Angle: 320

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
Click
“Done”
Select/Enter:
• Comparison: ≤ Less or equal
• X co-ordinate: Bird.X

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