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.

Stefan Baumgartner

November 06, 2013
Tweet

More Decks by Stefan Baumgartner

Other Decks in Programming

Transcript

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

    View full-size slide

  2. @ddprrt
    gplus.to/spider‑man

    View full-size slide

  3. Netural Frontend

    View full-size slide

  4. workingdraft.de

    View full-size slide

  5. This Site
    has been
    optimized
    for
    Internet Explorer 3

    View full-size slide

  6. We've come a long way

    View full-size slide

  7. A new mindset

    View full-size slide

  8. Vegas in your browser!

    View full-size slide

  9. Just mobile browsers?

    View full-size slide

  10. Just modern browsers!

    View full-size slide

  11. Mobile Browser Games ‑ Great Expectations

    View full-size slide

  12. the numbers on the roulette wheel add up to 666
    ... and now I know why

    View full-size slide

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

    View full-size slide

  14. Animation: The Possibilites
    DOM Manipulation
    CSS Transitions / Animations
    Canvas

    View full-size slide

  15. Animation with Canvas

    View full-size slide

  16. Pigs of Awesome ‑ iOS

    View full-size slide

  17. Pigs of Awesome ‑ WinPhone 7

    View full-size slide

  18. Pigs of Awesome ‑ Android

    View full-size slide

  19. How do you feature‑test low FPS?

    View full-size slide

  20. Transitions, then

    View full-size slide

  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?

    View full-size slide

  22. IE: Fair enough

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. Well then, User Agents again...

    View full-size slide

  26. @
    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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. Let there be sound!

    View full-size slide

  32. Yeah to compatibility

    View full-size slide

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

    View full-size slide

  34. Basic API
    .duration
    'timeupdate'
    'ended'

    View full-size slide

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

    View full-size slide

  36. Mobile Webkit

    View full-size slide

  37. Just on Touch!

    View full-size slide

  38. There can be only one!

    View full-size slide

  39. 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
    (
    )
    ;
    }
    }
    )
    ;
    }

    View full-size slide

  40. 3
    7
    7
    7
    7
    3
    7
    7
    7
    7
    3
    7
    7
    7
    7
    Desktop, Android, iOS

    View full-size slide

  41. iOS doesn't like Variable Bitrates

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. Safari, you are doing it wrong

    View full-size slide

  45. What's next?

    View full-size slide

  46. Chrome is coming

    View full-size slide

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

    View full-size slide

  48. Firefox is already there

    View full-size slide

  49. Mobile browsers: The future?

    View full-size slide