Getting Web Multi-Touch Working

5,141 views

Published on

Published in: Design, Technology
3 Comments
6 Likes
Statistics
Notes
No Downloads
Views
Total views
5,141
On SlideShare
0
From Embeds
0
Number of Embeds
482
Actions
Shares
0
Downloads
96
Comments
3
Likes
6
Embeds 0
No embeds

No notes for slide

Getting Web Multi-Touch Working

  1. Getting Web Multi-TouchWorking for a Fast-Paced Game Aidan Wu May 19, 2012 13:40 - 14:10
  2. ScreenInteractions
  3. 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;
  4. On mobile we worry about ‘users’
  5. Fast, Faster, Fastest
  6. 回不去了…Touch Interfaces Everywhere
  7. Mobile + Touch Device + Web
  8. Design pattern from design view
  9. M How to make a continuous interface
  10. 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.
  11. Manipulating UI Elements
  12. V How tomake aninterfacelookstouchable
  13. C How to make aninterface touchable Source: www.lukew.com
  14. MVC• M - Moving toward (continuous)• V - Looking touchable• C – Touch(Gesture)-aware
  15. Handling Multi-Touch Events<div ontouchstart = "touchStart(e);” ontouchmove = "touchMove(e);” ontouchend = "touchEnd(e);”</div>
  16. 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
  17. TouchEvent Object var touch = e.changedTouches[0];• dentifier• touch.pageY• touch.screenX• touch.clientX
  18. Javascript Gesture Library jGestures Hammer.jsMore in  http://goo.gl/h5M7B
  19. jGestures• jQuery(’#el).bind(swipeup, log);• jQuery(’#el).bind(swiperightup,log);• jQuery(#el).bind(taptwo,log);• jQuery(#el).bind(rotate,log);
  20. Tips• <meta name="viewport" content="width=device-width; initial- scale=1.0;maximum-scale=1.0; user- scalable=0;">• preventDefault();
  21. Finger Interactions for Games Source: Vans Finger Fracture
  22. issues1. Resizing and scaling2. Pre-loading3. Touch and mouse-aware4. Sprites / animations / Transitions5. GUI / Z-index

×