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. 4.
  2. 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
  3. 22.

    iOS

  4. 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?
  5. 25.
  6. 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
  7. 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
  8. 31.
  9. 32.
  10. 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
  11. 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
  12. 35.
  13. 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
  14. 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
  15. 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
  16. 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
  17. 44.
  18. 46.
  19. 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 ( ) ; } } ) ; }
  20. 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
  21. 53.
  22. 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
  23. 56.
  24. 58.
  25. 64.

    Fin