SlideShare a Scribd company logo
Hi, I’m Rob Hawkes and I’m here today to give an inside look at the development of Rawkets,
my HTML5 and JavaScript multiplayer space shooter.

Throughout this talk I plan to take a journey through some of the issues that plagued early
development of the game, and cover the subsequent solutions that helped resolve them.

There’ll be some code, but I’m more interested in highlighting the concepts and theories
involved.

This talk is definitely light-hearted but I’ll be assuming some prior knowledge, so feel free to
raise your hand throughout the talk if you want to explore an area further, or to simply ask a
question.
For those who don’t know much about about me…

I’m a Technical Evangelist at Mozilla, which means that it’s my job to engage with developers
about cool new technologies on the Web.
Created by Phil Banks (@emirpprime)


Aside from that I spend most of my time experimenting with HTML5 and other cool
technologies.

It’s fun!
EXPERIMENTATION
              Rawkets is a graduate from my lab



Rawkets is a project that originally came out of this experimentation, from a desire to learn
more about WebSockets in regards to multiplayer gaming.

Now, the game is much more mature and I’d consider it as a separate entity aside from the
experiments. It’s something that I plan to develop and support way beyond the original scope
of learning WebSockets.
WHAT IS RAWKETS?
              Rawkes, WebSockets, and Rockets



Rawkets stands for Rawkes (my blog), WebSockets, and Rockets.
Rawkets is a multiplayer space game that allows you to shoot your friends in the face with
HTML5 technologies.

Still not really at a beta release level yet, hence the bugs you might notice in this video.

http://rawkets.com
By now you’ve probably realised that the graphics at the beginning of this talk and on the
posters aren’t the real game graphics.

They are actually an awesome “artists impression” illustration that I commissioned a guy
called Reid Southen to create, although maybe when WebGL gets better it will become a
reality. Who knows.
It looks pretty awesome as a 6ft banner. So awesome in fact that my girlfriend actually asked
me if I was going to put it up in our flat our not. She seemed pretty down about me saying no
(it smells of ink and solvents).

This is a photo of me in front of the banner at my university end-of-year show. If you think it
looks small then let me put it into perspective by telling you that it’s about 8ft away. Read
into that what you will.
TECHNOLOGY
         Some of the tech involved in Web gaming



There are a few key technologies that are involved in the development of the game.

All of them bar one are tightly related to HTML or JavaScript.
CANVAS
                          2D graphics platform



Canvas for 2D graphics.
FLASH AUDIO
             Sound effects and background music



Flash audio for game sound effects and background music.

I’ll explain why I use Flash over HTML5 Audio further on in the talk.
WEBSOCKETS
                    Multiplayer communication



WebSockets is used for the communication between each player and the game server.

For anyone not up to speed with WebSockets, it’s an upgraded HTTP connection that allows
for fully bi-directional streaming communication.
NODE.JS
                  Game logic and communication



Node is used as the game server, controlling the logic and handling the WebSockets
connections to the players.

It will eventually be used for player authentication and the storage of data so gameplay can
persist over multiple game sessions.

This is all made relatively easy with great third-party modules, like Socket.IO for WebSockets,
and others that handle Redis and MongoDB for storage, for example.
ISSUES
               Making a game can be a challenge



It’s not all plain sailing when making a gaming using HTML5 and JavaScript.

I’m going to cover a few of the main issues that tripped me up during the development of
Rawkets.
NETWORKING
                        Not as easy as I thought



Issues with networking have plagued development of the game right from the beginning.

This probably stems from my lack of prior experience with socket connection and multiplayer
gaming in general.

In the original prototype of the game the network communication was woefully simple and
everything was transmitted in a verbose format with no further thought.

In hindsight it’s obvious why I was experiencing massive performance issues with the
network communication. I was basically sending way too much data back and forth.
MESSAGE PROTOCOL
            Structured and short communication



One of the ways that I solved these problems was by implementing a structured protocol for
the messages that are being sent and received.

This included assigning each message type a number and using enumeration to represent
those types in the code.
ENUMERATION
    Message protocol




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

By enumerating the messages types like this I was able to refer to them in a verbose format
within the code, but benefit from only sending the one or two digit number when
transmitting a message.

This is only possible if both the client and server follow the same protocol in regards to which
number refers to which message type.

It’s a simple but effective solution and allowed me to cut a large number of characters from
transmitted messages.
PACKAGE
    Message protocol



    {
        z: 1,
        id: 1234567890,
        s: {
           x: 5,
           y: 34,
           v: 3,
           a: 0.46
        }
    }
Put together with the message types, a full message package is put together as a JSON
representation of a JavaScript object.

All the other pieces of data are attached to the object with a key that is as short as possible.

The z key that you can see above is a reserved key that is used solely for the message type.

The other keys in this example are the player id and the player state.
COMPRESSION
              Reducing data as much as possible



Data in WebSockets is transmitted as verbose plain text, so it’s important to cut down and
compress it as much as possible.

Some of the ways that I’ve done this include rounding numerical values, reducing the length
of words if they’re only used for reference, and generally removing any data that isn’t
necessary.

There is also BISON, which is a binary representation of JSON that can cut down the amount
of data sent back and forth even further.

http://kaijaeger.com/articles/introducing-bison-binary-interchange-standard.html
RATE LIMITING
                Cutting down on communication



Aside from the message protocol, one of the biggest issues with networking has been dealing
with the sheer number of messages being sent back and forth during the lifetime of a game.
MESSAGES IN                                                 MESSAGES OUT



            1                                                           1
                                          1   1




Having only one player in the game is easy, you have one message coming in to the server,
saying the player has moved, for example, and one message coming back out, updating the
player with details from the server.
MESSAGES IN                                                   MESSAGES OUT



             2                                                             4
                                           1    2




                                            2   1




So say we now have two players, there is still only 1 message in from each player, but now
each player receives 2 messages back from the server; one for them, and one for the other
player.

This isn’t too bad, but notice how the server is having to send 4 messages – 2 for each
player.
MESSAGES IN                                                    MESSAGES OUT



             4                                                           16
                                             1    4

                                       4                1

                                       1                4

                                             4    1




4 players now, look how the server is having to send 16 messages, yet it only receives 4.

If you haven’t already noticed, the messages out from the server are the square of the
number of players.

But 16 messages out is alright, it’s hardly going to tax the server.
MESSAGES IN                                              MESSAGES OUT



           30                                                     900
                                           1    30

                                     30               1

                                     1                30

                                          30    1




So imagine if we now move into properly multiplayer territory.

30 players in the game would mean 30 messages coming in to the server, and 900 – NINE
HUNDRED – messages going out, every update. That’s a silly amount of data for just 30
people.

But let’s go further still…
MESSAGES IN                                                   MESSAGES OUT



        100                                                       10000
                                            1   100

                                    100                1

                                     1                100

                                          100   1




Say we go massively multiplayer and have 100 players in the game at one time.

It’s not so bad for each individual player, they send one message in and get 100 back – that’s
bearable.

But check out the server, it’s getting 100 messages in and is having to send out 10,000 back,
every update. That’s just a mentally stupid number that’s going to cause a lot of grief.
INTELLIGENCE
            Letting the game prioritise messages



