2. Setting Up Your Development Environment

One of the great things about HTML5 is that having a computer with a reliable Internet connection is the main barrier to starting development. All the other tools you will need can be obtained freely on the Internet. Some specialized applications require a license, but we will focus on their free counterparts.

In this chapter, you will install the tools needed to make applications for HTML5 games. We will also examine some of these tools in detail.

Development Tools

Some developers swear by a bare-bones command-line editor, such as emacs, vim, and (one of my personal favorites) Redcar. However, for medium to large projects, as the number of files increases, using an Integrated Development Environment (IDE) brings numerous advantages, including easier file management and renaming, code-hinting and syntax checking, and automated builds. Because of its great extensibility and because we will be using it for our Java-specific examples, we will be installing the Eclipse IDE and the Java platform upon which it runs. Although installing Java and Eclipse is optional for the basic examples, our examples involving the Google Web Toolkit (GWT) will require Java to be installed. Feel free to substitute your own preferred tool chain.

Installing Java

As mentioned before, Eclipse and GWT run on Java. They require Java 5 SDK or higher. Generally, most people will have a fairly recent version of Java on their machines. You can find out if you have the proper Java SDK installed by running the following at a command prompt:

$ javac -version

If that command fails, you don’t have the Java SDK installed. However, if you get a response similar to the following snippet, with a number of 1.5 or higher, you are good to go:

javac 1.6.0_17

For the Mac platform, the Java SDK comes preinstalled on versions prior to OS X 10.7 (codenamed Lion). Computers using OS X version 10.5 (codenamed Leopard) already have Java 1.5, and those with version 10.6 (codenamed Snow Leopard) have Java 1.6.

Windows users can download an executable of the Java SDK from http://java.sun.com/javase/downloads/index.jsp, making sure to select a download that includes the “JDK.” Once the file is downloaded, executing it will install Java.

Java installation on Linux is a bit trickier. Although installation differs slightly from distribution to distribution, Java 6–compatible binaries are available in the package managers of all major distributions. Failing that, you can install Java using the downloads on Sun/Oracle’s website.

Installing the Eclipse IDE and Google Plugin

Eclipse is a multipurpose IDE primarily used by Java developers. Eclipse is modular in design and has a plugin architecture that exposes new features to the IDE. Due to this plugin architecture, there is support for other programming languages, including C++, Python, Ruby, and PHP. It also forms the basis for many specialized IDEs, some of which we will explore later in this chapter.

The installation of the Eclipse IDE is rather straightforward on all platforms. Figure 2-1 shows the Eclipse loading screen. Instead of an installer application, the Eclipse foundation (the makers of Eclipse) ships a self-contained archive file. You download the archive and extract it somewhere on your machine, and you are ready to go. You can download the latest version of Eclipse at http://www.eclipse.org/downloads/. Make sure you grab the package “Eclipse IDE for Java Developers.”

Figure 2-1. Eclipse loading screen

After you have Eclipse installed, double-click the executable file (possibly eclipse.exe or simply eclipse) to open it. If you have come back to this section from one of the later chapters dealing with the App Engine, you might want to change the perspective to the Java Perspective by selecting Window | Open Perspective | Java. To get App Engine integration in Eclipse, you have to install several packages. Here are the steps to follow:

1. Select Help | Install New Software. There might be an option titled “Software Updates” instead.

2. Click the Add button to add a new software site. You can alternatively install the package from your hard drive, but adding a site allows Eclipse to routinely check for software updates.

3. You can name the site anything you want because it is just an identifier for housekeeping purposes. I titled it “Google App Engine Plugin” in Figure 2-2. Add one of the following URLs to the Location text box and click OK (check code.google.com for versions higher than 3.5):

• For Eclipse 3.5 (Galileo): http://dl.google.com/eclipse/plugin/3.5

• For Eclipse 3.4 (Ganymede): http://dl.google.com/eclipse/plugin/3.4

