Learning HTML5 Game Programming: A Hands-on Guide to Building Online Games Using Canvas, SVG, and WebGL

Get Started Fast with HTML5 Online Game Programming!   HTML5 will transform web and mobile gaming. As new browsers rapidly adopt it, HTML5 will do everything “legacy” technologies such as Flash and Silverlight have done—and much more. In Learning HTML5 Game Programming, pioneering developer James L. Williams gives you all the knowledge, code, and insights you’ll need to get started fast!   Williams combines detailed explanations of HTML5’s key innovations with examples, including two case study applications that address the entire development process. He guides you through setting up a state-of-the-art HTML5 development environment; making the most of HTML5’s canvas tag, SVG vector graphics, and WebGL 3D; and targeting diverse mobile and social platforms. It’s all here: from the essentials of online game design to the nitty-gritty details of performance optimization.   About the Website   All code samples and answers to chapter exercises are available for download at www.informit.com/title/9780321767363 and on Github at https://github.com/jwill/html5-game-book.   Coverage includes ·          Understanding the HTML5 innovations that make it possible to create amazingly rich games ·          Setting up a state-of-the-art open source HTML5 game development environment ·          Using JavaScript to drive sophisticated interactions between users and games ·          Building basic games fast, with the prototype-based Simple Game Framework (SGF) ·          Generating movement and gameplay with the canvas tag and surface ·          Creating games with SVG vector graphics using the RaphaëlJS Javascript library ·          Using Three.js to build powerful WebGL 3D games with far less complexity ·          Developing games without JavaScript, using Google Web Toolkit (GWT) or CoffeeScript ·          Building a complete multiplayer game server using Node.js and WebSockets ·          Planning and choosing tools for mobile game development with HTML5 ·          Optimizing game performance with offline cache, minification, and other techniques   Learning HTML5 Game Programming is the fastest route to success with HTML5 game development—whether you’re a long-time game developer or a web/mobile programmer building games for the first time.  

