Getting Web Multi-Touch Working

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

ScreenInteractions

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

Design pattern from design view

M How to make a continuous interface

Limited Navigation SpaceLorem ipsum dolor sit Lorem ipsum dolor Nunc vel vehicula Nunc vel vehiculaamet, consectetur sit ante. Etiam ante. Etiamadipiscing elit. Aliquam amet, consectetur bibendum iaculis bibendum iaculissodales urna non odio adipiscing elit. libero, eget libero, egetegestas tempor. Nunc vel Aliquam sodales molestie nisl molestie nislvehicula ante. Etiam urna nonbibendum iaculislibero, eget molestie nislpharetra in. In semperconsequat est, eu portavelit mollis nec.

Manipulating UI Elements

V How tomake aninterfacelookstouchable

C How to make aninterface 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 ArraysaddEventListener(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.jsMore 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

http://www.iphone-entreprise.com	295
http://www.conseilsmarketing.com	142
http://ofimatica-1cfgm.blogspot.com.es	9
http://ofimatica-1cfgm.blogspot.com	4
https://si0.twimg.com	2
http://us-w1.rockmelt.com	2
http://ofimatica-1cfgm.blogspot.mx	2
http://www.onlydoo.com	1

Getting Web Multi-Touch Working

by Aidan Wu

Accessibility

Categories

Upload Details

Usage Rights

8 Embeds 457

Statistics