• For Eclipse 3.3 (Europa): http://dl.google.com/eclipse/plugin/3.3

4. Check the boxes next to “Google Plugin for Eclipse” and “Google Web Toolkit,” as shown in Figure 2-3, and then click Next. You can install support for Google Web Toolkit at this time as well. Your versions might be higher.

5. Confirm that the two plugins appear in the list under Install Details and then click Next.

6. Review the licenses and indicate that you agree to the terms by clicking the appropriate radio button. The Google Plugin has several Eclipse dependencies, so don’t be alarmed if you see several other plugins listed. After you have downloaded the required packages, Eclipse will prompt you to restart it. When it returns, you’ll be all set.

Figure 2-2. Eclipse Add Site dialog panel

Figure 2-3. Eclipse Available Software dialog panel

Google Web Toolkit

The Google Web Toolkit (GWT) is a set of libraries that allows developers to write rich Internet applications in the Java programming language and have them converted into cross-platform Asynchronous JavaScript and XML (AJAX) applications without worrying about the individual quirks or incompatibilities of the target browsers. This allows developers to write an application from front to back in the same language.

If Java isn’t your cup of tea, open-source ports of GWT are available for Python and Ruby called Pyjamas and RubyJS, respectively. The ports tend to lag quite a bit behind the most recent version of GWT, so we won’t be using them directly in any examples. However, much of the core GWT code will have similar Pyjamas code. You can find more information about Pyjamas and RubyJS at http://code.google.com/p/pyjamas and http://rubyforge.org/projects/rubyjs/, respectively.

GWT requires at least Java 1.5 to be installed on the target machine. You can install GWT by downloading it from http://code.google.com/webtoolkit/download.html and extracting it somewhere on your machine. The Google Plugin for Eclipse supports GWT, so revisit the previous section to see the instructions for installing the plugin.

Chapter 8, “Creating Games Without JavaScript,” will cover using GWT with Canvas, WebGL, and SVG in more detail.

Web Server Tools and Options

Unless you plan to keep your game all to yourself or to package it as a mobile application, chances are that you will need a web server of some shape or form. In this section, we will discuss some of the options for deploying your game.

Google App Engine

Google App Engine is a hosting environment for Java and Python that permits you to host your application on Google’s infrastructure. In theory, your application can scale almost infinitely. To operate in this way, there are some trade-offs, such as the use of an untraditional data store, limited access to the file system, and special APIs for authentication, mail, and fetching. One of the other benefits of the App Engine is that you can write applications using Rhino, the Java platform implementation of JavaScript, so that you can run JavaScript from back to front. Using App Engine also gives you a little extra value from installing Eclipse. The Google plugin lets you deploy to App Engine with just a couple button clicks.

You can install Google App Engine or read about the plugin for Eclipse at http://code.google.com/appengine/.

Opera Unite

The Opera browser, since version 10.0, has packaged an embedded web service called Opera Unite. Unite has built-in applications for streaming files and sharing photos, chatting, and hosting a site. To host a website, you would normally have to register a domain, find a web host, and upload your files. Unite lets you do this all with the click of a button. When you start the Unite service, it registers your computer with a proxy server run by Opera. Thus, visitors to

http://your_device.your_username.operaunite.com/

(where your_device is the name of your computer)
get routed correctly. The proxy server allows you to set up a service without having to punch a hole through your router. Unite’s web server runs using server-side JavaScript and allows file system access. You can even package and publish your game so that others can install it without needing to connect to your Unite instance.

Unite is great for putting something out there to share with friends or testers, but it requires the browser to be running, so it isn’t a great option for anything that needs 24/7 uptime. We will discuss packaging applications for distribution in Chapter 11, “Publishing Your Games.”

Node.js and RingoJS

RingoJS is a web framework that runs on Rhino and implements specifications and proposals from the CommonJS API. Given that JavaScript evolved into being without a discrete spec, CommonJS seeks to set standards for things that may have been originally outside the scope of a JavaScript application—such as access to the local file system.

