Getting Web Multi-Touch Working
description
Transcript of Getting Web Multi-Touch Working
![Page 1: Getting Web Multi-Touch Working](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7c0b14a7959f0488b45fa/html5/thumbnails/1.jpg)
Getting Web Multi-Touch Working for a Fast-Paced Game
Aidan WuMay 19, 2012
13:40 - 14:10
![Page 2: Getting Web Multi-Touch Working](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7c0b14a7959f0488b45fa/html5/thumbnails/2.jpg)
Screen Interactions
![Page 3: Getting Web Multi-Touch Working](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7c0b14a7959f0488b45fa/html5/thumbnails/3.jpg)
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;
![Page 4: Getting Web Multi-Touch Working](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7c0b14a7959f0488b45fa/html5/thumbnails/4.jpg)
![Page 5: Getting Web Multi-Touch Working](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7c0b14a7959f0488b45fa/html5/thumbnails/5.jpg)
On mobile we worry about ‘users’
![Page 6: Getting Web Multi-Touch Working](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7c0b14a7959f0488b45fa/html5/thumbnails/6.jpg)
Fast, Faster, Fastest
![Page 7: Getting Web Multi-Touch Working](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7c0b14a7959f0488b45fa/html5/thumbnails/7.jpg)
回不去了…Touch Interfaces Everywhere
![Page 8: Getting Web Multi-Touch Working](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7c0b14a7959f0488b45fa/html5/thumbnails/8.jpg)
Mobile + Touch Device + Web
![Page 9: Getting Web Multi-Touch Working](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7c0b14a7959f0488b45fa/html5/thumbnails/9.jpg)
MVC
Design pattern from design view
![Page 10: Getting Web Multi-Touch Working](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7c0b14a7959f0488b45fa/html5/thumbnails/10.jpg)
How to make a continuous \ interface
M
![Page 11: Getting Web Multi-Touch Working](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7c0b14a7959f0488b45fa/html5/thumbnails/11.jpg)
![Page 12: Getting Web Multi-Touch Working](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7c0b14a7959f0488b45fa/html5/thumbnails/12.jpg)
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
![Page 13: Getting Web Multi-Touch Working](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7c0b14a7959f0488b45fa/html5/thumbnails/13.jpg)
Manipulating UI Elements
![Page 14: Getting Web Multi-Touch Working](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7c0b14a7959f0488b45fa/html5/thumbnails/14.jpg)
How to make an interface looks touchable
V
![Page 15: Getting Web Multi-Touch Working](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7c0b14a7959f0488b45fa/html5/thumbnails/15.jpg)
![Page 16: Getting Web Multi-Touch Working](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7c0b14a7959f0488b45fa/html5/thumbnails/16.jpg)
How to make an interface touchable
Source: www.lukew.com
C
![Page 17: Getting Web Multi-Touch Working](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7c0b14a7959f0488b45fa/html5/thumbnails/17.jpg)
MVC
• M - Moving toward (continuous)
• V - Looking touchable
• C – Touch(Gesture)-aware
![Page 18: Getting Web Multi-Touch Working](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7c0b14a7959f0488b45fa/html5/thumbnails/18.jpg)
![Page 19: Getting Web Multi-Touch Working](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7c0b14a7959f0488b45fa/html5/thumbnails/19.jpg)
Handling Multi-Touch Events
<divontouchstart = "touchStart(e);”
ontouchmove = "touchMove(e);”
ontouchend = "touchEnd(e);”
</div>
![Page 20: Getting Web Multi-Touch Working](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7c0b14a7959f0488b45fa/html5/thumbnails/20.jpg)
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) {
![Page 21: Getting Web Multi-Touch Working](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7c0b14a7959f0488b45fa/html5/thumbnails/21.jpg)
TouchEvent Object
var touch = e.changedTouches[0];
• dentifier
• touch.pageY
• touch.screenX
• touch.clientX
![Page 22: Getting Web Multi-Touch Working](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7c0b14a7959f0488b45fa/html5/thumbnails/22.jpg)
Javascript Gesture Library
jGestures
Hammer.js
More in http://goo.gl/h5M7B
![Page 23: Getting Web Multi-Touch Working](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7c0b14a7959f0488b45fa/html5/thumbnails/23.jpg)
jGestures
• jQuery(’#el').bind('swipeup', log);
• jQuery(’#el').bind('swiperightup',log);
• jQuery('#el').bind('taptwo',log);
• jQuery('#el').bind('rotate',log);
![Page 24: Getting Web Multi-Touch Working](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7c0b14a7959f0488b45fa/html5/thumbnails/24.jpg)
Tips
• <meta name="viewport" content="width=device-width; initial-scale=1.0;maximum-scale=1.0; user-scalable=0;">
• preventDefault();
![Page 25: Getting Web Multi-Touch Working](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7c0b14a7959f0488b45fa/html5/thumbnails/25.jpg)
![Page 26: Getting Web Multi-Touch Working](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7c0b14a7959f0488b45fa/html5/thumbnails/26.jpg)
![Page 27: Getting Web Multi-Touch Working](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7c0b14a7959f0488b45fa/html5/thumbnails/27.jpg)
Finger Interactions for Games
Source: Vans Finger Fracture
![Page 28: Getting Web Multi-Touch Working](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7c0b14a7959f0488b45fa/html5/thumbnails/28.jpg)
![Page 29: Getting Web Multi-Touch Working](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7c0b14a7959f0488b45fa/html5/thumbnails/29.jpg)
issues1. Resizing and scaling2. Pre-loading3. Touch and mouse-aware4. Sprites / animations / Transitions5. GUI / Z-index
![Page 30: Getting Web Multi-Touch Working](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7c0b14a7959f0488b45fa/html5/thumbnails/30.jpg)
![Page 31: Getting Web Multi-Touch Working](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7c0b14a7959f0488b45fa/html5/thumbnails/31.jpg)