Professional HTML5 Mobile Game Development

Overview

Create mobile game apps for the lucrative gaming market

If you're an experienced developer seeking to break into the sizzling mobile game market, this is the book for you. Covering all mobile and touchscreen devices, including iPhones, iPads, Android, and WP7.5, this book takes you through the steps of building both single- and multi-player mobile games. Topics include standard patterns for building games in HTML5, what methods to choose for building (CSS3, SVG, or Canvas), ...

See more details below
Paperback
$33.88
BN.com price
(Save 24%)$44.99 List Price

Pick Up In Store

Reserve and pick up in 60 minutes at your local store

Other sellers (Paperback)
  • All (16) from $7.99   
  • New (11) from $7.99   
  • Used (5) from $9.26   

Overview

Create mobile game apps for the lucrative gaming market

If you're an experienced developer seeking to break into the sizzling mobile game market, this is the book for you. Covering all mobile and touchscreen devices, including iPhones, iPads, Android, and WP7.5, this book takes you through the steps of building both single- and multi-player mobile games. Topics include standard patterns for building games in HTML5, what methods to choose for building (CSS3, SVG, or Canvas), popular game engines and frameworks, and much more. Best of all, code for six basic games is provided, so you can modify, further develop, and make it your own.

  • Shows intermediate developers how to develop games in HTML5 and build games for iPhone, iPad, Android, and WP7.5 mobile and touchscreen devices
  • Explains single-player and multi-player mobile game development
  • Provides code for six basic games in a GitHub repository, so readers can collaborate and develop the code themselves
  • Explores specific APIs to make games even more compelling, including geolocation, audio, and device orientation
  • Reviews three popular open-source HTML5 game engines—crafty.js, easel.js, and enchant.js
  • Covers simple physics as well as using an existing physics library

The world is going mobile, as is the game industry. Professional HTML5 Mobile Game Development helps savvy developers join in this exploding market.

Read More Show Less

Product Details

  • ISBN-13: 9781118301326
  • Publisher: Wiley
  • Publication date: 9/19/2012
  • Edition number: 1
  • Pages: 552
  • Sales rank: 1,403,630
  • Product dimensions: 7.40 (w) x 9.20 (h) x 1.10 (d)

Meet the Author

Pascal Rettig runs Cykod, a Boston-based web consultancy founded in 2006 and focused on online interactive applications. He is the CTO of GamesForLanguage, he founded the Boston HTML5 Game development meet-up, and he served as the guest editor for the UX Magazine issue on games and gaming.

Read More Show Less

Table of Contents

INTRODUCTION xxiii

PART I: DIVING IN

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 HTML and 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

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

Defi ning 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

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

PART II: MOBILE HTML5

CHAPTER 4: HTML5 FOR MOBILE 67

Introduction 67

Capturing a Brief History of HTML5 68

Understanding How HTML5 Grew Up “Diff erent” 68

Looking Toward HTML6? HTML7? Nope, Just HTML5 68

Going to the Spec 69

Diff erentiating the HTML5 Family and HTML5 69

Using HTML5 The Right Way 70

Having Your Cake and Eating It, Too 70

Sniffi ng Browsers 70

Determining Capabilities, Not Browsers 72

Enhancing Progressively 73

Polyfi lling 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 Off ering 79

WP7 Internet Explorer 9 79

Tablets 79

Summary 79

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

Confi guring Your App for the iOS Home Screen 103

Making Your Game Web App Capable 103

Adding a Startup Image 103

Confi guring 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

Going Offl ine 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

PART III: JAVASCRIPT GAME DEV BASICS

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 Traffi c 119

Debugging JavaScript 121

Examining the Console Tab 121

Exercising the Script Tab 123

Profi ling and Optimizing Your Code 125

Running Profi les 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

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

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

Defi ning Asset Types 189

Loading Specifi c Assets 189

Finishing the Loader 191

Adding Preload Support 194

Summary 195

CHAPTER 11: BOOTSTRAPPING THE QUINTUS ENGINE: PART III 197

Introduction 197

Defi ning 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

PART IV: BUILDING GAMES WITH CSS3 AND SVG

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 Specifi cs 223

Bootstrapping the Quintus DOM Module 223

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

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

PART V: HTML5 CANVAS

CHAPTER 15: LEARNING CANVAS, THE HERO OF HTML5 297

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 Snowfl akes 311

Applying Canvas Eff ects 313

Adding Shadows 314

Using Composition Eff ects 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

xviii

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 TileLayer 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

xix

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

PART VI: MULTIPLAYER GAMING

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

xx

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

PART VII: MOBILE ENHANCEMENTS

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

xxi

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 Diff erent 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 Eff ects 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

PART VIII: GAME ENGINES AND APP STORES

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.io 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

xxii

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

Read More Show Less

Customer Reviews

Be the first to write a review
( 0 )
Rating Distribution

5 Star

(0)

4 Star

(0)

3 Star

(0)

2 Star

(0)

1 Star

(0)

Your Rating:

Your Name: Create a Pen Name or

Barnes & Noble.com Review Rules

Our reader reviews allow you to share your comments on titles you liked, or didn't, with others. By submitting an online review, you are representing to Barnes & Noble.com that all information contained in your review is original and accurate in all respects, and that the submission of such content by you and the posting of such content by Barnes & Noble.com does not and will not violate the rights of any third party. Please follow the rules below to help ensure that your review can be posted.

Reviews by Our Customers Under the Age of 13

We highly value and respect everyone's opinion concerning the titles we offer. However, we cannot allow persons under the age of 13 to have accounts at BN.com or to post customer reviews. Please see our Terms of Use for more details.

What to exclude from your review:

Please do not write about reviews, commentary, or information posted on the product page. If you see any errors in the information on the product page, please send us an email.

Reviews should not contain any of the following:

  • - HTML tags, profanity, obscenities, vulgarities, or comments that defame anyone
  • - Time-sensitive information such as tour dates, signings, lectures, etc.
  • - Single-word reviews. Other people will read your review to discover why you liked or didn't like the title. Be descriptive.
  • - Comments focusing on the author or that may ruin the ending for others
  • - Phone numbers, addresses, URLs
  • - Pricing and availability information or alternative ordering information
  • - Advertisements or commercial solicitation

Reminder:

  • - By submitting a review, you grant to Barnes & Noble.com and its sublicensees the royalty-free, perpetual, irrevocable right and license to use the review in accordance with the Barnes & Noble.com Terms of Use.
  • - Barnes & Noble.com reserves the right not to post any review -- particularly those that do not follow the terms and conditions of these Rules. Barnes & Noble.com also reserves the right to remove any review at any time without notice.
  • - See Terms of Use for other conditions and disclaimers.
Search for Products You'd Like to Recommend

Recommend other products that relate to your review. Just search for them below and share!

Create a Pen Name

Your Pen Name is your unique identity on BN.com. It will appear on the reviews you write and other website activities. Your Pen Name cannot be edited, changed or deleted once submitted.

 
Your Pen Name can be any combination of alphanumeric characters (plus - and _), and must be at least two characters long.

Continue Anonymously

    If you find inappropriate content, please report it to Barnes & Noble
    Why is this product inappropriate?
    Comments (optional)