Discovering new features in HTML5

There are many new things introduced in HTML5 and CSS3. Before getting our hands dirty by creating the games, let's take an overview of the new features and see how we can use them to create games.

Canvas

Canvas is an HTML5 element that provides drawing shapes and bitmap manipulation functions in low levels. We can imagine the Canvas element as a dynamic image tag. The traditional <img> tag shows a static image. This image is usually static after it's loaded. We can change the <img> tag to another image source or apply styles to the image, but we cannot modify the image's bitmap context itself.

On the other hand, Canvas is like a client-side dynamic <img> tag. We can load images inside it, draw shapes there, and interact with it using JavaScript.

Canvas plays an important role in HTML5 game development. It is one of our main focus areas in this book.

Audio

Background music and sound effects are essential elements in game design. HTML5 comes with native audio support from the audio tag. Thanks to this feature, we do not require the proprietary Flash Player to play sound effects in our HTML5 games. However, there have been some restrictions on using Web Audio on the Web. We will discuss the usage of the audio tag in Chapter 6, Adding Sound Effects to Your Games.

Touch Events

Besides the traditional keyboard and mouse events, there are touch events that we can use to handle single and multi-touch events. We can design a game that works on mobile devices with touches. We can also handle gestures by observing the touch patterns.

GeoLocation

GeoLocation lets the web page retrieve the latitude and longitude of the user's computer. For example, Google's Ingress game makes use of GeoLocation to let players play the game in their real city. This feature may not have been so useful years ago when everyone was using the Internet with their desktop. There are not many things for which we need the accurate location of the road of the user. We can get the rough location by analyzing the IP address.

These days, more and more users are going on the Internet with their powerful smartphones. Webkit and other modern mobile browsers are in everyone's pocket. GeoLocation lets us design mobile applications and games to play with the inputs of a location.

WebGL

WebGL extends the Canvas element by providing a set of 3D graphics APIs in the web browser. The APIs follow the standard of OpenGL ES 2.0. WebGL provides a powerful GPG-accelerated, 3D rendering API for HTML5 games. Some 3D game engines support the export of WebGL, including the popular Unity engine. We can expect to see more HTML5 3D games waiting to be released using WebGL.

The techniques used to create games with WebGL are quite different than using Canvas. Creating games in WebGL requires handing the 3D models and using an API similar to OpenGL. Therefore, we will not discuss WebGL game development in this book.

WebGL has a better performance than 2D Canvas because of the GPU-rendering support. Some libraries allow a game to use Canvas 2D drawing API, and the tools render the canvas by drawing on WebGL to gain performance. Pixi.js (http://www.pixijs.com), EaselJS (http://blog.createjs.com/webgl-support-easeljs/) and WebGL-2D (https://github.com/corbanbrook/webgl-2d) are several such tools among them.

WebSocket

WebSocket is part of the HTML5 spec to connect the web page to a socket server. It provides us with a persistent connection between the browser and server. This means that the client does not need to poll the server for new data within short periods. The server will push updates to the browsers whenever there is any data to update. One benefit of this feature is that game players can interact with each other in almost real time. When one player does something and sends data to the server, we can send the inpidual player the update to create one-on-one real-time page play, or we can iterate all the connections in the server to send an event to every other connected browser to acknowledge what the player just did. This creates the possibility of building multiplayer HTML5 games.

Local storage

HTML5 provides a persistent data storage solution to web browsers.

Local Storage stores key-value pair data persistently. The data is still there after the browser terminates. Moreover, the data is not limited to be accessible only to the browsers that created it. It is available to all browser instances with the same domain. Thanks to Local Storage, we can easily save a game's status, such as progress and earned achievements, locally in web browsers.

Another database on web browser is IndexedDB. It's key-value pair too, but it allows storing objects and querying data with condition.

Offline applications

Normally, we need an Internet connection to browse web pages. Sometimes, we can browse cached offline web pages. These cached offline web pages usually expire quickly. With the next offline application introduced by HTML5, we can declare our cache manifest. This is a list of files that will be stored for later access when there is no Internet connection.

With the cache manifest, we can store all the game graphics, game control JavaScript files, CSS stylesheets, and the HTML files locally. We can also pack our HTML5 games as offline games on the desktop or mobile devices. Players can play the games even in the airplane mode. The following screenshot from the Pie Guy game (http://mrgan.com/pieguy) shows an HTML5 game being played on an iPhone without an Internet connection; note the little airplane symbol indicating the offline status: