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

Inside Rawkets - onGameStart

robhawkes
September 23, 2011

Inside Rawkets - onGameStart

Rawkets presentation from onGameStart 2011 in Poland.

robhawkes

September 23, 2011
Tweet

More Decks by robhawkes

Other Decks in Programming

Transcript

  1. Created by Phil Banks (@emirpprime)

    View full-size slide

  2. Experimentation
    Rawkets is a graduate from
    my lab

    View full-size slide

  3. What is Rawkets?
    Rawkes, WebSockets, and Rockets

    View full-size slide

  4. Technology
    Some of the tech involved in Web gaming

    View full-size slide

  5. Canvas
    2D graphics platform

    View full-size slide

  6. Flash audio
    Sound effects and background music

    View full-size slide

  7. WebSockets
    Multiplayer communication

    View full-size slide

  8. Node.js
    Game logic and network communication

    View full-size slide

  9. Issues
    Making games can be a challenge

    View full-size slide

  10. Networking
    Not as easy as I thought

    View full-size slide

  11. Message protocol
    Structured and short communication

    View full-size slide

  12. types = {
    PING: 1,
    SYNC: 2,
    SYNC_COMPLETED: 3,
    NEW_PLAYER: 4,
    UPDATE_PLAYER: 5,
    UPDATE_INPUT: 6,
    REMOVE_PLAYER: 7
    };
    Enumeration

    View full-size slide

  13. {
    z: 1,
    id: 1234567890,
    t: 1316763202872,
    s: {
    x: 5,
    y: 34,
    v: 3,
    a: 0.46
    }
    }
    Message package

    View full-size slide

  14. Compression
    Reducing data as much as possible

    View full-size slide

  15. Rate limiting
    Cutting down on communication

    View full-size slide

  16. 1 1
    MESSAGES IN
    1
    MESSAGES OUT
    1

    View full-size slide

  17. 1 2
    2 1
    MESSAGES IN
    2
    MESSAGES OUT
    4

    View full-size slide

  18. 1 4
    4 1
    1
    4
    4
    1
    MESSAGES IN
    4
    MESSAGES OUT
    16

    View full-size slide

  19. MESSAGES IN
    30
    MESSAGES OUT
    900
    1 30
    30 1
    1
    30
    30
    1

    View full-size slide

  20. MESSAGES IN
    100
    MESSAGES OUT
    10000
    1 100
    100 1
    1
    100
    100
    1

    View full-size slide

  21. Intelligence
    Letting the game prioritise messages

    View full-size slide

  22. Respecting TCP
    WebSockets uses TCP. Deal with it

    View full-size slide

  23. Obey the order
    You can’t do much about it

    View full-size slide

  24. Use Socket.IO
    It intelligently drops messages

    View full-size slide

  25. Cheaters
    A blessing and a curse

    View full-size slide

  26. Globals and closures
    Keeping code wide open is bad

    View full-size slide

  27. (function() {
    var rawkets = rawkets || {},
    r = rawkets;
    rawkets.namespace = function(namespace_str) {
    var parts = namespace_str.split("."),
    parent = rawkets,
    i;
    if (parts[0] === "rawkets") {
    parts = parts.slice(1);
    };
    for (i = 0; i < parts.length; i++) {
    if (typeof parent[parts[i]] === "undefined") {
    parent[parts[i]] = {};
    };
    parent = parent[parts[i]];
    };
    return parent;
    };
    window.rawkets = window.r = rawkets;
    })(window);

    View full-size slide

  28. Client authority
    Power isn’t always a good thing

    View full-size slide

  29. Server authority
    Relinquish that power

    View full-size slide

  30. Input Move Update
    +0 +40 +80
    40ms 40ms
    80ms total round-trip
    Inherent latency

    View full-size slide

  31. Client prediction
    Server authority isn’t enough

    View full-size slide

  32. Prediction happens here
    Input Move Update
    +0 +40 +80
    40ms 40ms
    Instant movement

    View full-size slide

  33. Correction
    When prediction goes wrong

    View full-size slide

  34. var correction = function(time, state, input, entity, rk4) {
    ...
    if (Math.abs(state.x - lastMove.state.x) > 2) {
    ...
    var currentTime = time,
    currentInput = input;
    entity.setState(state); // Rewind entity state
    var move, // Current move
    frameTime; // Time between correction and stored move
    for (m = 0; m < moveCount; m++) {
    move = moves[m];
    frameTime = (move.time - currentTime) / 1000;
    // Update physics based on corrected time, input and state
    ...
    currentTime = move.time;
    currentInput = move.input;
    move.state = entity.getState();
    };
    };
    };

    View full-size slide

  35. Stability
    Keeping the game running

    View full-size slide

  36. mmonit.com/monit

    View full-size slide

  37. check host rawkets.com with address 127.0.0.1
    start program = "/etc/init.d/rawkets start"
    stop program = "/etc/init.d/rawkets stop"
    if failed port 8000 type tcp for 2 times within 3 cycles then restart
    Monit script

    View full-size slide

  38. #!/bin/sh
    case "$1" in
    start)
    cd /rawkets
    /usr/local/bin/node rawkets.js 2>&1 >> /var/log/node.log &
    exit 1
    ;;
    stop)
    /usr/bin/pkill -f 'node rawkets.js'
    exit 1
    ;;
    esac
    exit 1
    Init.d script

    View full-size slide

  39. github.com/indexzero/forever

    View full-size slide

  40. forever start rawkets.js
    Forever

    View full-size slide

  41. github.com/hookio/hook.io

    View full-size slide

  42. Why Flash audio?
    HTML5 Audio isn’t quite ready yet

    View full-size slide

  43. Loads more
    HTML5 games teach you a lot

    View full-size slide

  44. The future
    What I’d like to see in JavaScript gaming

    View full-size slide

  45. Something fun
    I’ve been working on a little tool

    View full-size slide

  46. Game profiler

    View full-size slide

  47. Webkit timeline-like

    View full-size slide

  48. Rob Hawkes
    Rawkets.com
    HTML5 & WebSockets game
    Twitter sentiment analysis
    Delving into your soul
    RECENT PROJECTS
    Rawkes.com
    Personal website and blog
    MORE COOL STUFF
    ExplicitWeb.co.uk
    Web development podcast
    Rawket Scientist
    Technical Evangelist at Mozilla
    @robhawkes

    View full-size slide

  49. Become a canvas master
    RAWKES.COM/FOUNDATIONCANVAS
    Out now
    Paperback and digital formats
    Learn how to animate
    Make two cool space games
    Foundation HTML5 Canvas

    View full-size slide

  50. November is HTML5 canvas
    Every month
    Next month is CSS Media Queries
    Win prizes (like an Android)
    DEVELOPER.MOZILLA.ORG/EN-US/DEMOS/DEVDERBY
    Mozilla Dev Derby

    View full-size slide

  51. Hand-picked experts
    @ASKMDN & #ASKMDN ON TWITTER
    One hour every fortnight
    Web development topics
    Great discussions
    Ask MDN
    ASKMDN
    onGameStart special (hopefully)

    View full-size slide