Fortunately there is a way around this that cuts down the amount of messages sent; you just
need to send data only for players visible to another player, in essence filtering out game
data that doesn't affect the current player.

Another trick I used is to only send updates when a player is active and moving. If they
haven’t moved since the last frame and nothing else has changed then why bother sending
an update and wasting bandwidth?

These are such simple solutions, but ones that I never even considered at first.
RESPECTING TCP
               WebSockets uses TCP. Deal with it



Something else that I discovered is important to be aware of when making a game with
WebSockets is that you’re using TCP.

This is a problem as such, but it means that you need to play by a certain set of rules, and to
expect a certain set of issues.

By the way, I should point out that that you could argue that the icon that I’ve used could
represent WebSockets, but that’s not why I used it. It’s the US plug symbol and I just thought
it was funny because it looks like a surprised face. The UK plug symbol is boring in
comparison.
OBEY THE ORDER
                      You can’t do much about it



One issue with TCP is that packets will come through in order and get queued up if there are
any significant connection issues.

This can be a problem with a real-time game as it can cause hang-ups in the transmission
and subsequently a hang-up in the graphic display.

In short, the ordering issue can result in jumpy gameplay. Not fun.

With UDP this wouldn’t be so much of a problem, but we don’t have that luxury yet.
FORCED DELAY
          Giving time for mistakes to be corrected



I’ve not attacked the TCP issues head on yet, but one possible way to approach them is to
introduce some sort of delay into the game.

What I mean by this is that you would give every player a 100ms buffer in communication,
meaning that they are always 100ms behind the server in regards to what is going on.

If everyone is experiencing this buffer then it shouldn’t be too much of a problem, and
100ms is plenty of time for the game to catch up with resent packets and the like.

As for how to implement this, I’ve not looked into it yet.
USE SOCKET.IO
                    It intelligently drops messages



I use Socket.IO for all the WebSockets communication for Rawkets simply because it’s easy to
use and it has Flash fallback for browsers that don’t support the technology yet.

The cool thing about the latest version of Socket.IO, 0.7, is that is has introduced the concept
of volatile messages.

These volatile messages are completely voluntary, and messages sent with them aren't
actually sent if the client is having network problems, saving bandwidth for other more
important messages.

It’s not an ideal solution, but it’ll certainly help.
CHEATERS
                          A blessing and a curse



There’s no denying it, your code is going to be visible to anyone who wants to look at the
source.

I experienced this early on in the development of the game with players adding in their own
features, like invincibility, epic speed, rapid-fire, and even creating completely new weapons
like cluster bombs!

Now don’t get me wrong, I actually appreciate the cheaters because they highlighted all the
errors of my ways, for free. One of the benefits of the open nature of JavaScript is that it can
be looked at and poked very easily by others, which means that I can fix bugs quicker than if
I was testing on my own.
GLOBALS & CLOSURES
               Keeping the code wide open is bad



There are two reasons why cheating was so prevalent and so easy to do.

The first is that by keeping all the game code in the global namespace and not using any
closures, I was practically inviting people to come in and edit the game code. It was too easy
to do!

It was so easy in fact that after a few hours of releasing the first prototype, players were
already sharing code snippets that others could paste into their browser console to get new
features. Annoying, but pretty cool.
(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);


By adding my own “rawkets” namespace I was able to hide code away, and by deliberately
utilising closures and private variables I was able to further frustrate efforts by cheaters to
overwrite game functionality.

Plus the new namespace makes code so much neater.

Code manipulation isn’t something that I can prevent entirely, but I can at least make it as
difficult as possible.
CLIENT AUTHORITY
                  Power isn’t always a good thing



I’m not going to lie, the first version of Rawkets was way too trusting.

I used what is referred to as the authoritative client model, which basically means that the
client, the player, made all the decisions regarding its position and then sent those positions
to the server.

The server than trusted those positions and transmitted them to all the other players, which
is fine until the client edits their position and increments it by 100 pixel per frame, rather
than 5. Bad times.

This can be referred to as the “Here I am” approach.
SERVER AUTHORITY
                          Relinquish that power



The solution is to make the server authoritative, which means that you prevent manipulation
of the client’s code from doing any damage.

All the movement logic is now performed on the server, meaning that when a client moves it
simply lets the server know which direction it wants to move. From there the server calculates
the new position and sends it back to the client.

This can be referred to as the “Where am I?” approach, and if done right it can completely
remove the ability to cheat.
INHERENT LATENCY
    Server authority




                           40ms                            40ms
          Input                          Move                           Update
            +0                           +40                             +80


                 80ms total round-trip

However, the problem with the authoritative server model is that there is some inherent
latency within the system.

What I mean by this is that it obviously takes some time for a movement to be sent from the
client to the server, then for the server to move the client, and then for the server to send the
new position back again.

In the example here imagine that there is a 40ms latency between the client and server,
which means that a message sent to the server will take a total of 80ms to make the round-
trip.

The problem here is what happens during that 80ms period that you’re waiting for the
updated position? If you do nothing then there’s going to be an 80ms delay between you
pressing the up arrow and your rawket moving forward. Not good.
CLIENT PREDICTION
                    Server authority isn’t enough



To solve the latency issues with the authoritative server you need to implement some element
of prediction on the client.

What I mean by prediction is an ability for the client to guess, quite accurately, where it
should move the player before the message comes back from the server detailing the new
position.
INSTANT MOVEMENT
    Client prediction




                          40ms                            40ms
          Input                         Move                           Update
            +0                          +40                             +80


                        Prediction happens here

The prediction happens as soon as the client performs some sort of movement (a key-press,
etc), before the server has received the input.

All the prediction does is run the same physics as the server, based on the new input.

This is exactly as if were using the authoritative client model, apart from one important
difference.
CORRECTION
                     When prediction goes wrong



Whereas the authoritative client model would be in control, with the authoritative server
model and client prediction, the server is in control.

The whole point of using the authoritative server is because the client can’t be trusted. So it
makes sense that prediction can’t be trusted either.

To get around this you use periodically check the client position against the server and
perform a correction if necessary.

This may sound simple in concept, but it’s one of the hardest aspect of multiplayer gaming to
get right. Simply because it’s obvious when you get it wrong.
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();
             };
        };
   };


This is the Gaffer on Games approach by Glen Fiedler.

There are also other solutions, like Valve’s approach which is based on the old QuakeWorld
theory.

http://gafferongames.com/game-physics/networked-physics/
http://developer.valvesoftware.com/wiki/Latency_Compensating_Methods_in_Client/
Server_In-game_Protocol_Design_and_Optimization
STABILITY
                      Keeping the game running



Keeping the game running is massively important, especially while it’s in rapid development
and is prone to crashing (through errors of my own I must add).

I needed a way to automatically restart the game server if it crashed or something went
horribly wrong.
To do that I went with Monit scripts that monitor the WebSockets port for activity.

If the port is inactive for 3 separate checks in a row then the game is automatically restarted
in Node.

Ideally the game shouldn't crash, but this has proven to be a great solution that allows me to
continue rapidly developing the game without worrying about it going down permanently if
I'm not around.

http://mmonit.com/monit/
MONIT SCRIPT
    Keeping the game running




    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




Just as a quick example, here is the entire monit script for keeping the game up and running.

I’d say four lines of code was pretty impressive!

