getting web multi-touch working
DESCRIPTION
TRANSCRIPT
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