Muutke küpsiste eelistusi

Introduction to HTML5 Game Development with Phaser.js [Pehme köide]

  • Formaat: Paperback / softback, 284 pages, kõrgus x laius: 254x178 mm, kaal: 810 g, 1 Tables, black and white; 83 Illustrations, black and white
  • Ilmumisaeg: 12-Aug-2016
  • Kirjastus: CRC Press
  • ISBN-10: 113892184X
  • ISBN-13: 9781138921849
  • Formaat: Paperback / softback, 284 pages, kõrgus x laius: 254x178 mm, kaal: 810 g, 1 Tables, black and white; 83 Illustrations, black and white
  • Ilmumisaeg: 12-Aug-2016
  • Kirjastus: CRC Press
  • ISBN-10: 113892184X
  • ISBN-13: 9781138921849
Experience the thrill of crafting your own HTML5 game with Phaser.js game engine. HTML5 and modern JavaScript game engines have helped revolutionized web based games. Each chapter in An Introduction to HTML5 Game Development with Phaser.js showcases a sample game that illustrates an aspect of Phaser.js (now Lazer.js) that can be used as is, or in remixed games of the developers design. Each of these examples help the reader to understand how to optimize JavaScript game development with modern project tooling like Grunt and Bower. Though the world of HTML game development continues to grow and evolve, An Introduction to HTML5 Game Development with Phaser.js, provides a grounded resource and vital learning tool to anyone looking to optimize web game development process.

Key Features





Chapter objectives and examples with sample code make concepts easy to grasp





Master questions and chapter summaries further help to solidify these concepts





Feature boxes that contain important hints and things to note help keep readers on the right path





This book uses a "building blocks" approach to game development and starts with the technology required to get things running





Each chapter will be a small sample game that demonstrates one piece of Phaser.js, giving the reader time to grasp and understand the core concepts





