ptg6899256 ptg6899256 Learning HTML5 Game Programming ptg6899256 The Addison-Wesley Learning Series is a collection of hands-on programming guides that help you quickly learn a new technology or language so you can apply what you’ve learned right away. Each title comes with sample code for the application or applications built in the text. This code is fully annotated and can be reused in your own projects with no strings attached. Many chapters end with a series of exercises to encourage you to reexamine what you have just learned, and to tweak or adjust the code as a way of learning. Titles in this series take a simple approach: they get you going right away and leave you with the ability to walk off and build your own application and apply the language or technology to whatever you are working on. Visit informit.com/learningseries for a complete list of available publications. Addison-Wesley Learning Series ptg6899256 Learning HTML5 Game Programming A Hands-on Guide to Building Online Games Using Canvas, SVG, and WebGL James L. Williams Upper Saddle River, NJ • Boston • Indianapolis • San Francisco New York • Toronto • Montreal • London • Munich • Paris • Madrid Cape Town • Sydney • Tokyo • Singapore • Mexico City ptg6899256 Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and the publish- er was aware of a trademark claim, the designations have been printed with initial capital letters or in all capitals. The author and publisher have taken care in the preparation of this book, but make no expressed or implied warranty of any kind and assume no responsibility for errors or omis- sions. No liability is assumed for incidental or consequential damages in connection with or arising out of the use of the information or programs contained herein. The publisher offers excellent discounts on this book when ordered in quantity for bulk pur- chases or special sales, which may include electronic versions and/or custom covers and content particular to your business, training goals, marketing focus, and branding interests. For more information, please contact: U.S. Corporate and Government Sales (800) 382-3419 corpsales@pearsontechgroup.com For sales outside the United States, please contact: International Sales international@pearson.com Visit us on the Web: informit.com/aw Library of Congress Cataloging-in-Publication Data: Williams, James L. (James Lamar), 1981- Learning HTML5 game programming : a hands-on guide to building online games using Canvas, SVG, and WebGL / James L. Williams. p. cm. ISBN 978-0-321-76736-3 (pbk. : alk. paper) 1. Computer games—Programming. 2. HTML (Document markup language) I. Title. QA76.76.C672W546 2011 794.8’1526—dc23 2011027527 Copyright © 2012 Pearson Education, Inc. All rights reserved. Printed in the United States of America. This publication is protected by copyright, and permission must be obtained from the publisher prior to any prohibited repro- duction, storage in a retrieval system, or transmission in any form or by any means, elec- tronic, mechanical, photocopying, recording, or likewise. For information regarding permis- sions, write to: Pearson Education, Inc. Rights and Contracts Department 501 Boylston Street, Suite 900 Boston, MA 02116 Fax (617) 671-3447 ISBN-13: 978-0-321-76736-3 ISBN-10: 0-321-76736-5 Text printed in the United States on recycled paper at RR Donnelly in Crawfordsville, Indiana. First printing September 2011 Associate Publisher Mark Taub Senior Acquisitions Editor Trina MacDonald Development Editor Songlin Qiu Managing Editor Kristy Hart Project Editor Anne Goebel Copy Editor Bart Reed Indexer Tim Wright Proofreader Sheri Cain Technical Reviewers Romin Irani Pascal Rettig Robert Schwentker Publishing Coordinator Olivia Basegio Cover Designer Chuti Prasertsith Senior Compositor Gloria Schurick ptg6899256 ❖ To I n s p i ra t i o n Came over for a midnight rendezvous And is gone by morning as if by cue —Author ❖ ptg6899256 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 ptg6899256 viiContents 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 ptg6899256 viii Contents 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 ptg6899256 ixContents 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 ptg6899256 x Contents 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 ptg6899256 xiContents 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 ptg6899256 xii Contents 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 ptg6899256 xiiiContents 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 ptg6899256 Preface I wrote this book to scratch an itch, but also because I could see the potential in the (at the time) nascent HTML5 gaming community. I wanted to help developers navigate the wilderness of HTML5 and learn about Canvas,WebGL, and SVG, along with best prac- tices for each. It sometimes took a bit of discussion to convince developers that HTML5 wasn’t just a plaything.They were surprised to learn they could have rich content with all the niceties of a desktop application—such as double buffering, hardware acceleration, and caching inside the confines of the browser without a plugin. Many of them considered Flash as the sole option. It was interesting to watch the tides turn from “Flash for every- thing” to “Use Flash only where there are HTML5 gaps.” During my writing of this book, the ecosystem around HTML5 game programming has rapidly evolved and matured. I am sure the technologies will continue to evolve, and I look forward to the advances the next year brings. Key Features of This Book This book covers areas contained in the “loose” definition of HTML5, meaning the HTML5 specification,WebGL, SVG, and JavaScript as they pertain to game program- ming. It includes sections on the math behind popular game effects, teaching you the hard way before providing the one to two lines of code solution. For those who are still getting accustomed to JavaScript, there is a chapter on alternative languages that can be used to produce games.These include languages that run directly in the JavaScript engine, those that compile to JavaScript, or those that are a combination of the two. Server-side JavaScript has taken the programming world by storm in recent months. For games, it presents an extra level of flexibility to structure games. Logic can start in a self- contained client instance and then progress to a scalable server instance with few changes in code.The book closes with a discussion of how and where you might publish your games.You have a multitude of choices for game engines and libraries.All the libraries used in this book are unobtrusive in their handling of data, and you could easily take the lessons learned and apply them to other libraries.This book does not discuss the low- level details of WebGL, instead opting for the use of a high-level library that permits low-level API access when needed.The goal of this book is to get you quickly up and running, not to teach you all there is to know about WebGL, which could be a book all by itself. Target Audience for This Book This book is intended for application developers who use or would like to learn how to use HTML5 and associated web technologies to create interactive games. It assumes knowledge of some programming languages and some basic math skills. ptg6899256 Code Examples and Exercises for This Book The code listings as well as the answers for the exercises included in this book are avail- able on the book’s website.You can download chapter code and answers to the chapter exercises (if they are included in the chapter) at http://www.informit.com/title/ 9780321767363.The code listings are also available on Github at https://github.com/ jwill/html5-game-book. ptg6899256 Acknowledgments I have several people to thank for this book.The Pearson team (including Trina MacDonald, Songlin Qiu, and Olivia Basegio) has been invaluable during the project. Their goal is to make one’s work that much more awesome, and I think they succeeded. Writing a book on a topic that’s evolving rapidly involves a certain measure of guessing where the market will go. I’m glad to have had technical reviewers (Romin Irani, Pascal Rettig, and Robert Schwentker) who shared my passion for the subject matter, gave me speedy and precise feedback, and validated my predictions when I was right, yet got me back on track when I veered slightly off course.And lastly, to my family and friends who listened patiently without judgment, let me off easy when I flaked, and other times forced me to take a break; thanks, I needed that. ptg6899256 About the Author James L. Williams is a developer based in Silicon Valley and frequent conference speak- er, domestically and internationally. He was a successful participant in the 2007 Google Summer of Code, working to bring easy access to SwingLabs UI components to Groovy. He is a co-creator of the Griffon project, a rich desktop framework for Java applications. He and his team,WalkIN, created a product on a coach bus while riding to SXSW and were crowned winners of StartupBus 2011. His first video game was Buck Rogers: Planet of Zoom on the Coleco Adam, a beast of a machine with a blistering 3.58MHz CPU, a high-speed tape drive, and a propensity to erase floppy disks at bootup. He blogs at http://jameswilliams.be/blog and tweets as @ecspike. ptg6899256 This page intentionally left blank ptg6899256 1 Introducing HTML5 HTML5 is a draft specification for the next major iteration of HTML. It represents a break from its predecessors, HTML4 and XHTML. Some elements have been removed and it is no longer based on SGML, an older standard for document markup. HTML5 also has more allowances for incorrect syntax than were present in HTML4. It has rules for parsing to allow different browsers to display the same incorrectly formatted docu- ment in the same fashion.There are many notable additions to HTML, such as native drawing support and audiovisual elements. In this chapter, we discuss the features added by HTML5 and the associated JavaScript APIs. Beyond Basic HTML HTML (Hypertext Markup Language), invented by Tim Berners-Lee, has come a long way since its inception in 1990. Figure 1-1 shows an abbreviated timeline of HTML from the HTML5Rocks slides (http://slides.html5rocks.com/#slide3). Although all the advancements were critical in pushing standards forward, of particular interest to our pursuits is the introduction of JavaScript in 1996 and AJAX in 2005.Those additions transformed the Web from a medium that presented static unidirectional data, like a newspaper or book, to a bidirectional medium allowing communication in both directions. JavaScript JavaScript (née LiveScript and formally known as ECMAScript) started as a scripting lan- guage for the browser from Netscape Communications. It is a loosely typed scripting language that is prototype-based and can be object-oriented or functional. Despite the name, JavaScript is most similar to the C programming language, although it does inherit some aspects from Java. The language was renamed JavaScript as part of a marketing agreement between Sun Microsystems (now Oracle Corporation) and Netscape to promote the scripting language alongside Sun’s Java applet technology. It become widely used for scripting client-side ptg6899256 2 Chapter 1 Introducing HTML5 Figure 1-1 HTML timeline web pages, and Microsoft released a compatible version named JScript, with some addi- tions and changes, because Sun held the trademark on the name “JavaScript.” AJAX AJAX (Asynchronous JavaScript and XML) started a new wave of interest in JavaScript programming. Once regarded as a toy for amateurs and script kiddies,AJAX helped developers solve more complex problems. At the epicenter of AJAX is the XMLHttpRequest object invented by Microsoft in the late 1990s. XMLHttpRequest allows a website to connect to a remote server and receive structured data.As opposed to creating a set of static pages, a developer was empowered to create highly dynamic applications. Gmail,Twitter, and Facebook are examples of these types of applications. We are currently in the midst of another JavaScript renaissance, as the major browser makers have been using the speed of their JavaScript engines as a benchmark for compar- ison. JavaScript as a primary programming language has found its way into server-side web components, such as Node.js, and mobile application frameworks, such as WebOS and PhoneGap. Bridging the Divide Even the best of standards takes a while to gain uptake.As a means to not let the lack of features limit innovation, Google created Chrome Frame and Google Gears (later, simply Gears) to bring advanced features to older browsers. ptg6899256 3Bridging the Divide Google Gears Google Gears, which was initially released in May 2007, has come to define some of the advanced features of the HTML5 draft specification. Before the advent of HTML5, many applications used Gears in some way, including Google properties (Gmail,YouTube, Doc, Reader, and so on), MySpace, Remember the Milk, and WordPress, among others. Gears is composed of several modules that add functionality more typical of desktop applica- tions to the browser. Let’s take a moment and talk about some of its features. In its first release, Gears introduced the Database, LocalServer, and WorkerPool mod- ules. Gears’ Database API uses an SQLite-like syntax to create relational data storage for web applications.The data is localized to the specific application and complies with gen- eralized cross-site scripting rules in that an application cannot access data outside its domain.The LocalServer module enables web applications to save and retrieve assets to a local cache even if an Internet connection is not present.The assets to serve from local cache are specified in a site manifest file.When an asset matching a URL in the manifest file is requested, the LocalServer module intercepts the request and serves it from the local store. The WorkerPool module helps address one of the prevalent problems with JavaScript- intensive websites: long-running scripts that block website interaction.A website by default has a single thread to do its work.This is generally not a problem for very short, bursty actions (such as simple DOM manipulation) that return quickly.Any long-running task, such as file input/output or trying to retrieve assets from a slow server, can block interaction and convince the browser that the script is unresponsive and should be force- fully ended.The WorkerPool module brought the concept of multithreading computing to the browser by letting your WorkerPool create “workers” that can execute arbitrary JavaScript.Workers can send and receive messages to and from each other, provided they are in the same WorkerPool, so they can cooperate on tasks.Workers can work cross- origin but inherit the policy from where they are retrieved.To account for the fact that several properties such as Timer and HttpRequest are exposed by the window object, which is not accessible to workers, Gears provides its own implementations. Another API of interest is the Geolocation API.The Geolocation API attempts to get a fix on a visitor by using available data such as the IP address, available Wi-Fi routers with a known location, cell towers, and other associated data. Google ceased principal development of Gears in November 2009 and has since shifted focus to getting the features into HTML5.Thankfully, all these features we’ve dis- cussed found their way into HTML5 in some shape or form. Chrome Frame Chrome Frame is a project that embeds Google Chrome as a plugin for Internet Explorer 6 and higher versions, which have weak HTML5 support. Chrome Frame is activated upon recognition of a meta tag. Chrome Frame currently does not require admin rights to be installed, thus opening opportunities on systems that are otherwise locked down. ptg6899256 4 Chapter 1 Introducing HTML5 You can find more information about Chrome Frame at http://code.google.com/ chrome/chromeframe/. Getting Things Done with WebSockets and Web Workers One of the additions to HTML5 is APIs that help the web application communicate and do work.WebSockets allow web applications to open a channel to interact with web services.Web Workers permit them to run nontrivial tasks without locking the browser. WebSockets WebSockets allow applications to have a bidirectional channel to a URI endpoint. Sock- ets can send and receive messages and respond to opening or closing a WebSocket. Although not part of the specification, two-way communication can be achieved in sev- eral other ways, including Comet (AJAX with long polling), Bayeux, and BOSH. Listing 1-1 shows the code to create a WebSocket that talks to the echo server end- point.After creating the socket, we set up the functions to be executed when the socket is opened, closed, receives a message, or throws an error. Next, a “Hello World!” message is sent, and the browser displays “Hello World!” upon receipt of the return message. Listing 1-1 WebSocket Code for Echoing a Message var socket = new WebSocket(ws://websockets.org:8787/echo); socket.onopen = function(evt) { console.log("Socket opened");}; socket.onclose = function(evt) {console.log("Socket closed");}; socket.onmessage = function(evt){console.log(evt.data);}; socket.onerror = function(evt) {console.log("Error: "+evt.data);}; socket.send("Hello World!"); Web Workers Web Workers are the HTML5 incarnation of WorkerPools in Google Gears. Unlike WorkerPools, we don’t have to create a pool to house our Web Workers. Listing 1-2 shows the code to create a simple worker and set a function for it to execute upon receipt of a message. Listings 1-2 and 1-3 show the HTML code for creating a web page with a Web Worker that displays the current date and time on two-second intervals. Listing 1-2 Web Page for Requesting the Time Web Worker example ptg6899256 5Application Cache ) { case value1: codeToExecute1(); break; case value2: codeToExecute2(); break; default: codeToExecute3(); break; } The values listed in the case statements can be strings, numbers, or Booleans.The break keyword prevents subsequent case statements from being evaluated and prevents their code from being executed. default provides the code to execute when the expression doesn’t match any case. Controlling Program Flow with Loops Eventually we will need to run blocks of code over and over again.Although copying and pasting the code blocks over and over again does work, it becomes fairly messy when you have to change that code.And it looks very amateurish. Loops allow you to run specific blocks of code given some pre- or post-conditions. while Loops while loops run a specific block of code until some expression is no longer true. For example, we could create the variable count with an initial value of 0, printing the count to the console and incrementing count until it is equal to 10. Listing 3-6 shows the code for that while loop. Listing 3-6 Sample while Loop var count = 0; while (count < 10) { console.log("The count is now:"+count); ptg6899256 37Conditional Loops and Statements count++; } It is useful to note that if the condition tested by the while loop evaluates to false on the first attempt, the code block never runs.The do-while loop, on the other hand, is a vari- ant of the traditional while loop that ensures the code block executes at least once. Listing 3-7 shows a do-while loop that executes exactly once due to a nonsense compar- ison.As opposed to starting the expression with the while keyword and expression to evaluate, we start with the do keyword and the while clause comes at the end. Listing 3-7 Sample do-while Loop do { console.log ("This loop executes only once."); } while (1 != 1); for Loops while and do-while loops allow us to test a single condition. for loops give us a way to control the flow a bit more. JavaScript for loops mirror the form of Java for loops, start- ing with the for keyword followed by initialization expression(s), test condition(s), and the looping interval. Listing 3-8 shows the while loop shown in Listing 3-7 adapted to a for loop. Listing 3-8 Sample for Loop for (var count = 0; count < 10; count++) { console.log("The count is now:"+count); } Each of the expressions in the for loop are optional.We could break out the initialization expression as we did in the while loop, increment the count in the code block, or omit all three to create an infinite loop. Listing 3-9 shows these variants in code. Listing 3-9 More for Loops /* Loop 1 */ var count = 0; for ( ; count<10; ) { console.log("The count is now:"+count); count++; } /* Loop 2 */ for ( ; ; ) { /* For demonstration purposes only, don’t ever do this. */ } ptg6899256 38 Chapter 3 Learning JavaScript Delayed Execution with setTimeout and setInterval The fact that JavaScript runs in a single thread drives many design choices in the lan- guage.You’ll see later in this chapter how various libraries use events to notify applica- tions that something notable has happened.Another means to accommodate this single-threadedness is to use the setTimeout function to kick off some arbitrary code sometime in the future. Listing 3-10 shows the code to print the current date and time to the console after a 1,000 milliseconds. Listing 3-10 Example of setTimeout setTimeout(function() { console.log(new Date()); }, 1000 ); setTimeout executes once and it’s done. If we need to repeatedly run the same code over and over again, we can have each setTimeout create a new setTimeout. However, a more concise way would be to use setInterval. Besides using setInterval in place of setTimeout, the method calls are identical. setInterval will attempt to run the code every X milliseconds. JavaScript will make its best effort to honor the requests to execute code.The code within setInterval needs to perform reasonably well. Long-running tasks set to a short interval could delay execution of subsequent iterations until the first one is done. clearTimeout and clearInterval cancel the next execution of setTimeout and setInterval, respectively.They do not affect the code that might be currently running. Creating Complex Objects with Inheritance and Polymorphism As mentioned earlier in the chapter, JavaScript uses functions to expose the concept of object-oriented programming language classes.Another set of features for programming languages that use classes includes the ability to create classes that derive properties and functions from other classes and the ability for objects of multiple classes to respond to the same method signatures.These features are known as inheritance and poly- morphism. The easy way to decipher inheritance is the “is-a” relationship. Continuing our exam- ple from earlier in the chapter, a Toyota is a (inherits from) car. JavaScript adds properties or functions to objects using the dot syntax. Using the prototype keyword, we can mod- ify all instances of a particular type. Listing 3-11 shows the declaration of two classes: Car and Toyota.After declaring the Car object, we next assign its prototype (its functions and properties) to Toyota. Next, the constructor for the Toyota type is created and overrides the versions provided by Car. If we call go on a Toyota object, it uses the Toyota version ptg6899256 39Creating Complex Objects with Inheritance and Polymorphism instead of the one from Car.That is polymorphism at work.As long as the object extends from Car, we can be guaranteed that functions and properties created in the base type will have some sort of value.As shown in the last few lines of the listing, we can use the key- word instanceof to determine what type of object we have. Given the code we wrote, it will evaluate to true when checked against Car and Toyota. Listing 3-11 JavaScript Inheritance function Car() { var self = this; self.type = "Car" self.go = function() { console.log("Going..."); }; }; Toyota = function() {}; Toyota.prototype = new Car(); Toyota.prototype.constructor = function() { var self = this; self.type = "Toyota"; self.go = function() { console.log("A Toyota car is going..."); } }; Toyota.prototype.isJapaneseCar = true; var t = new Toyota(); console.log(t instanceof Toyota); console.log(t instanceof Car); Making Inheritance Easier with the Prototype Library Prototype (www.prototypejs.org) is a library for JavaScript that makes object-oriented programming a little bit easier.The inheritance and polymorphism support it provides isn’t all that much different from what you have learned by using the prototype keyword directly. Prototype does give us a more concise and readable way of doing inheritance. Using the Class object and its function create is the principal way we will interact with Prototype. Listing 3-12 revises our inheritance example for use with Prototype.The ini- tialize function is where we put any setup code we would like to execute when the object is instantiated. Even if it will be empty, we must specify one in our classes.When we create the Toyota class, we add an extra parameter to the function signature to indi- cate the class from which the child will inherit. ptg6899256 40 Chapter 3 Learning JavaScript Listing 3-12 Inheritance with Prototype var Car = Class.create({ initialize: function() { this.type = "Car"; }, go: function() { console.log("Going..."); } }); var Toyota = Class.create(Car, { initialize: function() { this.type = "Toyota"; this.isJapaneseCar = true; }, go: function() { console.log("A Toyota car is going..."); } }); In neither our raw prototype nor the more spiffy Prototype version can we call the function in the parent that we overloaded in the child.That’s because when you modify the prototype, you don’t keep a copy of what it used to point to.Although sometimes it might be useful to totally handle the inputs and outputs in the child layer, there are occa- sions when you might want a parent class to handle some basic common data before sending the rest to the specific child class to finish up. In object-oriented programming languages such as Java and C#, you would use an object named super or base to refer- ence the parent class. In those languages, the reference to the parent class is transparently created for you, and you can use it without any modifications to function signatures. In Prototype, however, for any function that we want to call the parent class, we need to add $super to the beginning of its parameter list.Thankfully, this doesn’t change how the function is called by your code. One key change that should be noted is that unlike in the languages that get this capability for free, the $super object is a link to the parent func- tion and not the parent object.A child’s go function can only call the parent’s go function explicitly; all other parent functions are hidden if they are overloaded. Listing 3-13 shows how we would modify our Toyota class to call the go function of Car before calling its own. Executing the go function on the Toyota class will print “Going...” and then “A Toyota car is going...” to the console. Listing 3-13 Calling a super Function with Prototype var Toyota = Class.create(Car, { initialize: function() { this.type = "Toyota"; this.isJapaneseCar = true; ptg6899256 41Learning JQuery }, go: function($super) { $super(); console.log("A Toyota car is going..."); } }); Learning JQuery An important utility in your JavaScript toolset is JQuery (http://jquery.com/) and its variants.That’s not to say that a comparable JavaScript framework won’t serve our needs, but JQuery boasts a very active development community with a multitude of plugins, some of which, as you will see in Chapter 10,“Developing Mobile Games,” are targeted toward mobile development. It is also widely recognized as the most popular JavaScript framework. JQuery uses a global object, $, that exposes functions to inspect and alter the Document Object Model (DOM), handle events, and process AJAX requests.There is even a plugin that exposes a 2D game engine called gameQuery (http://gamequery. onaluf.org/). One of the most important functions you will learn in JQuery is the ready function, which delays execution of the enclosed JavaScript until the document is fully loaded. Listing 3-14 shows the code to print “Hello World!” to the console when the document has finished loading.The ready function ensures that we don’t try to reference any DOM elements before they are instantiated. Listing 3-14 JQuery ready Function ptg6899256 42 Chapter 3 Learning JavaScript Manipulating the DOM with Selectors Another important concept of JQuery is selectors. Selectors give us a way to reach deep into the object graph with commands as simple as retrieving all the anchor tags in a doc- ument or as complex as retrieving the third td element inside a table that is inside a div. The selector syntax melds those of CSS and XPath (a language for querying XML docu- ments) with some JQuery-specific syntax.Table 3-2 shows some common selectors. Selectors can be chained together, so we could find the div element with the id “header” by executing the selector for an element and then the selector for an attribute: $("div[id='header']") Alternatively, we could simply execute the following: $(#header) After we have an element or set of elements returned by a selector, we can manipulate them in several ways, including but not limited to the following: n Adding, removing, or modifying CSS styles and attributes n Adding or removing child elements n Adding animated transitions and effects Table 3-2 Some Common JQuery Selectors Selector Description #id Returns the element that matches the given ID element Returns all elements of the given type .class Returns all elements that have the CSS class applied to them [attribute="value"] Returns all elements that have a matching attribute value. :eq(n) Returns the element in the set that equals index n (zero- indexed) :even Returns even-numbered elements in the given set :odd Returns odd-numbered elements in the given set parent descendants Returns the descendents of the parent element or selector parent > child Returns only the first-level children of the parent element or selector selector1,selector2, selector3 Returns a combined list of the results from all the given selectors ptg6899256 43Learning JQuery JQuery Events Instead of busily waiting for something to happen, JavaScript uses events to notify us of changes.This frees up the application to do other things while there are no events to process and to not lose cycles constantly checking for input. It’s more of a “don’t call us, we’ll call you” model. Because you can’t usually predict where or when these events will be fired, the way to be notified of changes is to bind, or attach, a function to be called whenever the event is fired. JQuery has a generalized bind function that can generically handle any event type and a set of specific functions for common event types such as click, double-click, key up, and so on. Listing 3-15 shows two equivalent methods of binding (or attaching) a click handler to an element with the id “menuBar,” which might be represented in HTML code as follows: Chevrolet Cavalier 2002 ptg6899256 45JavaScript Outside of the Browser Although the name of the technology hasn’t changed, JSON is a return type or has replaced XML in many AJAX requests. Being a text-based file format, JSON does share some of the drawbacks of XML—namely that it isn’t efficient at storing binary data. There are ways to accommodate this particular drawback, such as passing URIs to binary data instead of the data itself or base64-encoding the data, if possible. JSONP, or JSON with padding, is a workaround for AJAX’s same-origin policy.The source field of the JSONP exploits a necessary loophole to the same-origin policy and is itself open to being exploited.Any content could be injected into a site if it uses JSONP, possibly exposing sensitive data. JavaScript Outside of the Browser JavaScript began its life as a tool that lived in the confines of browser web pages. In recent years, it has expanded its reach to platforms outside its usual stomping grounds. Let’s briefly discuss a few of them. Mobile Platforms WebOS, created by Palm for its Pre devices and now led by Hewlett-Packard, has the dis- tinction of being the only mobile device operating system that uses JavaScript as its pri- mary programming language.Titanium Appcelerator, which we will discuss in Chapter 10, uses JavaScript to create native Android and iOS applications. JavaScript as an Intermediary Language A new crop of languages and libraries use alternative languages that can be compiled or converted into JavaScript, making it a sort of bytecode or intermediate language for the browser. Some of these tools and languages include CoffeeScript and Google Web Toolkit (GWT), a Ruby/Python inspired scripting language and a web framework for creating ptg6899256 46 Chapter 3 Learning JavaScript AJAX applications with Java, respectively. Both CoffeeScript and GWT will be covered in Chapter 8,“Creating Games Without JavaScript.” Here’s a list of some of the languages and tools that won’t be covered in this book but I encourage interested developers to check out: n Cappuccino/Objective-J (http://cappuccino.org) n Echo3 (http://echo.nextapp.com) n Vaadin (http://vaadin.com) n OpenLaszlo (http://www.openlaszlo.org) n Pyjamas (http://pyjs.org) JavaScript on the Desktop Since the creation of the Mozilla Firefox web browser, JavaScript desktop applications have been in mainstream use.They are now primed to make a play for the desktop, as they have already conquered the browser space. In this section, we’ll cover some of the notable frameworks from a high level. XULRunner (https://developer.mozilla.org/en/xulrunner) is a runtime environment created by Mozilla that most notably powers the Firefox web browser and many of Mozilla’s suite of applications, including the Mozilla Sunbird (calendar/scheduling) and Mozilla Thunderbird (e-mail). XULRunner uses some C++ code to run the JavaScript engine named SpiderMonkey, but all interaction with the user is conducted via JavaScript.There is also a plugin format called XPI that allows developers to extend the capabilities of their application with packaged JavaScript and assets. XUL and XBL (XML User Interface Language and XML Binding Language, respectively), which determine the layout, look, and interactivity of applications, round out the core features in XULRunner. Several other companies and open-source projects are using XULRunner to package cross-platform applications. Some of the more popular ones are Miro, the Internet TV application, and Songbird, a media library management application whose feature set rivals that of iTunes. GLUEscript (http://gluescript.sourceforge.net) is a desktop framework that is an evo- lution of a port of wxWidgets to JavaScript. wxWidgets is a C++-based cross- platform desktop framework that has bindings for many different programming lan- guages.The reasoning is that once you learn the structure of a wxWidgets application in one language, you will be able to use wxWidgets in other languages with less of a learn- ing curve. GLUEscript uses Mozilla’s SpiderMonkey engine for its JavaScript layer.Above that layer, all user interface code and logic is in pure JavaScript. XULJet (http://code.google.com/p/xuljet) is a desktop framework that runs on top of XULRunner.Although the code calls XUL on the backend, developers use a domain- specific language that is based on XUL.This allows developers to co-mingle UI code and logic.Whether that is the most appropriate thing to do—versus having a clear separation ptg6899256 47JavaScript Outside of the Browser of Model-View-Controller—is outside the scope of this book. However, it does make for less-verbose and more-readable user interfaces. Listings 3-18 and 3-19 show equivalent XUL code and XULJet DSL code. Listing 3-18 XUL Code Listing 3-19 XULJet DSL Code vbox({flex: 1}, toolbox( menubar( menu({label: "File", accesskey: "f"}, menupopup( menuitem({label: "Close", oncommand: "window.close()"}))))), vbox({align: "center", pack: "center", flex: 1}, description({bind: "desc"}, "Press the button"), button({label: "OK", oncommand: function() { this["desc"].value = this.message}})), statusbar( statusbarpanel({flex: 1, label: 'Ready...'}))) ptg6899256 48 Chapter 3 Learning JavaScript Server-Side JavaScript JavaScript is supported in many browsers, but unlike other programming languages, no single organization steered or shaped it for much of its life.As a result, although many applications claim JavaScript support, their implementations might not always be compat- ible.Also, as a browser technology, there isn’t support for things such as interacting with the file system, package management, and creating desktop applications.The goal is to provide a common set of specifications that developers can implement so that compliant applications and frameworks can interact with each other and share code. In the past few years, server-side JavaScript (or JavaScript run outside the browser) has become more popular as a means to run web applications.Thanks in part to the Rhino programming language, which is a version of JavaScript built to run on the Java Virtual Machine (JVM), there are many runtimes for server-side JavaScript. Most of these run- times tap into the web server support in Java and allow the user to call them using JavaScript-like code. RingoJS is a fairly mature JVM-based runtime that uses Rhino as its main program- ming language. Node.js is another popular server-side JavaScript runtime that uses Google’s V8 JavaScript engine to execute code. Modules provide a way to encapsulate functionality into a single file or namespace so that it can be used across many applications. Unlike functions written for the browser that attach to the window object, RingoJS and Node.js functions attach to the exports object. Listing 3-20 shows a simple function to reverse a string.You can see that as far as the dec- laration of the function is concerned, nothing has changed.We have merely added a line to say that in the exports namespace, the function will have the name reverseString. Listing 3-20 Example Module function reverseString(text) { var reversed = ""; for (var i = text.length-1; i>=0; i—) { reversed += text[i]; } return reversed; } exports.reverseString = reverseString; Summary In this chapter, we discussed JavaScript and its accompanying ecosystem. No longer is the language relegated to running client scripts in the browser. It is being used as a server-side language, as an intermediary language, and to create mobile applications.The ever- increasing speed of JavaScript engines means that JavaScript will continue to permeate ptg6899256 49Exercises more areas of development.A proper foundation in JavaScript is the key to making HTML5 games. Even if you use an alternate language, that language will compile down to JavaScript. JavaScript is the lingua franca of the Web. Exercises 1. What keyword allows you to extend objects in JavaScript? 2. What does the $super object in Prototype have access to? 3. Explain the difference between == and ===. 4. Write a function that checks every five seconds if it is 12 midnight. Hint: Use getHours() and getMinutes(). You can download chapter code and the answers to the chapter exercises at www.informit.com/title/9780321767363. ptg6899256 This page intentionally left blank ptg6899256 4 How Games Work Trying to define exactly what a game is and isn’t is much more difficult than it seems. Although we may think of games as being purely for competition or entertainment, they actually encompass a lot more.A simulation that determines whether a building is con- structed soundly could be thought of a game, as can trying to predict how people will react to certain stimuli.The best all-inclusive definition I could come up with is that a game is a form of interaction with goals and structure. Building upon the lessons we learned about Prototype and its approach to object-oriented programming, we will be using the Prototype-based Simple Game Framework (SGF) to create the games in this chapter. SGF was chosen because the API is complete yet small, hiding enough low-level details for us to build up easy wins before we delve into more complex topics later in the book. SGF mustn’t be thought of as the end-all and be-all of game engines.After all, a quick visit to http://devmaster.com shows that dozens if not hundreds of options are out there. Designing a Game One of the most important things you can do before you sit down to code a game is to plan out what it does. For a large game such as World of Warcraft, this design document would be many pages long and discuss different areas, worlds, and scenarios. But for our purposes, the design documents will be fairly short. In some cases, they could fit on a sticky note. However, they are nevertheless important to create.With an undefined goal, you never know when you have met it. Writing a Basic Design Document The design document is a contract for how your game will work and allows you to have a record for the future of all your thoughts when beginning the project. How else will you remember why the Whosits are green and the Whatsits are blue and how they each respond to power-ups? If you are creating a game that includes characters, you could also include character studies that outline their motivations and back story.At minimum, the design document should contain the following elements: ptg6899256 52 Chapter 4 How Games Work n The rules of play n The tagline n The title or working title of the game These elements should be prioritized in that order as well. Game play rules form the basis of a good game.A great title and tagline can only go so far to help out a crappy game.The game play rules describe how play begins, how it ends, and how any positive and negative actions are rewarded and penalized, respectively. For the game Pong, which will incidentally be the first game we create, the design document might be something like this: n Two players are represented by rectangular paddles that can move only up and down. n A ball can be hit between the two paddles and can bounce off the top and bottom walls of the playing area. n The left and right bounds of the playing area do not make the ball bounce off them as the top and bottom walls do. n The player must defend his area by hitting the ball into the other player’s area. n A point is scored for the other competitor when a paddle doesn’t prevent the ball from moving off the playing area bounds. A tagline describes your game succinctly for people who have never seen it before. It can also draw upon familiar experiences of the prospective user while also introducing something new—for example,“Soccer in space.” Besides some über-rich people, some astronauts, and some cosmonauts, we can’t claim to have experienced what it feels like to be outside Earth’s atmosphere. But many of us have played soccer (or football for the non- U.S. readers).We can understand some of the conditions arising from the familiar experi- ence of soccer played in an unknown setting.There might be the lack of gravity to contend with, possible differences in how the ball moves because of the lack of an atmos- phere, or maybe the need for temporary power-ups to counteract the bulkiness of the flight suits. Deciding on a Game Genre Games generally fall into a particular genre or type that describes some of its basic char- acteristics.The video game industry has dozens if not hundreds of genres and subgenres. The games in this book will fall into the casual game genre. Casual games in many cases have less processor-intensive graphics and effects, shorter levels, and a smaller learning curve.The major subgenres of the casual gaming space in the past couple of years have been as follows: n Puzzle games n Hidden object games ptg6899256 53Designing a Game n Adventure games n Strategy games (including click/time management, such as Diner Dash and Farmville) n Arcade and action games n Word and trivia games n Card and board games The lower processor and graphics thresholds make it easier for a newcomer to break into this area.You don’t need a sea of 2D and 3D artists.You can get by on some pro- gramming skill,an idea, and a friend who can draw a little. The Game Loop Excuse the cliché, but the game loop is where the magic happens. Much of the time the user will spend interacting with your game will be inside the game loop. Each run of the game loop may execute any of the following limited list of actions: n Retrieving user input, such as pressing buttons or directional keys n Receiving input from opponents (computer or human) n Updating player and enemy positions and alive state n Starting or stopping sound effects and background music n Drawing the world with the updated positions and states of the players These actions are often completed many times a second and sometimes at different intervals.The human eye has a limit as to the number of frames it can see, so we might only redraw the screen 30 to 60 times a second, but for we might check for user input 100 times a second. It all depends on the conditions of the game. Getting Input from the User User input will usually be transmitted via the keyboard, mouse, or possibly a game con- troller. Our applications will receive the status as numeric values corresponding the ASCII codes for letters and numbers. JavaScript can also tell us if modifier keys such as Ctrl and Shift were pressed at the same time. In Chapter 3,“Learning JavaScript,” we talked briefly about how you can capture these events using JQuery. Because input is very important to them, many game engines and libraries provide some helper functions to encapsulate get- ting input from the player.You will see this first hand when we create games for this chapter. ptg6899256 54 Chapter 4 How Games Work Representing Game Objects with Advanced Data Structures You learned in Chapter 3 that JavaScript provides us with several core object types.We will use all of them, but in many cases they won’t be enough. Most importantly, in addi- tion to specific game objects such as Rectangles, Circles, and Sprites, we need more com- plex structures to hold them.Arrays allow us to hold a list of things, but their functions are pretty basic.What if we wanted a Set class that only stores unique objects? What about a class that stores an object graph between different points? For each of these we will have to roll our own. Making Unique Lists of Data with Sets Sets are collections that have no duplicate values.The object that holds a single deck of playing cards or a grocery list could be implemented as a set.At the core of our imple- mentation is an array, which works behind the scenes to store our objects. Enforcing uniqueness means that if we use types that aren’t Strings, Numbers, or Booleans, we should make sure the object we insert into the set implements its own equals method. Listing 4-1 shows the code for a Set class and for adding an equals method to Number so that you can use Numbers seamlessly in sets. If you want to use Strings, the same thing would have to be done. Listing 4-1 JavaScript Set Class var Set = Class.create({ initialize: function () { this.rawArray = []; }, add: function (object) { if (this.contains(object) == undefined) { this.rawArray.push(object); } }, get: function (index) { return this.rawArray[index]; }, remove: function (object) { var index = this.contains(object); if (index != undefined) this.rawArray.remove(index); }, contains: function (obj) { for (var i = 0; i < this.rawArray.length; i++) { var obj2 = this.rawArray[i]; if (obj.equals(obj2)) return i; ptg6899256 55Representing Game Objects with Advanced Data Structures } return undefined; } }); Number.prototype.equals = function (obj) { return this == obj; } Now that we have a way to store unique values, it would be nice to be able to sort them.Trick-based card games, such as Hearts and Spades, are some examples that jump to mind where a sorted set might be desired. JavaScript doesn’t allow us to use operations such as <, >, >=, and so on, with our custom types also known as operator overload- ing.We can get around this limitation by using a concept from Java called Comparator, which is a contract, or interface, that requires any class implementing it to have a function that takes two objects as parameters and returns a negative number, zero, or a positive number if the first object is less than, equal to, or greater than the other parameterized object.Whereas in Java, the function would have to be named “compare,” we don’t have that requirement in JavaScript, and the function doesn’t even need to be a member of the class.We can see in Listing 4-2 how this might be implemented for a Card class that’s sorted by suit and rank. Like we saw earlier with the equals method, primitive types don’t have their own compare methods. primitiveCompare works for all primitive types (Booleans, Numbers, and Strings). Listing 4-2 JavaScript Comparator primitiveCompare = function (s1, s2) { if (s1 == s2) return 0; else if (s1 < s2) return -1; else return 1; } compare = function (obj, obj2) { if (primitiveCompare(obj.getSuit(), obj2.getSuit()) == 0){ return primitiveCompare(obj.getOrd(), obj2.getOrd()); } else return primitiveCompare(obj.getSuit(), obj2.getSuit()) } With all the components in place, we can now sort our objects.We can sort an array by executing this: set.sort(compare) To sort another object that is backed by an array, simply provide a pass-through method to invoke the sort.The default sort algorithm in most JavaScript engines will ptg6899256 56 Chapter 4 How Games Work serve your needs well for the amount of data you’ll probably be sorting. If you notice your sort becoming slow, you can always implement your own. Many resources can be found online that explain the different sort algorithms along with what conditions are the best for each one. Creating Object Graphs with Linked Lists Linked lists are another common advanced data structure consisting of objects that each contain a reference, or link, to the next one of more objects in list. Singly linked lists will only link from parent to child, so you have to traverse all the objects (commonly called “nodes”) until you reach the one you want.A node in a doubly linked list contains both a reference to the preceding and next nodes. Linked lists are useful for objects that have some sort of implicit hierarchy. For example, you could use a linked list to hold the com- ponents of a robotic arm.The upper arm is the parent of the lower arm, just as the lower arm is the parent of the hand, and so on. Listing 4-3 shows the code to create a singly linked list. Listing 4-3 JavaScript Linked List var Node = Class.create({ initialize: function (val) { this.value = val; this.next = null; }, addChild: function(node) { this.next = node; } }); var LinkedList = Class.create({ initialize: function () { this.root = new Node(null); this.size = 0; }, add: function (object) { obj = this.root while (obj.next!= null) { obj = obj.next; } obj.next = new Node(object) } }); Linked lists are used extensively for artificial intelligence (AI), which we will discuss later in this chapter.With a linked list, you can represent all the possible states of a game, ptg6899256 57Understanding the APIs in Simple Game Framework and in evaluating each one, the computer can backtrack and try other paths, eventually coming to the optimal solution. Understanding the APIs in Simple Game Framework As mentioned before, SGF builds on the Prototype JavaScript framework to create its game objects.Another interesting feature is that SGF can use the same game logic and assets as well as execute in the browser or on desktop Java. It does this by taking advantage of the Rhino programming language, JavaScript on the Java platform, and a Java backend API mirroring the HTML version. It is able to run anywhere that has a JavaScript engine. One key difference between SGF and the techniques we will examine later in the book is that SGF doesn’t use the Canvas tag in any way. It instead uses div and img elements along with CSS styles to create game play. Even though this is a book about HTML5, having backward compatibility is an important consideration, and there will be occasions when you might want to mix techniques. For your convenience, SGF has been bundled with the source code for this chapter. but you can also download a possibly newer version at http://sgfjs.org/. Let’s briefly discuss its APIs. Core API The Core API is where the magic happens. It manages the interactions between the key- board, mouse, and our games, renders our frames, and provides an interface for adding new events to subscribe to using the Observer pattern (http://en.wikipedia.org/wiki/ Observer_pattern).The classes and namespace are listed here: n Game n Input n SGF (namespace) n EventEmitter n Screen Game and Input are the two classes in this area that we will use the most.The Game class is a container for all our game objects and manages our game loop by calling the render and update functions on the objects.We can also set our frames per second, which is the number of times we’d like the game to update its state.The Game class also exposes functions to load fonts, other JavaScript files, and sounds. The Input class, as you might guess, gives us a means to get the mouse clicks,mouse movement, and key presses at any given time. isKeyDown is the only instance function we need to worry about and is incidentally the only instance function.We can use it with the preset class properties for common keystrokes, such as the mouse and directional keys, or with key codes from other buttons on the keyboard. The SGF namespace provides only two (but very important) functions.The first is the log function, which is an alias for the native logging function on the platforms that SGF ptg6899256 58 Chapter 4 How Games Work supports. In the case of JavaScript, it is console.log.The second function the SGF name- space provides is require, which is a method that only imports the components you need into your application. In a basic SGF game, all classes are hidden by default and you must use require to make them available for use. EventEmitter and Screen won’t be used directly in any of this chapter’s games, so learning about them will be left as an exer- cise for the interested reader. Components API Whereas the Core API controls how the objects interact with each other, the Compo- nents API specifies how they are drawn. Here are the classes in this API: n Component n Container n Shape n Rectangle n Sprite n DumbContainer Component is a class from which all SGF-viewable game objects extend. It can’t be instantiated directly but rather represents a contract that the objects must follow. Component contains properties to specify an object’s dimensions, orientation, depth (z- index), and its own render and update functions.The Container class is a concrete sub- class of Component. It implements all of Component’s methods and can hold other Component objects and their subclasses. Container could be used to animate many differ- ent objects at once to create interesting simulations. Shape is another class that exists only to provide a contract, giving its children access to a color property in addition to the ones available in Component. Rectangle is a child of Shape. Sprite is a class that repre- sents a single rendered image in a game.These images usually come in what are called spritesheets, providing all the images to create an animation—similar to a flipbook.We will talk about the nuts and bolts of sprites in Chapter 5,“Creating Games with the Canvas Tag.” Figure 4-1 shows the Components API classes and their descendants. Resources API and Networking APIs Games would look rather boring if we were stuck with the default system font and solid colors for objects. SGF’s Resources API gives you the ability to load custom fonts and images to use with your games. Because we will be covering much of this content in greater detail in Chapter 5,we will defer talking about this for now. SGF has the capability to connect to other clients or servers using its built-in Client class and either the corresponding Server class or another WebSocket server. Mentioned for sake of completeness when talking about SGF, we won’t cover any of the networking capabilities in this chapter.The API documentation has some sample code, and it might ptg6899256 59Building Pong with the Simple Game Framework Component Container DumbContainer Shape Rectangle Sprite Figure 4-1 Components API classes and descendents be beneficial to review the networking material in Chapter 9,“Building a Multiplayer Game Server,” that specifically deals with Socket.IO before trying to make SGF games “network capable.” Building Pong with the Simple Game Framework Pong is often thought of as the game programming version of “Hello,World!” It is a 2D form of ping-pong (table tennis).The game that helped launch the video game industry has a retro look that hides its complexity. In coding Pong, we have to manage game state, track scoring, track game components, and perform collision detection and response. Setting Up the Application Listing 4-4 shows the scaffolding HTML code we need to embed our application in a web page.The stylesheet designation, the contents of which are shown in Listing 4-5, are extra important. SGF uses HTML div elements to draw its graphics.This element has an intrinsic desire to take up as little space as possible.The stylesheet tells the browser to allo- cate the indicated dimensions for our game, whether we are using it or not.Another notable piece of code is the following in the script tag: data-screen="screen" It tells SGF which div will hold the game. If we omit it, the game is added to the body of the page. Listing 4-4 Pong HTML Host Page Code ptg6899256 60 Chapter 4 How Games Work Pong Listing 4-5 Pong CSS Code body { margin:0 0 0 0; width:100%; height:100%; text-align:center; } #screen { width:400px; height:400px; border:Solid 1px #000000; margin:0 auto; } Listing 4-6 shows the beginnings of our game.All SGF games require a main.js file that contains the outermost logic to run the game. In the listing, we can see that we are retrieving several objects from the SGF namespace and are setting up game properties such as the height, width, and input instance. Lastly, we retrieve a script for our Paddle class and draw a paddle on the screen at (0,150).After you understand this bit of code, we can move on to creating our game pieces. Listing 4-6 Pong main.js // Import required classes var Game = SGF.require("Game"); ptg6899256 61Building Pong with the Simple Game Framework var Input = SGF.require("Input"); var Rectangle = SGF.require("Rectangle"); var Label = SGF.require("Label"); // Get a reference to our Game instance var myGame = Game.getInstance(); // Get a reference to our game's Input instance var myInput = myGame.input; var game_height = 400; var game_width = 400; myGame.getScript("Paddle.js", function(){ // left paddle myGame.leftPaddle = new Paddle(); myGame.leftPaddle.setPosition(0, 150); myGame.addComponent(myGame.leftPaddle); }); Drawing the Game Pieces Our easiest game pieces to draw are the paddles.We begin with the Rectangle class and extend it with a couple of methods. In our constructor (initialize), we set up the width, height, and color of the paddle.We have convenience functions for getting and set- ting the position, but the real stars are the checkInput and update functions. checkInput looks for key presses of the up- and down-arrow keys from the keyboard.When a key press is detected, it adjusts the paddle’s y position by 10 pixels to the north or south.There are conditions to keep the paddle within the bounds of the game board. Finally, our update function fires many times every second to see if there has been input from the user. Pong is a two-player game, so we created our paddles to respond to the up- and down-arrow keys or the A and Z keys.The code for the full Paddle class is shown in Listing 4-7. Listing 4-7 Paddle.js // Paddle.js var Paddle = Class.create(Rectangle, { initialize: function($super){ $super(); this.height = 100; this.width = 20; this.color = "0011FF"; this.isPlayerOne = true; }, setPosition: function(x, y){ this.x = x; this.y = y; }, ptg6899256 62 Chapter 4 How Games Work getPosition: function(){ return { 'x': this.x, 'y': this.y } }, setIsPlayerOne: function(bool){ this.isPlayerOne = bool; }, checkInput: function(){ if (this.isPlayerOne == false) { if (myInput.isKeyDown(Input.KEY_UP)) { if (this.y > 0) { this.y = this.y - 10; } } else if (myInput.isKeyDown(Input.KEY_DOWN)) { // x,y are taken from the left corner if (this.y < game_height - this.height) this.y = this.y + 10; } } else { if (myInput.isKeyDown(65)) { // 'A' if (this.y > 0) { this.y = this.y - 10; } } else if (myInput.isKeyDown(90)) { // 'Z' // x,y are taken from the left corner if (this.y < game_height - this.height) this.y = this.y + 10; } } }, update: function(){ this.checkInput(); } }); You might have noticed that our check for the lower bounds does an adjustment for the height of the paddle.That is because, as shown in Figure 4-2, screen coordinates start ptg6899256 63Making Worlds Collide with Collision Detection and Response with (0,0) in the upper-left corner and extend the right and bottom of the screen with positive x and y, respectively. Making Worlds Collide with Collision Detection and Response Before we get to adding our Ball object and making it bounce around the screen, let’s take a slight detour and talk about what makes it actually work.As you are reading this, even if you sitting relatively still, there are many forces acting upon you.This isn’t meant to be an exhaustive discussion but seeks to be just enough to explain the concepts. Isaac Newton—that’s right, the falling apple guy—described the laws of universal gravitation and motion that shape our understanding of how objects interact with each other in the physical world. Understanding Newton’s Three Laws Newton’s first law deals with inertia and states that an object at rest will stay at rest and that an object in motion will stay in motion at the same velocity (speed and direction) and direction until an unbalanced force is acted upon it. In the context of our Pong game, our ball wants to continue moving and will do so until it encounters a force (for example, a paddle or wall) that is too great to permit the ball from continuing on the intended path. Newton’s second law deals with momentum. Momentum is the product of mass (the matter present in an object) and its velocity.The equation you might have heard of is F = ma (0,0) positive y positive x Figure 4-2 Screen coordinate system ptg6899256 64 Chapter 4 How Games Work or Force = mass times acceleration (rate of velocity change over time). Put another way, applying a net force to an object will proportionately affect the object’s acceleration. Even though it may be coming at you fast, a soccer ball that you kick with your foot involves applying enough force on the ball to overcome its momentum toward you and cause it to move in the opposite direction. Newton’s third law states that for every action, there is a equal and opposite reaction. There is no such thing as a unidirectional force. If you are pushing a ball, it is exerting the same force upon you, but the momentum (second law) might be different for you and the ball. You may not have realized it, but the hit game Angry Birds uses physics for all of its game play. For the few of you may have not encountered it yet, Angry Birds involves using a slingshot to launch different types of birds toward targets and enemies.When you launch a bird, you are putting a net force on it. From the time a bird leaves the slingshot until it hits the target, gravity is constantly acting upon it.Eventually the upward momen- tum and acceleration imparted by the slingshot succumbs to gravity and the bird begins to descend.The path of its motion is a parabolic arc, as shown in Figure 4-3.When you jump in the air, you are moving in a parabolic arc. Some of the Angry Birds characters have different characteristics, such as being able to increase velocity mid-flight, thus causing more destruction.Another bird is armed with a fairly heavy egg that, when dropped, causes the bird to soar into the sky (its upward accel- eration is affected by the drop in mass). To keep things simple for our Pong game, we won’t be doing realistic physics for our collisions. If we chose to do so, we would have to take the preceding laws and some oth- ers (such as the Law of Reflection) into account. I don’t know about you, but making a 100% realistic Pong game is effort I’d rather conserve for a cooler idea. However, the lack of real physics doesn’t mean that we won’t make a fun game. Making the Ball Move Our ball is constrained to four diagonal directions: NW, NE, SW, and SE. In the Direction class, we have a map of the directions the ball can move, one pixel either north or south and one pixel either east or west, as shown in Listing 4-8. Our game Figure 4-3 Parabolic movement ptg6899256 65Making Worlds Collide with Collision Detection and Response updates itself 30 times per second, so we can think of our velocity as 30 pixels/sec in one of the four directions. Listing 4-8 Ball Directions this.directions = [ {code:'SE','x':-1,'y':-1}, {code:'SW','x':1,'y':-1}, {code:'NE','x':-1,'y':1}, {code:'NW','x':1,'y':1}, ] The Ball class uses the “velocities” in that map to move the object on the screen, as shown in Listing 4-9. Using a multiplier for the x or y displacement allows us to simulate a greater range of motion and dynamism with the ball’s movement. Listing 4-9 Ball Class update Function update: function(){ this.checkCollisions(); pos = this.getPosition() this.setPosition(pos.x - 2 * this.direction.getX(), pos.y - 3 * this.direction.getY()) if (this.x < 0) { myGame.ScoreBoard.scoreRight.incrementScore(); this.resetBall(); } else if (this.x > game_width) { myGame.ScoreBoard.scoreLeft.incrementScore() this.resetBall(); } } To simulate the ball bouncing off a wall or paddle, we check the Ball’s x and y posi- tions relative to other objects in space. If a collision is detected, the appropriate vector is reversed.We are giving up a little bit of the precision to make the code simpler.Therefore, when the conditions are just right, collisions may fail to fire.This mainly occurs around the other edges of the paddles, but is rare.The collision-detection code for the game is shown in Listing 4-10. Listing 4-10 Ball Collision Detection checkCollisions: function(){ // Collisions with paddles //check left ptg6899256 66 Chapter 4 How Games Work var leftPaddleX = myGame.leftPaddle.getPosition().x; var leftPaddleY = myGame.leftPaddle.getPosition().y; var rightPaddleX = myGame.rightPaddle.getPosition().x; var rightPaddleY = myGame.rightPaddle.getPosition().y; if (this.y >= leftPaddleY && this.y <= leftPaddleY + ➥myGame.leftPaddle.height) if (this.x == leftPaddleX + myGame.leftPaddle.width) this.direction.flipEastWest(); // check right if (this.y >= rightPaddleY && this.y <= rightPaddleY + ➥myGame.leftPaddle.height) if (this.x == rightPaddleX - myGame.rightPaddle.width) this.direction.flipEastWest(); // Collisions with walls if (this.y <= 0 || this.y >= game_height - 20) this.direction.flipNorthSouth() } Advanced Collision Detection and Particle Systems with Asteroids Particle systems are a type of simulation that animates many objects based on forces in nature. Explosions, confetti cannons, and pellets from a shotgun are all particle systems at work.They can also use some of the advanced data structures we discussed earlier in the chapter.World forces can act on the particles individually or as a group. Let’s begin by looking at a particle system inspired by something from everyday life—a water faucet.We learned in Chemistry class that the smallest thing we can label as water is a molecule of two hydrogen atoms and one oxygen atom.When you turn on the faucet, hundreds of thousands of water molecules, which are under pressure (thus giving them enough energy to make it to your home), rush into your sink.Once in the sink, they might move up the sides or spill over onto the floor.We can ignore or highlight forces in particle systems as we please. Asteroids is an arcade game where the player controls a spaceship floating out in space in an asteroid field.The player must use his rockets to break up and destroy asteroids hurtling toward him.This gives us a great opportunity to make some limited particle sys- tems.After the first hit, our larger asteroids split into three smaller pieces.A further hit to those asteroids yields two more of the smallest asteroids.The smallest asteroids disappear from the game after being hit. Listing 4-11 shows the code to spawn or destroy asteroids when they are hit.To increase code reuse, we encapsulated the creation of each genera- tion of asteroids into a separate function. Not shown in the snippet is the pickSpeedAndDirection function. It picks a random change in x and y to be applied for the lifetime of the asteroid. ptg6899256 67Creating Competitive Opponents with Artificial Intelligence Listing 4-11 Spawning New Asteroids explodeOrDestroy: function() { if (this.generation == 0) { // remove this asteroid and create 3 smaller ones this.spawnAsteroids(1, 75, 3); myGame.removeComponent(this); } else if (this.generation == 1) { // remove this asteroid and create 2 smaller ones this.spawnAsteroids(2, 50, 2); myGame.removeComponent(this); } else myGame.removeComponent(this); } spawnAsteroids: function (generation, size, num) { for (var i = 0; i this.y) this.y = this.y + 3; else if (targetY < this.y) this.y = this.y - 3; } else this.checkInput(); } Advanced Computer AI with Tic-Tac-Toe To avoid having to use images or fancy CSS effects to represent the X’s and O’s in a game of tic-tac-toe, we are going to use solid colors: red for O’s (the lighter hue in the figure) and blue for X’s. Figure 4-4 shows a game board where a player has just won. One thing that tic-tac-toe has in common with some other two-player games, such as chess, Othello, and checkers, is that they are all zero-sum finite deterministic games.That’s a really spiffy way to say the following: n For any move, what benefits Player A will come at some cost to Player B. n All possible game states are known to both players. n There is a limited number of game states/decisions/moves to be made and they can be enumerated. n There are no variables that introduce randomness to the game. ptg6899256 69Creating Competitive Opponents with Artificial Intelligence Figure 4-4 Tic-tac-toe winning game Given the processing power to do so, a computer can calculate all possible moves that a player might take (like the Deep Blue chess-playing computer that beat a chess grandmas- ter).This method is known as “brute force.” It’s similar to trying to crack someone’s pass- word by trying every word in the dictionary. It is very effective but also time consuming. Knowing the moves a player might take means nothing if you can’t evaluate them.The AI algorithm for these types of games calculates several (up to thousands of) combinations of moves that the computer and player could make. It gives each move a score based on whether it helps it to win or lose.When choosing a possible move for the opponent, it assumes that the opponent will always choose the best move.This algorithm is known as Minimax. Without any constraints on it, a Minimax algorithm will try to brute force its way to a solution—and JavaScript doesn’t like it.When trying to evaluate a game with few moves, it can easily use up all the space that the browser gave it to run. One method to combat this is to set a depth limit.After some testing, I settled on 200.This gives the algorithm a chance to evaluate a bunch of boards but doesn’t have a perceptible lag. Because it can’t evaluate all boards, sometimes it makes suboptimal moves. Our miniMax function begins by seeing if we can evaluate the current board for a score.We have three designated scores: 1 for a win by the current player, -1 for an oppo- nent win, and 0 for either no perceptible best move or depthLimit is reached. If we can’t decide on a score and haven’t reached the depthLimit,wemake a copy of the game board and find the possible moves. Next, we iterate over that list of moves and recursively call miniMax again, this time from the opponent’s viewpoint.When we receive a score, we compare it to the best score, saving it if need be.When the function has completed, the computer player will play the best move for it to take from all the possibilities it has attempted.The code for the Minimax algorithm is shown in Listing 4-13.Although we leave it in the main code file, the miniMax function would be a great candidate for a Worker. Listing 4-13 Minimax Algorithm miniMax: function(board, currentPlayer) { if (this.currentDepth == this.depthLimit) return 0; ptg6899256 70 Chapter 4 How Games Work if (TTT.checkForWin(board) == currentPlayer) return 1; if (TTT.checkForWin(board) == this.getOtherPlayer(currentPlayer)) return -1; this.currentDepth++; var best = -10; var bestMove = null; var clone = TTT.cloneGameBoard(board); var moves = TTT.generateMovesFromBoard(clone, currentPlayer); for (var i = 0; i best) { best = value; bestMove = m; } } if (best == -10) return 0 return bestMove; } Summary In this chapter, we created our first game using the Simple Game Framework.We also dove into the fundamentals of what makes games tick, touching on the process of plan- ning our games.The lessons learned in this chapter will serve us well for the duration of the book. Exercises 1. Why are 2D games easier to code than 3D? 2. How is a game of checkers or tic-tac-toe different from a game of poker? 3. Are leaves on a tree a particle system? Explain why or why not. You can download chapter code and answers to the chapter exercises at www. informit.com/title/9780321767363. ptg6899256 5 Creating Games with the Canvas Tag The Canvas (that is, the canvas tag) is what many think about when HTML5 is men- tioned. Instead of creating a bunch of div elements with contained images with CSS to simulate movement and game play, you can use canvas to provide a surface to draw objects on the screen. Neither method is easier or harder, but each has different consider- ations.The Canvas has some built-in translation, rotation, scaling, and clipping, whereas with divs you have to handle transformations yourself. However, one advantage that games using div and CSS have over the Canvas is that older browsers, such as Internet Explorer 6, are supported. Hopefully, as more browsers become HTML5 compliant, this will become less of an issue. Getting Started with the Canvas Unlike with some other technologies, you don’t need to include any extra libraries to use the Canvas.As long as you have an HTML5-compliant browser and a text editor, you have all you need to get up and running.As mentioned before, the Canvas is a drawing area on a web page.The first thing that we need to do is to create that area.We can do that by creating a canvas tag and setting the height, width, and (optionally) the ID: As you probably have guessed, this line of code draws a 400-pixel-by-400-pixel square Canvas with an ID of “c.” Your next guess might be that we could start using the Canvas by running something like var canvas = document.getElementById("c"); and then drawing with the canvas object. Close, but not quite.What is not apparent at first glance is that the Canvas acts as a container for drawing APIs, which we will actually use directly.WebGL, which we discuss in Chapter 7,“Creating Games with WebGL and Three.js,” uses the same HTML tag but a different drawing API. Continuing with our ptg6899256 72 Chapter 5 Creating Games with the Canvas Tag code example, to retrieve the 2D context (or the interface for drawing), we need to call getContext on the Canvas: var context = canvas.getContext(“2d”); Now we can begin drawing graphics. Not all of the world’s graphics are driven by rectangles. No matter how little artistic ability you have, you will eventually need a way to create complex shapes. Paths are how we can create shapes using lines and arcs.The concept of paths pops up several times in the different technologies in this book. Let’s take the time to learn about them with a simple example, and the next occasions with be total child’s play. Although they can be as simple as a straight line, paths form complex shapes by accu- mulating instructions one after another until the final shape is drawn.Any path consists of three primitive types: n Lines n Arcs n Curves If you think about objects in real life, they are composed of these three types.As I’m writing this chapter, I’m looking out the window at a street lamp and some tree planters. If you take a cross-section of these items, you will see those primitive path components, which can be spun around a center point or repeatedly drawn along a path to create a three-dimensional shape. Engineers using Computer Aided Design (CAD) employ these primitives to prototype the parts for the car you drive or the bike you ride. Drawing Your First Paths After creating a canvas object and retrieving the context, the first thing we need to do to draw a path is to call the aptly named beginPath() function, which clears the stack of any other paths we might have been drawing.This is important to do because path instructions are cumulative, and all paths for a given canvas tag draw using the same con- text.The next thing we need to do is to move to the point where we would like to begin drawing. Calling moveTo() with an x position and y position does just that.You can think of this as picking up the pen from the paper in order to draw another shape. Once the “pen” is in place, calling lineTo() with x and y positions places the pen down on the paper and draws a line to that point.The last thing we need to do is to stroke the lines we have drawn.You can think of the moveTo and lineTo instructions as tracings on the paper, and the stroke instruction is for going back and filling in the lines now that we know where we want them.We can use this knowledge to draw our game board for the tic-tac-toe game, as shown in Listing 5-1. It consists of two parallel vertical lines and two parallel horizontal lines to form a grid of nine spaces. ptg6899256 73Getting Started with the Canvas Listing 5-1 Drawing the Game Board for Tic-Tac-Toe self.drawGameBoard = function() { var ctx = self.context; ctx.beginPath(); ctx.moveTo(200,0); ctx.lineTo(200,600); ctx.moveTo(400,0); ctx.lineTo(400,600); ctx.moveTo(0,200); ctx.lineTo(600,200); ctx.moveTo(0,400); ctx.lineTo(600,400); ctx.stroke(); } Drawing Game Sprites for Tic-Tac-Toe Now that the game board is squared away, we need to draw the sprites to play the game. Let’s start with the X’s. We can again use paths for X’s.They are drawn by starting at a point, drawing a line indicated by an offset to the right and down, picking up the “pen,” moving up by that same number of units, and then drawing a line that is down and to the left this time. To make things simple for our game sprites, the game board was set at 600 by 600 pix- els.That gives us a 200-pixel square for each space.We don’t want to the sprites to touch the dividing lines, so all the lines are drawn just short of the edges. Listing 5-2 shows the code to draw an X on the canvas. Listing 5-2 Drawing an X for Tic-Tac-Toe ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(10,10); ctx.lineTo(190,190); ctx.moveTo(190,10); ctx.lineTo(10,190); ctx.stroke(); ptg6899256 74 Chapter 5 Creating Games with the Canvas Tag Drawing our O’s requires using arcs.The most simple arc is a shape that we see every day—a circle.A circle is defined by a center point and a given distance (or radius) from that center point; the line that is drawn about that center point keeps the same radial dis- tance.The arc function can draw a segment of a circle as well as a full circle, so we have to indicate the starting and ending angles along with an optional clockwise or counter- clockwise flag. You might have learned in Geometry class a little of the math used to calculate the surface area of shapes, the area and circumference of circles, and things like that. If you’ve forgotten it all, rest assured.We will only be using the fundamentals for now. One impor- tant concept from Geometry class is the calculation of angles. Instead of using degrees, we use radians. So for a full revolution about a point, we say that we are rotating 2π (or 2 times pi) as opposed to 360 degrees. Pi is a mathematical constant representing the ratio of any circle’s circumference, or the distance of the line around a circle’s edge to its diam- eter, which is twice the distance from any point on the edge to the center point. Pi, which equals roughly 3.14159... can’t be represented cleanly as a decimal number, so it is much simpler to denote the approximation by using the symbol.Table 5-1 shows some common angles in both their degree and radian representations. If you need an angle that isn’t listed in the chart, you can convert from degrees to radi- ans by using the following formula.You don’t have to worry about remembering pi because JavaScript stores the value in the Math.PI. angle in radians = (angle in degrees) * (pi / 180) The following snippet shows the code needed to draw our O’s.The circle is drawn by selecting a center point and radius and drawing from 0 to 2*π radians. In keeping with the size of our X’s and game board, the radius is 90 pixels, giving a diameter of 180 pixels. It looks nicer than 190 pixels, and that’s what programming is about. In other words, sometimes the mathematically correct solution isn’t always the most pleasing. ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(100,100, 90, 0, 2*Math.PI); ctx.stroke(); Table 5-1 Common Angles in Degrees and Radians Number of Degrees Representation in Radians 0° 0 45° π/4 90° π/2 180° π 270° 3π/2 360° 2π ptg6899256 75Drawing Objects on the Canvas with Transformations Drawing Objects on the Canvas with Transformations On a traditional Tic-Tac-Toe game board, there are nine possible spots where an X or an O could go.We could just create functions that explicitly draw the objects in each spot, but that wouldn’t be efficient. Instead, we can use translation to move the entire drawing plane from the origin to our desired point, draw our object, and then move the drawing plane back.This allows us to reuse the same code if we decided to make a 4×4 grid instead of a 3×3 grid. A matrix is a collection of rows and columns of numbers that define the location, scale, and orientation of an object in space. For anything but translation, we would use a 2×2 matrix to represent transformations. But before we get to the more complex exam- ples, let’s start out with translation. To translate an object currently located at (x,y) by (xr, yr) relative units, we would add two 2×1 matrices together, as shown in Figure 5-1. In this figure, we have a point located at (0,5) that we want to move 5 units to the left and 5 units down. For scaling, shearing, and rotation, we have to multiply matrices.This is also where our 2×2 matrices come into play. Figure 5-2 shows the role of each position in the matrix. The most basic matrix we could use is the Identity matrix, as shown in Figure 5-3. The interesting property about the Identity matrix is that for any other matrix, multiply- ing it by the identity will return the original matrix.We can see from the figure that it represents a scale of 1 on the x and y axes with no skewing. 0 5 -5 5+ -5 10= Figure 5-1 Translation of an object scale-x skew-x skew-y scale-y Figure 5-2 Definitions of the positions in a 2×2 matrix 1 0 0 1 Figure 5-3 Identity matrix ptg6899256 76 Chapter 5 Creating Games with the Canvas Tag Let’s put the Identity matrix to the test by demonstrating multiplication.To multiply a 2×2 matrix by a 2×1 matrix, we would follow the order indicated in Figure 5-4.You can also see in this figure that the Identity matrix’s property holds true. Looking again at Figure 5-2, we can easily discern how to do scaling or skewing by placing our scale or skew constants in the proper slots. Rotation, however, is a bit more complicated. Figures 5-5 and 5-6 show the matrixes needed to multiply by the vector representing some point to rotate it theta degrees about its center. Ordering Your Transformations Similar to the order of operations mnemonic device “Please Excuse My Dear Aunt Sally” (which represents parentheses, exponents, multiplication, division, addition, and subtrac- tion), transformations have to be applied in a specific order; otherwise, unexpected results will occur.The issue at hand is that each subsequent matrix that is multiplied builds upon and distorts the result of the final position.The general order is scaling, rotation, and then translation. For example, let’s say you want to draw a box at location (10,10) and you want to rotate it 2 radians around its center.The current matrix is located at (0,0), as is the box’s center.You would rotate the box using the desired amount and then translate it to (10,10).To move it a further 3 radians, you use the inverse order, translating the object back to the origin and applying the rotation before translating it to its desired location. A C B D AE + BF CE + DF E F = Figure 5-4 Matrix multiplication cos e -sin e sin e cos e Figure 5-5 Counterclockwise rotation cos e sin e -sin e cos e Figure 5-6 Clockwise rotation ptg6899256 77Drawing Objects on the Canvas with Transformations When a person does a back flip in real life, he is rotating about his current position.To account for this in a game, we must move the object to the origin, do the rotation, and then translate the object back to its original position. The Canvas allows us to set the transformation matrix directly by calling setTransform and transform. setTransform sets the matrix to the identity before set- ting the transformation, whereas transform creates a product of the current matrix and the developer-provided matrix. Luckily for us, canvas has first-class support for transla- tion, rotation, and scaling using translate, rotate, and scale. Both translate and scale take x and y parameters, whereas rotate takes an angle to rotate the matrix in radians. Saving and Restoring the Canvas Drawing State The last thing we need to properly transform objects is a way save and restore the Canvas state.We need to save and restore the transformation matrix so that we properly isolate transformations from one object affecting those that are drawn after it. save and restore do just that.Their combined functionality is similar to hitting a save point in a game, going down a fork in the road to retrieve some sort of power-up, being able to restore the state to return to the fork, and keep the power-up. These functions save and restore not only the current transformation matrix but also the clipping region and several properties, including strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, font, textAlign, globalCompositeOperation, and textBaseline. Listing 5-3 shows our updated function for drawing O sprites and properly handling translation. Listing 5-3 Drawing Several O’s self.drawOSprite = function(x, y) { var ctx = self.context; // Save the canvas state and translate ctx.save(); ctx.translate(x,y); ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(100,100, 90, 0, 2*Math.PI); ctx.stroke(); // Restore canvas state ctx.restore(); } ptg6899256 78 Chapter 5 Creating Games with the Canvas Tag Using Images with the Canvas For every image your game uses, another hit is incurred against the server to retrieve it. We already know from basic HTML how to use the img tag. In this section, we look at a couple more ways to use images in our applications. Serving Images with Data URLs Data URIs provide a way to include the data for a file inline in HTML code.The contents of the file then get retrieved when the HTML is downloaded, thus reducing the number of hits to the server and theoretically the wait time.The general format is as follows: data:[][;charset=][;base64], Here is a simple data URI inside an image tag: 
Let’s examine this URI.The original file is a GIF, so mime type is set to image/gif. The MIME type would be image/png, for example, to reflect that the source file is PNG. charset refers to the character set of the file if the source is a text file.The source file isn’t text, in this case, so we omit charset. If both the MIME type and character set are omitted, the default values will be text/plain for the MIME type and US-ASCII for the character set.The next component, ;base64, indicates whether the data is Base64 encoded. Base64 is used when you need to transmit binary data over a medium that is more tailored to transmitting text. It is also used sometimes to do basic password encod- ing for web services. Base64 encoding formats data using A–Z, a–z, and 0–9, plus two additional printable characters, generally + and /. Many tools on the Web will convert image files to data URIs.The website www.sveinbjorn.org/dataurlmaker offers a web-based application along with links to desktop applications. Serving Images with Spritesheets Trying to load a bunch of image files, even if they are small in size, can be very taxing on a server and cause your users to wait a really long time. Spritesheets solve this by packag- ing the images for many files into one.They are generally used for a large number of small images of a similar size. Images are padded to have uniform dimensions and can be retrieved using the images’ calculated coordinates. Image-editing applications such as GIMP, ImageMagick, and Photoshop can create them for you, and certain web services can create them as well. Spritesheets can be combined with data URIs. Drawing Images on the Canvas Now that we have our images loaded, we need a way to draw them.The Canvas has a function appropriately named drawImage with several variants.All our examples assume we have retrieved an image from an image tag using document.getElementById, pulled ptg6899256 79Animating Objects with Trident.js it from the document.images collection, or created the image directly in JavaScript using Image() and adding a src URI to it. The simplest variant is drawImage(image, x, y) which draws the image in its entirety with its current size with its left-upper corner at (x,y). The second variant is drawImage(image, x, y, width, height) which, like the first variant, draws the entire image.The last two parameters scale the drawn image in the Canvas. The last variant is the most powerful and has the most parameters: drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) This one allows you to use only parts of the source image and do scaling on the Canvas. sx and sy refer to the left-upper corner of the image slice.All data in the bounds of (sx,sy) and (sx+sWidth, sy+sHeight) is drawn. On the Canvas, the image is drawn in the area of (dx,dy) and (dx+dWidth, dy+dHeight). Animating Objects with Trident.js Trident.js (https://github.com/kirillcool/trident-js) is an animation library for JavaScript created by Kirill Grouchnikov that was ported from his Java library of the same name. The main focus of the library comes from the timeline, not that much unlike one in a video-editing program, allowing us to transition between different states with keyframes. Easing functions allow objects to move in a more life-like manner. Many timelines with different functions can operate simultaneously or in a specific order, one at a time.This is the main reason Trident.js was selected over the myriad of possibilities when it comes to JavaScript animation libraries. Tr ident, at present, uses setTimeout instead of requestAnimationFrame. requestAnimationFrame determines whether to draw an object based on if the browser window is obscured of if the page is currently rendering, and it caps the refresh rate to 60Hz. setTimeout does none of this. It tries to render as much as possible even if the app is still rendering or not in view.Trident is a multipurpose animation library. setTimeout can be applicable to both DOM- and Canvas-based animation. requestAnimationFrame cannot. It might seem that the use of setTimeout disqualifies Trident before it even gets out of the gate.The feature that redeems it is the ability to pause a timeline.This, along with the other features, temper the disadvantages of using setTimeout. ptg6899256 80 Chapter 5 Creating Games with the Canvas Tag Creating Timelines The most basic timeline in Trident.js has a duration over which it will run and an object and property to interpolate.The interpolator tells Trident.js how to make intermediary values and optional starting and ending values.Timelines work by periodically waking up, or pulsing, to check how much time has passed and adjusting values appropriately. Although there is no guarantee on the frequency or time period of timeline pulses, for most applications, they perform reasonably well and regularly.These attributes are affected by the load on the client machine and what is being run on each pulse. Listing 5-4 shows some code to create a timeline. Listing 5-4 A Timeline to Interpolate Text Size var rolloverTimeline = new Timeline(myspan.style); rolloverTimeline.addPropertiesToInterpolate([ { property: "font-size", from:16, to: 36, interpolator: new IntPropertyInterpolator()} ]); rolloverTimeline.duration = 2000; First, we instantiate a timeline, assigning the element and property that will be modi- fied. In this case, it is the style field of an element with the ID “myspan.” Next, we added the properties that will be modified. In the code, we state that the font size will range from 16 to 36 units and to interpolate the values as integers. Lastly, we set the duration of the animation to be 2 seconds (in milliseconds). As opposed to constantly monitoring the state of the interpolated properties, which could cause the page to become unresponsive anyways,Trident.js fires a timeline pulse or an instant in time in which wakes up, checks the state, and modifies it as needed. Unlike the Java version of Tr ident, which has a pulse rate of once every 40 ms, the pulse rate of Tr ident.js depends on the system load and the runtime environment.That being said, JavaScript engines in browsers are getting faster and faster with every iteration. Given the proper load, I wouldn’t expect it to get too bogged down.We can also use a timeline to control our game loop.You can see this in action in this chapter’s Copy Me game source code. The last thing we need to do is to add a way to start our animation. I decided to put the start and reverse functions on onmouseover and onmouseout in a span element, as shown in Listing 5-5.Thanks to timeline pulses, the reverse action starts relatively quickly after onmouseout is fired. In addition to play and playReverse, there is also a replay function we could use as well to interact with the timeline. Listing 5-5 Starting and Reversing a Timeline Some text ptg6899256 81Animating Objects with Trident.js In addition to integers, we could also interpolate over floating-point numbers or even RGB color values.We just need to set the appropriate “from” and “to” values with a dif- ferent interpolator: IntPropertyInterpolator, FloatPropertyInterpolator,or RGBPropertyInterpolator, respectively.We aren’t limited to HTML elements.Trident can also interpolate properties on JavaScript objects. Animating with Keyframes Normal timelines transitions between the beginning and ending points without any con- trol over any intermediary value. Keyframes provide a way to indicate what a value should be at a given point on the timeline.A new field called goingThrough is where you would specify the values on the range from 0 (beginning of timeline) to 1 (end of timeline).You can see keyframes in action in Listing 5-6. Listing 5-6 Animating a Timeline with Keyframes var keyframeTimeline = new Timeline(keyframespan.style); keyframeTimeline.addPropertiesToInterpolate([ { property: "font-size", from:16, to:36, interpolator: new IntPropertyInterpolator() }, { property:"color", goingThrough: { 0: "rgb(0,0,0)", 0.4:"rgb(0,255,0)", 1:"rgb(200,140,140)" }, interpolator: new RGBPropertyInterpolator() } ]); keyframeTimeline.duration = 3000; Creating Nonlinear Timelines with Easing By default in Trident.js, object and transitions happen at an equal rate of speed from start to finish.This is not what we usually see in real life. Friction, inertia, and other forces are in play that will cause an object to accelerate, decelerate, or bounce.Although doing pre- cise physics calculations is outside the scope of this chapter, we can use easing functions to bring our animations somewhat close to what is expected. Given a ball that moves up and down on the y-axis, Figure 5-7 shows regular linear motion where every unit of time passed corresponds to one unit of movement on the y-axis. Figure 5-8 shows a bounce effect.We can see a couple of rebounds along the y-axis.Also notice the sharp decline on some of the segments, which corresponds to a faster speed. ptg6899256 82 Chapter 5 Creating Games with the Canvas Tag Tr ident.js, at the time of this writing, has 31 easing functions. Rather than list them here, I encourage you to download the source and try out the testBallLoop page for yourself.We will cover easing functions again when we discuss SVG in Chapter 6,“Creat- ing Games with SVG and RaphaëlJS.” Figure 5-7 Graph of linear motion Figure 5-8 Graph of a bounce easing function ptg6899256 83Animating Objects with Trident.js Animating Game Objects with Spritesheets After learning how to slice and dice our images to draw on the Canvas, we can use some Trident.js timelines to create animations.The sprites for this demo were sourced from OpenGameArt (http://opengameart.org).All of the game assets listed on the site have very permissive licenses and are free to use in games.The spritesheet I selected for the demo is of a walking zombie that is subsequently shot in the head.All of the individual frames are 128 pixels by 128 pixels. Let’s begin by setting up our timeline to control the animation. Given a JavaScript function named Sprites, Listing 5-7 shows the code from the initialization function that sets up the timeline. Listing 5-7 Setting Up the Timeline for an Animation self.init = function() { // Truncated for brevity var self = this; self.current = 0; self.spriteTimeline = new Timeline(this); self.spriteTimeline.addPropertiesToInterpolate([ { property: "current", from:0, to: 36, interpolator: new IntPropertyInterpolator()} ]); self.spriteTimeline.duration = 5000; self.spriteTimeline.addEventListener("onpulse, function (timeline, durationFraction, timelinePosition) { self.drawSprite(); }); self.spriteTimeline.play(); } One notable difference between this and the other examples so far is that the parame- ter for a new timeline is this, referring to the current object.The other difference is how we handle drawing on the Canvas. Unlike with CSS properties, which are automatically propagated to HTML elements, we have to make the changes in two steps. First, we set up a listener to fire every time the timeline position is updated.When the timeline is played, it modifies the current property, which is used by drawSprite function to calcu- late the proper slice to draw. Listing 5-8 shows the code to draw an individual sprite. ptg6899256 84 Chapter 5 Creating Games with the Canvas Tag Listing 5-8 Drawing an Individual Sprite self.drawSprite = function() { var ctx = self.context; var row = 3; ctx.clearRect(0, 0, 128, 128); ctx.drawImage(self.sheet, self.current *128, row*128, 128, 128, 0, 0, 128, 128); } Simulating 3D in 2D Space Starting back in the arcade and early console days, the ability to simulate three dimensions in 2D space made for a more pleasing game experience.At that time, real 3D wasn’t pos- sible, and simulated 3D (called 2.5D) was the only option. In a way, the more things change, the more they stay the same.At this time of writing, the 2D Canvas API was more widely supported, with WebGL being regulated to experimental status.As a result, a 2.5D game in Canvas will have more potential users that one in WebGL.Another advan- tage of 2.5D is that it can potentially take less computing power than a true 3D game. In this section, we discuss some of the options to create a 2.5D experience. Perspective Projection Perspective projection seeks to mimic how the human eye sees objects.What our eyes see is a 2D projection of a scene in 3D. Several things are happening in concert that give us a perception of depth. For example, distant objects appear smaller and with less detail than closer objects.The simplest form and most appropriate for 2D games is one-point per- spective.This point is known as the vanishing point, and it is the point where parallel lines appear to converge. Figure 5-9 shows an example of this in action with a graphic created in the 3D modeling application Blender. Orthographic projection is a way to represent a 3D object in 2D space. Images are created for the top, bottom, left, right,front, and back of the object. Often, just the information from the front, top, and right views are enough to recreate the object.The views on the right side of the figure are the top and side views, respectively. In the perspective view on the left, we can see the edges of the rectangles appear to be slowly converging toward a point on the horizon.We could heighten the effect by texturing closer objects in more detail than distant object. ptg6899256 85Simulating 3D in 2D Space Parallaxing One technique that is often used in side-scrolling video games such as Super Mario Broth- ers and Sonic the Hedgehog to simulate three dimensions and create a more immersive experience is parallaxing.We can create the effect by making different components of the background exist as separate, independently movable layers that move at different speeds. It is similar to what you would experience if you were a passenger in a car riding across a bridge.The cars and barriers around you would move relatively fast compared to a city skyline you might see far in the distance. Let’s dig a little deeper by creating a parallax effect ourselves. Creating a Parallax Effect with JavaScript For this demo, I have created some rudimentary graphics, including a sky dome layer rep- resenting the sky and clouds, a mountain range layer, and a layer showing the ground and other near objects.These are PNGs, but any image format that allows transparency will do. Each is like a sheet of paper with cutouts that let you see through to the sheet below it.This concept is known as z-ordering. Figure 5-9 Perspective projection rendered in Blender ptg6899256 86 Chapter 5 Creating Games with the Canvas Tag To keep things simple, our animation will continuously move. However, in a real side- scrolling game, motion would respond to player input such as a key press or move of the mouse. Besides the backmost layer, which is usually stationary, each layer moves at a rate 100% faster than the one behind it.We can start by setting up our timeline as shown in Listing 5-9. Because we’ll be using multiple layers of images, we will use the timelinePosition value directly and draw our layers every time there is a pulse. Listing 5-9 Setting Up the Parallax Timeline self.setupTimeline = function() { self.parallaxTimeline = new Timeline(this); self.parallaxTimeline.duration = 5000; self.parallaxTimeline.addEventListener("onpulse", function (timeline, durationFraction, timelinePosition) { var ctx = self.context; ctx.clearRect(0, 0, 320, 200); // background layer is stationary ctx.drawImage(document.images[0], 0, 0); self.drawLayer(timelinePosition, document.images[1]); self.drawLayer(timelinePosition, document.images[2]); self.drawLayer(timelinePosition, document.images[3]); }); self.parallaxTimeline.playInfiniteLoop(RepeatBehavior.LOOP); } We begin by clearing the Canvas and drawing our background.We are drawing it whole with no transformations, so we can use the simplest drawImage function. Its size is 320 pixels by 200 pixels. Each of our other layers will have a width that is some multiple of 320 pixels. Doing so frees us from having to perform much calculation for the speed of the layers. Layer 1 has a width of 320 pixels, so a full cycle of the timeline will only move it that far. However, layers 2 and 3, which are 640 pixels wide and 960 pixels wide, respec- tively, have to cover a greater distance in the same amount of time. You won’t be able to escape a little bit of math.The scrolling effect doesn’t come for free, but luckily it requires only a minimal amount of arithmetic. Listing 5-10 shows our function for drawing a layer given a position in the timeline. Listing 5-10 Drawing a Layer self.drawLayer = function(position, image) { var ctx = self.context; var startX = position*image.width; var pixelsLeft = image.width - startX; var pixelsToDraw; ptg6899256 87Creating Copy Me ctx.drawImage(image, startX, 0, pixelsLeft, 200, 0, 0, pixelsLeft, 200); if(pixelsLeft < 320) { pixelsToDraw = image.width - pixelsLeft; ctx.drawImage(image, 0, 0, pixelsToDraw, 200, pixelsLeft-1, 0, pixelsToDraw, 200); } } Based on the timeline position, we can calculate where in the source image to start retrieving pixels to draw. If there aren’t enough pixels to fill the viewport, we calculate how many pixels we need to draw (pixelsToDraw) and we draw a portion from the beginning of the source image to fill that space.To avoid having a 1-pixel gap between the seams of the image, we decrement the destination x position in the Canvas by 1 to cleanly stitch everything together. Creating Copy Me To put some more of what you’ve learned so far into practice, we will create a clone of the old electronic memory game Simon called Copy Me. The game’s name is a play on children’s game Simon Says, where the players must do everything that Simon says to do. In the game Simon, the computer creates a sequence of tones for the player to mimic.As each tone is played, a corresponding light—either red, green,blue, or yellow—illuminates. With each passing round, the sequence is increased by one. Game play continues until the player makes a mistake. Drawing Our Game Objects Instead of making our game look just like the traditional Simon game, we will instead use rectangles and drop shadows, thus taking advantage of some other features of the Canvas Path API. Listing 5-11 shows the code to create one of the rectangles. Listing 5-11 Drawing a Rectangle with a Shadow ctx.save(); ctx.fillStyle = "rgb(150,150,0)"; ctx.shadowOffsetX = yellowOffset.x; ctx.shadowOffsetY = yellowOffset.y; ctx.beginPath(); ctx.rect(400,200, 200,200); ctx.fill(); ctx.restore(); ptg6899256 88 Chapter 5 Creating Games with the Canvas Tag The rect function takes the x and y coordinates of the left corner—in this case (400,200)—followed by the width and height. Creating drop shadows is easy as well. It is important to note that the shadowColor needs to be set on the context before a shadow can be drawn. Figure 5-10 shows the completed game board. Making the Game Tones When I think of a game from the 1970s, I immediately think of the 8-bit sound board that was melodic yet electronic.To duplicate that effect, we could try to find tones or we could create them ourselves using MIDI, the Musical Instrument Digital Interface.The advantage that MIDI gives us is that software packages are available that allow use to create our tones using a text file. MIDI also gives us the flexibility of using the files as is, depend- ing on the instruments available on the client machine, or converting toWAV or MP3 to bring obscure and unique instruments to our games.We only need four tones, so this is very manageable for our needs. Convention states that tones be organized as follows: Copy Me Round 2 Figure 5-10 The Copy Me game board ptg6899256 89Creating Copy Me n Red button:An A note n Green button:An A note one octave up from the red button n Blue button:A D note, a fourth above the green button n Yellow button:A G note, a fourth above the blue button Several software projects are available that can generate MIDI files (GarageBand, for instance) and several can even use text files to do it. Because I didn’t have a musical key- board handy, I went the text route.Two of the more popular text-to-MIDI applications are Lilypond and ABC notation. However, both are more suited to creating long-form compositions and are overkill for our four-note “score.”What’s more, their notation styles are a bit complicated. I instead went with JFugue, a Java API for programming sequences without the complexity of MIDI.With about ten lines of code, I was able to hear all the tones together to determine whether they sounded right. It’s not JavaScript, but you can’t really argue with concise code.After creating the MIDI file with Java, we can use a MIDI editor/sequencer such as GarageBand to chop up the “score” into one-note pieces and convert them to WAV or MP3 files. Listing 5-12 shows our tones, starting at the fourth octave, with a half-note duration and played as a harpsichord. Include just a single note after the instrument designation, and we have a single-note MIDI file. Easy peasy. Listing 5-12 Generating MIDI Tones with JFugue import org.jfugue.Player; public class TestMidi { public static void main(String [] args) { Player player = new Player(); String musicString ="I[Harpsichord] A4h A5h D5h G5h"; player.play(musicString); player.saveMidi(musicString, new File("/Users/jwill/Desktop/test.mid")); } } Playing MIDI Files in the Browser Now that we have our MIDI files, we have a slight problem.We don’t have a means to play them. Some browsers do have plug-ins to play .mid files, but they don’t give us the programmatic control we need for our game. Lucky for us, the jasmid (https://github. com/gasman/jasmid) project fills that need. It can parse and play MIDI files using the HTML5 Audio API with a fallback to Flash.At runtime, the .wav files are generated and piped to the Audio API.A fair bit of work is involved in retrieving the file and assigning an instrument, so it will be an exercise for the intrepid to venture down that path. I fully expect browsers to eventually have native MIDI support as they currently support other ptg6899256 90 Chapter 5 Creating Games with the Canvas Tag sound file formats. In the meantime, some of the effort can be cut by preprocessing MIDI into another sound format such as WAV, MP3, or OGG.The open-source project Audac- ity does a fairly good job of this task, along with fulfilling other audio-editing needs. Playing Multiple Sounds at Once You saw in Chapter 1,“Introducing HTML5,” how we could use the Audio API to write HTML or JavaScript code to play sound. One thing that we didn’t cover in that chapter was playing multiple sounds at once. It’s a bit more complicated than just piping multiple sounds at once to an Audio object and executing play(). Each Audio object can only do a single thing at once.When you call play on some- thing that is already playing, it silently ignores the request. If you wait until slightly after it has finished playing to try and play it again, it will probably work. If your sounds some- times don’t play, it could ruin the game experience and make people think your game is wonky.The way we can solve this is instead of creating a Audio object for each sound, we create a pool of Audio objects that we can iterate through, looking for one that isn’t cur- rently playing.We can check the status by comparing the duration and the currentTime. If they are equal, the sound has finished playing and we can use the chan- nel. If not, the sound is either playing or cueing up to play.You can see this code in action in Listing 5-13. Listing 5-13 Playing Multiple Sounds var numChannels = 10; channels = new Array(); for (var i = 0; i Now we’re all set. ReenieBeanie is downloaded from the Google Font Directory (http://code.google.com/webfonts), which has very permissive licenses for the all the listed fonts.Another great resource is the Open Font Library (http://openfontlibrary. org/). Be sure to verify the license terms of any font you include with your games. Summary In this chapter, through the development of several games and game-related examples, we dove deep into the Canvas 2D context.You learned how to animate images on a can- vas, draw primitives, and create text. In the later examples, we wove together MIDI sounds and bundled fonts into our game. ptg6899256 93Exercises Exercises 1. Convert 290 degrees to radians. 2. How would you play a theme song for your game level and then play sounds for actions such as jumping and kicking without interrupting the theme song? 3. Despite the small file size, why might you not use MIDI directly for game sounds? You can download chapter code and answers to the chapter exercises at www. informit.com/title/9780321767363. ptg6899256 This page intentionally left blank ptg6899256 6 Creating Games with SVG and RaphaëlJS One of the problems we saw when creating games with Canvas was that we had to independently track mouse interactions and locations of the drawn objects after rendering was complete. Scalable Vector Graphics (SVG) addresses these concerns by giving us a means to draw objects while retaining their locations as well as to receive events and modify them. In this chapter, you learn the essentials of SVG to get started in creating games.We also discuss how it compares to Canvas in regard to rendering capabilities and the subset of SVG that most clients implement. Introduction to SVG Compared to other elements of HTML5, SVG is a relatively mature component, first released in 2001, with its most recent release in December 2008. Unlike Canvas, it uses an XML-based format that stores instructions to draw components.As a result, an object drawn in pure SVG can be scaled up with no loss in quality. Figure 6-1 shows a raster (Canvas) image that’s scaled to quadruple its size.An SVG image wouldn’t have the blur- ring and jagginess. One area where Canvas and SVG are similar is in the primitives they offer for draw- ing. Both offer the following primitives and effects: n Circles or arcs n Lines or paths n Polygons n Strokes n Te x t n Gradients n Embedding of images n Clipping, masking, and compositing ptg6899256 96 Chapter 6 Creating Games with SVG and RaphaëlJS Figure 6-1 Scaled raster image using Canvas Both are largely unsupported by versions of Internet Explorer previous to Internet Explorer 9, which will support both Canvas and SVG. Beyond the purely drawing- based functions, SVG objects can be scripted with JavaScript and can respond to the following events: n click n doubleclick n hover n mouseover n mouseout n mouseup n mousedown n mousemove In some implementations, SVG supports keystroke, mousewheel, and textinput events as well. In the browser, keystroke events are a point of overlap with the native capabilities of most modern web browsers. Modern browsers can also directly embed SVG objects, enabling them to be used to render complete web pages as is done with Flash. Chapter 8,“Creating Games Without JavaScript,” introduces another means to create SVG assets using the Java programming language, but the current chapter will use two more widely methods: RaphaëlJS, a JavaScript library with capabilities to render in browsers earlier than IE9 for dynamic assets, and Inkscape, an open-source vector graphics application similar to Adobe Illustrator for more complex static assets. If you haven’t ptg6899256 97First Steps with RaphaëlJS installed Inkscape (http://inkscape.org/) or your preferred vector graphics application, take a moment and do so. First Steps with RaphaëlJS For our first experience with RaphaëlJS (http://raphaeljs.com/), we will be creating a simple card match game.This will allow us to keep the focus mostly on SVG and not the game logic. Our game will display several rows of cards on the game board and include a timer and a counter for how many moves have been completed. Figure 6-2 shows a frame from our completed game. Setting Up Our Development Environment Some web browsers are more stringent that others in allowing you to reference JavaScript files from your local machine and require you to host your JavaScript on a server.This can be unwieldy and prone to latency if your web server is far away from your present loca- tion.The flow of editing a file, uploading it, and checking the updated result gets old really fast.That is, of course, if you aren’t editing files directly on your server.And you’re not doing that, are you? Figure 6-2 Screenshot from card match game ptg6899256 98 Chapter 6 Creating Games with SVG and RaphaëlJS Luckily for us, Java has a lightweight server called Jetty that we can use locally to simu- late a running server. Don’t worry, you won’t actually have to write any Java code, but you will have to work a little command-line mojo to get the server started. In the code directory for this chapter is a directory called webserver. Copy it to your working direc- tory (or somewhere higher if you want to access multiple directories). Provided that you have Java installed, in a command prompt, enter the following: java -jar webserver/webserver.jar This command starts a Jetty server listening on localhost port 8080. If you don’t like Java, feel free to substitute a local instance using your preferred technology, such as Django, Node.js, or Rails. Now that we can test our game locally, just like it were live on a server, let’s create the game board. Drawing the Game Board The area where a SVG drawing is displayed in a web page is often called a “canvas.” But to reduce confusion with the HTML5 Canvas, we will be using the Raphaël term “paper.” We first need to create a paper to draw our game. Raphaël has several overloaded constructors to create a paper, but we will use the version that takes a DOMElement name, a width, and a height.After creating the paper, which is transparent by default, we need to create a rectangle background for our game board. Listing 6-1 shows the code to create these elements. Listing 6-1 Initializing the Game Board In Listing 6-1, we draw a rectangle and apply a fill and a stroke to it.We aren’t limited to those attributes, however.Table 6-1 shows the other attributes we can apply to most objects. ptg6899256 99First Steps with RaphaëlJS Next, we need to draw the text for our title. Drawing Game Text Raphaël gives us several options to draw text, and we can even alter attributes on the text such as the color and fill values after they are drawn.We can draw text in the default browser font and with a white fill by executing code like the following, where the first two parameters specify the x and y positions, followed by the text string to print. Includ- ing \n inserts carriage returns in the output text: var text = paper.text(600, 50, "Timer"); As you saw in Listing 6-2, objects can have attributes applied to them as a JSON map or as a single pair in the form obj.attr("attribute","value").Attributes that are not applicable to the current object are ignored silently.Table 6-2 shows a list of the attributes we can attach to a text string. Table 6-1 Drawing Attributes Attribute Name Description cursor Sets the cursor to display. fill The color to fill in a closed object or path. fill-opacity The opacity of the color fill. stroke The color of the line outlining a path or closed object. stroke-width The thickness of the line outlining a path or closed object. opacity The global translucency of the object. path A set of coordinates and instructions to draw complex objects. (This attribute is discussed in detail later in this chapter.) Table 6-2 Font Attributes Attribute Name Description font The name of a font to be used font-family A set of fonts with the same general style but having different font sizes, weights, and styles font-size The size of the specified font’s text font-weight The style of the text (bold, plain, or italic) ptg6899256 100 Chapter 6 Creating Games with SVG and RaphaëlJS Custom Fonts Sometimes, the basic fonts won’t do.Why should your games be limited to the same hand- ful of fonts guaranteed to be present on all computers, thus limiting your creativity and style? Well, the good news is that, thanks to Cufón, they don’t have to. Cufón is a tool that allows you to take proprietary fonts and convert them to a JavaScript format that can be used to style text. So if the graphic designers of the world unite and succeed with getting Comic Sans stricken from all the world’s browsers, rest assured you can include it in your games if you so choose. One of the other benefits of Cufón is the reduction in size versus native font formats such as TTF and OTF.The proj- ect claims a reduction of 60% to 80% in file size.You can have the best of both worlds by not needing a plug-in like Flash and not needing to embed large font files and thus slow down loading time. It’s fairly easy to convert a font using Cufón. Navigate to http://cufon.shoqolate.com/ generate/ to convert fonts online or download the code to run the conversion tool on your own server.The Cufón generator allows you to specify fonts for the default weights beyond the regular weight, including bold, italic, and bold italic.You can also modify the given font-family identifier. Figure 6-3 shows these options. Figure 6-4 shows the different combinations of glyphs you can output in the gener- ated font.This is an area where we can further reduce the size of the output font.The default selection is Basic Latin, which includes the uppercase and lowercase alphabet, dig- its, and punctuation. Options such as Latin Extended-A and B, Cyrillic, Russian, and Greek depend on the underlying capabilities of the font.Those extended character sets might not be available, so use caution to verify they are there if you need to use them. Cufón gives us some other option for restricting a font to a certain domain and mak- ing the output file even smaller. However, the option I’m most interested in is shown in Figure 6-5. On the right side is a teeny-tiny Raphaël symbol that formats the font for use in Raphaël. If you forget to tick it, or find a Cufón file you’d like to use, don’t fret.You can convert a Cufón file for use with Raphaël by performing a Find operation on Cufón and replacing instances with Raphaël.This is the part of the book where I tell you to not steal.All fonts aren’t created equal, and many of them have field of use restrictions. Make Figure 6-3 Selecting font typefaces to convert ptg6899256 101Custom Fonts Figure 6-4 Selecting glyphs to convert sure you investigate what licenses the fonts you want to use have. Conversely, you could stick to open-source and royalty-free fonts, which are freely available on the Internet. Unlike the text(...) function we used before, there is another function, called print(...) in Raphaël that gives us a great deal of granular control over characters.Whereas attributes on a string created with text(...) apply for all characters, strings created with print(...) can be applied on a character-by-character basis.The same is true with animations. Figure 6-5 Font customization ptg6899256 102 Chapter 6 Creating Games with SVG and RaphaëlJS SVG and the attributes Raphaël exposes allow us to truly interact with the Web and link to other SVG documents or web pages, and thanks to search engine mojo, those links are discoverable. Listing 6-2 shows several rectangles and a circle that navigate different websites. Listing 6-2 Linking to an External Document var paper = Raphael(0, 0, 300, 300); var circle = paper.circle(50, 50, 40); circle.attr({fill:'#F00'}); circle.node.onclick = function () { document.location = "http://facebook.com"; }; circle.node.onmouseover = function () { console.log("over at "+ new Date()); }; var r = paper.rect(200,100, 40, 40); r.attr("fill", "#00C"); r.click(function () { document.location = "http://amazon.com"; }); var rect = paper.rect(150,200, 80, 80); rect.attr({fill:"#0F0", href:"http://google.com"}); Listing 6-2 demonstrates several things. First, we see the first use of the node keyword, which specifies that you want to access and manipulate the underlying DOMElement. Alternatively, for the most common event types, we can attach the listener function directly to the element like we did with the blue rectangle.Although all three will forward the browser to a different page, it is important to note that only the last element with the href attribute acts like a conventional link, changing the cursor to a “clicky hand.” Table 6-3 shows some other attributes that an SVG object can use to link documents. We’d like to have our game text use a font that will most likely be present on users’ machines, so along side the font size, we will specify a list of fonts to attempt. If none of them are present, Raphaël will fail back to a sans serif font. Listing 6-3 shows how we can make it this happen. Table 6-3 Linking Attributes Attribute Name Description href Turns the associated object into a hyperlink target A sub-element on a href page to link to ptg6899256 103Custom Fonts Listing 6-3 Setting Attributes on Text Blocks var attrList = {fill:"#FFF", stroke: 2}; var gameTitle = paper.print(150,30, "Card Match Game", paper.getFont("Droid Sans", "bold"), 48 ) gameTitle.attr(attrList) Specifying Color In the earlier examples, we indicated color by using a simple three-character hexadecimal representation for the red, green,and blue values. Raphaël provides many different ways to specify color. In addition to the shortened RGB hexadecimal format, we can specify colors using the identifiers shown in Table 6-4. SVG also supports gradients, which allow you to smoothly transition between colors at given intervals.They take a little bit more work to specify.Gradients fall into two major categories: linear and radial. Linear gradients assume one dimension of influence, with a vector extending into space and some angle of incidence and with the resulting gradient matching the vector. Linear gradients take the general form angle-color[-color[:offset]]*-color where angle is the angle of incidence/depart, followed by a hyphen and a color.After the initial color, any number of optional transition stops can be specified.They are demarked by a hyphen, a color, a colon, and an optional percentage of the offset from the origin of the vector. If the offset isn’t specified, the transitions will be equally divided between all Table 6-4 Methods to Specify Color Method Description Color name A string specifying one of the 147 colors defined in HTML and CSS. Examples: "yellow","green","pink" Color channel Specifies the values of red, green, and blue as values from 0 to 255 or as percentages from 0% to 100%. Optionally, an alpha channel can be specified using the same methods. Example: rgb(140,200,10), rgba(100%, 5%, 20%, 90%) Hexadecimal Represents a color using hexadecimal format. Both the shortened (#RGB) and long forms (#RRGGBB) are supported. Hue, Saturation, Brightness, (Alpha) Represents a color using hue, saturation, and brightness values between 0.0 and 1.0, inclusive. Alternatively, percentages can be used and opacity can be specified. ptg6899256 104 Chapter 6 Creating Games with SVG and RaphaëlJS the colors. Finally, a terminal color is listed. Note that any of the methods for indicating a color can be mixed and matched in gradients. So even though something like 10-blue-rgb(0%,100%,0)-rgba(255,0,0,255)-hsb(0.5, 1.0, 1) is totally valid, it is a really bad idea to use when it comes to quickly discerning the transi- tions because mixing and matching affect readability. Radial gradients, on the other hand, work in two dimensions.The gradient effect extends in all directions from a focal point somewhere inside the object. Radial gradients can only be applied to ellipses (including circles).This is only a compatibility issue, because SVG supports assigning radial gradients to any object. Radial gradients take the following form: r[(fx, fy)]color[-color[:offset]]*-color Besides the focal point, generally you can easily convert a linear gradient to a radial gradient by dropping the angle,which no longer applies, and adding an r. For example, our ill-fated example from before becomes this: rblue-rgb(0%,100%,0)-rgba(255,0,0,255)-hsb(0.5, 1.0, 1) The focal point for a radial gradient is composed of two values, from 0 to 1, inclusive. The default value is “0.5, 0.5”, which creates concentric color circles. Changing the focal point values moves that point into one of the four quadrants. Loading Game Assets Although it would be interesting to try and draw our own assets for playing cards, the DRY (Don’t Repeat Yourself) principle applies here. Instead of wasting time on that, we can use assets from the open-source project SVG-cards (http://svg-cards.sourceforge. net/) for our card fronts and backs. Figure 6-6 shows the default card designs from SVG- cards. If we instead choose to be creative, we could substitute a custom card back. Figure 6-6 Front and back examples from SVG-cards ptg6899256 105Creating Our Game Classes The way that Raphaël stores SVG is a subset of the SVG specification, so we can’t just take any SVG file and manipulate it in Raphaël. Several parsers are available on the Inter- net that can take a raw SVG file and create Raphaël code to render it. Our other option is to render the complex portions of the object to a bitmap file and use it to skin a sim- pler object in Raphaël.The latter option is the best for our simple game. If we had ren- dered the cards as vector objects, the renderer would have to redraw intricate designs such as face cards over and over again, thus slowing the interactivity of the game. Luckily for us, in addition to being able to read and create SVG files, Inkscape can also convert them to PNG, PDF, Postscript, and several other file formats. Converting SVG Files to Bitmap Images In SVG-cards, each card is stored in a group with the name of the card and suit in the fol- lowing format: {1,2,3,4,5,6,7,8,9,10,jack,queen,king}_{club, diamond, spade, heart} {red,black}_joker To c o nve r t , say, the two of clubs, we would open an Inkscape shell by typing this: inkscape -shell The interactive shell allows us to run several commands in succession without spawn- ing a bunch of Inkscape processes.We then need to specify the parameters for the request: > svg-cards.svg -i 2_club -e 2_club.png The code samples directory for this chapter contains the required converted assets for this project. Now that we have our card images and card backs as a bitmap file, we just need to create our classes for the interaction. Creating Our Game Classes The first classes we should create are the Card and Deck classes. Our Deck class will allow us to specify a number of decks, shuffle them, and deal cards. Our Card class contains properties for storing the ordinal and suit values with paths to the card back and front. The path for the image showing on the front of the card is constructed from the ordinal and suit.The card also knows how to draw itself at a given position with a paper object. The Deck class contains a collection of cards and has a notion of shuffling and dealing cards. Listings 6-4 and 6-5 display the basic framework for our Card and Deck classes, respectively. Listing 6-4 Card Class Source Code /* Defines the Card object. @author jwill */ function Card(ordinal, suit) { ptg6899256 106 Chapter 6 Creating Games with SVG and RaphaëlJS if ( !(this instanceof arguments.callee) ) { return new arguments.callee(arguments); } var ord; var suit; var cardBackPath = ""; var cardFrontPath = ""; var self = this; self.init = function() { var paper = Raphael($("#gameboard")0, 800,600); self.ord = ordinal; self.suit = suit }; self.createCard = function(ordinal, suit) { }; self.init(); } Listing 6-5 Deck Class Source Code /* Defines the Deck object. @author jwill */ function Deck(numDecks) { if ( !(this instanceof arguments.callee) ) { return new arguments.callee(arguments); } var cards; var self = this; self.init = function() { var paper = Raphael($("#gameboard")[0], 800,600); self.cards = new Array(52 * numDecks); self.initCards(); } self.initCards = function() { // Initialize the cards var ordinals = ['1','2','3','4','5','6', '7', '8', '9', '10', 'jack', ➥'queen', 'king',]; var suits = ['club', 'spade', 'heart','diamond']; // Populate card array for (var k = 0; k=0; i—) { var r = rand(i); swap(i,r); } } } Drawing and Animating Cards Although it would be perfectly acceptable to have no transitions between card states, doing so adds a little bit more polish to the game and makes game play a bit more enjoy- able.Tables 6-5 and 6-6 introduce the last of the most commonly used attributes in Raphaël, those needed to position and transform objects. ptg6899256 108 Chapter 6 Creating Games with SVG and RaphaëlJS Our requirement for graphic effects is pretty low in this game, but we will need a cou- ple of transitions to enhance the game play.We need to come up with a transition to flip cards, to make them disappear when we have found a match, and transitions to start and end the game. Let’s begin with animating the cards. As you saw earlier, we can wire up the cards like any other DOMElement to respond to events such as button clicks. Because we are working in only two dimensions, we will “flip” cards by transitioning one side of the card to zero, making it transparent, while gradually making the other side of the card opaque.Listing 6-7 shows our flipCard function, which reads whether or not the front of the card is showing, inverts the value, and executes the transition. Listing 6-7 Flipping Cards self.flipCard = function(frontShown) { if (self.meta['hidden'] == true) return self.frontShown = !self.frontShown; if (self.frontShown) { self.cardBack.animate({opacity:0.0}, 1000) self.cardFront.animate({opacity:1}, 1000) game.selectedCards.add(self); } else { Table 6-5 Position Attributes Attribute Name Description cx The x position for the center cy The y position for the center r The uniform radius of the object rx The horizontal radius of the object ry The vertical radius of the object height The height of the object width The width of the object x The x position of the object y The y position of the object Table 6-6 Transformation Attributes Attribute Name Description rotation Spins an object about a center point scale Increases or decreases the size of the object translation Moves an object on the screen ptg6899256 109Creating Our Game Classes self.cardFront.animate({opacity:0.0}, 1000) self.cardBack.animate({opacity:1}, 1000) game.selectedCards.remove(self); } console.log(game.selectedCards); } These lines specify that we should animate the opacity of the object from the current value to 0.0 or 1.0 and to animate over a duration of 1000 milliseconds (1 second).We don’t have to stick to just the opacity; most of the events that have numeric values can be animated.Table 6-7 shows a list of them; many will be familiar from our earlier discussion of attributes. In addition to a smooth transition from start to end, Raphaël allows us to add other modifiers to an animation. Easing allows a developer or designer to modify the animation path to mimic conditions we see in real life. For example, when there is a key press to indicate an abrupt stop, you could make a car object slightly recoil as if someone slammed on the brakes at a low speed.We could also apply functions to imitate acceleration and deceleration. Or maybe an elastic effect or a bounce effect, where each rebound is slightly lower that the previous one, until the object comes to a stop.You can provide your our easing function or use one of the presets listed in Table 6-8. Table 6-7 Animateable Attributes clip-rect cx cy fill fill-opacity font-size height opacity path r rotation rx ry scale stroke stroke-opacity stroke-width translation width x y Table 6-8 Preset Easing Functions Value Description > Simple deceleration < Simple acceleration <> Accelerate then decelerate backIn Move backward then move to destination backOut Move to destination, slightly past it, then to proper position bounce Move to destination and lightly bounce the object elastic Combination of backIn, backOut, and bounce ptg6899256 110 Chapter 6 Creating Games with SVG and RaphaëlJS Although we won’t cover them in this chapter, you can also specify keyframes encap- sulating the animation to say, for example, that from 0% to 20% into the animation, I want the acceleration to be very slow.When a player finds a match, we apply an anima- tion to fade the cards to transparent with a bounce effect to approximate a blink.This can simply be done with a single line of code: self.cardFront.animate({opacity:0.0}, 1000, "bounce") The next line in the source self.meta['hidden'] = true; corresponds to a conditional statement in flipCard that short-circuits any animations taking place on that card if it is supposed to be hidden. Creating Advanced Animations The last bit of animation we have to complete is the animation for signaling the end of the game. No one can lose our friendly game, so let’s make it extra special by showing an animated “You win!” message. Before we dive into animating the message, let’s take a step back and talk about a concept that we haven’t yet covered in SVG: paths. Paths Paths provide a means to create complex shapes. By themselves, they don’t have a visible representation.There are an abstract set of lines for drawing. If we give them a color fill, a solid object will be drawn. If we add a stroke, they will resemble a set of lines.We can also take a shape and draw it multiple times along a path to create a extruded shape with a 3D effect. In Raphaël, we can also use paths to determine how an object will be animated. Paths are useful because they allow us to mix and match lines and curves.Any primi- tive object, such as a circle, rectangle, or even text, can be represented by path components with the proper stroke and fill properties.A path can be represented by a sequence of seg- ments, arcs, and curves.The path syntax is not really built to be written by hand, and all of our examples using paths will be created in a vector graphics application such as Inkscape and then imported to Raphaël. Be that as it may, it’s important to have an understanding of the identifiers. If you have played with Tur tle Graphics for the Logo programming lan- guage or some of the graphics packages for BASIC, you will feel right at home. moveto and lineto Unlike some of those early graphics libraries for BASIC and Logo, there isn’t an explicit penup or pendown instruction. Moving the cursor in SVG parlance is the same as picking up the pen, moving it to another position, and putting the pen back down on the paper. ptg6899256 111Creating Advanced Animations That position can be absolute or relative based on the current position of the “pen.” It bears noting that almost all of our path instructions have absolute and relative versions.A moveto instruction is denoted by a lowercase m or an uppercase M and a Cartesian coor- dinate pair, indicating a relative or absolute instruction, respectively. There are three variants of instructions for drawing lines: lineto, horizontal lineto, and vertical lineto. lineto is denoted by an uppercase L for absolute coordi- nates and a lowercase l for relative coordinates.You can specify a single point or a set of points. horizontal lineto, denoted by H or h, takes one or more x values. vertical lineto, indicated by V or v, performs the same action as horizontal lineto but on the y axis. Last but not least, we need a way to take our vertical, horizontal, and general poly- lines and make shapes out of them.The closepath instruction, marked by a Z or z, does just that in drawing a straight line from the current position to the start of the current subpath.Z and z do exactly the same thing but are including for symmetry with the other commands. I promise you that you only have to endure a little bit of pain constructing these paths by hand for this section. No sane developer ever does this by hand. Just think of it like learning to calculate derivatives in Calculus class; once you fully understood the easy way, you never had to contend with the hard way anymore. Listing 6-8 moves the cursor to 100,100 and draws a rectangle with sides 40 units long, closes the path, and assigns a white fill color to it using horizontal and vertical lines.Afterward, relative coordinates are used to draw a rectangle with a black fill. Listing 6-8 Rectangular Paths var rect = paper.path("M100 100 h40 v40 h-40 v-40 z"); var rect2 = paper.path("M200,200 l40,0 l0,40 l-40,0 l0,-40 z"); rect.attr({fill:"#FFF"}) rect2.attr({fill:"#000"}) curveto Line segments can only take you so far. You can approximate a curve with lineto instructions, but scaling up the drawing will betray the method you used to draw them. And it wouldn’t be that fun to have to construct all the segments to draw a curve anyway. Bézier curves can give us the precision we need while reducing the number of instruc- tions required.Although he wasn’t the creator of the curves named for him, Pierre Bézier, a French engineer for the Renault, created a computer-aided design system to use the curves to design automobile parts and bodies.Today, we use Bézier curves in the design of many consumer products and some font standards. It’s fairly likely that the font used to print this text uses Bézier curves. ptg6899256 112 Chapter 6 Creating Games with SVG and RaphaëlJS So now that you know how cool they are and where they are used in real life, what exactly are Bézier curves? They are defined by a starting point, an end point, and a set of control points.The curve doesn’t pass through these control points, but they affect the path of the curve, pushing and pulling it like the poles of a magnet. Bézier curves in SVG come in two varieties: cubic and quadratic.The difference between the two is that quadratic curves have one control point and cubic curves have two. SVG has several identifiers for each, with C/c and S/s denoting cubic Bézier curves and Q/q and T/t representing quadratic Bézier curves. C/c and Q/q take the absolute or relative coordinates for the control points followed by the endpoint. S/s and T/t are the shorthand versions of the aforementioned curves.They take the last control point in the previous curve and take the reflection of it to use as a control point. For quadratic curves, you only have to specify the new endpoint, but cubic curves require that you specify a second control point as well. Exporting Paths from an SVG File Now that you have slogged through learning how to draw lines and curves and all, let’s discuss the easy way. Open up your favorite vector graphics editor, such as Inscape or Adobe Illustrator, use the Pencil/Pen tool to draw to your heart’s content, and save the file as SVG.Then, look for a path tag and copy the contents of the “d” or data property. SVG-edit, pictured in Figure 6-7, allows you skip one of those steps by giving you an option to view the raw SVG from inside the web page. Figure 6-7 SVG-edit showing raw SVG code ptg6899256 113Extending Raphaël with Plugins Animating Along Paths Raphaël comes with two functions to animate objects along paths: animateAlong and animateAlongBack.These functions animate an object starting at the beginning and end of a path, respectively.These functions take a path object or path string, the number of milliseconds the animation will span, an optional Boolean value for whether to rotate the object while animating it, and an optional callback function. Given a circle that we have already defined, we can animate it along one of our rectangle paths by executing the fol- lowing line of code: circle.animateAlong(rect, 2000, false); One thing to note about animateAlong and animateAlongBack is that unless the shape’s resting position is the same as the path it is moving along, it will move relative to its own space. For the preceding snippet, from its starting position, the circle will move 40 units to the right, 40 units down, 40 units left, and 40 units up, no matter where the rec- tangular path is drawn. Our ending screen uses a figure-8 path to animate the message “You win!” Extending Raphaël with Plugins Raphaël can be extended with plugins. Reasons for this could be the desire for deeper integration of third-party libraries as well as exposing as-yet-unimplemented features in the SVG specification. Raphaël is a compromise between the feature set in SVG, for non–Internet Explorer browsers, and VML, an Internet Explorer standard for drawing vector graphics. If a feature was not present in both standards, it was left out. Plugins can allow the developer to add back some of that missing functionality, albeit in a non- cross-platform way. Adding Functions Raphaël allows you to add functions to the paper or to elements as well as attributes.The key difference between functions added to the paper and those added to elements is that paper objects must be created before a paper is instantiated. Functions can be added to elements at any time and modified. The ability to add functions to the paper is exposed by the Raphael.fn object.You are even able to use namespaces to modularize your code.The gRaphael charting library does just that. Element functions are exposed by the Raphael.el object.Adding a function to that object adds it to all Raphaël objects. SVG Filters SVG filters comprise sone area that benefits from plug-ins. Filters in SVG are not that unlike the filters present in many graphics manipulation applications such as GIMP and Adobe Photoshop.They allow you to alter the way a given object or set of objects is dis- played. Because they aren’t in core Raphaël, we’ll discuss their capabilities but leave it as ptg6899256 114 Chapter 6 Creating Games with SVG and RaphaëlJS an exercise for the reader to integrate them.Table 6-9 shows an abbreviated list of avail- able filters and their descriptions. Developer community members have created plugins supporting some filters, but as of the time of this writing, all filters have not been imple- mented.A good resource for what has been implemented is the Raphaël Google group. In the context of filters,“image” can refer to an actual raster image, such as a JPEG or PNG, a matte fill color, or a gradient color. Speed Considerations Compared to the much-newer technology HTML5 Canvas, which operates essentially as a bitmap buffer, SVG is a bit more heavyweight.The code for drawing 5,000 circles in a Canvas can be largely reused with translation instructions.An SVG drawing, on the other hand, has to create 5,000 discrete objects with full DOM representations for each.This is the price we have to pay for letting SVG handle most things for us. SVG is great for games with a low number of sprites on the screen, as in our examples, or games where the sprites will not change often. It would not be fruitful to use SVG for the whole of a first-person shooter game. Summary In this chapter, we dove deep into the internals of SVG with RaphaëlJS.You learned how to draw text, create objects, interact with them, and change them on the fly.You also learned how to bring color to objects in compelling ways, how to draw complex objects, and how to extend Raphaël. Lastly, we covered the conditions that would benefit from a Table 6-9 Abbreviated List of SVG Filters Filter Name Description feBlend Combines the data of two components using one of the predefined blending algorithms feDiffuseLighting Defines a light that provides ambient lighting for the scene feGaussianBlur Blurs an image by applying a Gaussian function feImage Renders an image to a raster canvas feOffset Offsets an image by a given vector fePointLight Defines a light set at a specific point emitting in all directions feSpotLight Defines a light set at a specific point in space that is focused at a point with a bounding cone of influence feTile Fills a target object with a tiled repeated pattern feTurbulence Adds noise to an image ptg6899256 115Exercises game coded using SVG and those that would not. Knowing the innate capabilities of the tools and libraries you intend to use helps you down the line in assuring yourself you made the right decision and aren’t trying to build a house with a screwdriver, so to speak. Exercises 1. We briefly discussed the Cufón library, which can be used to convert fonts for use with RaphaëlJS. Use one of the open-source fonts found in the Google Font Directory (http://code.google.com/webfonts), convert it for use with Raphaël, and create a scene with any text string using that custom font. 2. Modify the card match game code to use a custom background for the cards. 3. Modify the card match game code to optionally include Jokers in the deck. 4. Draw a hexagon and pentagon using paths. 5. We used animation to flip playing cards. Make an animation that transitions between a triangle, a square, and a circle. You can download chapter code and answers to the chapter exercises at www. informit.com/title/9780321767363. ptg6899256 This page intentionally left blank ptg6899256 7 Creating Games with WebGL and Three.js In previous chapters, we took great pains to learn the hard way first before diving into libraries and frameworks that make our coding life simpler.WebGL is a beast. Based on OpenGL ES 2.0, which itself is a simplification of the much older Open GL API, it’s still rather large.Although it stands to reason that one might use Canvas 2D or SVG without the benefit of a framework, the same is not the case with WebGL.There are many con- cerns to be taken into account, including lighting, texturing, depth of field, particle sys- tems, and collision detection and response, that make operating without a framework much like walking a tight rope without a net.The framework we will be using exten- sively in this chapter is Three.js.Three.js is a 3D graphics library for modern browsers that, as mentioned before, can render to Canvas,WebGL, and SVG. It supports all that is possible in WebGL while allowing you to use the same code for all renderers, with some exceptions.The compatibility layer won’t excuse you from doing extensive testing, but at the very least it gives you a possible fallback option if the client’s computer isn’t exactly the latest and greatest.Three.js abstracts many of the pointy edges away—for example, in dealing with materials and shaders. It has built-in helpers for some of the more common 3D geographic shapes such as spheres, cubes, and cylinders, and a full-featured particle system, texture mapping, and basic collision detection. In this chapter, we will endeavor to stay at a high, general level in some cases but dive into the low-level details in others— whatever seems appropriate for the task at hand. Let’s begin the chapter by discussing OpenGL ES, the technology behind WebGL. OpenGL ES, or OpenGL for Embedded Systems, is a specification for 3D graphics APIs running on devices such as mobile phones, tablets, and video game consoles. Most mobile device platforms (Android, iOS, Blackberry/QNX,WebOS) support some form of the spec.Video game implementers include Nintendo (Nintendo 3DS), Sony (PlaySta- tion 3), and OpenPandora (Pandora).Although the names are similar and versions of OpenGL ES track to OpenGL, OpenGL ES is not OpenGL. OpenGL ES is a subset of OpenGL. Some key differences are the removal of glBegin/glEnd and glVertex* for drawing primitives.The use of display lists was deprecated in favor of vertex buffers.We ptg6899256 118 Chapter 7 Creating Games with WebGL and Three.js won’t be using them directly because Three.js abstracts them all away, but it is important to be aware of the differences. Moving to Three Dimensions When we were drawing on the 2D Canvas context, we didn’t have to worry about an object’s depth or its position, either near or far from us.We just had a rectangular view- port representing the things we could see. For WebGL, we do have to consider the depth, and this unsurprisingly makes our transformation calculations a more complicated. Don’t worry—I’m not going into matrix math again.At least not yet. If you’re a bit hazy on all this, take a moment and turn back to Chapter 5,“Creating Games with the Canvas Tag.” We can control depth with the z-axis, as shown in Figure 7-1. The addition of the third axis gives us a new construct for representing a point in space: the vertex.The following snippet shows the code needed to create a vertex in Three.js: new THREE.Vertex(new Vector3(0, 0, 0)); Draw two vertices and you have a line. Draw three vertices and you can have a trian- gle.The options are limitless. Right now we can draw a bunch of vertices on the screen, but we won’t be able to see them.That’s because they don’t have any relationship between them; at this point, they are just a bunch of random points in space.A mesh is a collection of vertices that describe an object.These vertices are arranged into faces that are composed of three or more vertices.To create a triangle, we need to perform the fol- lowing tasks: n Create a Geometry object to store the vertices. n Add faces to tell the vertices how to arrange themselves. n Create a mesh with the Geometry object and a material. y z x Figure 7-1 XYZ-axes ptg6899256 119Giving Your Objects Some Swagger with Materials and Lighting Don’t worry about how to define the material just yet.We’ll be covering materials a bit later in the chapter.We can see sample output in Figure 7-2 and the corresponding code to produce the mesh in Listing 7-1. Listing 7-1 Creating a Triangle geometry = new THREE.Geometry(); geometry.vertices.push(new THREE.Vertex(new THREE.Vector3(0, 10, 0))); geometry.vertices.push(new THREE.Vertex(new THREE.Vector3(-10, -10, 0))); geometry.vertices.push(new THREE.Vertex(new THREE.Vector3(10, -10, 0))); geometry.faces.push(new THREE.Face3(0,1,2)); var triangle = new THREE.Mesh(geometry, geoMaterial); Giving Your Objects Some Swagger with Materials and Lighting We now have a context of how the different vertices relate to each other, but we still won’t be able to see them.Why? We haven’t told the world what they should look like. We do that with materials and lighting. Figure 7-2 Triangle mesh ptg6899256 120 Chapter 7 Creating Games with WebGL and Three.js Understanding Lighting Besides keeping humanity from freezing to death, lighting in Three.js isn’t that dissimilar to what happens in the real world via the Sun. It has three types of lighting objects: n AmbientLight—Ambient lighting is the average of all the light generated from all light sources in an area. Objects rendered with only ambient lighting will appear two-dimensional.That’s because all vertices receive the same amount of light. One way to look at it is to consider ambient lighting to be like the thermostat on your air conditioner/furnace.Turning it on, in general, doesn’t make individual rooms cooler or warmer, it brings them all approximately to the same temperature. n PointLight—Point lighting is attenuated light coming from a specific location in world space. Light is emitted in all directions from the point and does make objects look more 3D.As an object moves further from the light source, the amount of light that can affect objects is less and less (attenuation, or colloquially “dropoff”). Point lights can also cause or contribute to specular reflections. n DirectionalLight—Directional lighting can be viewed as similar to shining a bunch of lamps on a subject from the same direction.Whereas point lights will attenuate over distance, directional lights deliver the same intensity as they stretch toward infinity or the specified maximum distance. Listing 7-2 shows examples of the three light types, starting with AmbientLight, which has a sole parameter. intensity corresponds to how bright the light rays should be, and distance refers to the longest light ray before total falloff. castShadow is Boolean that determines whether or not the object illuminated by DirectionalLight with cast a shadow.Although not listed in the constructors, you can set the position on PointLight and DirectionalLight. Parameters listed in brackets are optional. Listing 7-2 Lighting Examples new THREE.AmbientLight(hexColor); new THREE.PointLight(hexColor, [intensity], [distance]); new THREE.DirectionalLight(hexColor, [intensity], [distance], [castShadow]); Using Materials and Shaders Materials make our objects less ordinary by giving them colors and textures.We are cov- ering materials after going over lighting because the lighting of a scene greatly affects how a material appears to the user. Many atmospheric components go into determining the final color of a vertex or face including, but not limited to, the following: n Lighting (ambient, point, and directional) n Shadows n Shaders ptg6899256 121Giving Your Objects Some Swagger with Materials and Lighting n The blend mode n Occlusion We’ve already covered lighting, and shadows don’t need much description, so let’s press on with shaders.A shader uses software instructions to calculate rendering effects gener- ally on the Graphics Processor Unit (GPU) but can be done in software as well.There are generally three types of shaders: n Ve r t e x s h a d e r s—Vertex shaders are run for each vertex in a mesh.They can alter properties such as the position, color, normals, lighting, and texture coordinates. n Pixel or fragment shaders—Fragment shaders calculate the color and other properties for each pixel in a mesh when rendered onscreen. n Geometry shaders—Geometry shaders are used to add or remove vertices on a mesh. One use is to add LOD (level of detail) effects to a scene—that is, to increase or decrease the number of vertices in a mesh as a object gets closer or further, respectively, from the screen. WebGL and Three.js focus programmatically on the vertex and fragment shaders.The LOD aspect of geometry shaders is handled in Three.js, but a discrete object won’t be covered in any detail in this chapter. Before we get to talking about shaders and materials, there’s one important concept you need to learn about: the normal. It’s a vector that is perpendicular to a surface or vertex. It is often used in lighting calculations, which also affects how materials appear and can be used to create greater detail in models without increasing the polygon count. Several shading algorithms are either supported natively in Three.js or easily implementable. Let’s look at them briefly, from easy to difficult. Flat Shading Flat shading shades an object based on each polygon normal in a mesh. For very regular shapes such as rectangles, the calculations won’t be that different from some of the most advanced algorithms we’ll discuss.The problem with flat shading is that any model with a reasonable amount of polygons will look blocky, and users will be able to easily see where one polygon ends and another begins. Lambertian Shading Lambertian shading, put simply, reflects light equally in all directions.This causes models to look the same irrespective of the viewer’s point of view. Unfinished wood, concrete, and other matte surfaces have this characteristic. Because of the lack of dynamism, Lambertian shading, like flat shading, is very easy on the GPU. Gouraud Shading Gouraud shading, at every vertex, applies a normal that is the average of all the surface normals for the polygons that the vertex touches.This gives us smoother illumination than flat shading but at a low cost to the CPU/GPU. Because it is an average of several ptg6899256 122 Chapter 7 Creating Games with WebGL and Three.js vertices, some amount of error will be involved as the applied normal is an estimate and will be plus or minus what the actual normal value was.This can be especially evident in anything that causes specular highlights (bright spots on reflective objects). Figure 7-3 shows an infographic of how a plane normal is calculated. Phong Shading Phong shading is the most costly of the four.Also called per-pixel shading, it takes the vertex normals and calculates the intermediate normal values for each pixel.This pro- duces a lighting model that improves greatly on the results from Gouraud shading but is costly to the processor. Somewhat related but technical not a shading model per se is Phong reflection. Phong reflection considers how that very few objects are perfectly shiny or rough.As such, the surfaces on an object are a combination of the two properties (specular and diffuse reflec- tion, respectively).The components for Phong reflection are as follows: n An ambient color for the amount of light evenly distributed through the object n A diffuse color that scatters light in all directions n A specular color for the highlights, presumably caused by the light source You might also specify a shininess or opacity.All of these work in tandem to produce the final material. For example, a totally unshiny material isn’t going to consider the spec- ular values. Creating Your First Three.js Scene One of the first things I learned to draw in OpenGL was a snowman scene from some random online tutorial. Snowmen are great because no one hates them but the sun, and it is easy to draw something that looks reasonably close to the subject. It also gives us a chance to discuss some of the built-in 3D shapes. Calculated NormalCalculatedNormal Figure 7-3 Gouraud shading normal calculation ptg6899256 123Creating Your First Three.js Scene Setting Up the View Before we get started, we need to do a little housekeeping to set up our environment to draw the snowman. In our truncated init function, we instantiate a renderer and scene. As mentioned before,Three.js can render to several different environments. Changing the renderer to CanvasRenderer or SVGRenderer is how you would do that.We also need to set the dimensions of the renderer.Three.js makes a best-effort attempt to render the scene with the given renderer.Although many effects and materials can be rendered with all the renderers, some are specific to WebGL. Below the init function, we have a pair of functions that handle our animation and rendering. requestAnimationFrame attempts to refresh the drawing as close to the monitor’s refresh rate as possible while short-circuiting drawing if the window is not visible.You can see this code in Listing 7-3. Listing 7-3 Setting Up the Environment function init() { // ... // create a renderer and scene renderer = new THREE.WebGLRenderer(); renderer.setSize (WIDTH, HEIGHT); // some code } function animate() { requestAnimationFrame (animate); render(); } function render() { renderer.render(scene, camera); } In this chapter, you might notice the use of both “scene” and “scene graph.”The scene describes all the objects in the environment.The scene graph describes how the objects are arranged in relationship to each other.A scene graph is a collection of nodes arranged in a graph or tree structure. Each node may have child nodes.The essential point you need to know is that because Three.js is a scene graph, we only have to keep track of the objects we want to change. Otherwise, we add the node to the scene graph, call the ren- der, and don’t worry about it. On the off-chance that a few of you have never seen a snowman or even snow, a snowman is shown in Figure 7-4.We can see that his body is more bulbous than humanoid and that he has sticks for arms and a carrot nose. Looks pretty daunting, huh? That complete scene can be drawn with only three shapes: spheres, cylinders, and planes.We use those shapes in different sizes and with different transformations to create the snowman.A sphere, shown in Figure 7-5, is a ptg6899256 124 Chapter 7 Creating Games with WebGL and Three.js Figure 7-4 Snowman perfectly round shape that is the result of taking a circle and spinning it around its center point. Basketballs, baseballs, and the Earth are all spherical shapes. Listing 7-4 shows the code needed to draw the snow parts of the snowman’s body.We start by instantiating a white material. Next, we draw three spheres, each successive one smaller than the one that preceded it.The first parameter in the Sphere constructor is the radius, followed by the number of steps to draw for the width and height. More steps give you a more round sphere but also add a lot more vertices to draw. Fewer steps yield an object that is quicker to draw but the lighting will not look as good. Lastly, we use the transformation functions on THREE.Mesh to move the spheres into place and then finish by adding them to the scene graph. Figure 7-5 Sphere ptg6899256 125Creating Your First Three.js Scene Listing 7-4 Drawing the Snowman’s Body var topSegment, middleSegment, bottomSegment; var whiteMaterial; whiteMaterial = new THREE.MeshLambertMaterial({ color:0xFFFFFF }) bottomSegment = new THREE.Mesh( new THREE.Sphere(8, 16, 16), whiteMaterial ); middleSegment = new THREE.Mesh( new THREE.Sphere(6, 16, 16), whiteMaterial ); middleSegment.translateY(10); topSegment = new THREE.Mesh( new THREE.Sphere(5, 16, 16), whiteMaterial ); topSegment.translateY(19); scene.addChild(topSegment); scene.addChild(middleSegment); scene.addChild(bottomSegment); The second shape we will use in the scene is a cylinder, as shown in Figure 7-6.A cylinder is formed by taking a circle and extruding it along a straight line.“Extruding” is just a fancy way of saying “duplicate the object, move it a little bit, and then rinse and repeat.” Soup cans and some cups are cylindrical. Listing 7-5 shows the code to draw the stick-like arms of the snowman.We start by declaring a brownish material. Next, we create the arms.The parameter list starts with how many steps to use, followed by the starting and ending radii, and the length of the cylinder.We have to do a bit more work this time to move them into place. Figure 7-6 Cylinder ptg6899256 126 Chapter 7 Creating Games with WebGL and Three.js Listing 7-5 Adding Arms var arm, arm2, armMaterial; armMaterial = new THREE.MeshLambertMaterial({ color: 0x8B5A00 }); arm = new THREE.Mesh( new THREE.Cylinder(20, 0.3, 0.3, 10), armMaterial ); arm2 = new THREE.Mesh( new THREE.Cylinder(20, 0.3, 0.3, 10), armMaterial ); arm.rotation.x = 30; arm.rotation.y = 10; arm.translateX(8); arm.translateZ(1); arm.translateY(15); arm2.rotation.x = -30; arm2.rotation.y = 10; arm2.translateX(-7); arm2.translateZ(1); arm2.translateY(15); scene.addChild(arm); scene.addChild(arm2); A plane, shown in Figure 7-7, gives our scene a little bit of depth.Think of it as a giant sheet of paper or, better yet, as a big rug. Figure 7-7 Plane ptg6899256 127Creating Your First Three.js Scene Like the sphere and cylinder before it, the plane allows you to control how detailed the mesh is.After declaring the width and the height, you can set the respective step val- ues.The code to draw a plane is shown in Listing 7-6. Listing 7-6 Drawing a Plane plane = new THREE.Mesh( new THREE.Plane(500,500, 20, 20), planeMaterial ); Although we have three main types of shapes in the drawing, the snowman’s nose can be thought of as both a cylinder and a new shape type: a cone, as shown in Figure 7-8. Some graphics libraries will differentiate between the two, but the relation is similar to that of rectangles and squares:All cones are cylinders but not all cylinders are cones.The extrusion is the same, but the radius of each subsequent circle gets smaller and smaller until it reaches zero. You can see in Listing 7-7 that the only point of distinction between a cone and a cylinder is that one of the radii is close to zero. Listing 7-7 Drawing a Nose nose = new THREE.Mesh( new THREE.Cylinder(20, 0.8, 0.01, 3), noseMaterial ); Figure 7-8 Cone ptg6899256 128 Chapter 7 Creating Games with WebGL and Three.js Viewing the World If you tried to run the code we’ve written so far,you wouldn’t see anything on the page and suspect that it is broken.The reason we can’t see anything is because we haven’t told Three.js where we will be located and what we will be looking at. Placing a Camera in the scene is how we can view it. Based somewhat on the human eye, cameras have attributes that determine what can or cannot be seen.The Camera object signature is shown here: var cam = new THREE.Camera( fov, aspect, near, far, [target - optional]) The most important parameter and also the first is fov, or the field of view (FOV). The FOV determines the amount of the world that can be seen at one time. It is often talked about in degrees.We can calculate it by putting a camera (or eye if you want to make it gruesome) on a tripod and pointing it out in the distance toward some objects. Looking through the viewfinder and not moving the camera, you notice the rightmost object you can see and draw a line from your position to that point.You do the same for the leftmost object. Now draw a line between the two objects.We now have a triangle that we can use to find the FOV.An infograph of this is shown in Figure 7-9. Rest assured that you do not have to calculate this...ever.The computer does all the work for you. The next parameter is aspect, for the aspect ratio.You might recognize the term from the specs on your monitor or television.Aspect ratio is the ratio of the longer dimension of your viewport to the shorter. Most screens are somewhere in the area of 4:3 (standard definition) or 16:9 (widescreen).Aspect ratio works in collaboration with the FOV to determine how much of the world is cropped from view. The next two parameters, near and far, represent the clipping planes for your world. In a scene with thousands of objects and textures being drawn at once, it would be taxing on the CPU and GPU to try and show everything. Even worse, it would be wasteful to draw the things you can’t even see.The near clipping plane is usually relatively close to the user, whereas the far clipping plane is somewhere off in the distance.As objects cross Viewer Figure 7-9 Calculating the field of view (FOV) ptg6899256 129Loading 3D Models with Three.js the far plane, they spontaneously appear or disappear. Some games use fog to make the appearance and disappearance of objects more realistic. target is an optional parameter that allows you to designate an object to look at. Figure 7-10 shows how the first four parameters combined to make the viewing frustum. But, wait a minute, why didn’t we have to deal with any of this when were drawing on the 2D Canvas? The short answer is that we were; Canvas was doing it for us behind the scenes.A frustum for a 2D scene can be created by making a camera with the near and far values being the same, which is also the z value for all drawn objects. In effect, that camera is constrained to seeing a specific slice of the world. Loading 3D Models with Three.js Having to create everything in code would get tedious very fast.You might be happy to know that Three.js supports loading 3D models in its own JSON format and has file exporter scripts for Autodesk 3ds Max and Blender. Autodesk 3ds Max—or colloquially 3D Studio MAX or just MAX—is widely recog- nized as the industry standard for creating, animating, and rendering 3D models. It is widely used not only by artists for games but also in TV and film. Built in to the product is a scripting language called MAXScript, which can be used to build client-side plugins. Blender (www.blender.org) is a cross-platform, free, and open-source advanced 3D modeling application. It can create complex effects supported in commercial 3D model- ing software such as UV wrapping, texture, bones and rigging, and particle system effects. It also bundles a nonlinear editor and Python API for in-application scripting. Blender is managed by the non-profit Blender Foundation, chaired by Blender’s creator Ton Roosendaal and developed by the Blender community (www.blenderartists.org/forum/). There is even a community magazine (http://blenderart.org/). Near plane Far plane Viewer Figure 7-10 Viewing frustum ptg6899256 130 Chapter 7 Creating Games with WebGL and Three.js Part of the outreach the Blender Foundation conducts includes the Blender Confer- ence (held annually in Amsterdam), the Suzanne Awards (which are competitively awarded to animators), and the production of several short films. Commercially, Blender has been used in television commercials, History Channel shows, and in the pre-production of Spider-Man 2. The export scripts for both applications are located in the utils/exporters directory of Three.js. Check the appropriate vendor websites to find out how to install plugins, paying extra care to the version the plugin states it requires. Use a version newer than that required and it might not work correctly. Listing 7-8 shows the code to asynchronously load a JSON model and add it to our scene graph.As you can see in Listing 7-9, the JSON model file can include materials that we can modify or use.The last line of createScene1 may look a bit daunting at first, but let’s break it down. Skipping the first two self-explanatory parameters, we have the global scale of the object, its x, y, and z positions, its rotation on the x, y, and z axes, followed by the material to use. Listing 7-8 Loading a Model File function drawCube() { var loader = new THREE.JSONLoader(); loader.load( {model: "cube.js", callback: createScene1 }); } function createScene1(geometry) { geometry.materials[0][0].shading = THREE.FlatShading; mesh = THREE.SceneUtils.addMesh( scene, geometry, 250, 400, 0, 0, 0, 0, 0, geometry.materials[0] ); } Truncated to the essence of what comprises the model file, Listing 7-9 gives you a gist of what is output from the Blender exporter.You can see the areas for the vertices, nor- mals, materials, and faces.We’ll hold off on explaining some of the other areas of the file until later in this chapter. Listing 7-9 Truncated Cube.js File var model = { "version" : 2, "scale" : 1.00, "materials": [ { "DbgColor" : 15658734, "DbgIndex" : 0, "DbgName" : "Material", "colorAmbient" : [0.0, 0.0, 0.0], ptg6899256 131Programming Shaders and Textures "colorDiffuse" : [0.64, 0.64, 0.64], "colorSpecular" : [0.5, 0.5, 0.5], "shading" : "Lambert", "specularCoef" : 50, "transparency" : 1.0, "vertexColors" : false }], "vertices": [1.00...], "morphTargets": [], "normals": [0.577349,..], "colors": [], "uvs": [[]], "faces": [35,...], "edges" : [] }; postMessage( model ); close(); Programming Shaders and Textures If you want to forgo using the built-in material features in Three.js and possibly create more advanced effects, you can dip into the WebGL features and create your own vertex and fragment shaders. In Three.js, you would create a material as demonstrated earlier in the chapter and attach your shaders.To write shader code, you need to learn a little bit about OpenGL Shader Language, or GLSL for short. GLSL is a high-level language with a C-like syntax.Although structured like pro- grams,and even called that in some cases (the combination of a vertex shader and frag- ment shader), the shaders are not compiled but passed around as strings.They can be created at runtime, as some are in Three.js, or read in from files or
The time is now:
The associated JavaScript worker.js file is shown in Listing 1-3. Listing 1-3 Worker.js File for Getting a Date and Time setInterval(function() {w postMessage(new Date()); }, 2000); In the two listings, we see that workers can send messages using postMessage() and can listen for messages on the closure onmessage.We can also respond to errors and termi- nate workers by passing a function to onerror and executing terminate(), respectively. Workers can be shared and send messages on MessagePorts.As with other aspects of the Web Worker spec, this portion is in a state of flux and somewhat outside the needs of the examples in this book.Therefore, using SharedWorkers is left as an exercise for the reader to investigate. Application Cache Application Cache provides a method of running applications while offline, much like the LocalServer feature in Gears.A point of distinction between the two features is that Application Cache doesn’t use a JSON file, using a flat file instead to specify which files to cache.A simple manifest file to cache assets is shown in Listing 1-4. Listing 1-4 Sample Application Manifest CACHE MANIFEST # above line is required, this line is a comment mygame/game.html mygame/images/image1.png mygame/assets/sound2.ogg The Application Cache has several events it can respond to: onchecking, error, cached, noupdate, progress, updateready, and obsolete.You can use these events to ptg6899256 6 Chapter 1 Introducing HTML5 keep your users informed about the application’s status. Using the Application Cache can make your game more tolerant to connectivity outages, and it can make your users happy by letting them start game play quicker (after the assets are cached).Also, if you choose, Application Cache can be used to allow users to play your game offline. Don’t worry too much about it right now. In Chapter 11,“Publishing Your Games,” we discuss using the Application Cache in more detail. Database API At present, there are multiple ways to store structured data using HTML5, including the WebSQL API implemented by Webkit browsers and the competing IndexedDB API spearheaded by Firefox. WebSQL API WebSQL provides structured data storage by implementing an SQL-like syntax. Currently, implementations have centralized around SQLite, but that isn’t a specific requirement. There isn’t a “createDatabase” function in WebSQL.The function openDatabase opti- mistically creates a database with the given parameters if one doesn’t already exist.To cre- ate a database name myDB, we would need to make a call in the form var db = openDatabase("myDB", "1.0", "myDB Database", 100000); where we pass "myDB" as the name, assign the version "1.0", specify a display name of "myDB Database", and give it an estimated size of 100KB.We could have optionally spec- ified a callback to be executed upon creation. Figure 1-2 shows the content of the Chrome Developer Tools Storage tab, which we will cover in more detail in Chapter 2, “Setting Up Your Development Environment,” after executing the preceding line of code. In the window to the right, we can run arbitrary SQL code, as shown in Figure 1-3, where we created a table, inserted some information, and ran a query. Figure 1-2 Storage tab showing a created database Figure 1-3 Storage tab showing SQL statements ptg6899256 7Web Storage Although not universally supported, the specification does call out the existence of both asynchronous and synchronous database connections and transactions. Our current example creates an asynchronous connection; to create a synchronous one, we would call openDatabaseSync with the same parameters.After the initial connection, there is no dis- tinction when it comes to database transactions besides calling transaction(...) for read/write transactions and readTransaction for read-only transactions. A word of caution: Synchronous connections are not well supported and, in general, you should structure your code to run asynchronously. IndexedDB API IndexedDB stores objects directly in object stores.This makes it easier to implement JavaScript versions of NoSQL databases, like those of the object databases MongoDB, CouchDB, and SimpleDB.At the time of this writing, the implementations of the APIs weren’t synchronized and used different naming schemes and strictness to the specifica- tion.The Internet Explorer implementation requires an ActiveX plugin. I encourage you to check out http://nparashuram.com/trialtool/index.html#example=/ttd/IndexedDB/ all.html to see some examples in action on Firefox, Chrome, and Internet Explorer.The Chrome code in most cases will work seamlessly on Safari. Web Storage Web Storage provides several APIs for saving data on the client in a fashion similar to browser cookies.There is a Storage object for data that needs to persist between restarts named localStorage and one for data that will be purged once the session ends named sessionStorage.The data is stored as key/value pairs.These two objects implement the functions listed in Table 1-1. Each Storage object also has a length property indicating the number of present key/value pairs. Table 1-1 Web Storage Functions Function Name Description setItem(key:String, value) Creates a key/value pair given the specified values. Some implementations require the value to be a string. getItem(key:String) Returns the item specified by the given key. removeItem(key:String) Removes the item identified by the given key. clear() Clears all key/value pairs from the Storage object. key(index:long) Returns the key for the specific index. ptg6899256 8 Chapter 1 Introducing HTML5 Web Storage offers a more fluent API we can use in lieu of the getItem and setItem functions listed in Table 1-1.The alternate API uses an array-like means of referencing a key.To set a localStorage key/value pair with the values of a hometown newspaper, we could use the following, for example: localStorage['newspaper'] = 'The Baltimore Sun'; Likewise, we could retrieve that value with just the left half of the preceding expression: localStorage['newspaper']; In the context of game programming, we could use Web Storage to store user high scores as well as data for saved games. Geolocation The Geolocation API doesn’t have an explicit function to ask for the user’s permission to track his or her position. Instead, the browser handles this transparently for us.When the Geolocation API first requests position information from a website for which it doesn’t have permission, a contextual pop-up appears to request permission from the user. We can check to see if the browser supports the Geolocation API by checking for the following object: navigator.geolocation If it resolves to a non-null value, we have the ability to geolocate. The calculated position of a user is defined by the Position object, which contains a Coordinates object named coords and a timestamp indicating when the fix was retrieved. Table 1-2 shows the properties of the coords object. Table 1-2 Coordinates Object Properties Property Name Return Value Description latitude double The latitude of the position fix. longitude double The longitude of the position fix. altitude double The altitude of the position fix in meters. If this is unavailable, the value will be null. accuracy double The margin of error of the lat-long fix in meters. If this is unavailable, the value will be null. altitudeAccuracy double The margin of error of the altitude value. If this is unavailable, the value will be null. heading double The direction in which the device is traveling in degrees (0° to 360°, inclusive). If this is unavailable, the value will be NaN. speed double The speed in meters that the device is traveling. If this is unavailable, the value will be null. ptg6899256 9Geolocation After we have verified that geolocation is available, obtaining a position fix on a device is simple.We just call getCurrentPosition with either one, two, or three parameters, corresponding to the functions to run if getting a fix is successful, if it fails, and the options on the request, respectively. Listing 1-5 shows the code needed to retrieve a location, draw it on a map with a marker, and draw a proximity circle around the marker. Listing 1-5 Drawing a Map with Geolocation if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(pos) { var latitude = pos.coords.latitude; var longitude = pos.coords.longitude; var options = { position:new google.maps.LatLng(latitude, longitude) ,title:"Your location"}; var marker = new google.maps.Marker(options); var circle = new google.maps.Circle({ map:map, radius:pos.coords.accuracy }); circle.bindTo('center', marker, 'position'); marker.setMap(map); map.setCenter( new google.maps.LatLng(latitude, longitude)); }, function(error) { console.log(error.message); }); } After verifying that geolocation is available, we first attempt to retrieve a fix on the position of the device. In this example, we are passing in the two parameter functions of getCurrentPosition to execute if successful, an error occurs, or if the user declines geolocation.After getting the latitude and longitude portions, we create a marker cen- tered at that position with the title “Your location.” To t h e m a r ke r, we attach a circle whose radius is equivalent to the accuracy of the position fix. Lastly, if there is an error, our error-handling function prints out the error message to the console. Figure 1-4 shows a sample position fix using the OpenStreetMap tile set. Although we did not use it, we could have also specified an options object that indi- cates several preferences on the retrieved data.We could also set up a listener to execute every time there is a position change returned from the watchPosition function. Geolo- cation is an expensive API. Use it judiciously and don’t be afraid to cache the location. ptg6899256 10 Chapter 1 Introducing HTML5 Figure 1-4 Geolocation from the browser We could use geolocation to create localized leader boards, or on a multiplayer server to match players who are physically close to one another. Getting Users’ Attention with Notifications In HTML4, the options to communicate messages to the user were limited.You could show the user an alert window or show a message in a div element. Showing an alert window is well supported on all browsers, but it is highly disruptive. It is something that requires immediate attention and doesn’t let you move on until you have handled it. One sure way to annoy a user is by making him lose a life because some message obscured his view. Showing a message in a div element fares slightly better, but there isn’t a standard way to add them.These types of messages can be easily ignored. On one side we have notifications that crave attention, and on the other we have notifications that can be easily ignored.There has to be a middle ground. Enter web notifications. On the Mac OS X and Ubuntu platforms natively, and with a plugin on Windows, an application can send configurable messages to users and notify them of events or changes it deems important.An example of such a notification is shown in Figure 1-5. Figure 1-5 Desktop notification message Like their desktop counterparts, web notifications can contain an image along with a contextual message. ptg6899256 11Getting Users’ Attention with Notifications Requesting Permission to Display Notifications Before we can display notifications to users, we first have to get their permission. Explicit permission protects the users from being bombarded with unwanted notifications.We can request permission to display notifications by executing the following: window.webkitNotifications.requestPermission(); This will show a contextual message in the browser to allow the user to approve or deny access, as shown in Figure 1-6. Instead of a no-argument function call, we can also pass a function to execute when the user responds to the prompt. We can likewise verify permission by running the following command: window.webkitNotifications.checkPermission(); In this case, checkPermission() returns an integer that indicates the permission level, as shown in Table 1-3. Looking at the name, you would expect notifications to work in at least the major Webkit browser s, namely Chrome and Apple Safari.Although Safari uses Webkit, it doesn’t implement the Notification API. If the spec is implemented globally, the name- space could presumably change from webkitNotifications to simply notifications. Creating Notifications You can create two types of notifications: simple and HTML. Simple notifications display a simple message with an optional title and icon image, whereas HTML notifications dis- play an arbitrary URL. For example, we can create a simple notification by executing the following: var msg = window.webkitNotifications.createNotification( '', 'Test Notification', 'Hello World' ); Figure 1-6 Web notification permissions message Table 1-3 Notification Permission Level Constant Name Value PERMISSION_ALLOWED 0 PERMISSION_UNKNOWN 1 PERMISSION_DENIED 2 ptg6899256 12 Chapter 1 Introducing HTML5 Our notification will have the title “Test Notification” with the message “Hello World.” Because we passed an empty string for the icon image, the API omits it.We can do this for any other parameter. Do this to hide parameters you don’t want displayed. Passing no value to the function will cause a text message of “undefined” or a broken image link. Figure 1-7 shows our notification running in the browser.As you can see, it is pretty Spartan, and we have no control over the design besides the parameters we passed it. As mentioned before, HTML notifications can get their content from an arbitrary URL such as a website or an image.The function just takes the desired URL to display in the form: var msg =window.webkitNotifications.createHTMLNotification( 'http://example.com' ); HTML notifications give you no means to resize them, and unless the URL has code to optimize the notification for small screens, scroll bars will probably be included. On a 1680×1050 screen, the default size seems to be approximately 300 pixels wide by 50 pix- els high, but because the notifications API is still a draft at the time of this writing, that is certainly subject to change. Until fine-grained height and width attributes are added, stick with simple notifications. Interacting with Notifications The resulting notification has two basic functions for controlling it: show(), which sur- faces the notification to the user,and cancel(), which hides the notification if it’s cur- rently visible or prevents it from being displayed if it is not visible.Web notifications can also execute functions in response to notification events.Table 1-4 shows a list of the applicable functions you can specify to respond to events. Figure 1-7 Simple web notification Table 1-4 Web Notification Functions Function Name Description onclick This function will execute if the notification is clicked and the underlying plat- form supports it. Avoid this event if at all possible. onclose This function will execute after the close event is fired. This could be when the user closes the notification or if it is closed programmatically. ptg6899256 13Media Elements You can check the current status of the draft specification at http://dev.chromium. org/developers/design-documents/desktop-notifications/api-specification. Media Elements When HTML was originally designed, it was concerned with mostly textual links. Native display of images would come much later. It is not hard to understand why you would need a plugin or browser extension to play audio or video. In most cases, this meant Flash. HTML5 has tried to address that issue with the inclusion of the audio and video tags. The audio and video tags allow us to play media in the browser natively.Also, a group of properties can be set to control playback. Here is the most basic HTML form for embedded media (in this case, an audio file): This creates an audio HTML element, assigns the source to song.mp3, and instructs the page to “autoplay” the content. It is equivalent to the following JavaScript code: var song = new Audio(); song.src = "song.mp3"; song.autoplay = true; song.load(); Controlling Media In addition to the autoplay attribute listed in the previous example, several other attri- butes can be used to control our media. For example, or var vid = new Video(); vid.src = "vid.avi"; vid.controls = true; tells the browser to provide a default set of controls for starting and pausing playback, set- ting the volume level, and seeking in the stream. In the absence of such a property, the Table 1-4 Web Notification Functions Function Name Description ondisplay This function will execute after the show() function is called and the notifica- tion is visible to the user. onerror This function executes after show() is called in the event of an error. ptg6899256 developer can provide a custom set of controls using the JavaScript functions and proper- ties listed in Tables 1-5 and 1-6. The list of properties has been truncated for brevity and usefulness.To see a full list of available properties, check out the HTML5 draft spec at http://dev.w3.org/html5/spec. Handling Unsupported Formats At the time of this writing, the audio and video elements in different browsers don’t nec- essarily all support the same types of audio and video.The reason a particular browser doesn’t support a particular format might be due to the age of the format, competition with an endorsed format, or patent restrictions that the browser’s parent company doesn’t want to deal with. Media tags have several methods to deal with this. Listing Multiple Sources Instead of specifying a single source, the developer can choose to list multiple sources to let the browser choose the appropriate one to use.The following snippet lists two sources Table 1-5 Media Tag Functions Function Name Description play() Starts playing the media from the current position and sets the paused prop- erty to false pause() Halts playing the media and sets the paused property to true load() Resets the element and applies any settings, such as pre-fetching Table 1-6 Media Element Properties Property Name Accepted Values Description currentTime integer Sets the position in the media stream for playback duration N/A (read-only) Indicates the length of the source media in seconds loop true or false Specifies whether or not to play the media from the beginning when the end of the stream is reached autoplay true or false Specifies whether or not to play the media as soon as possible muted true or false Specifies whether or not to set the volume at 0.0 14 Chapter 1 Introducing HTML5 ptg6899256 for a video tag and the fallback message if neither format is supported or the browser doesn’t support the video tag. Although listing multiple sources is an option for a static page, it’s not great for appli- cations with dynamic content. For those instances, using the tool Modernizr is recom- mended.We’ll discuss Modernizr in more detail in Chapter 2, but consider this a primer. Using Modernizr Modernizr (www.modernizr.com) inspects browser capabilities at runtime and injects the properties into a JavaScript object.To see whether the browser can play audio or video, we would check the value of Modernizr.audio or Modernizr.video to see if it evaluates to true. Checking support for a particular format is slightly different.Verifying support for MP3 files is done by checking the value of Modernizr.audio.mp3, but the value returned isn’t true or false.The HTML5 spec states that the browser should return its confidence level that it can play the format.The return value will be “probably,”“maybe,” or an empty string.When we use Modernizr.audio.mp3 in a conditional clause, any non- empty value is treated as true and the empty string is treated as false. CSS3 CSS3 doesn’t fit the scope of this book, and readers are encouraged to explore the specifi- cation if they are interested in it. Like HTML5, CSS3 extends its predecessor (CSS2) by adding new features and codifying previous proposals, such as web fonts and speech, which were introduced in previous versions but not widely supported. A useful website for further information is http://www.css3.info. HTML5 Drawing APIs An interesting area of the HTML5 spec is the new drawing APIs. Canvas, SVG, and WebGL provide bitmapped, vector, and three-dimensional drawing capabilities, respec- tively. Canvas The canvas element started its life as an Apple extension to Webkit, the layout engine powering Safari and Chrome, to display Dashboard gadgets and additions to the Safari browser. It was later adopted by Opera, Firefox, and related browsers, eventually becoming a component of the HTML5 specification.The beta release of Internet Explorer 9 (IE9) 15HTML5 Drawing APIs ptg6899256 16 Chapter 1 Introducing HTML5 has brought native support to all major browsers, although support in IE9 is not as com- plete as the aforementioned browsers. The canvas element can be most simply described as a drawable region with height and width attributes using JavaScript as the medium to draw and animate complex graph- ics such as graphs and images.A full set of 2D drawing functions is exposed by the JavaScript language. Given the close relationship between JavaScript and ActionScript, a Flash drawing or animation using ActionScript can be easily ported to JavaScript with only moderate effort. Canvas will be covered in more detail in Chapter 5,“Creating Games with the Canvas Tag.” SVG SVG (Scalable Vector Graphics) is a mature W3C specification for drawing static or ani- mated graphics.The ability to inline SVG without the use of an object or embed tag was added in HTML5.Vector graphics use groupings of mathematics formulas to draw primi- tives such as arcs, lines, paths, and rectangles to create graphics that contain the same qual- ity when rendered at any scale.This is a marked benefit over images whose discernible quality degrades when they are displayed at a scale larger than that for which they were designed. SVG takes a markedly different approach from the canvas element in that it represents drawings in XML files instead of purely in code. XML is not the more concise represen- tation of data, so a file may contain many repeated sections.This can be addressed by compressing the file, which can greatly reduce its size.As with the canvas element, inter- action can be scripted using JavaScript. Prior to IE9, IE supported an incompatible vector format called VML.As of IE9, all major desktop browsers support a fairly common feature set of SVG 1.1. Chapter 6,“Creating Games with SVG and RaphaëlJS,” puts SVG front and center. WebGL WebGL is a JavaScript API for 3D drawing that enables the developer to assess graphics hardware and control minute details of the rendering pipeline. It is managed by the Khronos group and shares much of its syntax with OpenGL 2.0 ES.At the time of this writing,WebGL is not supported in Internet Explorer 6+ or the stable branches of Opera and Safari. It is available in the stable builds of Firefox and Chrome/Chromium and in development builds of Opera and Safari. Chapter 7,“Creating Games with WebGL and Three.js,” dives into WebGL. Conveying Information with Microdata A web application or API parsing a page can interpret HTML marked up with microdata and respond to it. For instance, a search engine that returns results marked up with micro- data could be parsed by a browser extension or script to better present the data to a visu- ally impaired or colorblind user. Microformats are a preceding concept that serves the ptg6899256 17Summary same goal. One key difference between microformats and HTML5 microdata is the way that the data is denoted.As shown in Listing 1-6, microformats use the class property of an object to indicate the fields on an object. Listing 1-6 hCard Microformat Example Microdata uses the same concept with slightly different notation. Instead of marking properties using classes, the itemprop keyword is used.The keyword itemscope marks an individual unit.At its core, microdata is a set of name/value pairs composed into items. Listing 1-7 shows a microdata example.The itemtype property indicates a definition of the object and specifies valid properties.You could use microdata to encode the names and scores on a leader board page or instructions and screenshots from a game. Listing 1-7 Microdata Example 1600 Amphitheatre Parkway
Mountain View, CA 94043
USA
tags on a web page. Some of the more dangerous operators such as pointers are not present in GLSL, but it closely matches the feature set of C, the operators of C and C++, and can do pretty much anything you’d want to do, including flow control and creating/calling functions. GLSL also has some bundled graphics-processing-specific convenience functions. Listings 7-10 and 7-11 show the code for a GLSL program that colors all vertices with a white color. Listing 7-10 is where we assign the color using a vec4 to represent the desired red, green,blue, and alpha values. Listing 7-10 Sample Fragment Shader Listing 7-11 shows the code for a vertex shader.When we view vertices, although drawn in 3D space, they are projected into 2D space when they are shown on the screen. gl_Position locates the final position of the vertex onscreen by multiplying the projec- tion and model view matrices by the location of the vertex. Don’t worry about the extra 1.0.That is present because in matrix multiplication, the dimensions have to match. projectionMatrix, modelViewMatrix, and position are all injected by Three.js for us. If you are adapting a GLSL program from another platform, you might see those programs explicitly declare these variables. Listing 7-11 Sample Vertex Shader To use the shaders in our application, we need to create a shader material for the objects that will use it.After this is instantiated, we can use it like any other material. Listing 7-12 shows the code to create a MeshShaderMaterial using the bare minimum properties.The code uses a JQuery-like library to get the contents of the script tags. Listing 7-12 Creating a MeshShaderMaterial var shaderMaterial = new THREE.MeshShaderMaterial({ vertexShader: $('#vertexShader').get(0).innerHTML, fragmentShader: $('#fragmentShader').get(0).innerHTML }); Often, shaders will need to do some advanced calculations, or you might want to pass data from your host application to your GLSL program. Shader variables let you do just that.There are three basis types: ptg6899256 133Programming Shaders and Textures n Uniform—The value stays the same during a render of a frame and is available to both shaders. n Attribute—Read-only variables available to the vertex shader. n Var ying—Allows the vertex and fragment shaders to share data. In Listing 7-11, projectionMatrix and modelViewMatrix are uniforms and position is an attribute.When creating our own variables, it is important to note that GLSL pro- grams are not JavaScript and require explicit declaration of types.In addition to the prim- itive types available in C/C++, there are also some GLSL specific ones.Table 7-1 shows the possible vector types, whereas Tables 7-2 and 7-3 show the matrix and texture types, respectively. Table 7-1 GLSL Vector Types Type Description vec2, vec3, vec4 Floating-point vectors for 2D, 3D, and 4D ivec2, ivec3, ivec4 Integer vectors for 2D, 3D, and 4D bvec2, bvec3, bvec4 Boolean vectors for 2D, 3D, and 4D Table 7-2 GLSL Matrix Types Type Description mat2 2×2 matrix mat3 3×3 matrix mat4 4×4 matrix Table 7-3 GLSL Texture Types Type Description sampler1D, sampler2D, sampler3D 1D, 2D, and 3D textures samplerCube Texture for a cube map ptg6899256 134 Chapter 7 Creating Games with WebGL and Three.js Using Textures Te x t u r e s can range in shape and size, so we can’t always map a 1:1 relationship between the size of a texture and the face it will be applied to.To compensate for this, instead of mapping with the actual pixel sizes, we map the relationship between the texture and the face it will cover with texels.A texel, also known as a texture coordinate or texture pixel, is a pair of two values that range from 0.0 to 1.0 for the x- and y-axes.We assign a texel for each vertex in the object we are texturing.You can see an example of this in Figure 7-11. Instead of attempting to texture a complex object all at once like you would with a color, you can instead texture the individual faces of the object.This can optimize the texturing process and allow greater control over the look of the textured object.This process is called “UV mapping.” You can see a simplified form of this in Figure 7-12 as a cube map.A cube map consists of six textures, one for the top, bottom, and four sides of the cube. (0,0) (1,0) (0,1) (1,1) Figure 7-11 Texels Top Sides Bottom Figure 7-12 Cube map ptg6899256 135Using Textures If we supply one texture, it is repeated on all the sides of the cube. If a face in the object to be textured isn’t present, the texture data for that face is discarded. Cube map- ping allows us to use the same texture information for a cube, sphere, cylinder, or any other object. With UV mapping, a template is created by unwrapping the triangles and laying them all flat.The artist could then paint on each individual face. Once textured, the object has the desired “skin.”Take, for instance, the games of the Dead Rising franchise, which allow the protagonists to change their clothes at will.The game developer did this by layering multiple UV maps.There could be a map for the body and skin texture, then another for undergarments, and another for outer clothing. Listing 7-13 demonstrates how to apply a texture to a sphere.To avoid needing extra lights to illuminate the model, we use a white ambient color on the material.Three.js will do a lot of the heavy lifting for us, leaving us mostly free to hand it a texture using the map property, and it then constructs the cube map for us. Figure 7-13 shows the model produced by the code in Listing 7-13. Listing 7-13 Texturing a Sphere function drawScene() { var texture = THREE.ImageUtils.loadTexture( "200407-bluemarble.jpg" ); var material = new THREE.MeshPhongMaterial( { color: 0xFFFFFF, ambient: 0xFFFFFF, map:texture } ); sphere = new THREE.Mesh(new THREE.Sphere(32, 32, 32), material); scene.addObject(sphere); } In the case of Listing 7-13, which shows how to texture a sphere, the UV coordinates were created for us.The Three.js JSON format has support for UV coordinates, and all of the packaged exporter plugins can export them as well. ptg6899256 136 Chapter 7 Creating Games with WebGL and Three.js Creating a Game with Three.js Conway’s Game of Life is a cellular automaton simulation where individual cells (or, in our version, spheres) abide by certain rules to determine their transition between different states. Conway’s Game of Life is a great project because we don’t have to worry so much about game play, but it requires us to manage many objects in the scene at the same time. Here are the general rules: n A live cell with fewer than a certain number of live neighbors dies. n A live cell with more than a certain number of live neighbors dies. n A dead cell with a certain number of live neighbors comes alive. n A live cell with a certain number of neighbors lives on. Conway’s is strictly 2D, and cells are born with three neighbors, die with more than three, and live on with two or three neighbors. Because we are using 3D and possibly dif- ferent birth/death rules, we have to call the game “Life-like.” Unlike the original, where the simulation has a reasonably large space to “roam,” our simulation will be constrained to a customizable square grid with configurable birth/death rules.An added feature that is present in the Java3D application that inspired our app is different cell color based on the age of the cell.A screenshot of the running game is shown in Figure 7-14. The code runs one cycle of 100 alive/dead transitions for each cell. Figure 7-13 Textured sphere ptg6899256 137Simulating the Real World with Game Physics Figure 7-14 Life-like game screenshot Simulating the Real World with Game Physics In Chapter 4,“How Games Work,” we discussed some very basic ways to do collision detection and create particle systems. In that chapter, we used informal bounding boxes to determine whether a collision had occurred, which resulted in a very constrained response.We also dabbled a bit with particle systems. In this chapter, we apply physics properties to the particles in a more formal way. When we think of what makes humanoid-based games look realistic, we are seeking physics engines at work—or more specifically, rigid body dynamics.One way to think of this is to consider rigid bodies to be like bones in the human body.The bones themselves don’t bend but can be articulated at the joints and have a maximum of six degrees of freedom (translation and rotation in x, y, or z).We can also add constraints to restrict the motion so that our models aren’t dislocating joints when they move.These constraints could be as simple as making the object immovable, like a wall or the ground, or by using joints. Joints allow us to connect and constrain rigid bodies.The two types of joints that most physics systems support are hinge and ball-and-socket. Hinge joints restrict motion to one axis. Examples in the human body are knees and fingers. Ball-and-socket joints, on the other hand, allow a freer range of motion on possibly all six degrees of freedom.Your shoulders and hip joints are good examples of ball-and-socket joints. ptg6899256 138 Chapter 7 Creating Games with WebGL and Three.js Rigid bodies also have physical properties such as mass, inertia, velocity, and so on. Whereas your bones only account for 30% to 40% of your body’s mass, rigid bodies con- tain 100% of the simulated object’s mass. Rigid bodies don’t have to just be bone-like structures, they can be immovable objects such as walls and the ground or things encom- passing one or many moving bodies. Physics engines use a combination of primitive shapes to detect collisions, such as spheres, boxes, capsules, and free-form meshes.You are free to use as many as you want; for instance, you could detect a general collision with the right hand with one collision primitive and then drill down to the exact finger that was affected.After the primitives are all defined, the physics engine starts and slowly steps through time to check for colli- sions and changes to the transformation matrices of the objects and rigid bodies.These changes are reported to the render functions and combined with player input.There is another major type of dynamics called soft-body dynamics.Any type of cloth as well as fur, hair, and feathers would use soft-body dynamics.We won’t be covering this in any detail as it is an advanced topic. However, it warrants mentioning. The physics engine we’ll be using for our demos is JigLibJS. It is a port of the Java variant of the popular JigLib library. JigLib is available at www.jiglibjs.org/.Although the original library is written in C++, in addition to JavaScript, JigLib has been ported to C# and Actionscript. Listing 7-14 shows the initial setup of our physics world.We begin by retrieving an instance of the PhysicsSystem and setting the gravity for the world and the type of solver to use. In this case, we used FAST, but the other options are NORMAL and ACCUMULATED.You give up a little accuracy for choosing FAST, over NORMAL and ACCUMULATED, but usually there isn’t a noticeable difference. Listing 7-14 Setting Up JigLibJS function initJigLib() { system = jigLib.PhysicsSystem.getInstance(); system.setSolverType("FAST"); system.setGravity( jigLib.Vector3DUtil.create(0, -9.8, 0, 0) ); } After we create the physics system, we need to create a mesh for the ground and a corresponding physics rigid body to represent the ground.The properties we need to set on the rigid body, for the most part, match what we set on the mesh, with the exception of the additional call set_moveable(false) to make the ground unaffected by external forces.This code is shown in Listing 7-15. Listing 7-15 Drawing the Ground // create the ground var plane = new THREE.Mesh( new THREE.Plane(75,75,10,10), new THREE.MeshLambertMaterial({ color:0x222222 ptg6899256 139Simulating the Real World with Game Physics }) ); plane.translateY(-10); plane.rotation.x = -70; scene.addObject(plane); var ground = new jigLib.JPlane(); ground.set_y(-10); ground.set_rotationX(-70); ground.set_movable(false); system.addBody(ground); plane.rigidBody = ground; Next, we need to draw our sphere and assign a rigid body to it.The code to create a Three.js sphere is pretty straightforward, so I’ve excluded it in Listing 7-16. If you need a refresher, check out the sources.We begin with instantiating the JSphere, passing it a null for the skin and a value for the radius.After setting the mass on the object, we can orient it in 3D space using the moveTo function and the Vector3DUtil class.We could have set the point to move to using the individual set_x, set_y, and set_z functions, as we did with the ground or by just passing in an array of values as shown in the commented line. One reason why you might want to construct a Vector3D is if you plan to somehow transform it after you create it. Listing 7-16 Drawing a Sphere Rigid Body // create rigid body var body = new jigLib.JSphere(null, 8); body.set_mass(8); body.moveTo(jigLib.Vector3DUtil.create(sphere.position.x, sphere.position.y, sphere.position.z, 0)); //body.moveTo([sphere.position.x, sphere.position.y, sphere.position.z, 0]); system.addBody(body); sphere.rigidBody = body; Lastly, we need some code to update our objects.The updateDynamicsWorld func- tion in Listing 7-17 begins with a calculation to find the elapsed time since the previous run.The system takes the elapsed time to figure out how to apply the forces to the sys- tem.We next iterate over all the objects, checking to see if they have rigid bodies attached. If so, we alter the transformations of the meshes to match. In Listing 7-17, we are dealing only with the translation and rotation, but the listed orientation variable is how we would access the full transformation matrix. ptg6899256 140 Chapter 7 Creating Games with WebGL and Three.js Listing 7-17 Updating the World function updateDynamicsWorld() { // find elapsed time from last update var t1 = new Date().getTime() var elapsedTime = t1 - t0; t0 = t1; system.integrate(elapsedTime/1000); for (var i = 0; i MyFirstPage Application