This effectively checks port 8000 on rawkets.com for an active tcp connection every cycle (60
seconds), and will only restart the game if there is a problem for at least 2 cycles.

The time between cycles can be changed in the monit configuration files.
INIT.D SCRIPT
    Keeping the game running



    #!/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


This is the init.d script that I use to start and stop the game server from the command line.

All it does is binds a particular set of shell commands to “start” and “stop” keywords, which I
use to start and stop the Node process for the game.

I’m not massively experienced with init.d scripts so I’m sure that it can probably be
optimised, but it works perfectly for my needs and is pretty damn cool.
WHY FLASH AUDIO?
                HTML5 Audio isn’t quite ready yet



So why in a proud HTML5 and JavaScript game have I resorted to Flash?

To put it bluntly, HTML5 Audio support is severely lacking in areas for the needs of game
development.

One particular example is support for looping, which is severely lacking and inconsistent
across most browsers.

Opera has the best implementation so far, but the rest all have some kind of pause between
loops, which makes short and constantly looping audio very obvious and annoying.

There are some solutions, like using JavaScript to try and loop the audio just before it is
finished, but none are ideal so I went with Flash audio until it gets fixed.
LOADS MORE
                 Multiplayer games teach you a lot



Stuff that I couldn’t fit in…

-   Canvas optimisation.
-   Using events to decouple game logic.
-   Using the same code for client and server.
-   setTimeout vs. requestAnimationFrame.
-   Storage.
-   Control system, like Seb’s.
THE FUTURE
                             What I’d like to see



There are a few things that I’d like to see in the near future to help with game development.

Need a way to benchmark browsers, connections and operating systems.
- Like Google Analytics, but for game performance and feature detection.
- Measuring FPS.
- Measuring network performance.

Better HTML5 audio.

Hardware accelerated canvas on Mac and mobile devices.

Better documentation.
ROB HAWKES
            @robhawkes




            Rawkes.com
            Personal website and blog

   RECENT PROJECTS                       MORE COOL STUFF


            Twitter sentiment analysis          Mozilla Technical Evangelist
            Delving into your soul.             My job


            Rawkets.com                         ExplicitWeb.co.uk
            HTML5 & WebSockets game.            Web development podcast.


Twitter - @robhawkes
Rawkes - http://rawkes.com
FOUNDATION HTML5 CANVAS
   My amazing book on canvas, animation, and making games.




                                               Out now

                                               Paperback and digital formats

                                               Become a canvas master

                                               Learn how to animate

                                               Make two cool space games

                                               RAWKES.COM/FOUNDATIONCANVAS




Book - available on Amazon right now

http://rawkes.com/foundationcanvas
DEV DERBY
    Experimenting with the latest Web technologies




                                                     Every month

                                                     This month is HTML5 video

                                                     Manipulate video with canvas

                                                     Win prizes (like an Android)

                                                     Next month is all about touch

                     DEVELOPER.MOZILLA.ORG/EN-US/DEMOS/DEVDERBY




Also, you should definitely take part in the Dev Derby, which is a monthly competition run by
the Mozilla Developer Network to see what can be done with the latest Web technologies.

This month the focus is on HTML5 video, which is pretty interesting considering that you can
manipulate it using the canvas.

The winners get cool prizes, like an Android phone. It’s a great excuse to play around with
these technologies.

https://developer.mozilla.org/en-US/demos/devderby
Thank you.

If you have any questions feel free to grab me on Twitter (@robhawkes), or email
rob@rawkes.com

More Related Content

Viewers also liked

Samsung YP-U4 Bilder
Samsung YP-U4 BilderSamsung YP-U4 Bilder
Samsung YP-U4 Bilder
julia135
 
Majalah INFO-UFO no 04
Majalah INFO-UFO no 04Majalah INFO-UFO no 04
Majalah INFO-UFO no 04
Nur Agustinus
 
eun
euneun
AQA English Unit 1 Section B
AQA English Unit 1 Section BAQA English Unit 1 Section B
AQA English Unit 1 Section B
missbec
 
HTML5 Technologies for Game Development - Web Directions Code
HTML5 Technologies for Game Development - Web Directions CodeHTML5 Technologies for Game Development - Web Directions Code
HTML5 Technologies for Game Development - Web Directions Code
Robin Hawkes
 
MOSAICA: Semantically Enhanced Multifaceted Collaborative Access to Cultural ...
MOSAICA: Semantically Enhanced Multifaceted Collaborative Access to Cultural ...MOSAICA: Semantically Enhanced Multifaceted Collaborative Access to Cultural ...
MOSAICA: Semantically Enhanced Multifaceted Collaborative Access to Cultural ...
Dov Winer
 
Session2 pl online_course_26_may2011
Session2  pl online_course_26_may2011Session2  pl online_course_26_may2011
Session2 pl online_course_26_may2011
LeslieOflahavan
 
LOS ASTRONOMOS-2
LOS ASTRONOMOS-2LOS ASTRONOMOS-2
LOS ASTRONOMOS-2
JAVIER DE LUCAS LINARES
 
Как мобильный интернет изменит электронную коммерцию
Как мобильный интернет изменит электронную коммерциюКак мобильный интернет изменит электронную коммерцию
Как мобильный интернет изменит электронную коммерцию
Oleg Nozhichkin
 
fclkarinabatat
fclkarinabatatfclkarinabatat
fclkarinabatat
Dov Winer
 
outreach presentation on pedestrian access
outreach presentation on pedestrian accessoutreach presentation on pedestrian access
outreach presentation on pedestrian access
sidsareen
 
2015teleyedaA
2015teleyedaA2015teleyedaA
2015teleyedaA
Dov Winer
 
YPT10J BENUTZERHANDBUCH
YPT10J BENUTZERHANDBUCHYPT10J BENUTZERHANDBUCH
YPT10J BENUTZERHANDBUCH
julia135
 
Rawkets - A Massively Multiplayer HTML5 Game [Mozilla GameOn10]
Rawkets - A Massively Multiplayer HTML5 Game [Mozilla GameOn10]Rawkets - A Massively Multiplayer HTML5 Game [Mozilla GameOn10]
Rawkets - A Massively Multiplayer HTML5 Game [Mozilla GameOn10]
Robin Hawkes
 
779 吴冠中画 2(Hys 2009)
779 吴冠中画 2(Hys 2009)779 吴冠中画 2(Hys 2009)
779 吴冠中画 2(Hys 2009)yangbqada
 
香港六合彩 » SlideShare
香港六合彩 » SlideShare香港六合彩 » SlideShare
香港六合彩 » SlideShare
hkohort
 
Timeline FB 2007-2010
Timeline FB 2007-2010Timeline FB 2007-2010
Timeline FB 2007-2010
Nur Agustinus
 
DETRAS DE LAS FORMULAS
DETRAS DE LAS FORMULASDETRAS DE LAS FORMULAS
DETRAS DE LAS FORMULAS
JAVIER DE LUCAS LINARES
 
Majalah scientiae (kliping ufo)
Majalah scientiae (kliping ufo)Majalah scientiae (kliping ufo)
Majalah scientiae (kliping ufo)Nur Agustinus
 

Viewers also liked (20)

Samsung YP-U4 Bilder
Samsung YP-U4 BilderSamsung YP-U4 Bilder
Samsung YP-U4 Bilder
 
