HTML and CSS Reference
In-Depth Information
Making the game mobile friendly
Making a game work on a mobile plaform is not only about the screen resoluion, but also
about changing from a mouse cursor input to touches and a lot of performance tuning. In this
task, we make the game work beter on mobile phones by providing touch screen support.
Prepare for lift off
When we publish the game on the Web, we can have several seings to enhance the
experience when playing on a mobile touch device. We add the following launch screen
and app icon to the images folder:
We need another library to help improve the clicking events on a DOM element in mobile
devices. It eliminates a clicking delay that is added by the mobile plaform. We will discuss
the delay later. Download the
fastclick.js
file from
https://github.com/ftlabs/
fastclick
and add it to the
vendors
folder. Make sure we import this file in the
index.
html
file.
Engage thrusters
1. First, we enable the touch event for the customer view:
cjs.Touch.enable(game.stage, /*single touch=*/ true,
/*allow default=*/ true);
2. Add the following
meta
tags to the
index.html
file. It tells the mobile device to
use the real screen resoluion to display the content. Otherwise, the mobile device
will try to simulate the screen width of a desktop:
<meta name="viewport" content="width=device-width,
initial-scale=1.0, minimum-scale=1.0,
maximum-scale=1.0, minimal-ui">
