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

2. Screen
Interactions

3. 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;

5. On mobile we worry
about ‘users’

6. Fast, Faster, Fastest

7. 回不去了…
Touch Interfaces Everywhere

8. Mobile + Touch Device + Web

9. Design pattern from design view

10. M How to make a continuous
interface

12. 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.

13. Manipulating UI Elements

14. V How to
make an
interface
looks
touchable

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

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

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

20. 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

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

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

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

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

27. Finger Interactions for Games
Source: Vans Finger Fracture

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