beyond tellerrand Developer Garden Talk: Mobile Browser Games

beyond tellerrand Developer Garden Talk: Mobile Browser Games

Very tight and compressed reprise of the Mobile Browser Games talk in Düsseldorf

187d92c9284160ad908885ab096f5209?s=128

Stefan Baumgartner

May 29, 2013
Tweet

Transcript

  1. Attention! Full fledged version of the slides available at fettblog.eu/slides/BYND13

    Detailed information on fettblog.eu
  2. Mobile Browser Games Great Expectations

  3. @ddprrt gplus.to/spider‑man fettblog.eu

  4. Netural

  5. This Site has been optimized for Internet Explorer 3

  6. We've come a long way

  7. A new mindset

  8. Vegas in your browser!

  9. Just mobile browsers?

  10. Just modern browsers!

  11. the numbers on the roulette wheel add up to 666

    ... and now I know why
  12. Mobile Safari iOS 5 / iOS 6 Native Android Browser

    2.x, 3.x, 4.0 Mostly Samsung Galaxy Devices Internet Explorer 9 Windows Phone 7
  13. Animation: The Possibilites DOM Manipulation CSS Transitions / Animations Canvas

  14. Animation with Canvas

  15. http://thewebrocks.com/demos/pigs/ by Chris Heilman Pigs of Awesome ‑ iOS

  16. Pigs of Awesome ‑ WinPhone 7

  17. Pigs of Awesome ‑ Android

  18. How do you feature‑test low FPS?

  19. Transitions, then

  20. iOS

  21. a n i m a t e ( v a

    r f r o m , v a r t o ) { / / M A G I C . . . } t r a n s i t i o n ( ) { a n i m a t e ( 0 % , 1 0 0 % ) ; s t a t e ( 1 0 0 % ) ; } What happened on Android?
  22. IE: Fair enough

  23. None
  24. . c a r d { w i d t

    h : 1 0 0 p x ; h e i g h t : 1 2 0 p x ; t r a n s f o r m - s t y l e : p r e s e r v e - 3 d ; p e r s p e c t i v e : 1 0 0 0 ; } . c a r d > d i v { b a c k f a c e - v i s i b i l i t y : h i d d e n ; t r a n s i t i o n : t r a n s f o r m 0 . 5 s l i n e a r ; } . b a c k { t r a n s f o r m : r o t a t e Y ( 0 d e g ) ; } . f r o n t { t r a n s f o r m : r o t a t e Y ( 1 8 0 d e g ) ; } . f l i p . b a c k { t r a n s f o r m : r o t a t e Y ( - 1 8 0 d e g ) ; } . f l i p . f r o n t { t r a n s f o r m : r o t a t e ( 0 d e g ) ; } CSS Flip
  25. A 2 3 4 JOKER JOKER JOKER A A 2

    2 3 A 2 3 iOS
  26. Well then, User Agents again...

  27. Let there be sound!

  28. Yeah to compatibility

  29. Basic API .play() .pause() .currentTime

  30. Basic API .duration 'timeupdate' 'ended'

  31. a u d i o O n e = d

    o c u m e n t . g e t E l e m e n t B y I d ( ' a u d i o O n e ' ) ; a u d i o T w o = d o c u m e n t . g e t E l e m e n t B y I d ( ' a u d i o T w o ' ) ; a u d i o O n e . a d d E v e n t L i s t e n e r ( ' e n d e d ' , f u n c t i o n ( ) { a u d i o T w o . p l a y ( ) ; } ) ; / / c l i c k o n A u d i o O n e Demo
  32. Desktop

  33. Mobile Webkit

  34. None
  35. Just on Touch!

  36. There can be only one!

  37. v a r m a p = [ { s

    t a r t : 0 , e n d : 2 } , { s t a r t : 3 , e n d : 4 } ] ; f u n c t i o n p l a y ( e n t r y ) { a u d i o . c u r r e n t T i m e = m a p [ e n t r y ] . s t a r t ; a u d i o . p l a y ( ) ; a u d i o . a d d E v e n t l i s t e n e r ( ' t i m e u p d a t e ' , f u n c t i o n ( ) { i f ( a u d i o . c u r r e n t T i m e > m a p [ e n t r y ] . e n d ) { a u d i o . p a u s e ( ) ; } } ) ; }
  38. 2 3 3 4 4 5 5 6 6 7

    7 8 JOKER 2 3 3 4 4 5 5 6 6 7 7 8 2 3 3 4 4 5 5 6 6 7 7 8 2 3 3 4 4 5 5 6 6 7 7 8 A A 2 2 3 3 4 4 5 5 6 JOKER JOKER JOKER JOKER 4 5 5 6 6 7 7 8 8 9 9 10 4 5 5 6 6 7 7 8 8 9 9 10 4 5 5 6 6 7 7 8 8 9 9 10 A A 2 2 3 3 4 JOKER JOKER JOKER JOKER 6 7 7 8 8 9 9 10 10 J J Q 6 7 7 8 8 9 9 10 10 J J Q 6 7 7 8 8 9 9 10 10 J J Q Desktop, Android, iOS
  39. iOS doesn't like Variable Bitrates

  40. Android version distribution, March 2013 Source: bgr.com

  41. Mobile browsers: The future?

  42. Fin @ddprrt / fettblog.eu