What do you get with Print?

Instant access to your digital eBook copy whilst your Print order is Shipped

Paperback book shipped to your preferred address

Download this book in EPUB and PDF formats

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

HTML5 Game Development by Example(Second Edition)

Chapter 1. Introducing HTML5 Games

Hypertext Markup Language, HTML, has been shaping the Internet in the last few decades. It defines how content is structured in the Web and the linkage between related pages. HTML has kept evolving from version 2 to HTML 4, and later to XHTML 1.1. Thanks to the web applications and social networking applications, it the era of HTML5 now.

Cascading Style Sheet (CSS) defines how web pages are presented visually. It styles all HTML elements and the styles of their states, such as hover and active.

JavaScript is the logic controller of a web page. It makes the web page dynamic and provides client-side interaction between the page and users. It accesses the HTML through Document Object Model (DOM). It controls the new HTML features via their APIs.

There are modern web browsers in most desktop and mobile devices. These latest web techniques bring us the new game market—the HTML5 games. With the new power from these techniques, we can design games with HTML5 elements, CSS3 properties, and JavaScript to play in most browsers and mobile devices.

In this chapter, we will cover the following topics:

Discovering new features in HTML5
Discussing what makes us so excited around HTML5 and CSS3
Previewing what games we are going to build in later chapters
Preparing the development environment

So, let's get started.

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 individual 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:

Discovering new features in CSS3

CSS is the presentation layer and HTML is the content layer. It defines how the HTML looks. We cannot miss CSS when we create games with HTML5, especially DOM-based games. We may purely use JavaScript to create and style the games with a Canvas element. However, we need CSS when we create DOM-based HTML5 games. Therefore, let's take a look at what is new in CSS3 and how we can use the new properties to create games.

Instead of directly drawing and interacting on Canvas' drawing board, new CSS3 properties let us animate the DOM in different ways. This makes it possible to make more complicated DOM-based browser games.

CSS3 transition

Traditionally, the style changes immediately when we apply a new style to an element. CSS3 transition renders in-between styles during the style changes of the target elements over duration. For example, here, we have a blue box and want to change it to dark blue when we do a mouseover. We can do this by using the following code snippets:

HTML:

<a href="#" class="box"></a>

CSS:

a.box {
  display: block;
  width: 100px;
  height: 100px;
  background: blue;
}
a.box:hover {
  background: darkblue;
}

The box changes to dark blue immediately when we do a mouseover. With CSS3 transition applied, we can tween the styles for a specific duration and easing value:

a.box {
  transition: all 0.5s ease-out;
}

Tip

Downloading the example code

For all the Packt Publishing books you have purchased, you can download the example code files from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

In the past, we needed JavaScript to calculate and render the in-between styles; this is much slower than using CSS3 transition because the browser natively makes the effects happen.

Note

Since some CSS3 specifications are still in the draft stage and not yet fixed, implementation from different browser vendors may have some minor differences to the W3C spec. Therefore, browser vendors tend to implement their CSS3 properties with a vendor prefix to prevent conflict.

Safari uses the -webkit- prefix. Opera uses the -o- prefix. Firefox uses the -moz- prefix and IE uses the -ms- prefix. Chrome used to use -webkit-, but now it doesn't use any prefix after switching its engine to Blink. It is a little complex now to declare a CSS3 property, such as flex, with several lines of the same rule for several browsers. We can expect the prefix to be dropped after the property spec is fixed.

