Getting Web Multi-Touch Working for
a Fast-Paced Game Aidan Wu May 19, 2012 13:40 - 14:10

Screen
Interactions

On the desktop we worry
about ‘browsers’ box-shadow:10px 10px 5px #000; -moz-box-shadow:10px 10px 5px #000; -webkit-box-shadow:10px 10px 5px #000;

On mobile we worry about
‘users’

Fast, Faster, Fastest

回不去了…
Touch Interfaces Everywhere

Mobile + Touch Device +
Web

Design pattern from design view

M How to make a
continuous interface

Limited Navigation Space Lorem ipsum
dolor sit Lorem ipsum dolor Nunc vel vehicula Nunc vel vehicula amet, consectetur sit ante. Etiam ante. Etiam adipiscing elit. Aliquam amet, consectetur bibendum iaculis bibendum iaculis sodales urna non odio adipiscing elit. libero, eget libero, eget egestas tempor. Nunc vel Aliquam sodales molestie nisl molestie nisl vehicula ante. Etiam urna non bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.

Manipulating UI Elements

V How to make an
interface looks touchable

C How to make an
interface touchable Source: www.lukew.com

MVC • M - Moving
toward (continuous) • V - Looking touchable • C – Touch(Gesture)-aware

Handling Multi-Touch Events <div ontouchstart
= "touchStart(e);” ontouchmove = "touchMove(e);” ontouchend = "touchEnd(e);” </div>

Touches Arrays addEventListener('touchmove', function(e) {
• e.touches – a list of all fingers currently on the screen. • e.targetTouches – a list of fingers on the current DOM element. • e.changedTouches – changed touches for this event

TouchEvent Object var touch =
e.changedTouches[0]; • dentifier • touch.pageY • touch.screenX • touch.clientX

Javascript Gesture Library jGestures Hammer.js
More in  http://goo.gl/h5M7B

jGestures • jQuery(’#el').bind('swipeup', log); •
jQuery(’#el').bind('swiperightup',log); • jQuery('#el').bind('taptwo',log); • jQuery('#el').bind('rotate',log);

Tips • <meta name="viewport" content="width=device-width;
initial- scale=1.0;maximum-scale=1.0; user- scalable=0;"> • preventDefault();

Finger Interactions for Games Source:
Vans Finger Fracture

issues 1. Resizing and scaling
2. Pre-loading 3. Touch and mouse-aware 4. Sprites / animations / Transitions 5. GUI / Z-index