Mobile Browser Games - Breaking Development Orlando 2013

Mobile Browser Games - Breaking Development Orlando 2013

Mobile browsers promise a broad range of features applicable for rich multi-media applications, such as games. Without the limitation of desktop legacy systems, developers are encouraged to make heavy use of new web technologies from the CSS3 and HTML5 spec. However, implementation quality differs greatly between systems. This talk will show how the cornerstones of multi-media apps, such as animation and sound, differ from their well-known counterparts in the desktop world once they reach mobile devices, and what you can do to implement robust solutions.

Full-fledged version of those slides: http://fettblog.eu/slides/BDORL13

187d92c9284160ad908885ab096f5209?s=128

Stefan Baumgartner

April 08, 2013
Tweet

Transcript

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

  2. Mobile Browser Games Great Expectations

  3. @ddprrt gplus.to/spider‑man

  4. Netural

  5. Netural Frontend

  6. This Site has been optimized for Internet Explorer 3

  7. We've come a long way

  8. A new mindset

  9. Vegas in your browser!

  10. Just mobile browsers?

  11. Just modern browsers!

  12. Mobile Browser Games ‑ Great Expectations

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

    ... and now I know why
  14. 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
  15. Animation: The Possibilites DOM Manipulation CSS Transitions / Animations Canvas

  16. Animation with Canvas

  17. Pigs of Awesome ‑ iOS

  18. Pigs of Awesome ‑ WinPhone 7

  19. Pigs of Awesome ‑ Android

  20. How do you feature‑test low FPS?

  21. Transitions, then

  22. iOS

  23. 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?
  24. IE: Fair enough

  25. None
  26. . 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
  27. < d i v c l a s s =

    " c a r d " > < d i v c l a s s = " b a c k " > < / d i v > < d i v c l a s s = " f r o n t " > < / d i v > < / d i v > HTML
  28. A 2 3 4 JOKER JOKER JOKER A A 2

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

  30. Orientation

  31. Landscape

  32. Portrait

  33. @ m e d i a o n l y

    s c r e e n a n d ( o r i e n t a t i o n : p o r t r a i t ) @ m e d i a o n l y s c r e e n a n d ( o r i e n t a t i o n : l a n d s a c p e ) CSS
  34. w i n d o w . o n o

    r i e n t a t i o n c h a n g e = f u n c t i o n ( ) { v a r o r i e n t a t i o n = w i n d o w . o r i e n t a t i o n ; / / o r i e n t a t i o n i n d e g r e e s s w i t c h ( o r i e n t a t i o n ) { c a s e 0 : / / i O S p o r t r a i t . . . b r e a k ; c a s e 9 0 : / / i O S l a n d s c a p e . . . b r e a k ; c a s e - 9 0 : . . . b r e a k ; } } JavaScript
  35. ... but

  36. v a r m q l = w i n

    d o w . m a t c h M e d i a ( " ( o r i e n t a t i o n : p o r t r a i t ) " ) ; m q l . a d d E v e n t L i s t e n e r ( f u n c t i o n ( m ) { i f ( m . m a t c h e s ) { / / d o p o r t r a i t s t u f f } e l s e { / / d o l a n d s c a p e s t u f f } } ) Better
  37. b o d y : a f t e r

    { c o l o r : t r a n s p a r e n t ; c o n t e n t : ' p ' ; p o s i t i o n : a b s o l u t e ; l e f t : - 1 0 0 % ; / / o f f s c r e e n } @ m e d i a o n l y s c r e e n a n d ( o r i e n t a t i o n : l a n d s a c p e ) { c o n t e n t : ' l ' ; } Hacky
  38. v a r b o d y A f t

    e r S t y l e = w i n d o w . g e t C o m p u t e d S t y l e ( d o c u m e n t . b o d y , " : a f t e r " ) ; w i n d o w . o n o r i e n t a t i o n c h a n g e = f u n c t i o n ( ) { i f ( b o d y A f t e r S t y l e . c o n t e n t = = ' p ' ) { / / d o p o r t r a i t s t u f f } e l s e i f ( b o d y A f t e r S t y l e . c o n t e n t = = ' l ' ) { / / d o l a n d s c a p e s t u f f } } Hacky
  39. Let there be sound!

  40. Yeah to compatibility

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

  42. Basic API .duration 'timeupdate' 'ended'

  43. 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
  44. Desktop

  45. Mobile Webkit

  46. None
  47. Just on Touch!

  48. There can be only one!

  49. 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 ( ) ; } } ) ; }
  50. 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
  51. iOS doesn't like Variable Bitrates

  52. But wait! You can't access currentTime in IE9

  53. None
  54. f u n c t i o n t e

    s t A u d i o ( ) { a u d i o . s r c = " 1 s s i l e n c e . m p 3 " ; t r y { 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 ( ' e n d e d ' , f u n c t i o n ( ) { u s e F i l e = t r u e ; } ) ; } c a t c h ( e ) { u s e F i l e = f a l s e ; } } Audio Test
  55. Final tips

  56. None
  57. ... use it!

  58. Prototype

  59. What's next?

  60. Chrome is coming

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

  62. Firefox is already there

  63. Mobile browsers: The future?

  64. Fin