Game Development Reference
In-Depth Information
isDown = false;
touchId = 0;
}
// Always move the entity based on the cached
touch id
function doOnTouchMove(event) {
event.preventDefault();
var touch = event.changedTouches;
if (isDown) {
pos.x = touch[touchId].pageX;
pos.y = touch[touchId].pageY;
}
}
};
By tracking the original touch and only responding to it, we can guarantee fidelity in
the touch input, even if multiple touches are initiated on the screen. This would also
be the proper way of tracking separate touches for the purposes of implementing
gestures or other input triggers based on an arbitrary combination of touches.
Use CSS animations with caution
There is a strange phenomenon that sometimes happens in mobile browsers when
we are too generous with some of the newer CSS properties. For example, if we add
a box shadow to an element, we can still get pretty strong performance. Optionally,
if we add a CSS transition to some other element, performance could still be main-
tained. However, if both of these properties are assigned together then performance
all of a sudden drops down to barely playable conditions.
Since there is no formula that describes which properties should and should not be
used, and which combinations should be avoided, the advice here is to use the least
amount of CSS properties possible and add them slowly. In the case of our game,
where the desktop version makes heavy use of CSS animations to render the back-
ground, we need to consider the implications that this may have on a mobile device.
After trying the effect on the two most popular mobile platforms today and seeing
performance drop severely, we concluded that the particular animation we wanted,
