Building for Mobile Browsers - Beginning HTML5 Games with CreateJS - page 274

Chapter 12
Building for Mobile Browsers
One of the greatest advantages of using HTML5 for your games is that you can target mobile browsers. When considering
mobile, many factors come into play. One of the biggest challenges you'll face with mobile is preparing for the vast
variety of screen sizes across devices.
In this chapter, you'll learn how to prepare your canvas game to scale and fill as much screen as possible on
handheld devices and even desktop displays. You'll also learn how you can distribute your game over the Web by
using the Add to Home Screen option in iOS Safari. To put this into practice, you will be adding code to Fakezee
(see Chapter 7) so it will fit on mobile screens and will also be optimized for touch events.
Enabling Touch Events
To begin the mobile optimization of Fakezee, the init function will be updated to run a new function (see Listing 12-1).
The optimizeForTouchAndScreens function will handle optimization for touch events on mobile devices. More code
will be added later to handle screen sizes and orientations.
Listing 12-1. Updated init Function in index.html
function init() {
canvas = document.getElementById('canvas');
stage = new createjs.Stage(canvas);
createjs.Ticker.setFPS(60);
createjs.Ticker.on('tick', stage);
optimizeForTouchAndScreens ();
preload();
}
function optimizeForTouchAndScreens () {
if (createjs.Touch.isSupported()) {
createjs.Touch.enable(stage);
}
}
The Touch class has a method named enable , which will enable touch interaction with the stage passed into it.
This will also allow for multi-touch modes to work in your application. At the time of writing this topic, Touch supports
iOS, modern mobile browsers, and IE10. Although we will not be utilizing multi-touch with the mobile games in this
book, enabling touch is still essential to gain full responsiveness for touch events. Not doing so will cause noticeable
delays on various devices.
Before enabling touch, you should check if the browser running your application is a touchscreen device. There's no
need to add features where they are not needed or supported, so wrapping a simple conditional around the touch-enabling
code should be done. The isSupported method on Touch will return true if touch events are supported.