Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile Browser Games - Topconf Tallin - HTML5 Games, Browsers

Mobile Browser Games - Topconf Tallin - HTML5 Games, Browsers

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.

187d92c9284160ad908885ab096f5209?s=128

Stefan Baumgartner

November 06, 2013
Tweet

Transcript

  1. Mobile Browser Games Great Expectations Topconf Tallinn ‑ November 2013

  2. Tere

  3. @ddprrt gplus.to/spider‑man

  4. Netural

  5. Netural Frontend

  6. workingdraft.de

  7. This Site has been optimized for Internet Explorer 3

  8. We've come a long way

  9. A new mindset

  10. Vegas in your browser!

  11. None
  12. None
  13. Just mobile browsers?

  14. Just modern browsers!

  15. Mobile Browser Games ‑ Great Expectations

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

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

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

  19. Animation with Canvas

  20. Pigs of Awesome ‑ iOS

  21. Pigs of Awesome ‑ WinPhone 7

  22. Pigs of Awesome ‑ Android

  23. How do you feature‑test low FPS?

  24. Transitions, then

  25. iOS

  26. 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?
  27. IE: Fair enough

  28. None
  29. . 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
  30. < 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
  31. 3 A A A iOS

  32. Well then, User Agents again...

  33. Orientation

  34. Landscape

  35. Portrait

  36. @ 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
  37. 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
  38. ... but

  39. 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
  40. 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
  41. 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
  42. Let there be sound!

  43. Yeah to compatibility

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

  45. Basic API .duration 'timeupdate' 'ended'

  46. 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
  47. Desktop

  48. Mobile Webkit

  49. None
  50. Just on Touch!

  51. There can be only one!

  52. 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 ( ) ; } } ) ; }
  53. 3 7 7 7 7 3 7 7 7 7

    3 7 7 7 7 Desktop, Android, iOS
  54. iOS doesn't like Variable Bitrates

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

  56. None
  57. 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
  58. Final tips

  59. None
  60. ... use it!

  61. Prototype

  62. Safari?

  63. Safari, you are doing it wrong

  64. What's next?

  65. Chrome is coming

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

  67. Firefox is already there

  68. Mobile browsers: The future?

  69. Fin