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

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