Game Development Reference
In-Depth Information
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.