Majalah INFO-UFO no 04
Majalah INFO-UFO no 04Majalah INFO-UFO no 04
Majalah INFO-UFO no 04
 
eun
euneun
eun
 
AQA English Unit 1 Section B
AQA English Unit 1 Section BAQA English Unit 1 Section B
AQA English Unit 1 Section B
 
HTML5 Technologies for Game Development - Web Directions Code
HTML5 Technologies for Game Development - Web Directions CodeHTML5 Technologies for Game Development - Web Directions Code
HTML5 Technologies for Game Development - Web Directions Code
 
MOSAICA: Semantically Enhanced Multifaceted Collaborative Access to Cultural ...
MOSAICA: Semantically Enhanced Multifaceted Collaborative Access to Cultural ...MOSAICA: Semantically Enhanced Multifaceted Collaborative Access to Cultural ...
MOSAICA: Semantically Enhanced Multifaceted Collaborative Access to Cultural ...
 
Session2 pl online_course_26_may2011
Session2  pl online_course_26_may2011Session2  pl online_course_26_may2011
Session2 pl online_course_26_may2011
 
LOS ASTRONOMOS-2
LOS ASTRONOMOS-2LOS ASTRONOMOS-2
LOS ASTRONOMOS-2
 
Как мобильный интернет изменит электронную коммерцию
Как мобильный интернет изменит электронную коммерциюКак мобильный интернет изменит электронную коммерцию
Как мобильный интернет изменит электронную коммерцию
 
fclkarinabatat
fclkarinabatatfclkarinabatat
fclkarinabatat
 
outreach presentation on pedestrian access
outreach presentation on pedestrian accessoutreach presentation on pedestrian access
outreach presentation on pedestrian access
 
2015teleyedaA
2015teleyedaA2015teleyedaA
2015teleyedaA
 
Back To The Real World
Back To The Real WorldBack To The Real World
Back To The Real World
 
YPT10J BENUTZERHANDBUCH
YPT10J BENUTZERHANDBUCHYPT10J BENUTZERHANDBUCH
YPT10J BENUTZERHANDBUCH
 
Rawkets - A Massively Multiplayer HTML5 Game [Mozilla GameOn10]
Rawkets - A Massively Multiplayer HTML5 Game [Mozilla GameOn10]Rawkets - A Massively Multiplayer HTML5 Game [Mozilla GameOn10]
Rawkets - A Massively Multiplayer HTML5 Game [Mozilla GameOn10]
 
779 吴冠中画 2(Hys 2009)
779 吴冠中画 2(Hys 2009)779 吴冠中画 2(Hys 2009)
779 吴冠中画 2(Hys 2009)
 
香港六合彩 » SlideShare
香港六合彩 » SlideShare香港六合彩 » SlideShare
香港六合彩 » SlideShare
 
Timeline FB 2007-2010
Timeline FB 2007-2010Timeline FB 2007-2010
Timeline FB 2007-2010
 
DETRAS DE LAS FORMULAS
DETRAS DE LAS FORMULASDETRAS DE LAS FORMULAS
DETRAS DE LAS FORMULAS
 
Majalah scientiae (kliping ufo)
Majalah scientiae (kliping ufo)Majalah scientiae (kliping ufo)
Majalah scientiae (kliping ufo)
 

Similar to Rawkets: An inside look at a multiplayer HTML5 game

All In - Final Presentation
All In - Final PresentationAll In - Final Presentation
All In - Final Presentation
freddiesulit
 
Building fast,scalable game server in node.js
Building fast,scalable game server in node.jsBuilding fast,scalable game server in node.js
Building fast,scalable game server in node.js
Xie ChengChao
 
Next mmorpg architecture-siggraph_asia2010
Next mmorpg architecture-siggraph_asia2010Next mmorpg architecture-siggraph_asia2010
Next mmorpg architecture-siggraph_asia2010
Jongwon Kim
 
Developing and Hosting Game Server on Cloud
Developing and Hosting Game Server on CloudDeveloping and Hosting Game Server on Cloud
Developing and Hosting Game Server on Cloud
ijtsrd
 
Build a serverless distributed Pong game with Azure
Build a serverless distributed Pong game with AzureBuild a serverless distributed Pong game with Azure
Build a serverless distributed Pong game with Azure
Marco Parenzan
 
Les 1 ppt
Les 1 pptLes 1 ppt
Les 1 ppt
caviar7571
 
Les 1 ppt
Les 1 pptLes 1 ppt
Les 1 ppt
gueste832a8e
 
Building Multiplayer Games (w/ Unity)
Building Multiplayer Games (w/ Unity)Building Multiplayer Games (w/ Unity)
Building Multiplayer Games (w/ Unity)
Noam Gat
 
Indie Game Development Intro
Indie Game Development IntroIndie Game Development Intro
Indie Game Development Intro
Juan Zamora, MSc. MBA
 
Text parser based interaction
Text parser based interactionText parser based interaction
Text parser based interaction
Michael Heron
 
BSidesDelhi 2018: Headshot - Game Hacking on macOS
BSidesDelhi 2018: Headshot - Game Hacking on macOSBSidesDelhi 2018: Headshot - Game Hacking on macOS
BSidesDelhi 2018: Headshot - Game Hacking on macOS
BSides Delhi
 
Realtime html5 multiplayer_games_with_node_js
Realtime html5 multiplayer_games_with_node_jsRealtime html5 multiplayer_games_with_node_js
Realtime html5 multiplayer_games_with_node_js
Mario Gonzalez
 
Pcsx2 readme 0.9.6
Pcsx2 readme 0.9.6Pcsx2 readme 0.9.6
Pcsx2 readme 0.9.6
Angel David
 
New tools and services to take your live ops to the next level
New tools and services to take your live ops to the next levelNew tools and services to take your live ops to the next level
New tools and services to take your live ops to the next level
Crystin Cox
 
CLUSTERED PEER-TO-PEER COMMUNICATION SYSTEM FOR MULTIPLAYER ONLINE GAMES
CLUSTERED PEER-TO-PEER COMMUNICATION SYSTEM FOR MULTIPLAYER ONLINE GAMES CLUSTERED PEER-TO-PEER COMMUNICATION SYSTEM FOR MULTIPLAYER ONLINE GAMES
CLUSTERED PEER-TO-PEER COMMUNICATION SYSTEM FOR MULTIPLAYER ONLINE GAMES
Yomna Mahmoud Ibrahim Hassan
 
Kafka & Storm - FifthElephant 2015 by @bhaskerkode, Helpshift
Kafka & Storm - FifthElephant 2015 by @bhaskerkode, HelpshiftKafka & Storm - FifthElephant 2015 by @bhaskerkode, Helpshift
Kafka & Storm - FifthElephant 2015 by @bhaskerkode, Helpshift
Bhasker Kode
 
What does OOP stand for?
What does OOP stand for?What does OOP stand for?
What does OOP stand for?
Colin Riley
 
Niamh's group minecraft distribution
Niamh's group minecraft distributionNiamh's group minecraft distribution
Niamh's group minecraft distribution
Great Baddow High School Media
 
ZNet Framework
ZNet FrameworkZNet Framework
ZNet Framework
Ray Yun
 
Outburst 3D
Outburst 3DOutburst 3D
Outburst 3D
Ægir Þorsteinsson
 

