Getting Web Multi-Touch Working for a Fast-Paced Game

Aidan WuMay 19, 2012

13:40 - 14:10

Screen Interactions

On the desktop weworry 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

MVC

Design pattern from design view

How to make a continuous \ interface

M

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non

Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl

Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl

Limited Navigation Space

Manipulating UI Elements

How to make an interface looks touchable

V

How to make an interface touchable

Source: www.lukew.com

C

MVC

• M - Moving toward (continuous)

• V - Looking touchable

• C – Touch(Gesture)-aware

Handling Multi-Touch Events

<divontouchstart = "touchStart(e);”

ontouchmove = "touchMove(e);”

ontouchend = "touchEnd(e);”

</div>

Touches Arrays

• 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

addEventListener('touchmove', function(e) {

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

issues1. Resizing and scaling2. Pre-loading3. Touch and mouse-aware4. Sprites / animations / Transitions5. GUI / Z-index