Node.js and RingoJS both implement parts of CommonJS, with RingoJS being a bit more API-compliant. One major point of divergence is that Node.js runs on Google’s V8-engine, which powers JavaScript support in Google Chrome and is implemented in C++.

We will discuss server-side JavaScript, specifically Node.js, in more detail in Chapter 9, “Building a Multiplayer Game Server.”

Browser Tools

An important piece in developing HTML5 applications is a browser that implements most of the spec and has decent debugging tools. Google Chrome, Mozilla Firefox (and its derivatives), Apple Safari, and Opera have outstanding HTML5 compliance and debugging tools. Internet Explorer 9, which was released in March 2011, is much more HTML5 standards-compliant than its predecessor, but it lags in terms of support compared to the aforementioned browsers.

Inside the Chrome Developer Tools

Using Chrome’s debugger tools, we can dynamically inspect the page’s DOM, view resource loading times, and run arbitrary JavaScript. We can view the Developer Tools console for any page by selecting View | Developer | Developer Tools. Figure 2-4 shows the console window for Google.com. With the Elements tab selected, we have a nested view of the DOM with associated styles for the document elements. Hovering over an element tag will highlight it in the browser window. This is really useful when trying to figure out which element is the one that is off by several pixels.

Figure 2-4. Chrome Developer Tools Elements tab

The other two tabs in the Developer Tools console that are incredibly useful to game developers are the Resources and JavaScript Console tabs. The Resources tab, shown in Figure 2-5, allows you to track on an asset-by-asset basis what exactly is slowing your gadget from showing in Waves quickly. The first time you run it on a new site, you can decide to activate it just for this session or forever. Resource tracking does a bit of overhead to page loading times, so it is best to use it sparingly.

Figure 2-5. Chrome Developer Tools Resources tab

The last tab I’ll highlight in this section is the JavaScript Console tab, as shown in Figure 2-6. For those of us who aren’t exactly JavaScript gurus, it’s a godsend because it, along with the console.log() command, frees us from the most dreaded acts in programming: println (or in this case, alert) debugging. You can also use it to inspect the DOM programmatically or run arbitrary JavaScript.

Figure 2-6. Chrome Developer Tools Console tab

Chrome Extensions

Similar to the Eclipse IDE, the functionality of Google Chrome can be enhanced and extended with extensions. Extensions range in purpose from RSS readers and site-specific enhancements or notifiers to games. A full list can be found at https://chrome.google.com/extensions. Let’s take a moment to call out a couple that will make our lives a little bit easier in creating gadgets.

We can install these extensions in Chrome by clicking the Install button from the Chrome Extensions page, as shown in Figure 2-7, and following the prompts. Two useful plugins for developers are JSONView and YSlow. JSONView allows you to view JSON data formatted to increase readability. YSlow analyzes web pages and gives tips on how to improve performance.

Figure 2-7. Installing a Chrome extension

Safari Developer Tools

The Developer tools in Apple’s Safari are quite similar to their counterparts in Google Chrome. By default, they are hidden to the end user.

To enable them, select Preferences in your title or icon bar and navigate to the Advanced tab. As shown in Figure 2-8, make sure that “Show Develop menu in menu bar” is checked. Visit the previous section on the Chrome Developer tools for an overview of what is present.

Figure 2-8. Enabling the Developer menu

Firebug

Firebug is an extension for Mozilla Firefox that allows developers to debug a website’s HTML, CSS, and JavaScript. Although originally designed for Firefox, Firebug also has a “Lite” version that will run in Google Chrome and complements the tools already present in that browser.

You might have noticed that the core components and tabs of Firebug look very similar to those of Chrome and Safari. As in Chrome, there are add-ons for Firefox and Firebug to expose more developer capabilities (such as DOM manipulation and introspection) for several programming languages (such as PHP and Python). You can find instructions on installing Firebug or Firebug Lite by visiting http://getfirebug.com.

