E
ven though HTML5 is 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 define an area where we can start drawing and manipulating images right into the webpage on the fly 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 fill 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>
Despite these ambitious and exciting premises, though, after an initial announcement in 2008 by the W3C,* actual development started only in 2011, and support by the different browsers wasn’t as fast as many develop-ers hoped. Indeed, performance across devices and browsdevelop-ers is not really consistent yet, and several features are supported only by specific brows-ers on specific platforms. Luckily, the situation is improving steadily on a daily basis (see Figure 1.1).
Today we can finally say that HTML5 is getting advanced enough to offer the kind of capabilities needed by the game industry, thanks also to an effective integration of the JavaScript-based Web graphics library (WebGL) application programming interface (API) to provide two- and three-dimensional graphics and effects.
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 specific plugins, while developers don’t have to wait for approval by the different app stores.
In addition, when there is a new version, users won’t need to explic-itly update anything because the browser will automatically download the latest version. Offline support is also possible, making HTML5 an extremely flexible, and potentially very successful, approach to casual game development.
All that glitters is not gold, though, and actual game performance in browsers is often 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 flexibility of HTML5, the capability of converting our games to native apps when needed, and a very user-friendly environment, suitable even for nontechnical people?
This 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 final 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. This is what we are going to explore in the rest of this book, so let’s get acquainted with our tool of choice.
* The 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 different desktop browsers, for tablets, for mobile devices, and also for a new possible gam-ing frontier: smart TVs. The maximum possible score, i.e., score for a browser where everything is supported, is 500. (Continued)
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 differ-ent desktop browsers, for tablets, for mobile devices, and also for a new possible gaming frontier: smart TVs. The maximum possible score, i.e., score for a browser where everything is supported, is 500.
HTML5 and Construct 2 ◾ 5
Construct 2 comes with three different licenses. First, a free license with no time limit is available. This is the first thing you should get if you haven’t done so already. Go to www.scirra.com, click on “download,” get the latest stable release, and install it.
The free version has some important limitations you should be aware of, though. Your projects are limited to 100 events,* and the ability to export to platforms such as iOS and Android is disabled, as well as other features. In order to enable these features, use over 100 events, and have the option of releasing projects commercially, you will need the “Personal Edition” license. This license is the perfect choice for indie and aspiring developers. If the revenue from Construct creations exceeds $5000 or you are buying licenses for a company, then you will need the “Business Edition” license.
Let’s now have a first look at our game engine of choice. Once launched, it greets you with the screen shown in Figure 1.2.
Open one of the provided examples, like Space Blaster, and you will see a screen like Figure 1.3 in front of you.
The working area is divided into three main sections. Note that all tabs and windows can be dragged and moved around to a configuration that suits your working style, but throughout the book we will be using the standard layout configuration for simplicity’s sake. The first thing that will likely capture our attention is the main window at the center of the screen.
This is where we define a layout for our game (i.e., a level or playing area, a splash screen, etc.), and where we place and manipulate the different objects that will make up our game.
The column on the left instead is where we can check for specific prop-erties of any object in the game as well as for the project itself. Try clicking on any sprite, for example, on one of the spaceships displayed on the left side of the layout, to select it (Figure 1.4): its properties will be displayed on the left side panel ready to be analyzed and eventually modified.
The section on the right instead shows the project files and structure, with an additional tab named Layers that we will discuss later (see Section 6.1 and Figure 6.5). There is also a list of all the objects available in the current layout (Figure 1.5).
* With the exception of the last, more complex, game, all examples in this book will be encapsulated within 100 events to allow you to experiment with the free version as much as possible. When specific features requiring the “Personal Edition” license are used, these will be pointed out clearly in the text.
FIGURE 1.2 Launching Construct 2 provides us with options for loading recent projects, starting new ones, and checking the manual pages and other tutorials.
FIGURE 1.3 Space Blaster: a sample project we can use to familiarize ourselves with the development environment.
HTML5 and Construct 2 ◾ 7
You may have also noticed that on top of the main layout view there are a few tabs: Start page (which brings us back to Figure 1.2), Game (the name of our current layout), and Game events (the programming sheet currently associated with the game layout).
Clicking on the latter changes the display to the Game events sheet (Figure 1.6).
All actual programming takes place in this tab, and Construct handles this phase of game development in a very visual and intuitive way through events. Events are created by selecting possible conditions and actions spe-cific to the objects defined in the associated game layout. Through these, we can define what happens to them or what they do when specific condi-tions or triggers happen in the game.
While visual in nature, the logic behind this approach is the very same as in any programming language, and it will definitely help any beginner
FIGURE 1.4 Select the player’s sprite by clicking on it, and its properties will be displayed on the column on the left.
to learn how to think like a real programmer and to learn useful skills that are valid regardless of the development environment and tools used.
The last important feature we should check at this stage to have a proper overview of Construct 2 capabilities relates to the different options offered for actual distribution of our finished games. If we open the file menu and then click on Export project, as shown in Figure 1.7, we will see all avail-able choices (Figure 1.8).
While actual choices are limited for the free trial, by registering Construct many opportunities and platforms become easily accessible, ranging from online platforms, desktop units, and mobile devices, which will surely excite your imagination. A word of caution, though: Construct
FIGURE 1.5 The Projects tab on the right side is where we can get a quick over-view of all our files and import new objects into the game.
HTML5 and Construct 2 ◾ 9
2 is an extensible platform, and many useful plugins are released by third parties, exporters included. This means that not all possible features you may like to use in your games will actually be supported on each platform, and you may have to check on a case-by-case basis when working with non-Scirra plugins. On the bright side, all these tools are being developed and tested by a very smart and active community: their functionalities, as well as their cross compatibility, are constantly being improved, opening up new possibilities and expanding on existing functionalities.
All these aspects we just introduced will be discussed in much more detail in the upcoming tutorials and chapters. For now, feel free to experi-ment a little bit, look around, and try out the game demo in your browser simply by clicking on the Run Layout icon shown in Figure 1.9.
FIGURE 1.6 The Game events sheet. It is here that we program our game’s logic.
For example, we can see here that we are triggering an event at the start of the associated layout (near the bottom of the screen, the System icon is followed by On start of layout) where we can initialize objects and variables, start playing audio files, etc.
FIGURE 1.7 Opening the main menu and selecting the Export project option.
FIGURE 1.8 Some among the several exporting options at our disposal, from HTML5 games running in a browser to mobile applications. We will discuss many of these later in the book.
HTML5 and Construct 2 ◾ 11
TAKE AWAY
In this chapter we learned a little about what HTML5 is and its pros and cons, and then we had a first look at our game engine of choice for devel-oping multiplatform two-dimensional games: Construct 2.
FIGURE 1.9 Click on the Run layout icon to preview your current project in any of your installed browsers. If the bar is not visible, click on the Home tab first.
13 C h a p t e r