Table of Contents:
Chapter 1 Introducing HTML5 1 Beyond Basic HTML 1 JavaScript 1 AJAX 2 Bridging the Divide 2 Google Gears 3 Chrome Frame 3 Getting Things Done with WebSockets and Web Workers 4 WebSockets 4 Web Workers 4 Application Cache 5 Database API 6 WebSQL API 6 IndexedDB API 7 Web Storage 7 Geolocation 8 Getting Users’ Attention with Notifications 10 Requesting Permission to Display Notifications 11 Creating Notifications 11 Interacting with Notifications 12 Media Elements 13 Controlling Media 13 Handling Unsupported Formats 14 HTML5 Drawing APIs 15 Canvas 15 SVG 16 WebGL 16 Conveying Information with Microdata 16 Chapter 2 Setting Up Your Development Environment 19 Development Tools 19 Installing Java 19 Installing the Eclipse IDE and Google Plugin 20 Google Web Toolkit 22 Web Server Tools and Options 23 Google App Engine 23 Opera Unite 23 Node.js and RingoJS 23 Browser Tools 24 Inside the Chrome Developer Tools 24 Chrome Extensions 25 Safari Developer Tools 26 Firebug 26 HTML5 Tools 27 ProcessingJS 27 Inkscape 27 SVG-edit 27 Raphaël 28 3D Modeling Tools 29 Blender 29 Chapter 3 Learning JavaScript 31 What Is JavaScript? 31 JavaScript’s Basic Types 31 Understanding Arithmetic Operators 32 Understanding JavaScript Functions 32 Functions as First-class Objects 33 Comparison Operators 34 Conditional Loops and Statements 35 Controlling Program Flow with Loops 36 Delayed Execution with setTimeout and setInterval 38 Creating Complex Objects with Inheritance and Polymorphism 38 Making Inheritance Easier with the Prototype Library 39 Learning JQuery 41 Manipulating the DOM with Selectors 42 JQuery Events 43 AJAX with JQuery 43 Cross-Site Scripting 44 JSON: The Other JavaScript Format 44 JavaScript Outside of the Browser 45 Mobile Platforms 45 JavaScript as an Intermediary Language 45 JavaScript on the Desktop 46 Server-Side JavaScript 48 Chapter 4 How Games Work 51 Designing a Game 51 Writing a Basic Design Document 51 Deciding on a Game Genre 52 The Game Loop 53 Getting Input from the User 53 Representing Game Objects with Advanced Data Structures 54 Making Unique Lists of Data with Sets 54 Creating Object Graphs with Linked Lists 56 Understanding the APIs in Simple Game Framework 57 Core API 57 Components API 58 Resources API and Networking APIs 58 Building Pong with the Simple Game Framework 59 Setting Up the Application 59 Drawing the Game Pieces 61 Making Worlds Collide with Collision Detection and Response 63 Understanding Newton’s Three Laws 63 Making the Ball Move 64 Advanced Collision Detection and Particle Systems with Asteroids 66 Creating Competitive Opponents with Artificial Intelligence 67 Adding AI to Pong 68 Advanced Computer AI with Tic-Tac-Toe 68 Chapter 5 Creating Games with the Canvas Tag 71 Getting Started with the Canvas 71 Drawing Your First Paths 72 Drawing Game Sprites for Tic-Tac-Toe 73 Drawing Objects on the Canvas with Transformations 75 Ordering Your Transformations 76 Saving and Restoring the Canvas Drawing State 77 Using Images with the Canvas 78 Serving Images with Data URLs 78 Serving Images with Spritesheets 78 Drawing Images on the Canvas 78 Animating Objects with Trident.js 79 Creating Timelines 80 Animating with Keyframes 81 Creating Nonlinear Timelines with Easing 81 Animating Game Objects with Spritesheets 83 Simulating 3D in 2D Space 84 Perspective Projection 84 Parallaxing 85 Creating a Parallax Effect with JavaScript 85 Creating Copy Me 87 Drawing Our Game Objects 87 Making the Game Tones 88 Playing MIDI Files in the Browser 89 Playing Multiple Sounds at Once 90 Playing Sounds Sequentially 91 Drawing Our Game Text 91 Styling Text with CSS Fonts 92 Chapter 6 Creating Games with SVG and RaphaëlJS 95 Introduction to SVG 95 First Steps with RaphaëlJS 97 Setting Up Our Development Environment 97 Drawing the Game Board 98 Drawing Game Text 99 Custom Fonts 100 Specifying Color 103 Loading Game Assets 104 Converting SVG Files to Bitmap Images 105 Creating Our Game Classes 105 Shuffling Cards 107 Drawing and Animating Cards 107 Creating Advanced Animations 110 Paths 110 moveto and lineto 110 curveto 111 Exporting Paths from an SVG File 112 Animating Along Paths 113 Extending Raphaël with Plugins 113 Adding Functions 113 SVG Filters 113 Speed Considerations 114 Chapter 7 Creating Games with WebGL and Three.js 117 Moving to Three Dimensions 118 Giving Your Objects Some Swagger with Materials and Lighting 119 Understanding Lighting 120 Using Materials and Shaders 120 Creating Your First Three.js Scene 122 Setting Up the View 123 Viewing the World 128 Loading 3D Models with Three.js 129 Programming Shaders and Textures 131 Using Textures 134 Creating a Game with Three.js 136 Simulating the Real World with Game Physics 137 Revisiting Particle Systems 140 Creating Scenes 141 Selecting Objects in a Scene 142 Animating Models 142 Sourcing 3D Models 143 Benchmarking Your Games 144 Checking Frame Rate with Stats.js 144 Using the WebGL Inspector 145 Chapter 8 Creating Games Without JavaScript 147 Google Web Toolkit 147 Understanding GWT Widgets and Layout 148 Exposing JavaScript Libraries to GWT with JSNI 149 RaphaëlGWT 150 Adding Sound with gwt-html5-media 151 Accessing the Drawing APIs with GWT 151 CoffeeScript 153 Installing CoffeeScript 153 Compiling CoffeeScript Files 153 A Quick Guide to CoffeeScript 154 Basics 154 Functions and Invocation 154 Aliases, Conditionals, and Loops 156 Enhanced for Loop and Maps 156 Classes and Inheritance 157 Alternate Technologies 158 Cappuccino 158 Pyjamas 158 Chapter 9 Building a Multiplayer Game Server 161 Introduction to Node.js 161 Extending Node with the Node Package Manager 162 Managing Multiple Node Versions 162 Making Web Apps Simpler with ExpressJS 163 Serving Requests with URL Routing 163 Managing Sessions 165 Understanding the ExpressJS Application Structure 165 Templating HTML with CoffeeKup 166 Persisting Data with Caching 168 Managing Client/Server Communication 169 Communicating with Socket.IO 169 Setting Up a Simple Socket.IO Application with Express 170 Making Web Sockets Simpler with NowJS 171 Debugging Node Applications 172 Creating a Game Server 173 Making the Game Lobby 173 Creating Game Rooms with NowJS Groups 174 Managing Game Participants and Moving Between Game Rooms 175 Managing Game Play 175 Chapter 10 Developing Mobile Games 179 Choosing a Mobile Platform 179 iOS 179 Android 180 WebOS 180 Windows Phone 7 180 Flick, Tap, and Swipe: A Quick Guide to Mobile Gestures 181 Deciding Between an Application and a Website 181 Storing Data on Mobile Devices 183 Relaxing in Your Lawnchair: An Easier Way to Store Data 183 Getting Started with Lawnchair 184 Client-Side Scripting Simplified with JQuery and Zepto 185 Using JQuery Variants 185 Using Zepto.js 187 Architecting Your Applications with JoApp 187 Choosing an Application Framework 188 PhoneGap 188 Diving into the PhoneGap APIs 189 Appcelerator Titanium 191 Diving into the Appcelerator Titanium APIs 191 Packaging Android Applications with Titanium and PhoneGap 191 Packaging an Application with Titanium 193 Packaging an Application with PhoneGap 195 Chapter 11 Publishing Your Games 199 Optimizing Your Game’s Assets 199 Minification with Google Closure Compiler 199 Running Applications Offline with Application Cache 201 Hosting Your Own Server 203 Deploying Applications on Hosted Node.js Services 204 Publishing Applications on the Chrome Web Store 205 Describing Your Application’s Metadata 206 Deploying a Hosted Application 207 Deploying a Packaged Application 208 Testing Your Applications Locally 208 Uploading Your Application to the Chrome Web Store 208 Configuring Your Application 210 Deciding Between Packaged and Hosted Chrome Apps 212 Publishing Applications with TapJS 212 Creating a TapJS Application 213 Packaging an Application for TapJS 215 Publishing a TapJS Application to Facebook 215 Publishing Games with Kongregate 217 Publishing HTML5 Applications to the Desktop 217 Index 219