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. View Slide

  2. View Slide

  3. Created by Phil Banks (@emirpprime)

    View Slide

  4. View Slide

  5. Experimentation
    Rawkets is a graduate from
    my lab

    View Slide

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

    View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. Technology
    Some of the tech involved in Web gaming

    View Slide

  11. Canvas
    2D graphics platform

    View Slide

  12. Flash audio
    Sound effects and background music

    View Slide

  13. WebSockets
    Multiplayer communication

    View Slide

  14. Node.js
    Game logic and network communication

    View Slide

  15. Issues
    Making games can be a challenge

    View Slide

  16. Networking
    Not as easy as I thought

    View Slide

  17. Message protocol
    Structured and short communication

    View Slide

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

    View Slide

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

    View Slide

  20. Compression
    Reducing data as much as possible

    View Slide

  21. Rate limiting
    Cutting down on communication

    View Slide

  22. 1 1
    MESSAGES IN
    1
    MESSAGES OUT
    1

    View Slide

  23. 1 2
    2 1
    MESSAGES IN
    2
    MESSAGES OUT
    4

    View Slide

  24. 1 4
    4 1
    1
    4
    4
    1
    MESSAGES IN
    4
    MESSAGES OUT
    16

    View Slide

  25. MESSAGES IN
    30
    MESSAGES OUT
    900
    1 30
    30 1
    1
    30
    30
    1

    View Slide

  26. MESSAGES IN
    100
    MESSAGES OUT
    10000
    1 100
    100 1
    1
    100
    100
    1

    View Slide

  27. Intelligence
    Letting the game prioritise messages

    View Slide

  28. Respecting TCP
    WebSockets uses TCP. Deal with it

    View Slide

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

    View Slide

  30. Use Socket.IO
    It intelligently drops messages

    View Slide

  31. Cheaters
    A blessing and a curse

    View Slide

  32. Globals and closures
    Keeping code wide open is bad

    View Slide

  33. (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 Slide

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

    View Slide

  35. Server authority
    Relinquish that power

    View Slide

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

    View Slide

  37. Client prediction
    Server authority isn’t enough

    View Slide

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

    View Slide

  39. Correction
    When prediction goes wrong

    View Slide

  40. 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 Slide

  41. Stability
    Keeping the game running

    View Slide

  42. mmonit.com/monit

    View Slide

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

  44. #!/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 Slide

  45. github.com/indexzero/forever

    View Slide

  46. forever start rawkets.js
    Forever

    View Slide

  47. github.com/hookio/hook.io

    View Slide

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

    View Slide

  49. Loads more
    HTML5 games teach you a lot

    View Slide

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

    View Slide

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

    View Slide

  52. Game profiler

    View Slide

  53. Webkit timeline-like

    View Slide

  54. 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 Slide

  55. 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 Slide

  56. 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 Slide

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

    View Slide

  58. View Slide