HTML5 Tools

In this section, we will discuss some tools that allow us to easily create assets for our games. In the case of Raphaël and ProcessingJS, these are lightweight graphics libraries.

ProcessingJS

ProcessingJS is a JavaScript library that can act as an abstraction layer over the canvas tag to draw primitives, respond to user interaction, and draw and manipulate images. ProcessingJS was created in the summer of 2008 by John Resig, the creator of the popular JavaScript library jQuery, who ported it from of the similarly named Processing Java Library. As a result, the functions and API calls are syntactically identical to the Java version. Likewise, many of the Java samples can be ported with no code changes. It must, however, be noted that ProcessingJS doesn’t implement the full Java API. This doesn’t matter that much for our purposes because most of those features would be things we would rather do with WebGL.

You can view some examples and the API reference at http://processingjs.org.

Inkscape

Inkscape is a mature cross-platform vector graphics editor using SVG. It is comparable to the commercial applications Adobe Illustrator and CorelDRAW. Although the most recent release is only 0.48, there has been a vibrant community dating back to its inception in 2003. The version number is more of an indication of how much of the SVG 1.1 spec the application implements. Although it doesn’t support the complete SVG spec, and some might argue that no application does, the Inkscape community has made up for this with plugins that enhance the platform.

You can download the application at http://inkscape.org.

SVG-edit

SVG-edit is a web-based, JavaScript-powered, SVG creation tool. SVG-edit is great for simplified drawings that will have a limited amount of effects applied to them. The interface, as shown in Figure 2-9, has controls for creating text and simple primitives as well as embedding images.

If you have to create, say, a checkerboard in a pinch, SVG-edit would be great for that. It doesn’t include file management and is only able to display the raw SVG code for you to copy and paste into a text editor, as shown in Figure 2-10.

You can download the source or try it online at http://code.google.com/p/svg-edit/.

Figure 2-9. SVG-edit interface

Figure 2-10. SVG-edit code view

Raphaël

In the two previous sections, we discussed lightweight and advanced tools for creating SVG files using a user interface. Those are appropriate for games where all the assets are pre-fabricated—for a chess game, for example. For SVG games where assets would need to be created dynamically or for those developers who prefer to use code to create SVG graphics, there is Raphaël. Raphaël is a JavaScript library that provides primitive shape, font, and animation support and is evaluated to embedded SVG at runtime. There is also a compatibility layer that renders using Vector Markup Language (VML) if the browser implements VML in lieu of SVG (namely, IE browsers prior to IE9). Raphaël can be downloaded at http://raphaeljs.com/.

We will take advantage of these tools in Chapter 6, “Creating Games with SVG and RaphaëlJS.”

3D Modeling Tools

In Chapter 7, “Creating Games with WebGL and Three.js,” we will discuss creating games using WebGL. We need tools to create assets for those games. In the games industry, that usually means applications such as 3D Studio Max and Maya. With prices ranging from just south of a thousand dollars to more than several thousand dollars, these applications can be cost prohibitive for the hobbyist game programmer. As is the case with commercial vector graphics applications, very capable open-source applications are available to fill this need for the hobbyist or professional.

Blender

Blender, shown in Figure 2-11, is a cross-platform open-source 3D modeling, rendering, and animation application. Among its features are cloth, skeletal, and rigid body simulation, texturing, particle dynamics, and compositing. Blender can import and export to many different graphics file formats. It also has a Python API that can be used to extend the application. Blender has been used in pre- and post-production on several television commercials, television shows, and feature films.

You can find out more information about Blender and download it at http://blender.org.

Figure 2-11. Blender interface

Summary

In this chapter, we identified some of the tool and frameworks that will best serve our needs in creating HTML5 games. We installed the Java SDK and the Eclipse IDE and also discussed the SVG and 3D modeling tools and libraries we will use throughout the book to create assets for our games.

You can download chapter code at www.informit.com/title/9780321767363.