In order to make the code cleaner in this book, I will use non-vendor prefix for all the properties in this book. I recommend you to use JavaScript-based libraries to automatically add the required vendor prefix for different web browsers. The prefix-free library (http://leaverou.github.io/prefixfree/) is one of them.

Alternatively, if you are using preprocessors, the compilation process may also add the necessary vendor prefix for you.

CSS3 transform

CSS3 transform lets us scale the elements, rotate them, and translate their position. CSS3 transform is divided into 2D and 3D. By combining the transform origin and 3D rotation and translation, we can animate 2D graphics in a 3D space.

CSS3 animation

CSS3 transition is one type of animation. It declares the tweening animation between two styles of the elements.

CSS3 animation is one step further in animation. We can define key frames of an animation. Each key frame contains a set of properties that should change at any particular moment. It is like a set of CSS3 transitions that are applied in sequence to the target element.

The AT-AT Walker (http://anthonycalzadilla.com/css3-ATAT/index-bones.html) shows a nice demo on creating a skeleton bone animation with CSS3 animation key frames, transform, and transition. This is shown in the following diagram:

The benefit of creating HTML5 games

We have explored several new key features from HTML5 and CSS3. With these features, we can create HTML5 games on browsers. But why do we need to do that? What is the benefit of creating HTML5 games?

Free and open standards

The web standards are open and free for use. In contrast, third-party tools are usually proprietary and they cost money. With proprietary technologies, the support from them may drop because of changes to the company's focus. The standardization and openness of HTML5 ensures that we will have browsers that support it.

Support for multiple platforms

With the built-in support of all the HTML5 features in modern browsers, we do not require the users to preinstall any third-party plugin in order to play any file. These plugins are not standard. They usually require an extra plugin installation that you may not be able to install. For instance, millions of Apple iOS devices around the world do not support third-party plugins, such as Flash Player, in their mobile Safari. Despite whatever the reason might be, Apple does not allow Flash Player to run on their Mobile Safaris, instead, HTML5 and the related web standard are what they get in their browsers. We can reach this user base by creating HTML5 games that are optimized for mobiles.

Native app-rendering performance in particular scenarios

When we code the game in a Canvas, there are some rendering engines that can translate our Canvas drawing code into OpenGL, thus rendering in native mobile device. This means that while we are still coding the game for a web browser, our game can gain benefits in mobile devices by the native app OpenGL rendering. Ejecta (http://impactjs.com/ejecta) and CocoonJS (http://ludei.com/cocoonjs) are two such engines.

Breaking the boundary of usual browser games

In traditional game designing, we build games within a boundary box. We play video games on a television. We play Flash games in web browsers with a rectangle boundary.

Using creativity, we are not bound in a rectangle game stage any more. We can have fun with all the page elements.

Twitch (http://reas.com/twitch/) is a game from Chrome Experiments. It is a collection of mini games where the player has to carry the ball from the starting point to the end point. The fun part is that each mini game is a small browser window. When the ball reaches the destination point of that mini game, it is transferred into the newly created mini game browser to continue the journey. The following screenshot shows the whole map of Twitch with the individual web browsers:

Breaking the boundary of usual browser games

Building HTML5 games

Thanks to the new features of HTML5 and CSS3, we can now create an entire game in the browser. We can control every element in the DOM. We can animate each document object with CSS3. We have Canvas to dynamically draw things and interact with them. We have an audio element to handle the background music and sound effects. We also have Local Storage to save game data, and WebSocket to create a real-time multiplayer game. Most modern browsers are already supporting these features. It is now time to build HTML5 games.

What others are playing with HTML5

This is a good opportunity to study how different HTML5 games perform by watching other HTML5 games that are made with different techniques.

Coca-Cola's Ahh campaign

Coca-Cola had run a campaign known as Ahh (http://ahh.com) with lots of interactive mini games. The interactions combined several techniques that included canvas and device rotation. Most of them work well in both desktop and mobile devices.

Asteroid-styled bookmarklet

Erik, a web designer from Sweden, created an interesting bookmarklet. This is an asteroid-styled game for any web page. Yes, any web page! It shows an abnormal way to interact with any web page. It creates a plane on the website you are reading from. You can then fly the plane using arrow keys and fire bullets using the space bar. The fun part is that the bullets will destroy the HTML elements on the page. Your goal is to destroy all the things on the web page that you choose. This bookmarklet is another example of breaking the boundary of usual browser games. It tells us that we can think outside the box while designing HTML5 games.

The following screenshot shows the plane destroying the contents on the web page:

The bookmarklet is available for installation at http://kickassapp.com. You can even design the space ship that you control.

X-Type

The creator of a Canvas-based game engine named Impact, created this X-Type (http://phoboslab.org/xtype/) shooting game for different platforms, including web browsers, iOS, and Wii U. The following screenshot shows the game running smoothly in iPhone.

Cursors.io

Cursors.io (http://cursors.io) demonstrates a nicely designed real-time multiplayer game. Every user controls an anonymous mouse cursor and takes a journey through the levels of the game by moving the cursor to the green exit. The fun part of the game is that players must help the others to advance to the level. There are toggles that some cursors click on them to unlock the doors. The anonymous players must take up the role to help the others. Someone will take your role so that you can advance to the next level. The more players that help you, the higher your chance is to succeed in the game. In case only a few players are playing and you can't experience the game, I have recorded my playing screen in 12 x speed (at http://vimeo.com/109414542) to let you have a glimpse of how this multiplayer game works. This has been captured in the following screenshot:

Note

We will discuss building a multiplayer game in Chapter 8, Building a Multiplayer Draw-and-Guess Game with WebSockets.

What you will learn

Build realtime network multiplayer games

Add physics to your canvas games by using the Box2D physics engine

Build a CSS3driven card game with transform and 3D flipping effects

Learn to add sounds to your games

Make a drawing tool in Canvas

Create multiple layers in a canvas game

Store game data persistently by using local storage

Use sprite sheets to create framebased animation

What do you get with Print?

Instant access to your digital eBook copy whilst your Print order is Shipped

Paperback book shipped to your preferred address

Download this book in EPUB and PDF formats

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Frequently bought together

HTML5 Game Development by Example(Second Edition)

€36.99

€36.99

€41.99

Total € 115.97

Ebey Philip May 12, 2016

Great book - at times a little heavy

Amazon Verified review

Alan Morato Aug 27, 2015

I can recommend this book especially to developers that want to start learning about Games in HTML5 (beginners).The book allow the reader to dive into games development concepts. You need basic understanding of Web Technology to read it (HTML5, CSS3, Javascript) but the author doesn't assume the reader is a expert in these technologies.The author starts by giving new features provided by HTML5, thus allowing the user to have a better understanding of what's possible with this language.

Anthony F. Aug 21, 2015

A fun and quick but to the point read. The book is filled with examples (as the title suggests) showing you how the code is written step-by-step. You'll get an overview of the development of a mini-game (-ynot et- a full-fledged game), and some nice JavaScript tips you can use in other projects.The most interesting aspect of the book is that it covers the "new" APIs of HTML5 (canvas, WebSockets, local storage), enabling you to fully harness the power of modern web browsers.Aimed at beginners, but intermediate developers will surely take something away too.I substracted a star because there are some code mistakes and not everything was fully optimised to my taste.

dreamster Sep 08, 2015

HTML5 Game Development by Example is a great book for anyone who is into building games. With HTML5 one can develop games that run on computers, smartphones, and tablets and this book helps ones to achieve that.The book covers six example games with clear tutorials which is explained across 10 chapters; each chapter explaining one topic. It covers almost all aspects of game building including drawing game objects, animating them, adding audio, and publishing our games. In my honest opinion this book will help one to jump start to the game development world.

L.C.H. Apr 14, 2016

The author's methodology consist of giving you parts of the code first and then he tries to explain "What just happened", but to tell the true, the explanations were not so understandable for me. I didn't understand all that code that I was writing in most of the chapters. It is very frustrating to have thousands of lines of code and not having a clue what the heck is going on inside it.Also, there are parts of the book's code that are different from the downloadable (or bundled) code. For example, in the chapter 9, the dowloadable code is just one javascript file instead of the two that the author says you should create. An the worst thing is that the file seems very different from what the book is actually telling you to type.So to simplify things: This book is not for total beginners, you should have at least an intermediate level of Javascript, but even if you already have a little experience with it, you'll find some parts of the book's code that are not well written or complete.In fact, I'd like to mention that in the chapter 2, in the book's code, page 34, there is a faulty object property that makes your project (ping pong game) to fail. So if you are struggling in that chapter, make sure to check the downloadable code to avoid frustration. Believe me, it is very frustrating to re-read ALL the chapter again just to find out that you did everything as the book says, so the problem is not you, is the BOOK !!

HTML5 Game Development by Example(Second Edition): Make the most of HTML5 techniques to create exciting games from scratch

What do you get with Print?

Contact Details

Shipping Address

Billing Address

Canvas

Audio

Touch Events

GeoLocation

WebGL

WebSocket

Local storage

Offline applications

Description

Who is this book for?

What you will learn

Product Details

What do you get with Print?

Contact Details

Shipping Address

Billing Address

Product Details

Packt Subscriptions

Frequently bought together

Table of Contents

Recommendations for you

Customer reviews

People who bought this also bought

About the author

FAQs