Table Of ContentPro Android Web Game
Apps
Using HTML5, CSS3, and JavaScript
Juriy Bura
Pro Android Web Game Apps: Using HTML5, CSS3, and JavaScript
Copyright © 2012 by Juriy Bura and Paul Coates
All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means,
electronic or mechanical, including photocopying, recording, or by any information storage or retrieval
system, without the prior written permission of the copyright owner and the publisher.
ISBN 978-1-4302-3819-5
ISBN 978-1-4302-3820-1 (eBook)
Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol
with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in
an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the
trademark.
The images of the Android Robot (011 Android Robot) are reproduced from work created and shared by
Google and used according to terms described in the Creative Commons 3.0 Attribution License. Android
and all Android-and Google-based marks are trademarks or registered trademarks of Google, Inc., in the
U.S. and other countries. Apress Media, L.L.c. is not affiliated with Google, Inc., and this book was written
without endorsement from Google, Inc.
The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are
not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject
to proprietary rights.
President and Publisher: Paul Manning
Lead Editor: Chris Nelson
Technical Reviewer: Charles Cruz
Editorial Board: Steve Anglin, Mark Beckner, Ewan Buckingham, Gary Cornell, Jonathan Gennick,
Jonathan Hassell, Michelle Lowman, James Markham, Matthew Moodie, Jeff Olson, Jeffrey
Pepper, Douglas Pundick, Ben Renow-Clarke, Dominic Shakeshaft, Matt Wade, Tom Welsh
Coordinating Editor: Brigid Duffy
Copy Editor: Kimberly Burton
Compositor: Bytheway Publishing Services
Indexer: SPi Global
Artist: SPi Global
Cover Art By: Sergey Lesiuk
Cover Designer: Anna Ishchenko
Distributed to the book trade worldwide by Springer Science+ Business Media, LLC., 233 Spring Street, 6th
Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail orders-ny@springer-
sbm. com, or visit www.springeronline.com.
For information on translations, please e-mail rights@apress.com, or visit www.apress.com.
Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use.
eBook versions and licenses are also available for most titles. For more information, reference our Special
Bulk Sales-eBook Licensing web page at www.apress.com/bulk -sales.
The information in this book is distributed on an "as is" basis, without warranty. Although every
precaution has been taken in the preparation of this work, neither the author(s) nor Apress shall have any
liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly
or indirectly by the information contained in this work.
The source code for this book is available to readers at www.apress.com. You will need to answer questions
pertaining to this book in order to successfully download the code.
ii
To Elena and Alysa
iii
------
Contents at a Glance
II About the Authors •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••............................. xiii
Acknowledgments ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• xiv
Introduction ............................................•••••••••••••••••••••••••••••••••••••••••••••••••••••• xv
Section I: 20 Worlds •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
Chapter 1: Getting Started •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• 1
Chapter 2: Graphics in the Browser: The Canvas Element ............................ 41
Chapter 3: Creating the First Game •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• 89
II Chapter 4: Animation and Sprites ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• 123
Chapter 5: Event Handling and User Input .................................................. 173
Chapter 6: Rendering Virtual Worlds •••••••••••••••••••••••••••••••••••••••••••••••••••••••••• 217
Chapter 7: Making an Isometric Engine ..................................................... 255
Section II: 3D Worlds ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
Chapter 8: 3D in a Browser ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• 333
Chapter 9: Using WebGL •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• 357
Section III: Connecting Worlds ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
Chapter 10: Going Server-Side ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• 397
Chapter 11: Talking to the Server ............................................................... 449
Chapter 12: The Anatomy of a Network Game ............................................ 477
Section IV: Improving Worlds •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
Chapter 13: AI in Games ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• 513
Chapter 14: JavaScript Game Engines ........................................................ 541
Chapter 15: Building Native Applications ................................................... 565
Chapter 16: Adding Sound •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• 599
Appendix: Debugging Client-side JavaScript ............................................. 615
Index ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• 629
iv
-------
Contents
About the Authors ........................................................................................ xiii
Acknowledgments ....................................................................................... xiv
Introduction .................................................................................................. xv
Section I: 20 Worlds .........................................................................................
Chapter 1: Getting Started .............................................................................. 1
Tools ...............................................................................................................................2
What We'll Need ..................................................................................................................................................... 3
Java Development Kit ............................................................................................................................................. 6
Integrated Development Environment .................................................................................................................... 7
Web Server ........................................................................................................................................................... 14
The Android SDK and Emulator ............................................................................................................................ 17
Techniques ...................................................................................................................2 2
The Code ............................................................................................................................................................... 22
Object-Oriented Programming .............................................................................................................................. 28
A Word About Mobile Browsers ............................................................................................................................ 38
Summary ......................................................................................................................3 9
Chapter 2: Graphics in the Browser: The Canvas Element ............................ 41
The Anatomy of the Game ............................................................................................4 2
Drawing Inside the Browser ......................................................................................... 43
The Basic HTML Setup .................................................................................................4 4
What Is Canvas? ..........................................................................................................4 5
The Context. .......................................................................................................................................................... 47
The Coordinate System ........................................................................................................................................ 48
Drawing Shapes ...........................................................................................................5 2
Rectangles ............................................................................................................................................................ 52
Paths ..................................................................................................................................................................... 55
Subpaths .............................................................................................................................................................. 65
v
CONTENTS
Strokes and Fills ..........................................................................................................6 6
Solid Colors ........................................................................................................................................................... 66
Gradients .............................................................................................................................................................. 67
Patterns ................................................................................................................................................................7 2
Context State and Transformations ............................................................................. 75
Translate ...............................................................................................................................................................7 6
Scale .....................................................................................................................................................................7 7
Rotate ...................................................................................................................................................................7 9
Stacking Transformations .................................................................................................................................... 80
Context State ........................................................................................................................................................ 81
Context Transformations in the Sample Project ................................................................................................... 82
The Sample Game Project Result. ................................................................................ 84
Summary ......................................................................................................................8 8
Chapter 3: Creating the First Game .............................................................. 89
HTML5 Game Skeleton .................................................................................................9 0
The Standard Skeleton ......................................................................................................................................... 91
Forced Orientation ................................................................................................................................................ 95
Game Architecture .......................................................................................................9 8
Making the Game .......................................................................................................1 01
Rendering the Board ........................................................................................................................................... 101
Game State and Logic ......................................................................................................................................... 108
Wiring Components Together: The Game Class ................................................................................................. 115
Adding the Game to the HTML Skeleton ............................................................................................................. 118
Summary ....................................................................................................................1 20
Chapter 4: Animation and Sprites ............................................................... 123
Sprites ........................................................................................................................1 24
Loading Images .................................................................................................................................................. 126
Drawing an Image .............................................................................................................................................. 139
Sprite Sheets ...................................................................................................................................................... 144
Basics of Animation ................................................................................................... 148
The Simplest Animation ...................................................................................................................................... 148
JavaScript Threading Model ............................................................................................................................... 150
Timers ................................................................................................................................................................. 152
Improving Animation .......................................................................................................................................... 156
Summary ....................................................................................................................1 72
Chapter 5: Event Handling and User Input .................................................. 173
Browser Events ..........................................................................................................1 74
Desktop Browser vs. Android Browser Input ...................................................................................................... 174
Using Events to Catch User Input ....................................................................................................................... 176
Getting More from Events ................................................................................................................................... 180
vi
CONTENTS
Handling the Differences Between Touch and Mouse Interfaces ....................................................................... 182
Custom Events ...........................................................................................................1 87
Custom Event Listeners and Emitters ........................................................................ 188
EventEmitter: The Base Class ............................................................................................................................. 188
Events vs. Callbacks ........................................................................................................................................... 191
Custom Events ...........................................................................................................1 93
Implementing InputHandlerBase ........................................................................................................................ 196
Creating MouselnputHandler .............................................................................................................................. 200
Creating TouchlnputHandler ............................................................................................................................... 203
Advanced Input ..........................................................................................................2 05
Drag-and-Drop .................................................................................................................................................... 205
Pixel-Perfect Picking and Image Masks ............................................................................................................. 206
Composite Operations ........................................................................................................................................ 208
Simulating Joystick ....................................................................................................2 13
Summary ....................................................................................................................2 16
Chapter 6: Rendering Virtual Worlds .......................................................... 217
Tile Maps ....................................................................................................................2 18
The Idea Behind Tile Maps ................................................................................................................................. 218
Implementing a Tile Map .................................................................................................................................... 220
Measuring FPS ................................................................................................................................................... 226
Optimizing Rendering Performance ........................................................................... 228
Draw Only What Is Required ............................................................................................................................... 228
Offscreen Buffer ................................................................................................................................................. 231
Caching the Area Around the Viewport. .............................................................................................................. 235
World Objects .............................................................................................................2 40
Coordinate Systems ............................................................................................................................................ 240
Implementing WorldObjectRenderer .................................................................................................................. 242
Rendering Order ................................................................................................................................................. 245
Optimizations ...................................................................................................................................................... 247
Isometric View ...........................................................................................................2 50
Summary ....................................................................................................................2 53
Chapter 7: Making an Isometric Engine ..................................................... 255
Setup ..........................................................................................................................2 57
The Plan .............................................................................................................................................................. 257
Preparing the Workspace ................................................................................................................................... 259
Basic Code .......................................................................................................................................................... 260
Utilities ................................................................................................................................................................ 263
Isometric Terrain ........................................................................................................2 71
Coordinate Systems ............................................................................................................................................ 271
Rendering Tiles ................................................................................................................................................... 272
vii
CONTENTS
Implementing IsometricTileLayer ....................................................................................................................... 277
Rendering Objects ......................................................................................................2 87
Implementing Object Clusters ............................................................................................................................ 291
Object Cache ...................................................................................................................................................... 294
Handling Movement ............................................................................................................................................ 298
Composite Objects .............................................................................................................................................. 300
Object Layer: Next Steps .................................................................................................................................... 302
Dirty Rectangles .........................................................................................................3 03
How It Works ...................................................................................................................................................... 304
Implementation ................................................................................................................................................... 306
Integrating with Layers ....................................................................................................................................... 310
Marking Dirty Rectangles ................................................................................................................................... 315
UI and Layer Manager ................................................................................................3 17
Layer Manager .................................................................................................................................................... 317
UI ........................................................................................................................................................................ 320
Interaction ..................................................................................................................3 24
Event Propagation and Handling ........................................................................................................................ 325
Stopping the Propagation ................................................................................................................................... 329
Summary ....................................................................................................................3 31
Section II: 3D Worlds ........................................................................................
Chapter 8: 3D in a Browser ......................................................................... 333
Introducing 3D Rendering ..........................................................................................3 34
How 3D Rendering Works ..........................................................................................3 35
The Math ............................................................................................................................................................. 335
A 3D Example ..................................................................................................................................................... 336
The Hello World 3D Engine .........................................................................................3 38
Model and Scene ................................................................................................................................................ 339
Rendering ........................................................................................................................................................... 341
Summary ....................................................................................................................3 56
Chapter 9: Using WebGL .............................................................................. 357
Basics of WebGL ........................................................................................................3 58
Initializing WebGL ............................................................................................................................................... 358
Geometry ............................................................................................................................................................ 360
OpenGL ES 2.0 Rendering Pipeline ..................................................................................................................... 363
Using Buffers ...................................................................................................................................................... 365
Shaders and GLSL .............................................................................................................................................. 366
Basic Example: Render a 3D Cube .............................................................................3 73
Using Shaders in a Web Page ............................................................................................................................. 373
Rendering Hello World ........................................................................................................................................ 375
Exploring WebGL ........................................................................................................3 80
viii
CONTENTS
Color ................................................................................................................................................................... 381
Textures .............................................................................................................................................................. 386
Loading Models .................................................................................................................................................. 391
Summary ....................................................................................................................3 94
Section III: Connecting Worlds ..........................................................................
Chapter 10: Going Server-Side ................................................................... 397
Node.js Basics ............................................................................................................3 99
Introducing Node.js ............................................................................................................................................ 399
Programming Model ........................................................................................................................................... 400
Installing Node.js ................................................................................................................................................ 403
Debugging Node Scripts ..................................................................................................................................... 404
Writing Scripts for Node.js .........................................................................................4 07
Exceptions and Stack Traces ............................................................................................................................. 407
Global Namespace and Node Modules ............................................................................................................... 408
Writing the First Module ..................................................................................................................................... 412
Discovering Modules .......................................................................................................................................... 415
Using NPM .......................................................................................................................................................... 417
Getting Real: Building a Server for the Game ............................................................. 420
Web Development Frameworks for Node ........................................................................................................... 420
Basic Output ....................................................................................................................................................... 421
Rendering Web Pages ........................................................................................................................................ 425
Parsing User Input .............................................................................................................................................. 431
Working with Sessions ....................................................................................................................................... 433
Understanding Middleware ........................................................................................4 34
Housekeeping ............................................................................................................4 37
Reporting Errors ................................................................................................................................................. 437
Logging ............................................................................................................................................................... 442
Server Configurations ......................................................................................................................................... 444
Summary ....................................................................................................................4 47
Chapter 11: Talking to the Server ............................................................... 449
The Evolution of Networking in Browsers .................................................................. 450
Server Setup ..............................................................................................................4 53
Using XMLHttpRequest API for Basic HTTP Requests ............................................... 453
HTIP Request with Plain Old XHR ....................................................................................................................... 454
Handling Errors with XHR ................................................................................................................................... 456
XMLHttpRequest Level 2 .................................................................................................................................... 458
Working with Binary Data ................................................................................................................................... 459
Reverse Ajax ..............................................................................................................4 61
The Problem ....................................................................................................................................................... 462
The Solutions ...................................................................................................................................................... 462
ix
