Preface |
|
xiii | |
Author |
|
xv | |
Chapter 1 Introduction |
|
1 | (6) |
|
|
1 | (1) |
|
1.2 Important Advancements |
|
|
2 | (1) |
|
1.3 Where Games Are Played |
|
|
3 | (1) |
|
1.4 Web Development in the Modern Day |
|
|
4 | (1) |
|
|
5 | (2) |
Chapter 2 State of HTML5 Games |
|
7 | (8) |
|
2.1 Growth of the Interactive Capabilities of a Web Browser |
|
|
7 | (3) |
|
2.2 Wide Selection of HTML5 Game Engines |
|
|
10 | (2) |
|
|
12 | (1) |
|
|
12 | (1) |
|
2.4 Basic Structure of an HTML5 Game Project |
|
|
13 | (2) |
Chapter 3 A Simple Game |
|
15 | (8) |
|
|
15 | (1) |
|
|
15 | (1) |
|
|
16 | (1) |
|
|
16 | (1) |
|
|
16 | (1) |
|
|
17 | (1) |
|
|
18 | (1) |
|
3.7.1 Setting Up the Player and Cat |
|
|
18 | (1) |
|
3.7.2 Adding the Score Text |
|
|
19 | (1) |
|
3.7.3 Setting Up the Arrow Keys |
|
|
19 | (1) |
|
3.8 Putting the Gameplay in the Update Phase |
|
|
19 | (2) |
|
|
21 | (1) |
|
|
22 | (1) |
Chapter 4 Workspace Setup |
|
23 | (20) |
|
|
25 | (1) |
|
|
25 | (1) |
|
|
25 | (3) |
|
4.2.1 Opening the Command Prompt |
|
|
26 | (1) |
|
|
26 | (1) |
|
|
26 | (1) |
|
4.2.2 Command Prompt Navigation |
|
|
26 | (5) |
|
|
26 | (1) |
|
4.2.2.2 Entering Commands |
|
|
27 | (1) |
|
4.2.2.3 Viewing Directory Content |
|
|
27 | (1) |
|
4.2.2.4 Changing Directories |
|
|
27 | (1) |
|
4.2.2.5 Quickly Opening a Folder in the Command Prompt |
|
|
27 | (1) |
|
4.2.2.6 Command Prompt Flags and Arguments |
|
|
27 | (1) |
|
4.2.2.7 Command Prompt Hints |
|
|
28 | (1) |
|
|
28 | (1) |
|
|
29 | (1) |
|
4.5 Installing Browserify |
|
|
30 | (1) |
|
|
31 | (1) |
|
|
32 | (1) |
|
4.7 Setting Up a Basic Project |
|
|
32 | (2) |
|
|
32 | (1) |
|
4.7.2 Getting the Grunt Packages |
|
|
33 | (1) |
|
|
33 | (1) |
|
|
33 | (1) |
|
|
34 | (1) |
|
4.7.2.4 Copying Bower Files to the Project |
|
|
34 | (1) |
|
4.7.2.5 Babel and Babelify |
|
|
34 | (1) |
|
4.8 Writing the Grunt File |
|
|
34 | (5) |
|
|
36 | (1) |
|
|
36 | (3) |
|
|
36 | (1) |
|
|
37 | (1) |
|
|
37 | (1) |
|
|
38 | (1) |
|
|
39 | (1) |
|
|
39 | (1) |
|
|
39 | (2) |
|
|
41 | (1) |
|
|
42 | (1) |
Chapter 5 Phaser Project Setup |
|
43 | (12) |
|
|
44 | (1) |
|
|
44 | (5) |
|
|
45 | (1) |
|
|
46 | (3) |
|
5.3 Testing the Setup with a Simple Game |
|
|
49 | (6) |
|
5.3.1 Before Starting Development |
|
|
49 | (1) |
|
5.3.2 Getting and Loading the Assets |
|
|
49 | (1) |
|
5.3.3 Writing the Gameplay |
|
|
50 | (5) |
Chapter 6 Phaser Principles |
|
55 | (84) |
|
|
56 | (2) |
|
|
57 | (1) |
|
|
58 | (3) |
|
6.2.1 Finite-State Machines |
|
|
59 | (1) |
|
6.2.2 Creating a Phaser State |
|
|
60 | (1) |
|
|
60 | (1) |
|
|
61 | (1) |
|
|
62 | (1) |
|
|
63 | (1) |
|
6.6 Loading and the Asset Cache |
|
|
64 | (2) |
|
|
64 | (1) |
|
6.6.2 Displaying Load Progress |
|
|
65 | (1) |
|
|
65 | (1) |
|
|
66 | (1) |
|
|
66 | (1) |
|
6.7.2 Adding an Image into the Game |
|
|
66 | (1) |
|
|
66 | (3) |
|
6.8.1 Loading and Using Static Sprites |
|
|
67 | (1) |
|
|
67 | (2) |
|
6.8.2.1 Sprite Sheet Layout |
|
|
67 | (1) |
|
6.8.2.2 Loading a Sprite Sheet |
|
|
68 | (1) |
|
6.8.2.3 Specifying the Frames of a Sprite's Animation |
|
|
68 | (1) |
|
6.8.2.4 Playing an Animation |
|
|
68 | (1) |
|
|
69 | (1) |
|
|
69 | (2) |
|
|
69 | (2) |
|
|
71 | (1) |
|
|
72 | (4) |
|
|
72 | (1) |
|
6.11.1.1 Testing if a Key Is Currently Depressed |
|
|
72 | (1) |
|
6.11.1.2 Responding to Key Presses |
|
|
73 | (1) |
|
|
73 | (1) |
|
|
74 | (2) |
|
|
75 | (1) |
|
6.11.3.2 Gamepad Joysticks |
|
|
75 | (1) |
|
|
76 | (5) |
|
|
76 | (1) |
|
|
77 | (1) |
|
6.12.3 Changing Audio Loudness |
|
|
77 | (1) |
|
|
77 | (1) |
|
6.12.5 Decompressing Audio |
|
|
78 | (1) |
|
|
79 | (1) |
|
6.12.7 Generating Audio Sprites |
|
|
79 | (2) |
|
6.12.7.1 Installing Codecs |
|
|
79 | (1) |
|
6.12.7.2 Using the Audiosprite Tool |
|
|
80 | (1) |
|
6.12.8 Adding Markers and Playing Audio Sprites |
|
|
81 | (1) |
|
|
81 | (7) |
|
|
83 | (3) |
|
|
86 | (2) |
|
6.13.2.1 Loading Tilemaps |
|
|
87 | (1) |
|
|
88 | (1) |
|
|
88 | (4) |
|
|
89 | (3) |
|
|
89 | (1) |
|
6.14.1.2 Tweenable Properties |
|
|
90 | (1) |
|
|
90 | (1) |
|
|
91 | (1) |
|
|
92 | (9) |
|
|
93 | (6) |
|
|
99 | (4) |
|
|
100 | (1) |
|
|
100 | (1) |
|
6.15.2.3 Restitution (Bounciness) |
|
|
100 | (1) |
|
|
101 | (1) |
|
6.15.2.5 Putting the Physics Properties Together |
|
|
101 | (1) |
|
6.16 Phases of a Physics System |
|
|
101 | (1) |
|
|
102 | (1) |
|
|
103 | (7) |
|
|
103 | (1) |
|
6.18.1.1 Changing Bounding Box Size |
|
|
103 | (1) |
|
6.18.1.2 Debugging the Bounding Boxes |
|
|
104 | (1) |
|
|
104 | (1) |
|
|
104 | (3) |
|
6.18.3.1 Sprite versus Sprite |
|
|
105 | (1) |
|
6.18.3.2 Sprite versus Group |
|
|
106 | (1) |
|
6.18.3.3 Group versus Group |
|
|
107 | (1) |
|
6.18.4 Gravity and Immovable Objects |
|
|
107 | (2) |
|
6.18.5 Drag and World Bounds |
|
|
109 | (1) |
|
6.18.6 Angular Velocity and Bounce |
|
|
109 | (1) |
|
|
110 | (10) |
|
6.19.1 Setting Up the P2 World |
|
|
111 | (1) |
|
|
111 | (1) |
|
6.19.3 Adding Basic Objects |
|
|
111 | (1) |
|
6.19.4 Building Compound Objects |
|
|
111 | (1) |
|
6.19.5 Adding Complex Objects |
|
|
112 | (2) |
|
|
112 | (1) |
|
6.19.5.2 Exporting from PhysicsEditor |
|
|
113 | (1) |
|
6.19.5.3 Importing and Using a Complex Shape |
|
|
113 | (1) |
|
6.19.6 Responding to Collisions |
|
|
114 | (1) |
|
|
114 | (1) |
|
6.19.6.2 Collision Callback |
|
|
115 | (1) |
|
|
115 | (1) |
|
|
116 | (2) |
|
|
116 | (1) |
|
|
117 | (1) |
|
|
117 | (1) |
|
|
118 | (1) |
|
|
118 | (2) |
|
|
120 | (2) |
|
6.20.1 Particle Engine Components |
|
|
120 | (1) |
|
|
120 | (1) |
|
|
121 | (1) |
|
6.20.2 Setting Up a Burst Emitter |
|
|
121 | (1) |
|
6.20.3 Setting Up an Area Emitter |
|
|
122 | (1) |
|
|
122 | (1) |
|
|
123 | (1) |
|
6.22 Making a Custom Signal |
|
|
123 | (1) |
|
6.23 Removing a Listener from a Signal |
|
|
124 | (1) |
|
|
124 | (3) |
|
6.24.1 Making a Game Object Prefab |
|
|
125 | (1) |
|
6.24.2 Making a User Interface Prefab |
|
|
125 | (1) |
|
|
126 | (1) |
|
|
127 | (2) |
|
6.25.1 Game Memory and the Garbage Collector |
|
|
127 | (2) |
|
|
129 | (2) |
|
|
131 | (1) |
|
|
131 | (5) |
|
|
134 | (1) |
|
6.27.2 Animation Software |
|
|
135 | (1) |
|
6.27.2.1 For Creating Pixel Art |
|
|
135 | (1) |
|
6.27.2.2 For Creating 2D Animations |
|
|
135 | (1) |
|
6.27.3 For Both Art and Animations |
|
|
135 | (1) |
|
|
136 | (1) |
|
6.28.1 Using Texture Packer |
|
|
136 | (1) |
|
|
137 | (2) |
Chapter 7 Game Examples |
|
139 | (126) |
|
|
140 | (4) |
|
|
143 | (1) |
|
7.1.2 "Start" and "Game Over" States |
|
|
144 | (1) |
|
|
144 | (17) |
|
|
145 | (6) |
|
|
145 | (1) |
|
|
146 | (2) |
|
|
148 | (3) |
|
|
151 | (3) |
|
7.2.2.1 Creating a Sinusoidal Motion |
|
|
151 | (1) |
|
|
152 | (2) |
|
7.2.3 User Interface Prefabs |
|
|
154 | (2) |
|
|
154 | (1) |
|
|
155 | (1) |
|
|
156 | (5) |
|
|
156 | (1) |
|
|
157 | (2) |
|
|
159 | (1) |
|
7.2.4.4 Increment Wave Method |
|
|
160 | (1) |
|
7.2.4.5 Damage Enemy Method |
|
|
160 | (1) |
|
7.2.4.6 Damage Player Method |
|
|
161 | (1) |
|
7.3 Game State Source Code |
|
|
161 | (12) |
|
|
164 | (2) |
|
|
166 | (7) |
|
7.3.2.1 Laying Out a Map in Tiled |
|
|
171 | (1) |
|
7.3.2.2 Adding In Metadata in Tiled |
|
|
171 | (1) |
|
7.3.2.3 Exporting a Tiled Map for Phaser |
|
|
172 | (1) |
|
7.4 Making the Ground Fox Platformer |
|
|
173 | (21) |
|
|
173 | (1) |
|
|
174 | (1) |
|
|
174 | (1) |
|
7.4.4 Player Character Prefab |
|
|
175 | (6) |
|
7.4.4.1 Player Prefab Constructor |
|
|
177 | (1) |
|
7.4.4.2 Player Prefab Update |
|
|
178 | (1) |
|
7.4.4.3 Player Prefab Animation Controller |
|
|
179 | (1) |
|
7.4.4.4 Player Jump Method |
|
|
180 | (1) |
|
7.4.4.5 Player Flash Method |
|
|
181 | (1) |
|
|
181 | (3) |
|
7.4.5.1 Mouse Constructor |
|
|
182 | (1) |
|
|
183 | (1) |
|
|
184 | (1) |
|
|
185 | (1) |
|
|
185 | (1) |
|
|
185 | (8) |
|
7.4.8.1 Game State Constructor |
|
|
187 | (5) |
|
|
192 | (1) |
|
7.4.8.3 Hit Enemy Handler |
|
|
192 | (1) |
|
|
192 | (1) |
|
|
193 | (1) |
|
|
193 | (1) |
|
|
194 | (1) |
|
|
194 | (1) |
|
|
195 | (6) |
|
7.6.1 Overlapping Objects |
|
|
200 | (1) |
|
7.7 Rendering an Isometric Grid |
|
|
201 | (2) |
|
7.7.1 Isometric Depth Sorting |
|
|
202 | (1) |
|
7.7.2 Picking Grid Locations via Screen Position |
|
|
202 | (1) |
|
7.8 Phaser Isometric Plugin |
|
|
203 | (6) |
|
|
204 | (5) |
|
|
204 | (1) |
|
7.8.1.2 Pathfinding Algorithms |
|
|
205 | (4) |
|
7.9 Skeleton Shootout Project Design |
|
|
209 | (15) |
|
|
209 | (2) |
|
|
211 | (1) |
|
|
211 | (4) |
|
|
211 | (1) |
|
|
211 | (2) |
|
|
213 | (2) |
|
|
215 | (8) |
|
|
215 | (1) |
|
|
215 | (8) |
|
|
223 | (1) |
|
7.9.4.1 Slicer Game Example |
|
|
224 | (1) |
|
|
224 | (8) |
|
7.10.1 Creating a Gesture Manager for Phaser |
|
|
229 | (3) |
|
|
230 | (1) |
|
|
230 | (1) |
|
7.10.1.3 Pointer's Speed and Velocity |
|
|
231 | (1) |
|
|
232 | (1) |
|
7.11 Dealing with Stage Scaling |
|
|
232 | (4) |
|
7.11.1 Challenges of Stage Scaling |
|
|
233 | (1) |
|
7.11.2 Phaser Scale Modes |
|
|
233 | (1) |
|
|
233 | (1) |
|
|
233 | (1) |
|
|
233 | (1) |
|
|
234 | (1) |
|
|
234 | (1) |
|
7.11.3 Resize Callback and Positioning Elements |
|
|
234 | (1) |
|
7.11.4 Enforcing Device Orientation |
|
|
235 | (1) |
|
7.11.5 Restricting Resize Zones |
|
|
236 | (1) |
|
7.12 Making 80's Tech Slicer |
|
|
236 | (1) |
|
|
237 | (1) |
|
|
237 | (1) |
|
|
238 | (1) |
|
|
238 | (1) |
|
7.15 Slicer Preload State |
|
|
238 | (1) |
|
|
239 | (15) |
|
7.16.1 Game State Prefabs |
|
|
239 | (3) |
|
7.16.1.1 Device Sprite Prefab |
|
|
239 | (2) |
|
7.16.1.2 SliceBody Prefab |
|
|
241 | (1) |
|
|
242 | (9) |
|
7.16.2.1 Game State Imports |
|
|
242 | (1) |
|
7.16.2.2 Game State Constructor |
|
|
243 | (1) |
|
|
243 | (1) |
|
|
244 | (1) |
|
7.16.2.5 Simple Responsive UI |
|
|
245 | (1) |
|
7.16.2.6 Slice Segment Life |
|
|
245 | (1) |
|
7.16.2.7 Slice Hit Method |
|
|
246 | (2) |
|
|
248 | (3) |
|
7.16.3 Conclusion and Future Additions |
|
|
251 | (1) |
|
|
252 | (2) |
|
|
254 | (11) |
|
|
255 | (1) |
|
|
255 | (8) |
|
|
255 | (3) |
|
|
258 | (3) |
|
7.17.2.3 Start Pull Method |
|
|
261 | (1) |
|
|
261 | (1) |
|
|
262 | (1) |
|
|
263 | (2) |
Chapter 8 Game Deployment |
|
265 | (14) |
|
|
266 | (1) |
|
8.2 Creating the Grunt Production Task |
|
|
267 | (2) |
|
|
268 | (1) |
|
|
268 | (1) |
|
|
268 | (1) |
|
|
269 | (1) |
|
|
269 | (1) |
|
8.5 Testing with Cocoon JS |
|
|
270 | (1) |
|
8.6 Debugging Cocoon Apps |
|
|
271 | (2) |
|
8.7 Building with Cocoon JS |
|
|
273 | (5) |
|
8.7.1 Using the Cocoon Cloud Build |
|
|
274 | (2) |
|
8.7.2 Using the Cocoon Command Line Tools |
|
|
276 | (1) |
|
8.7.3 Configuring the Cordova/Cocoon Command Line Tools |
|
|
276 | (1) |
|
8.7.3.1 Configuring the Command Line Tools for Android |
|
|
276 | (1) |
|
8.7.3.2 Configuring the CLT for iOS |
|
|
276 | (1) |
|
8.7.3.3 Building an Application File |
|
|
277 | (1) |
|
8.7.4 Creating an App Store Ready Package |
|
|
277 | (1) |
|
|
277 | (1) |
|
8.7.4.2 Signing for Android |
|
|
277 | (1) |
|
|
278 | (1) |
Chapter 9 Conclusion |
|
279 | (2) |
Index |
|
281 | |