Inside Rawkets - onGameStart

Rawkets presentation from onGameStart 2011 in Poland.

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