Similar to Rawkets: An inside look at a multiplayer HTML5 game (20)

All In - Final Presentation
All In - Final PresentationAll In - Final Presentation
All In - Final Presentation
 
Building fast,scalable game server in node.js
Building fast,scalable game server in node.jsBuilding fast,scalable game server in node.js
Building fast,scalable game server in node.js
 
Next mmorpg architecture-siggraph_asia2010
Next mmorpg architecture-siggraph_asia2010Next mmorpg architecture-siggraph_asia2010
Next mmorpg architecture-siggraph_asia2010
 
Developing and Hosting Game Server on Cloud
Developing and Hosting Game Server on CloudDeveloping and Hosting Game Server on Cloud
Developing and Hosting Game Server on Cloud
 
Build a serverless distributed Pong game with Azure
Build a serverless distributed Pong game with AzureBuild a serverless distributed Pong game with Azure
Build a serverless distributed Pong game with Azure
 
Les 1 ppt
Les 1 pptLes 1 ppt
Les 1 ppt
 
Les 1 ppt
Les 1 pptLes 1 ppt
Les 1 ppt
 
Building Multiplayer Games (w/ Unity)
Building Multiplayer Games (w/ Unity)Building Multiplayer Games (w/ Unity)
Building Multiplayer Games (w/ Unity)
 
Indie Game Development Intro
Indie Game Development IntroIndie Game Development Intro
Indie Game Development Intro
 
Text parser based interaction
Text parser based interactionText parser based interaction
Text parser based interaction
 
BSidesDelhi 2018: Headshot - Game Hacking on macOS
BSidesDelhi 2018: Headshot - Game Hacking on macOSBSidesDelhi 2018: Headshot - Game Hacking on macOS
BSidesDelhi 2018: Headshot - Game Hacking on macOS
 
Realtime html5 multiplayer_games_with_node_js
Realtime html5 multiplayer_games_with_node_jsRealtime html5 multiplayer_games_with_node_js
Realtime html5 multiplayer_games_with_node_js
 
Pcsx2 readme 0.9.6
Pcsx2 readme 0.9.6Pcsx2 readme 0.9.6
Pcsx2 readme 0.9.6
 
New tools and services to take your live ops to the next level
New tools and services to take your live ops to the next levelNew tools and services to take your live ops to the next level
New tools and services to take your live ops to the next level
 
CLUSTERED PEER-TO-PEER COMMUNICATION SYSTEM FOR MULTIPLAYER ONLINE GAMES
CLUSTERED PEER-TO-PEER COMMUNICATION SYSTEM FOR MULTIPLAYER ONLINE GAMES CLUSTERED PEER-TO-PEER COMMUNICATION SYSTEM FOR MULTIPLAYER ONLINE GAMES
CLUSTERED PEER-TO-PEER COMMUNICATION SYSTEM FOR MULTIPLAYER ONLINE GAMES
 
Kafka & Storm - FifthElephant 2015 by @bhaskerkode, Helpshift
Kafka & Storm - FifthElephant 2015 by @bhaskerkode, HelpshiftKafka & Storm - FifthElephant 2015 by @bhaskerkode, Helpshift
Kafka & Storm - FifthElephant 2015 by @bhaskerkode, Helpshift
 
What does OOP stand for?
What does OOP stand for?What does OOP stand for?
What does OOP stand for?
 
Niamh's group minecraft distribution
Niamh's group minecraft distributionNiamh's group minecraft distribution
Niamh's group minecraft distribution
 
ZNet Framework
ZNet FrameworkZNet Framework
ZNet Framework
 
Outburst 3D
Outburst 3DOutburst 3D
Outburst 3D
 

More from Robin Hawkes

ViziCities - Lessons Learnt Visualising Real-world Cities in 3D
ViziCities - Lessons Learnt Visualising Real-world Cities in 3DViziCities - Lessons Learnt Visualising Real-world Cities in 3D
ViziCities - Lessons Learnt Visualising Real-world Cities in 3D
Robin Hawkes
 
Understanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationUnderstanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisation
Robin Hawkes
 
Calculating building heights using a phone camera
Calculating building heights using a phone cameraCalculating building heights using a phone camera
Calculating building heights using a phone camera
Robin Hawkes
 
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big DataWebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
Robin Hawkes
 
Understanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationUnderstanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisation
Robin Hawkes
 
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGLViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL
Robin Hawkes
 
Beautiful Data Visualisation & D3
Beautiful Data Visualisation & D3Beautiful Data Visualisation & D3
Beautiful Data Visualisation & D3
Robin Hawkes
 
ViziCities: Making SimCity for the Real World
ViziCities: Making SimCity for the Real WorldViziCities: Making SimCity for the Real World
ViziCities: Making SimCity for the Real World
Robin Hawkes
 
The State of WebRTC
The State of WebRTCThe State of WebRTC
The State of WebRTC
Robin Hawkes
 
Bringing Cities to Life Using Big Data & WebGL
Bringing Cities to Life Using Big Data & WebGLBringing Cities to Life Using Big Data & WebGL
Bringing Cities to Life Using Big Data & WebGL
Robin Hawkes
 
Mobile App Development - Pitfalls & Helpers
Mobile App Development - Pitfalls & HelpersMobile App Development - Pitfalls & Helpers
Mobile App Development - Pitfalls & Helpers
Robin Hawkes
 
Boot to Gecko – The Web as a Platform
Boot to Gecko – The Web as a PlatformBoot to Gecko – The Web as a Platform
Boot to Gecko – The Web as a Platform
Robin Hawkes
 
Mozilla Firefox: Present and Future - Fluent JS
Mozilla Firefox: Present and Future - Fluent JSMozilla Firefox: Present and Future - Fluent JS
Mozilla Firefox: Present and Future - Fluent JS
Robin Hawkes
 
The State of HTML5 Games - Fluent JS
The State of HTML5 Games - Fluent JSThe State of HTML5 Games - Fluent JS
The State of HTML5 Games - Fluent JS
Robin Hawkes
 
MelbJS - Inside Rawkets
MelbJS - Inside RawketsMelbJS - Inside Rawkets
MelbJS - Inside Rawkets
Robin Hawkes
 
Melbourne Geek Night - Boot to Gecko – The Web as a Platform
Melbourne Geek Night - Boot to Gecko – The Web as a PlatformMelbourne Geek Night - Boot to Gecko – The Web as a Platform
Melbourne Geek Night - Boot to Gecko – The Web as a Platform
Robin Hawkes
 
Hacking with B2G – Web Apps and Customisation
Hacking with B2G – Web Apps and CustomisationHacking with B2G – Web Apps and Customisation
Hacking with B2G – Web Apps and Customisation
Robin Hawkes
 
MDN Hackday London - Open Web Games with HTML5 & JavaScript
MDN Hackday London - Open Web Games with HTML5 & JavaScriptMDN Hackday London - Open Web Games with HTML5 & JavaScript
MDN Hackday London - Open Web Games with HTML5 & JavaScript
Robin Hawkes
 
MDN Hackday London - Boot to Gecko: The Future of Mobile
MDN Hackday London - Boot to Gecko: The Future of MobileMDN Hackday London - Boot to Gecko: The Future of Mobile
MDN Hackday London - Boot to Gecko: The Future of Mobile
Robin Hawkes
 
