Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
PROFESSIONAL
HTML5 Mobile Game Development
Pascal Rettig
WILEY
John Wiley & Sons, Inc.
CONTENTS
INTRODUCTION xxiii
CHAPTER 1: FLYING BEFORE YOU WALK 3
Introduction 3
Building a Complete Game in 500 Lines 4
Understanding the Game 4
Structuring the Game 4
The Final Game 5
Adding the Boilerplate HTMLand CSS 5
Getting Started with Canvas 6
Accessing the Context 6
Drawing on Canvas 7
Drawing Images 8
Creating Your Game's Structure 9
Building Object-Oriented JavaScript 10
Taking Advantage of Duck Typing 10
Creating the Three Principle Objects 11
Loading the SpriteSheet 11
Creating the Game Object 13
Implementing the Game Object 13
Refactoring the Game Code 15
Adding a Scrolling Background 16
Putting in a Title Screen 19
Drawing Text on Canvas 19
Adding a Protagonist 21
Creating the PlayerShip Object 22
Handling User Input 22
Summary 23
CONTENTS
CHAPTER 2: MAKING IT A GAME 25
Introduction 25
Creating the GameBoard Object 25
Understanding the GameBoard 26
Adding and Removing Objects 26
Iterating over the List of Objects 27
Defining the Board Methods 28
Handling Collisions 29
Adding GameBoard into the Game 30
Firing Missiles 30
Adding a Bullet Sprite 31
Connecting Missiles to the Player 32
Adding Enemies 33
Calculating Enemy Movement 33
Constructing the Enemy Object 34
Stepping and Drawing the Enemy Object 35
Adding Enemies on the Board 36
Refactoring the Sprite Classes 37
Creating a Generic Sprite Class 37
Refactoring PlayerShip 38
Refactoring PlayerMissile 39
Refactoring Enemy 39
Handling Collisions 40
Adding Object Types 40
Colliding Missiles with Enemies 41
Colliding Enemies with the Player 42
Making It Go Boom 43
Representing Levels 44
Setting Up the Enemies 44
Setting Up Level Data 45
Loading and Finishing a Level 46
Implementing the Level Object 47
Summary 49
CHAPTER 3: FINISHING UP AND GOING MOBILE 51
Introduction 51
Adding Touch Controls 51
Drawing Controls 52
Responding to Touch Events 54
Testing on Mobile 56
CONTENT
Maximizing the Game 57
Setting the Viewport 57
Resizing the Canvas 57
Adding to the iOS Home Screen 60
Adding a Score 60
Making It a Fair Fight 61
Summary 64
CHAPTER 4: HTML5 FOR MOBILE 67
Introduction 67
Capturing a Brief History of HTML5 68
Understanding How HTML5 Grew Up "Different" 68
Looking Toward HTML6? HTML7? Nope, Just HTML5 68
Going to the Spec 69
Differentiating the HTML5 Family and HTML5 69
Using HTML5 The Right Way 70
Having Your Cake and Eating It, Too 70
Sniffing Browsers 70
Determining Capabilities, Not Browsers 72
Enhancing Progressively 73
Polyfilling in the Gaps 74
Considering HTML5 from a Game Perspective 74
Canvas 74
CSS3/DOM 75
SVG 76
Considering HTML5 from a Mobile Perspective 76
Understanding the New APIs 77
What's Coming: WebAPI 77
Surveying the Mobile Browser Landscape 77
WebKit: The Market Dominator 78
Opera: Still Plugging Along 78
Firefox: Mozilla's Mobile Offering 79
WP7 Internet Explorer 9 79
Tablets 79
Summary 79
CONTENTS
CHAPTER 5: LEARNING SOME HELPFUL LIBRARIES 81
Introduction 81
Learning JavaScript Libraries 82
Starting with jQuery 82
Adding jQuery to Your Page 82
Understanding the $ 83
Manipulating the DOM 84
Creating Callbacks 85
Binding Events 87
Making Ajax Calls 90
Calling Remote Servers 90
Using Deferreds 91
Using Underscore.js 92
Accessing Underscore 92
Working with Collections 92
Using Utility Functions 93
Chaining Underscore Method Calls 94
Summary 94
CHAPTER 6: BEING A GOOD MOBILE CITIZEN 95
Introduction 95
Responding to Device Capabilities 96
Maximizing Real Estate 96
Resizing Canvas to Fit 97
Dealing with Browser Resizing, Scrolling, and Zooming 98
Handling Resizing 98
Preventing Scrolling and Zooming 99
Setting the Viewport 100
Removing the Address Bar 101
Configuring Your App for the iOS Home Screen 103
Making Your Game Web App Capable 103
Adding a Startup Image 103
Configuring Home Icons 104
Taking Mobile Performance into Consideration 105
Adapting to Limited Bandwidth and Storage 106
Optimizing for Mobile 106
Good for Mobile Is Good for All 106
Minifying Your JavaScript 107
Setting Correct Headers 108
Serving from a CDN 108
<li
CONTENTS
Going Offline Completely with Application Cache 109
Creating Your Manifest File 109
Checking If the Browser Is Online 111
Listening for More Advanced Behavior 111
A Final Word of Warning 111
Summary 112
CHAPTER 7: LEARNING ABOUT YOUR
HTML5 GAME DEVELOPMENT ENVIRONMENT 115
Introduction 115
Picking an Editor 116
Exploring the Chrome Developer Tools 116
Activating Developer Tools 116
Inspecting Elements 116
Viewing Page Resources 118
Tracking Network Traffic 119
Debugging JavaScript 121
Examining the Console Tab 121
Exercising the Script Tab 123
Profiling and Optimizing Your Code 125
Running Profiles 126
Actually Optimizing Your Game 128
Mobile Debugging 129
Summary 131
CHAPTER 8: RUNNING JAVASCRIPT ON THE COMMAND LINE 133
Introduction 133
Learning About Node.js 134
Installing Node 134
Installing Node on Windows 135
Installing Node on OS X 135
Installing Node on Linux 135
Tracking the Latest Version of Node 136
Installing and Using Node Modules 136
Installing Modules 136
Hinting Your Code 136
Uglifying Your Code 137
xiil
CONTENTS
Creating Your Own Script 137
Creating a package.json File 138
Using Server-Side Canvas 139
Creating a Reusable Script 140
Writing a Sprite-Map Generator 141
Using Futures 141
Working from the Top Down 142
Loading Images 144
Calculating the Size of the Canvas 146
Drawing Images on the Server-Side Canvas 146
Updating and Running the Script 148
Summary 148
CHAPTER 9: BOOTSTRAPPING THE QUINTUS ENGINE: PART I 149
Introduction 149
Creating a Framework for a Reusable HTML5 Engine 150
Designing the Basic Engine API 150
Starting the Engine Code 151
Adding the Game Loop 153
Building a Better Game Loop Timer 153
Adding the Optimized Game Loop to Quintus 154
Testing the Game Loop 155
Adding Inheritance 157
Using Inheritance in Game Engines 157
Adding Classical Inheritance to JavaScript 158
Exercising the Class Functionality 161
Supporting Events 162
Designing the Event API 162
Writing the Evented Class 162
Filling in the Evented Methods 163
Supporting Components 165
Designing the Component API 166
Implementing the Component System 167
Summary 169
CHAPTER 10: BOOTSTRAPPING THE QUINTUS ENGINE: PART II 171
Introduction 171
Accessing a Game Container Element 171
Capturing User Input 174
Creating an Input Subsystem 174
Bootstrapping the Input Module 175
:lv
CONTENTS
Handling Keyboard Events 176
Adding Keypad Controls 178
Adding Joypad Controls 181
Drawing the Onscreen Input 184
Finishing and Testing the Input 186
Loading Assets 188
Defining Asset Types 189
Loading Specific Assets 189
Finishing the Loader 191
Adding Preload Support 194
Summary 195
CHAPTER 11: BOOTSTRAPPING THE QUINTUS ENGINE: PART III 197
Introduction 197
Defining SpriteSheets 198
Creating a SpriteSheet Class 198
Tracking and Loading Sheets 199
Testing the SpriteSheet class 200
Adding Sprites 201
Writing the Sprite Class 201
Referencing Sprites, Properties, and Assets 203
Exercising the Sprite Object 203
Setting the Stage with Scenes 207
Creating the Quintus.Scenes Module 207
Writing the Stage Class 208
Rounding Out the Scene Functionality 212
Finishing Blockbreak 214
Summary 217
CHAPTER 12: BUILDING GAMES WITH CSS3 221
Introduction 221
Deciding on a Scene Graph 221
Your Target Audience 222
Your Interaction Method 222
Your Performance Requirements 222
Implementing DOM Support 223
Considering DOM Specifics 223
Bootstrapping the Quintus DOM Module 223
XV
CONTENTS
Creating a Consistent Translation Method 224
Creating a Consistent Transition Method 227
Implementing a DOM Sprite 227
Creating a DOM Stage Class 230
Replacing the Canvas Equivalents 231
Testing the DOM Functionality 232
Summary 233
CHAPTER 13: CRAFTING A CSS3 RPG 235
Introduction 235
Creating a Scrolling Tile Map 235
Understanding the Performance Problem 236
Implementing the DOM Tile Map Class 236
Building the RPG 240
Creating the HTML File 240
Setting Up the Game 241
Adding a Tile Map 242
Creating Some Useful Components 245
Adding in the Player 248
Adding Fog, Enemies, and Loot 249
Extending the Tile Map with Sprites 253
Adding a Health Bar and HUD 255
Summary 260
CHAPTER 14: BUILDING GAMES WITH SVG AND PHYSICS 261
Introduction 261
Understanding SVG Basics 262
Getting SVG on Your Page 262
Getting to Know the Basic SVG Elements 263
Transforming SVG Elements 267
Applying Strokes and Fills 267
Beyond the Basics 270
Working with SVG from JavaScript 271
Creating SVG Elements 271
Setting and Getting SVG Attributes 272
Adding SVG Support to Quintus 272
Creating an SVG Module 273
Adding SVG Sprites 274
Creating an SVG Stage 276
Testing the SVG Class 278
i
CONTENTS
Adding Physics with Box2D 280
Understanding Physics Engines 281
Implementing the World Component 281
Implementing the Physics Component 284
Adding Physics to the Example 287
Creating a Cannon Shooter 288
Planning the Game 289
Building the Necessary Sprites 290
Gathering User Input and Finishing the Game 292
Summary 294
CHAPTER 15: LEARNING CANVAS, THE HERO OF HTML5 297
Introduction 297
Getting Started with the Canvas Tag 298
Understanding CSS and Pixel Dimensions 298
Grabbing the Rendering Context 301
Creating an Image from Canvas 301
Drawing on Canvas 302
Setting the Fill and Stroke Styles 303
Setting the Stroke Details 305
Adjusting the Opacity 306
Drawing Rectangles 306
Drawing Images 306
Drawing Paths 307
Rendering Text on Canvas 308
Using the Canvas Transformation Matrix 310
Understanding the Basic Transformations 310
Saving, Restoring, and Resetting the Transformation Matrix 311
Drawing Snowflakes 311
Applying Canvas Effects 313
Adding Shadows 314
Using Composition Effects 314
Summary 316
CHAPTER 16: GETTING ANIMATED 317
Introduction 317
Building Animation Maps 318
Deciding on an Animation API 318
Writing the Animation Module 320
Testing the Animation 323
xvii
CONTENTS
Adding a Canvas Viewport 325
Going Parallax 328
Summary 330
CHAPTER 17: PLAYING WITH PIXELS 331
Introduction 331
Reviewing 2-D Physics 332
Understanding Force, Mass, and Acceleration 332
Modeling a Projectile 333
Switching to an Iterative Solution 334
Extracting a Reusable Class 335
Implementing Lander 336
Bootstrapping the Game 336
Building the Ship 337
Getting Pixel Perfect 339
Playing with ImageData 340
Making It Go Boom 343
Summary 347
CHAPTER 18: CREATING A 2-D PLATFORMER 349
Introduction 349
Creating a Tile Layer 350
Writing the TlleLayer Class 350
Exercising the TileLayer Code 352
Optimizing the Drawing 353
Handling Platformer Collisions 355
Adding the 2-D Component 356
Calculating Platformer Collisions 358
Stitching It Together with the PlatformStage 359
Building the Game 361
Boostrapping the Game 361
Creating the Enemy 363
Adding Bullets 364
Creating the Player 365
Summary 369
CHAPTER 19: BUILDING A CANVAS EDITOR 371
Introduction 371
Serving the Game with Node.js 371
Creating the package.json File 372
Setting Up Node to Serve Static Assets 372
viii
CONTENTS
Creating the Editor 373
Modifying the Platform Game 374
Creating the Editor Module 376
Adding Touch and Mouse Events 379
Selecting Tiles 381
Adding Level-Saving Support 383
Summary 384
CHAPTER 20: BUILDING FOR ONLINE AND SOCIAL 387
Introduction 387
Understanding HTTP-Based Multiplayer Games 388
Planning a Simple Social Game 388
Integrating with Facebook 389
Generating the Facebook Application 389
Creating the Node.js Server 390
Adding the Login View 393
Testing the Facebook Authentication 395
Connecting to a Database 396
Installing MongoDB on Windows 396
Installing MongoDB on OS X 396
Installing MongoDB on Linux 397
Connecting to MongoDB from the Command Line 397
Integrating MongoDB into the Game 398
Finishing Blob Clicker 401
Pushing to a Hosting Service 403
Summary 405
CHAPTER 21: GOING REAL TIME 407
Introduction 407
Understanding WebSockets 407
Using Native WebSockets in the Browser 408
Using Socket.io: WebSockets with Fallbacks 411
Creating the Scribble Server 411
Adding the Scribble Client 413
Building a Multiplayer Pong Game Using Socket.io 415
Dealing with Latency 415
Combating Cheating 416
Deploying Real-Time Apps 416
CONTENTS
Creating an Auto-Matching Server 417
Building the Pong Front End 419
Summary 425
CHAPTER 22: BUILDING NONTRADITIONAL GAMES 427
Introduction 427
Creating a Twitter Application 427
Connecting a Node App to Twitter 429
Sending Your First Tweet 429
Listening to the User Stream 430
Generating Random Words 431
Creating Twitter Hangman 432
Summary 437
CHAPTER 23: LOCATING VIA GEOLOCATION 441
Introduction 441
Getting Started with Geolocation 441
Getting a One-Time Position 442
Plotting a Location on a Map 444
Watching the Position Change over Time 445
Drawing an Interactive Map 446
Calculating the Position between Two Points 448
Summary 448
CHAPTER 24: QUERYING DEVICE ORIENTATION
AND ACCELERATION 449
Introduction 449
Looking at a Device Orientation 450
Getting Started with Device Orientation Events 450
Detecting and Using the Event 451
Understanding the Event Data 451
Trying Out Device Orientation 451
Creating a Ball Playground 452
Adding Orientation Control 454
Dealing with Browser Rotation 455
Summary 456
X
CONTENTS
CHAPTER 25: PLAYING SOUNDS, THE MOBILE ACHILLES HEEL 457
Introduction 457
Working with the Audio Tag 457
Using the Audio Tag for Basic Playback 458
Dealing with Different Supported Formats 458
Understanding the Limitations of Mobile Audio 459
Building a Simple Desktop Sound Engine 459
Using Audio Tags for Game Audio 460
Adding a Simple Sound System 460
Adding Sound Effects to Block Break 461
Building a Sound System for Mobile 463
Using Sound Sprites 463
Generating the Sprite File 466
Adding Sound Sprites to the Game 467
Looking to the Future of HTML5 Sound 467
Summary 467
CHAPTER 26: USING AN HTML5 GAME ENGINE 471
Introduction 471
Looking at the History of HTML5 Engines 471
Using a Commercial Engine 472
Impact.js 473
Spaceport.lo 474
IDE Engines 474
Using an Open-Source Engine 475
Crafty.js 475
LimeJS 476
EaselJS 478
Summary 481
CHAPTER 27: TARGETING APP STORES 483
Introduction 483
Packaging Your App for the Google Chrome Web Store 484
Creating a Hosted App 484
Creating a Packaged App 486
Publishing Your App 486
xxl
CONTENTS
Using CocoonJS to Accelerate Your App 487
Getting a Game Ready to Load into CocoonJS 487
Testing CocoonJS on Android 489
Building Your App in the Cloud 489
Building Apps with the AppMobi XDK and DirectCanvas 490
Understanding DirectCanvas 490
Installing the XDK 490
Creating the App 491
Modifying Alien Invasion to Use DirectCanvas 491
Testing Your App on a Device 496
Summary 496
CHAPTER 28: SEEKING OUT WHAT'S NEXT 497
Introduction 497
Going 3-D with WebGL 497
Getting Better Access to Sound with the Web Audio API 498
Making Your Game Bigger with the Full-Screen API 499
Locking Your Device Screen with the Screen Orientation API 499
Adding Real-Time Communications with WebRTC 499
Tracking Other Upcoming Native Features 500
Summary 500
APPENDIX: RESOURCES 501
INDEX 503