O'Reilly logo

HTML5 Game Development from the Ground Up with Construct 2 by Roberto Dillon

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

1
Chapter 1
HTML5 and Construct 2
E
  HTML5  a relative newcomer to the world of game
development, it already managed to capture lots of interest among
both big companies and young startups alike, thanks to the promise of
delivering a straightforward experience common to all web-based devices.
In other words, HTML5 aims at building a new Internet where installing
plugins would be redundant and where relatively advanced multimedia
features would be natively supported by the browser itself.
For example, thanks to the new <canvas> tag, it is actually possible to
dene an area where we can start drawing and manipulating images right
into the webpage on the y through JavaScript. A simple script like the fol-
lowing would set up a canvas covering a 200 × 100 pixel area, frame it with
a 1 pixel wide black border, and then ll its upper half with a red rectangle.
<html><body>
<canvas id = "myCanvas" width = "200" height = "100" style =
"border:1px solid #000000;"> </canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //getContext("2d") is an HTML5 object
with many predefined properties and methods for drawing rectangles,
circles, images, text, etc.
ctx.fillStyle = "#FF0000"; //we will fill our rectangle in red
ctx.fillRect(0,0,200,50); //drawing a filled rectangle. 0,0 is the
top right corner of the canvas
</script>
</body> </html>
2  ◾    HTML5 Game Development from the Ground Up
Despite these ambitious and exciting premises, though, aer an initial
announcement in 2008 by the W3C,
*
actual development started only in
2011, and support by the dierent browsers wasnt as fast as many develop-
ers hoped. Indeed, performance across devices and browsers is not really
consistent yet, and several features are supported only by specic brows-
ers on specic platforms. Luckily, the situation is improving steadily on a
daily basis (see Figure1.1).
Today we can nally say that HTML5 is getting advanced enough to
oer the kind of capabilities needed by the game industry, thanks also
to an eective integration of the JavaScript-based Web graphics library
(WebGL) application programming interface (API) to provide two- and
three-dimensional graphics and eects.
As HTML5 matures, the reasons it could be a major revolution for
online games become more and more apparent: games can be shared
simply as links and can be run instantly without the need for any
installation. Players don’t need to download specic plugins, while
developers dont have to wait for approval by the dierent app stores.
In addition, when there is a new version, users wont need to explic-
itly update anything because the browser will automatically download
the latest version. Oine support is also possible, making HTML5 an
extremely exible, and potentially very successful, approach to casual
game development.
All that glitters is not gold, though, and actual game performance in
browsers is oen lacking, making complex HTML5 games in practice
much less feasible and appealing than native games on most devices.
Wouldn’t it be great, then, if we could have the exibility of HTML5,
the capability of converting our games to native apps when needed, and
a very user-friendly environment, suitable even for nontechnical people?
is is where Construct 2 by Scirra comes into the picture. Writing games
in HTML5 involves dealing with HTML, CSS3, and JavaScript, but all
these can be circumvented by using Scirra’s tool, which adopts a very
visual approach to game development. In addition, third-party tools are
available to wrap the nal HTML5 game that Construct builds to turn it
into an iOS or Android game with performance close to that of a native
app, for example. is is what we are going to explore in the rest of this
book, so let’s get acquainted with our tool of choice.
*
e World Wide Web Consortium (W3C) is the main international standards organization for the
World Wide Web.
HTML5 and Construct 2  ◾    3  
FIGURE 1.1 Pointing your browser to http://html5test.com/ will show exactly
what HTML5 features it is supporting. Here we have the results for dierent
desktop browsers, for tablets, for mobile devices, and also for a new possible gam-
ing frontier: smart TVs. e maximum possible score, i.e., score for a browser
where everything is supported, is 500. (Continued)
4  ◾    HTML5 Game Development from the Ground Up
FIGURE 1.1 (Continued) Pointing your browser to http://html5test.com/ will show
exactly what HTML5 features it is supporting. Here we have the results for dier-
ent desktop browsers, for tablets, for mobile devices, and also for a new possible
gaming frontier: smart TVs. e maximum possible score, i.e., score for a browser
where everything is supported, is 500.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required