Geek Meet - Boot to Gecko: The Future of Mobile?
Geek Meet - Boot to Gecko: The Future of Mobile?Geek Meet - Boot to Gecko: The Future of Mobile?
Geek Meet - Boot to Gecko: The Future of Mobile?
Robin Hawkes
 

More from Robin Hawkes (20)

ViziCities - Lessons Learnt Visualising Real-world Cities in 3D
ViziCities - Lessons Learnt Visualising Real-world Cities in 3DViziCities - Lessons Learnt Visualising Real-world Cities in 3D
ViziCities - Lessons Learnt Visualising Real-world Cities in 3D
 
Understanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationUnderstanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisation
 
Calculating building heights using a phone camera
Calculating building heights using a phone cameraCalculating building heights using a phone camera
Calculating building heights using a phone camera
 
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big DataWebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
 
Understanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationUnderstanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisation
 
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGLViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL
 
Beautiful Data Visualisation & D3
Beautiful Data Visualisation & D3Beautiful Data Visualisation & D3
Beautiful Data Visualisation & D3
 
ViziCities: Making SimCity for the Real World
ViziCities: Making SimCity for the Real WorldViziCities: Making SimCity for the Real World
ViziCities: Making SimCity for the Real World
 
The State of WebRTC
The State of WebRTCThe State of WebRTC
The State of WebRTC
 
Bringing Cities to Life Using Big Data & WebGL
Bringing Cities to Life Using Big Data & WebGLBringing Cities to Life Using Big Data & WebGL
Bringing Cities to Life Using Big Data & WebGL
 
Mobile App Development - Pitfalls & Helpers
Mobile App Development - Pitfalls & HelpersMobile App Development - Pitfalls & Helpers
Mobile App Development - Pitfalls & Helpers
 
Boot to Gecko – The Web as a Platform
Boot to Gecko – The Web as a PlatformBoot to Gecko – The Web as a Platform
Boot to Gecko – The Web as a Platform
 
Mozilla Firefox: Present and Future - Fluent JS
Mozilla Firefox: Present and Future - Fluent JSMozilla Firefox: Present and Future - Fluent JS
Mozilla Firefox: Present and Future - Fluent JS
 
The State of HTML5 Games - Fluent JS
The State of HTML5 Games - Fluent JSThe State of HTML5 Games - Fluent JS
The State of HTML5 Games - Fluent JS
 
MelbJS - Inside Rawkets
MelbJS - Inside RawketsMelbJS - Inside Rawkets
MelbJS - Inside Rawkets
 
Melbourne Geek Night - Boot to Gecko – The Web as a Platform
Melbourne Geek Night - Boot to Gecko – The Web as a PlatformMelbourne Geek Night - Boot to Gecko – The Web as a Platform
Melbourne Geek Night - Boot to Gecko – The Web as a Platform
 
Hacking with B2G – Web Apps and Customisation
Hacking with B2G – Web Apps and CustomisationHacking with B2G – Web Apps and Customisation
Hacking with B2G – Web Apps and Customisation
 
MDN Hackday London - Open Web Games with HTML5 & JavaScript
MDN Hackday London - Open Web Games with HTML5 & JavaScriptMDN Hackday London - Open Web Games with HTML5 & JavaScript
MDN Hackday London - Open Web Games with HTML5 & JavaScript
 
MDN Hackday London - Boot to Gecko: The Future of Mobile
MDN Hackday London - Boot to Gecko: The Future of MobileMDN Hackday London - Boot to Gecko: The Future of Mobile
MDN Hackday London - Boot to Gecko: The Future of Mobile
 
Geek Meet - Boot to Gecko: The Future of Mobile?
Geek Meet - Boot to Gecko: The Future of Mobile?Geek Meet - Boot to Gecko: The Future of Mobile?
Geek Meet - Boot to Gecko: The Future of Mobile?
 

Recently uploaded

Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Jeffrey Haguewood
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Project Management Semester Long Project - Acuity
Project Management Semester Long Project - AcuityProject Management Semester Long Project - Acuity
Project Management Semester Long Project - Acuity
jpupo2018
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
fredae14
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
Daiki Mogmet Ito
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 

Recently uploaded (20)

Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Project Management Semester Long Project - Acuity
Project Management Semester Long Project - AcuityProject Management Semester Long Project - Acuity
Project Management Semester Long Project - Acuity
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 