Subsequent chapters will demonstrate new features, building upon the knowledge of previous examples
Preface xiii
Author xv
Chapter 1 Introduction 1(6)
1.1 Web Technologies
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)
1.5 Who This Book Is For
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)
2.3 Tools
12(1)
2.3.1 Phaser.js
12(1)
2.4 Basic Structure of an HTML5 Game Project
13(2)
Chapter 3 A Simple Game 15(8)
3.1 Game Goals
15(1)
3.2 Setup
15(1)
3.3 Getting Phaser
16(1)
3.4 Getting the Images
16(1)
3.5 Setting Up the html
16(1)
3.6 Preload Phase
17(1)
3.7 Create Phase
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)
3.9 Collision Handler
21(1)
3.10 Testing
22(1)
Chapter 4 Workspace Setup 23(20)
4.1 Installing Git
25(1)
4.1.1 Node.js
25(1)
4.2 Command Prompt
25(3)
4.2.1 Opening the Command Prompt
26(1)
4.2.1.1 Windows
26(1)
4.2.1.2 Macintosh
26(1)
4.2.2 Command Prompt Navigation
26(5)
4.2.2.1 Location
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)
4.3 Node Package Manager
28(1)
4.4 Installing Bower
29(1)
4.5 Installing Browserify
30(1)
4.6 Babel and Babelify
31(1)
4.6.1 Installing Grunt
32(1)
4.7 Setting Up a Basic Project
32(2)
4.7.1 Getting Ready
32(1)
4.7.2 Getting the Grunt Packages
33(1)
4.7.2.1 Local Grunt
33(1)
4.7.2.2 Grunt Connect
33(1)
4.7.2.3 Grunt Watch
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)
4.8.1 module.exports
36(1)
4.8.2 grunt.initConfig
36(3)
4.8.2.1 Browserify Task
36(1)
4.8.2.2 Watch Task
37(1)
4.8.2.3 Connect Task
37(1)
4.8.2.4 Bower Task
38(1)
4.8.3 Loading Tasks
39(1)
4.8.4 Registering Tasks
39(1)
4.9 Testing Grunt
39(2)
4.10 Installing Yeoman
41(1)
4.11 Conclusion
42(1)
Chapter 5 Phaser Project Setup 43(12)
5.1 Setting Up the html
44(1)
5.2 App.js
44(5)
5.2.1 Boot State
45(1)
5.2.2 Preload State
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)
6.1 Game Loop
56(2)
6.1.1 Logic Update Step
57(1)
6.2 States
58(3)
6.2.1 Finite-State Machines
59(1)
6.2.2 Creating a Phaser State
60(1)
6.2.3 Phaser State Flow
60(1)
6.3 Display List
61(1)
6.4 The World
62(1)
6.5 Camera
63(1)
6.6 Loading and the Asset Cache
64(2)
6.6.1 Asset Cache
64(1)
6.6.2 Displaying Load Progress
65(1)
6.6.3 Preloading Phase
65(1)
6.7 Images
66(1)
6.7.1 Loading an Image
66(1)
6.7.2 Adding an Image into the Game
66(1)
6.8 Sprites
66(3)
6.8.1 Loading and Using Static Sprites
67(1)
6.8.2 Sprite Sheets
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)
6.8.3 Fixed to Camera
69(1)
6.9 Texture Atlases
69(2)
6.9.1 Loading Atlases
69(2)
6.10 Tile Sprites
71(1)
6.11 Input
72(4)
6.11.1 Keyboard
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)
6.11.2 Pointers
73(1)
6.11.3 Gamepad
74(2)
6.11.3.1 Gamepad Buttons
75(1)
6.11.3.2 Gamepad Joysticks
75(1)
6.12 Sound
76(5)
6.12.1 Loading Sound
76(1)
6.12.2 Playing a Sound
77(1)
6.12.3 Changing Audio Loudness
77(1)
6.12.4 Audio Formats
77(1)
6.12.5 Decompressing Audio
78(1)
6.12.6 Audio Sprite
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)
6.13 Maps
81(7)
6.13.1 Scenes
83(3)
6.13.2 Tilemaps
86(2)
6.13.2.1 Loading Tilemaps
87(1)
6.13.2.2 Tiled
88(1)
6.14 Tweens
88(4)
6.14.1 Writing Tweens
89(3)
6.14.1.1 Tween Syntax
89(1)
6.14.1.2 Tweenable Properties
90(1)
6.14.1.3 Easing
90(1)
6.14.1.4 Chaining Tweens
91(1)
6.15 Physics Primer
92(9)
6.15.1 Velocity
93(6)
6.15.2 Forces
99(4)
6.15.2.1 Acceleration
100(1)
6.15.2.2 Friction (Drag)
100(1)
6.15.2.3 Restitution (Bounciness)
100(1)
6.15.2.4 Collisions
101(1)
6.15.2.5 Putting the Physics Properties Together
101(1)
6.16 Phases of a Physics System
101(1)
6.17 Bodies
102(1)
6.18 Arcade Physics
103(7)
6.18.1 Bounding Boxes
103(1)
6.18.1.1 Changing Bounding Box Size
103(1)
6.18.1.2 Debugging the Bounding Boxes
104(1)
6.18.2 Quad Trees
104(1)
6.18.3 Collision
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)
6.19 P2
110(10)
6.19.1 Setting Up the P2 World
111(1)
6.19.2 Debugging Bodies
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)
6.19.5.1 PhysicsEditor
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)
6.19.6.1 Contact Signal
114(1)
6.19.6.2 Collision Callback
115(1)
6.19.7 Collision Groups
115(1)
6.19.8 Constraints
116(2)
6.19.8.1 Lock
116(1)
6.19.8.2 Distance
117(1)
6.19.8.3 Spring
117(1)
6.19.8.4 Revolute
118(1)
6.19.9 Contact Materials
118(2)
6.20 Particles
120(2)
6.20.1 Particle Engine Components
120(1)
6.20.1.1 Particle
120(1)
6.20.1.2 Emitter
121(1)
6.20.2 Setting Up a Burst Emitter
121(1)
6.20.3 Setting Up an Area Emitter
122(1)
6.21 Signals
122(1)
6.21.1 Using a Signal
123(1)
6.22 Making a Custom Signal
123(1)
6.23 Removing a Listener from a Signal
124(1)
6.24 Prefabs
124(3)
6.24.1 Making a Game Object Prefab
125(1)
6.24.2 Making a User Interface Prefab
125(1)
6.24.3 Using Prefabs
126(1)
6.25 Exists Flag
127(2)
6.25.1 Game Memory and the Garbage Collector
127(2)
6.26 Object Pooling
129(2)
6.26.1 Life
131(1)
6.27 Animation
131(5)
6.27.1 Rigs
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)
6.28 Making Atlases
136(1)
6.28.1 Using Texture Packer
136(1)
6.29 Viewport Scaling
137(2)
Chapter 7 Game Examples 139(126)
7.1 Shoot'em Up
140(4)
7.1.1 Preload Phase
143(1)
7.1.2 "Start" and "Game Over" States
144(1)
7.2 Game Prefabs
144(17)
7.2.1 Player Prefab
145(6)
7.2.1.1 Player Motion
145(1)
7.2.1.2 Firing
146(2)
7.2.1.3 Player Health
148(3)
7.2.2 Enemy Prefab
151(3)
7.2.2.1 Creating a Sinusoidal Motion
151(1)
7.2.2.2 Enemy Shooting
152(2)
7.2.3 User Interface Prefabs
154(2)
7.2.3.1 Score Field
154(1)
7.2.3.2 Healthbar
155(1)
7.2.4 Game State
156(5)
7.2.4.1 Imports
156(1)
7.2.4.2 Create Method
157(2)
7.2.4.3 Update Method
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)
7.3.1 Wrap Up
164(2)
7.3.2 Tiled
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)
7.4.1 Level Layout
173(1)
7.4.2 App.js
174(1)
7.4.3 Preloading
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)
7.4.5 Mouse Prefab
181(3)
7.4.5.1 Mouse Constructor
182(1)
7.4.5.2 Mouse Update
183(1)
7.4.6 UI Components
184(1)
7.4.6.1 Fixed to Camera
185(1)
7.4.7 Game State
185(1)
7.4.8 Level State
185(8)
7.4.8.1 Game State Constructor
187(5)
7.4.8.2 Update Method
192(1)
7.4.8.3 Hit Enemy Handler
192(1)
7.4.8.4 Hit Door Handler
192(1)
7.4.8.5 Hit Coin Handler
193(1)
7.4.9 Game Over State
193(1)
7.4.10 Conclusion
194(1)
7.5 Tower Defense
194(1)
7.6 Spatial Cues
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)
7.8.1 Pathfinding
204(5)
7.8.1.1 Hardcoded Paths
204(1)
7.8.1.2 Pathfinding Algorithms
205(4)
7.9 Skeleton Shootout Project Design
209(15)
7.9.1 Asset Pack
209(2)
7.9.1.1 Tilemap
211(1)
7.9.2 Prefabs
211(4)
7.9.2.1 NumberBox
211(1)
7.9.2.2 Human
211(2)
7.9.2.3 Skeleton
213(2)
7.9.3 Game State
215(8)
7.9.3.1 Imports
215(1)
7.9.3.2 Create
215(8)
7.9.4 Conclusion
223(1)
7.9.4.1 Slicer Game Example
224(1)
7.10 Gestures
224(8)
7.10.1 Creating a Gesture Manager for Phaser
229(3)
7.10.1.1 Create Phase
230(1)
7.10.1.2 Update
230(1)
7.10.1.3 Pointer's Speed and Velocity
231(1)
7.10.1.4 Up Handler
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)
7.11.2.1 EXACT FIT
233(1)
7.11.2.2 NO_SCALE
233(1)
7.11.2.3 SHOW_ALL
233(1)
7.11.2.4 RESIZE
234(1)
7.11.2.5 USER_SCALE
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)
7.13 Slicer HTML and CSS
237(1)
7.13.1 CSS File
237(1)
7.13.2 HTML File
238(1)
7.14 Slicer Boot State
238(1)
7.15 Slicer Preload State
238(1)
7.16 Slicer Game State
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)
7.16.2 Game State
242(9)
7.16.2.1 Game State Imports
242(1)
7.16.2.2 Game State Constructor
243(1)
7.16.2.3 Create Method
243(1)
7.16.2.4 Spawning Waves
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)
7.16.2.8 Update Method
248(3)
7.16.3 Conclusion and Future Additions
251(1)
7.16.4 Launcher Game
252(2)
7.17 Additions to App.js
254(11)
7.17.1 Preload State
255(1)
7.17.2 Game State
255(8)
7.17.2.1 Create Method
255(3)
7.17.2.2 Reset Board
258(3)
7.17.2.3 Start Pull Method
261(1)
7.17.2.4 End Pull Method
261(1)
7.17.2.5 Update Function
262(1)
7.17.3 Conclusion
263(2)
Chapter 8 Game Deployment 265(14)
8.1 Web Deployment
266(1)
8.2 Creating the Grunt Production Task
267(2)
8.2.1 Clean
268(1)
8.2.2 Copy
268(1)
8.2.3 Uglify
268(1)
8.3 Build Task
269(1)
8.4 App Deployment
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)
8.7.4.1 Signing for iOS
277(1)
8.7.4.2 Signing for Android
277(1)
8.8 Conclusion
278(1)
Chapter 9 Conclusion 279(2)
Index 281
Travis Faas is a lecturer at IUPUI (Indiana University-Purdue University Indianapolis) where he teaches game and web development. Before that he worked for a digital marketing agency, producing interactive websites for clients small to large. He strives to bring his work knowledge into the classroom, teaching students the most up-to-date software to enable them to turn their creative passion into engaging interactive experiences.