Rawkets: An inside look at a multiplayer HTML5 game

  • 1. Hi, I’m Rob Hawkes and I’m here today to give an inside look at the development of Rawkets, my HTML5 and JavaScript multiplayer space shooter. Throughout this talk I plan to take a journey through some of the issues that plagued early development of the game, and cover the subsequent solutions that helped resolve them. There’ll be some code, but I’m more interested in highlighting the concepts and theories involved. This talk is definitely light-hearted but I’ll be assuming some prior knowledge, so feel free to raise your hand throughout the talk if you want to explore an area further, or to simply ask a question.
  • 2. For those who don’t know much about about me… I’m a Technical Evangelist at Mozilla, which means that it’s my job to engage with developers about cool new technologies on the Web.
  • 3. Created by Phil Banks (@emirpprime) Aside from that I spend most of my time experimenting with HTML5 and other cool technologies. It’s fun!
  • 4. EXPERIMENTATION Rawkets is a graduate from my lab Rawkets is a project that originally came out of this experimentation, from a desire to learn more about WebSockets in regards to multiplayer gaming. Now, the game is much more mature and I’d consider it as a separate entity aside from the experiments. It’s something that I plan to develop and support way beyond the original scope of learning WebSockets.
  • 5. WHAT IS RAWKETS? Rawkes, WebSockets, and Rockets Rawkets stands for Rawkes (my blog), WebSockets, and Rockets.
  • 6. Rawkets is a multiplayer space game that allows you to shoot your friends in the face with HTML5 technologies. Still not really at a beta release level yet, hence the bugs you might notice in this video. http://rawkets.com
  • 7. By now you’ve probably realised that the graphics at the beginning of this talk and on the posters aren’t the real game graphics. They are actually an awesome “artists impression” illustration that I commissioned a guy called Reid Southen to create, although maybe when WebGL gets better it will become a reality. Who knows.
  • 8. It looks pretty awesome as a 6ft banner. So awesome in fact that my girlfriend actually asked me if I was going to put it up in our flat our not. She seemed pretty down about me saying no (it smells of ink and solvents). This is a photo of me in front of the banner at my university end-of-year show. If you think it looks small then let me put it into perspective by telling you that it’s about 8ft away. Read into that what you will.
  • 9. TECHNOLOGY Some of the tech involved in Web gaming There are a few key technologies that are involved in the development of the game. All of them bar one are tightly related to HTML or JavaScript.
  • 10. CANVAS 2D graphics platform Canvas for 2D graphics.
  • 11. FLASH AUDIO Sound effects and background music Flash audio for game sound effects and background music. I’ll explain why I use Flash over HTML5 Audio further on in the talk.
  • 12. WEBSOCKETS Multiplayer communication WebSockets is used for the communication between each player and the game server. For anyone not up to speed with WebSockets, it’s an upgraded HTTP connection that allows for fully bi-directional streaming communication.
  • 13. NODE.JS Game logic and communication Node is used as the game server, controlling the logic and handling the WebSockets connections to the players. It will eventually be used for player authentication and the storage of data so gameplay can persist over multiple game sessions. This is all made relatively easy with great third-party modules, like Socket.IO for WebSockets, and others that handle Redis and MongoDB for storage, for example.
  • 14. ISSUES Making a game can be a challenge It’s not all plain sailing when making a gaming using HTML5 and JavaScript. I’m going to cover a few of the main issues that tripped me up during the development of Rawkets.
  • 15. NETWORKING Not as easy as I thought Issues with networking have plagued development of the game right from the beginning. This probably stems from my lack of prior experience with socket connection and multiplayer gaming in general. In the original prototype of the game the network communication was woefully simple and everything was transmitted in a verbose format with no further thought. In hindsight it’s obvious why I was experiencing massive performance issues with the network communication. I was basically sending way too much data back and forth.
  • 16. MESSAGE PROTOCOL Structured and short communication One of the ways that I solved these problems was by implementing a structured protocol for the messages that are being sent and received. This included assigning each message type a number and using enumeration to represent those types in the code.
  • 17. ENUMERATION Message protocol types = { PING: 1, SYNC: 2, SYNC_COMPLETED: 3, NEW_PLAYER: 4, UPDATE_PLAYER: 5, UPDATE_INPUT: 6, REMOVE_PLAYER: 7 }; By enumerating the messages types like this I was able to refer to them in a verbose format within the code, but benefit from only sending the one or two digit number when transmitting a message. This is only possible if both the client and server follow the same protocol in regards to which number refers to which message type. It’s a simple but effective solution and allowed me to cut a large number of characters from transmitted messages.
  • 18. PACKAGE Message protocol { z: 1, id: 1234567890, s: { x: 5, y: 34, v: 3, a: 0.46 } } Put together with the message types, a full message package is put together as a JSON representation of a JavaScript object. All the other pieces of data are attached to the object with a key that is as short as possible. The z key that you can see above is a reserved key that is used solely for the message type. The other keys in this example are the player id and the player state.
  • 19. COMPRESSION Reducing data as much as possible Data in WebSockets is transmitted as verbose plain text, so it’s important to cut down and compress it as much as possible. Some of the ways that I’ve done this include rounding numerical values, reducing the length of words if they’re only used for reference, and generally removing any data that isn’t necessary. There is also BISON, which is a binary representation of JSON that can cut down the amount of data sent back and forth even further. http://kaijaeger.com/articles/introducing-bison-binary-interchange-standard.html
  • 20. RATE LIMITING Cutting down on communication Aside from the message protocol, one of the biggest issues with networking has been dealing with the sheer number of messages being sent back and forth during the lifetime of a game.
  • 21. MESSAGES IN MESSAGES OUT 1 1 1 1 Having only one player in the game is easy, you have one message coming in to the server, saying the player has moved, for example, and one message coming back out, updating the player with details from the server.
  • 22. MESSAGES IN MESSAGES OUT 2 4 1 2 2 1 So say we now have two players, there is still only 1 message in from each player, but now each player receives 2 messages back from the server; one for them, and one for the other player. This isn’t too bad, but notice how the server is having to send 4 messages – 2 for each player.
  • 23. MESSAGES IN MESSAGES OUT 4 16 1 4 4 1 1 4 4 1 4 players now, look how the server is having to send 16 messages, yet it only receives 4. If you haven’t already noticed, the messages out from the server are the square of the number of players. But 16 messages out is alright, it’s hardly going to tax the server.
  • 24. MESSAGES IN MESSAGES OUT 30 900 1 30 30 1 1 30 30 1 So imagine if we now move into properly multiplayer territory. 30 players in the game would mean 30 messages coming in to the server, and 900 – NINE HUNDRED – messages going out, every update. That’s a silly amount of data for just 30 people. But let’s go further still…
  • 25. MESSAGES IN MESSAGES OUT 100 10000 1 100 100 1 1 100 100 1 Say we go massively multiplayer and have 100 players in the game at one time. It’s not so bad for each individual player, they send one message in and get 100 back – that’s bearable. But check out the server, it’s getting 100 messages in and is having to send out 10,000 back, every update. That’s just a mentally stupid number that’s going to cause a lot of grief.
  • 26. INTELLIGENCE Letting the game prioritise messages Fortunately there is a way around this that cuts down the amount of messages sent; you just need to send data only for players visible to another player, in essence filtering out game data that doesn't affect the current player. Another trick I used is to only send updates when a player is active and moving. If they haven’t moved since the last frame and nothing else has changed then why bother sending an update and wasting bandwidth? These are such simple solutions, but ones that I never even considered at first.
  • 27. RESPECTING TCP WebSockets uses TCP. Deal with it Something else that I discovered is important to be aware of when making a game with WebSockets is that you’re using TCP. This is a problem as such, but it means that you need to play by a certain set of rules, and to expect a certain set of issues. By the way, I should point out that that you could argue that the icon that I’ve used could represent WebSockets, but that’s not why I used it. It’s the US plug symbol and I just thought it was funny because it looks like a surprised face. The UK plug symbol is boring in comparison.
  • 28. OBEY THE ORDER You can’t do much about it One issue with TCP is that packets will come through in order and get queued up if there are any significant connection issues. This can be a problem with a real-time game as it can cause hang-ups in the transmission and subsequently a hang-up in the graphic display. In short, the ordering issue can result in jumpy gameplay. Not fun. With UDP this wouldn’t be so much of a problem, but we don’t have that luxury yet.
  • 29. FORCED DELAY Giving time for mistakes to be corrected I’ve not attacked the TCP issues head on yet, but one possible way to approach them is to introduce some sort of delay into the game. What I mean by this is that you would give every player a 100ms buffer in communication, meaning that they are always 100ms behind the server in regards to what is going on. If everyone is experiencing this buffer then it shouldn’t be too much of a problem, and 100ms is plenty of time for the game to catch up with resent packets and the like. As for how to implement this, I’ve not looked into it yet.
  • 30. USE SOCKET.IO It intelligently drops messages I use Socket.IO for all the WebSockets communication for Rawkets simply because it’s easy to use and it has Flash fallback for browsers that don’t support the technology yet. The cool thing about the latest version of Socket.IO, 0.7, is that is has introduced the concept of volatile messages. These volatile messages are completely voluntary, and messages sent with them aren't actually sent if the client is having network problems, saving bandwidth for other more important messages. It’s not an ideal solution, but it’ll certainly help.
  • 31. CHEATERS A blessing and a curse There’s no denying it, your code is going to be visible to anyone who wants to look at the source. I experienced this early on in the development of the game with players adding in their own features, like invincibility, epic speed, rapid-fire, and even creating completely new weapons like cluster bombs! Now don’t get me wrong, I actually appreciate the cheaters because they highlighted all the errors of my ways, for free. One of the benefits of the open nature of JavaScript is that it can be looked at and poked very easily by others, which means that I can fix bugs quicker than if I was testing on my own.
  • 32. GLOBALS & CLOSURES Keeping the code wide open is bad There are two reasons why cheating was so prevalent and so easy to do. The first is that by keeping all the game code in the global namespace and not using any closures, I was practically inviting people to come in and edit the game code. It was too easy to do! It was so easy in fact that after a few hours of releasing the first prototype, players were already sharing code snippets that others could paste into their browser console to get new features. Annoying, but pretty cool.
  • 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); By adding my own “rawkets” namespace I was able to hide code away, and by deliberately utilising closures and private variables I was able to further frustrate efforts by cheaters to overwrite game functionality. Plus the new namespace makes code so much neater. Code manipulation isn’t something that I can prevent entirely, but I can at least make it as difficult as possible.
  • 34. CLIENT AUTHORITY Power isn’t always a good thing I’m not going to lie, the first version of Rawkets was way too trusting. I used what is referred to as the authoritative client model, which basically means that the client, the player, made all the decisions regarding its position and then sent those positions to the server. The server than trusted those positions and transmitted them to all the other players, which is fine until the client edits their position and increments it by 100 pixel per frame, rather than 5. Bad times. This can be referred to as the “Here I am” approach.
  • 35. SERVER AUTHORITY Relinquish that power The solution is to make the server authoritative, which means that you prevent manipulation of the client’s code from doing any damage. All the movement logic is now performed on the server, meaning that when a client moves it simply lets the server know which direction it wants to move. From there the server calculates the new position and sends it back to the client. This can be referred to as the “Where am I?” approach, and if done right it can completely remove the ability to cheat.
  • 36. INHERENT LATENCY Server authority 40ms 40ms Input Move Update +0 +40 +80 80ms total round-trip However, the problem with the authoritative server model is that there is some inherent latency within the system. What I mean by this is that it obviously takes some time for a movement to be sent from the client to the server, then for the server to move the client, and then for the server to send the new position back again. In the example here imagine that there is a 40ms latency between the client and server, which means that a message sent to the server will take a total of 80ms to make the round- trip. The problem here is what happens during that 80ms period that you’re waiting for the updated position? If you do nothing then there’s going to be an 80ms delay between you pressing the up arrow and your rawket moving forward. Not good.
  • 37. CLIENT PREDICTION Server authority isn’t enough To solve the latency issues with the authoritative server you need to implement some element of prediction on the client. What I mean by prediction is an ability for the client to guess, quite accurately, where it should move the player before the message comes back from the server detailing the new position.
  • 38. INSTANT MOVEMENT Client prediction 40ms 40ms Input Move Update +0 +40 +80 Prediction happens here The prediction happens as soon as the client performs some sort of movement (a key-press, etc), before the server has received the input. All the prediction does is run the same physics as the server, based on the new input. This is exactly as if were using the authoritative client model, apart from one important difference.
  • 39. CORRECTION When prediction goes wrong Whereas the authoritative client model would be in control, with the authoritative server model and client prediction, the server is in control. The whole point of using the authoritative server is because the client can’t be trusted. So it makes sense that prediction can’t be trusted either. To get around this you use periodically check the client position against the server and perform a correction if necessary. This may sound simple in concept, but it’s one of the hardest aspect of multiplayer gaming to get right. Simply because it’s obvious when you get it wrong.
  • 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(); }; }; }; This is the Gaffer on Games approach by Glen Fiedler. There are also other solutions, like Valve’s approach which is based on the old QuakeWorld theory. http://gafferongames.com/game-physics/networked-physics/ http://developer.valvesoftware.com/wiki/Latency_Compensating_Methods_in_Client/ Server_In-game_Protocol_Design_and_Optimization
  • 41. STABILITY Keeping the game running Keeping the game running is massively important, especially while it’s in rapid development and is prone to crashing (through errors of my own I must add). I needed a way to automatically restart the game server if it crashed or something went horribly wrong.
  • 42. To do that I went with Monit scripts that monitor the WebSockets port for activity. If the port is inactive for 3 separate checks in a row then the game is automatically restarted in Node. Ideally the game shouldn't crash, but this has proven to be a great solution that allows me to continue rapidly developing the game without worrying about it going down permanently if I'm not around. http://mmonit.com/monit/
  • 43. MONIT SCRIPT Keeping the game running 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 Just as a quick example, here is the entire monit script for keeping the game up and running. I’d say four lines of code was pretty impressive! This effectively checks port 8000 on rawkets.com for an active tcp connection every cycle (60 seconds), and will only restart the game if there is a problem for at least 2 cycles. The time between cycles can be changed in the monit configuration files.
  • 44. INIT.D SCRIPT Keeping the game running #!/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 This is the init.d script that I use to start and stop the game server from the command line. All it does is binds a particular set of shell commands to “start” and “stop” keywords, which I use to start and stop the Node process for the game. I’m not massively experienced with init.d scripts so I’m sure that it can probably be optimised, but it works perfectly for my needs and is pretty damn cool.
  • 45. WHY FLASH AUDIO? HTML5 Audio isn’t quite ready yet So why in a proud HTML5 and JavaScript game have I resorted to Flash? To put it bluntly, HTML5 Audio support is severely lacking in areas for the needs of game development. One particular example is support for looping, which is severely lacking and inconsistent across most browsers. Opera has the best implementation so far, but the rest all have some kind of pause between loops, which makes short and constantly looping audio very obvious and annoying. There are some solutions, like using JavaScript to try and loop the audio just before it is finished, but none are ideal so I went with Flash audio until it gets fixed.
  • 46. LOADS MORE Multiplayer games teach you a lot Stuff that I couldn’t fit in… - Canvas optimisation. - Using events to decouple game logic. - Using the same code for client and server. - setTimeout vs. requestAnimationFrame. - Storage. - Control system, like Seb’s.
  • 47. THE FUTURE What I’d like to see There are a few things that I’d like to see in the near future to help with game development. Need a way to benchmark browsers, connections and operating systems. - Like Google Analytics, but for game performance and feature detection. - Measuring FPS. - Measuring network performance. Better HTML5 audio. Hardware accelerated canvas on Mac and mobile devices. Better documentation.
  • 48. ROB HAWKES @robhawkes Rawkes.com Personal website and blog RECENT PROJECTS MORE COOL STUFF Twitter sentiment analysis Mozilla Technical Evangelist Delving into your soul. My job Rawkets.com ExplicitWeb.co.uk HTML5 & WebSockets game. Web development podcast. Twitter - @robhawkes Rawkes - http://rawkes.com
  • 49. FOUNDATION HTML5 CANVAS My amazing book on canvas, animation, and making games. Out now Paperback and digital formats Become a canvas master Learn how to animate Make two cool space games RAWKES.COM/FOUNDATIONCANVAS Book - available on Amazon right now http://rawkes.com/foundationcanvas
  • 50. DEV DERBY Experimenting with the latest Web technologies Every month This month is HTML5 video Manipulate video with canvas Win prizes (like an Android) Next month is all about touch DEVELOPER.MOZILLA.ORG/EN-US/DEMOS/DEVDERBY Also, you should definitely take part in the Dev Derby, which is a monthly competition run by the Mozilla Developer Network to see what can be done with the latest Web technologies. This month the focus is on HTML5 video, which is pretty interesting considering that you can manipulate it using the canvas. The winners get cool prizes, like an Android phone. It’s a great excuse to play around with these technologies. https://developer.mozilla.org/en-US/demos/devderby
  • 51. Thank you. If you have any questions feel free to grab me on Twitter (@robhawkes), or email rob@rawkes.com