This document provides an overview of Rob Hawkes' talk about the development of his HTML5 and JavaScript multiplayer space shooter game called Rawkets. Some key issues in developing the game included controlling animation loops, dealing with networking problems, limiting cheating, and addressing latency from the server-authoritative model. Solutions involved using requestAnimationFrame, structuring network protocols, securing the code, and adding prediction to the client.
NY HTML5 - Game Development with HTML5 & JavaScriptRobin Hawkes
In this talk I will bring you up to speed with using HTML5 tools and techniques for game development. I will discuss some basic and advanced techniques and highlight the key lessons that I've learnt, as well as the technologies and game engines that you should be aware of.
Tomorrow's Web and Future Technologies - WDC2011Robin Hawkes
The future of the Web is awesome, it's as simple as that. Just think about it, we'll soon have the ability to construct an entire phone OS with HTML5 and JavaScript. Now that is seriously cool! But what are the technologies that are coming, and which ones should you be keeping an eye on? In this session, Rob will give you an insight into the future of the Web, highlighting some the key technologies that are moving it into a new era.
Open Web Games with HTML5 & JavaScriptRobin Hawkes
In this talk Rob will highlight the key technologies and events that are going to affect open Web game development in the near future. He will also demo some of these new technologies and show how easy it is to share your game and make money from it using the open and distributed Mozilla Labs Apps project.
Open Web Apps and the Mozilla Labs Apps projectRobin Hawkes
In this talk Rob will introduce the Mozilla Labs Apps project and the related technologies that are helping it happen. The aim of this project is to produce an apps eco-system on the Web that uses open technologies and gives developers and users the freedom to sell and use apps in the way they want.
Aside from the conceptual issues that this project tackles, Rob will also cover some of the JavaScript APIs that are being worked on to provide the necessary functionality for apps. It is these APIs that allow developers to create an immersive experience within their apps that they wouldn't have been able to achieve in the browser until now.
NY HTML5 - Game Development with HTML5 & JavaScriptRobin Hawkes
In this talk I will bring you up to speed with using HTML5 tools and techniques for game development. I will discuss some basic and advanced techniques and highlight the key lessons that I've learnt, as well as the technologies and game engines that you should be aware of.
Tomorrow's Web and Future Technologies - WDC2011Robin Hawkes
The future of the Web is awesome, it's as simple as that. Just think about it, we'll soon have the ability to construct an entire phone OS with HTML5 and JavaScript. Now that is seriously cool! But what are the technologies that are coming, and which ones should you be keeping an eye on? In this session, Rob will give you an insight into the future of the Web, highlighting some the key technologies that are moving it into a new era.
Open Web Games with HTML5 & JavaScriptRobin Hawkes
In this talk Rob will highlight the key technologies and events that are going to affect open Web game development in the near future. He will also demo some of these new technologies and show how easy it is to share your game and make money from it using the open and distributed Mozilla Labs Apps project.
Open Web Apps and the Mozilla Labs Apps projectRobin Hawkes
In this talk Rob will introduce the Mozilla Labs Apps project and the related technologies that are helping it happen. The aim of this project is to produce an apps eco-system on the Web that uses open technologies and gives developers and users the freedom to sell and use apps in the way they want.
Aside from the conceptual issues that this project tackles, Rob will also cover some of the JavaScript APIs that are being worked on to provide the necessary functionality for apps. It is these APIs that allow developers to create an immersive experience within their apps that they wouldn't have been able to achieve in the browser until now.
Geek Meet - Boot to Gecko: The Future of Mobile?Robin Hawkes
In this talk I will outline Mozilla’s Boot to Gecko project that aims to revolutionise the way we develop for mobile devices. I’ll highlight the key technologies involved in its creation and explain why a mobile experience created with HTML and JavaScript is a good idea.
MDN Hackday London - Boot to Gecko: The Future of MobileRobin Hawkes
In this talk Rob will outline Mozilla’s Boot to Gecko project that aims to revolutionise the way we develop for mobile devices. I’ll highlight the key technologies involved in its creation and explain why a mobile experience created with HTML and JavaScript is a good idea.
Which are the possible business models for Open projects like Open Design and Open Hardware? And what about running a Fab Lab or a similar place? Which strategies can we adopt in order to have successful DIY
Craft projects? People that want to organize collaborative spaces or companies need to think about how to run their business in a sustainable way, but even single or groups of Open Designers could get more insights for their project if they discover the possible business models. Let's have a look at the existing markets, the common business models and the possible future scenarios.
Pada tahun 1982, saya bersama beberapa teman di SMAK Frateran Surabaya yang tergabung dalam OMEGA (Organisasi Masyarakat Eksplorasi Gejala Antariksa) mengadakan sejumlah percobaan roket. Kepala sekolah SMAK Frateran, Frater Adolfus (alm) mengirim saya dan Richard Santoso ke acara Perkemahan Ilmiah Remaja LIPI pada tanggal 26 Desember 1982 hingga 1 Januari 1983 (saat saya kelas 3 SMA).
Foto-foto lain bisa dilihat di
1. http://tinyurl.com/z2rus82
2. http://tinyurl.com/grbegvx
Geek Meet - Boot to Gecko: The Future of Mobile?Robin Hawkes
In this talk I will outline Mozilla’s Boot to Gecko project that aims to revolutionise the way we develop for mobile devices. I’ll highlight the key technologies involved in its creation and explain why a mobile experience created with HTML and JavaScript is a good idea.
MDN Hackday London - Boot to Gecko: The Future of MobileRobin Hawkes
In this talk Rob will outline Mozilla’s Boot to Gecko project that aims to revolutionise the way we develop for mobile devices. I’ll highlight the key technologies involved in its creation and explain why a mobile experience created with HTML and JavaScript is a good idea.
Which are the possible business models for Open projects like Open Design and Open Hardware? And what about running a Fab Lab or a similar place? Which strategies can we adopt in order to have successful DIY
Craft projects? People that want to organize collaborative spaces or companies need to think about how to run their business in a sustainable way, but even single or groups of Open Designers could get more insights for their project if they discover the possible business models. Let's have a look at the existing markets, the common business models and the possible future scenarios.
Pada tahun 1982, saya bersama beberapa teman di SMAK Frateran Surabaya yang tergabung dalam OMEGA (Organisasi Masyarakat Eksplorasi Gejala Antariksa) mengadakan sejumlah percobaan roket. Kepala sekolah SMAK Frateran, Frater Adolfus (alm) mengirim saya dan Richard Santoso ke acara Perkemahan Ilmiah Remaja LIPI pada tanggal 26 Desember 1982 hingga 1 Januari 1983 (saat saya kelas 3 SMA).
Foto-foto lain bisa dilihat di
1. http://tinyurl.com/z2rus82
2. http://tinyurl.com/grbegvx
MOSAICA: Semantically Enhanced Multifaceted Collaborative Access to Cultural ...Dov Winer
Description of the Mosaica project that ran from 2006 to 2008 developing a toolbox of generic technologies for intelligent presentation, knowledge-based discovery, and interactive and creative educational experience covering a broad variety of diversified cultural heritages requirements.
HTML5 Technologies for Game Development - Web Directions CodeRobin Hawkes
With Angry Birds, Cut the Rope and other blockbuster games now working in modern web browsers, it’s fair to say native, browser based gaming has arrived for real. But how do they do it? In the session, Mozilla Technical Evangelist Rob Hawkes looks at the features now in your browsers to help develop games (and other interactive web based experiences) including canvas and WebGL, HTML5 Audio, Pointer Lock and the Gamepad API.
MDN Hackday London - Open Web Games with HTML5 & JavaScriptRobin Hawkes
In this talk I will give you an overview of the new role that browsers are adopting to support games and the technologies and processes that are helping that happen. This includes areas like 2D graphics with canvas, console-like 3D games with WebGL, gamepad support, immersive full-screen experiences, multiplayer games with WebSockets, and much more.
An introduction to a few common research methods used in UX design. Presented at Open Network Lab's Data Conference in Tokyo, Japan, June 22, 2012.
http://onlabdataconf.peatix.com
Vi hör om och läser många tips om hur man "ska" göra i ett agilt team, och vad som "måste" vara på plats i omgivningen för att agilt ska "fungera". Men tänk om det inte finns en sanning, ett enda rätt sätt att göra par-rotering på, eller vad en Scrum Master får eller inte får göra? Kan våra ideal vara hinder snarare än hjälp? Finns det något sätt att avgöra vad som är "rätt" sätt just för mig och mitt team?
Talare är Thomas Nilsson från Responsive AB
ViziCities - Lessons Learnt Visualising Real-world Cities in 3DRobin Hawkes
ViziCities is an open-source 3D city visualisation platform powered by JavaScript, WebGL and many other cutting-edge Web technologies. Think SimCity meets the real world!
In this talk, Robin Hawkes, ViziCities’ creator will highlight the development issues experienced along the way and show you how he overcame them – ranging from how you tackle the realtime processing of thousands of 3D buildings without locking up the browser, to how you visualise the entire world without needing a server or your own geographic data source.
Understanding cities using ViziCities and 3D data visualisationRobin Hawkes
ViziCities is an open-source 3D city visualisation platform powered by open data, WebGL and many other cutting-edge Web technologies. ViziCities not only allows you to explore any city in the world in 3D in your browser, it also lets you overlay data like live transport, crime, pollution, live social data, and weather. Think SimCity meets the real world!
In this talk, Robin Hawkes, ViziCities’ founder will introduce you to the project and demonstrate its powerful methods for visualising the complex data locked within our cities.
WebVisions – ViziCities: Bringing Cities to Life Using Big DataRobin Hawkes
Imagine being able to explore any city in the world in 3D in your browser. Now imagine being able to overlay data onto your city - transport, crime, pollution, social data and weather - all live and in real time…and it was open source!
In this session Peter and Robin will talk about how they're creating ViziCities, an open-source, 3D visualisation platform, combining cutting-edge web technologies with open data to create beautiful visualisations. If you can’t imagine it…imagine SimCity for real life.
We’ll discuss the power that new types of visualisation present for all of us to better see, understand and make decisions in our worlds.
We’ll guide you through the technologies we're using, including D3 and WebGL, the design approach we’re using and share some important lessons learnt along the way.
By the end, we hope to have inspired you to start experimenting with these technologies to create beautiful visualisations of your own.
Understanding cities using ViziCities and 3D data visualisationRobin Hawkes
ViziCities is an open-source 3D city visualisation platform powered by OpenStreetMap, WebGL and many other cutting-edge Web technologies. ViziCities not only allows you to explore any city in the world in 3D in your browser, it also lets you overlay data like live transport, crime, pollution, live social data, and weather. Think SimCity meets the real world!
In this talk, Robin Hawkes, ViziCities' co-creator and Lead Developer will introduce you to the project and demonstrate its powerful methods for visualising the complex data locked within our cities.
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGLRobin Hawkes
ViziCities is an open-source 3D city visualisation platform powered by OpenStreetMap, WebGL and many other cutting-edge Web technologies. Think SimCity meets the real world!
In this talk, Robin Hawkes, ViziCities' co-creator and Lead Developer will highlight the development issues experienced along the way and show you how he overcame them – ranging from how you tackle the realtime processing of thousands of 3D buildings without locking up the browser, to how you visualise the entire world without needing a server or your own geographic data source.
In this talk, I introduce D3.js as a powerful tool for beautiful data visualisation in the browser. I highlight some particularly impressive visualisations created using D3.js, and also look into some of the more obscure things it can be used for.
WebRTC brings peer-to-peer networking to the browser, and it's here to stay. So what is WebRTC? How does it work? How do you use it? And what are others doing with it? In this talk, Rob covers the current state of WebRTC, outlines how to use it, and shows off some of the amazing things that it can do beyond video chat.
Bringing Cities to Life Using Big Data & WebGLRobin Hawkes
We're creating ViziCities - a 3D city-visualisation platform using WebGL (Three.js) and a raft of other amazing technologies. We'll talk about how we're doing it all with open, big-data, the awesome possibilities that presents and how we've overcome the problems along the way. Think SimCity meets the real world!
Sign up for the beta at http://vizicities.com
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
"Impact of front-end architecture on development cost", Viktor TurskyiFwdays
I have heard many times that architecture is not important for the front-end. Also, many times I have seen how developers implement features on the front-end just following the standard rules for a framework and think that this is enough to successfully launch the project, and then the project fails. How to prevent this and what approach to choose? I have launched dozens of complex projects and during the talk we will analyze which approaches have worked for me and which have not.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
MelbJS - Inside Rawkets
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.
2. If you don’t already know, I work at Mozilla.
My official job title is Technical Evangelist, but I prefer Rawket Scientist, which is what it says
on my business card.
Part of my job is to engage with developers like you and me about cool new technologies on
the Web.
3. Throughout this talk I plan to take a quick journey through some of the issues that plagued
early development of the game, and cover the subsequent solutions that helped resolve
them.
4. ion
t
ta lab
e n
erim from m y
Exp ate
adu
a gr
is
kets
Raw
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. ts ?
ke
aw ckets
is R Ro
at ts,
d
an
Wh ocke
bS
s, We
ke
Raw
Rawkets stands for Rawkes (a merging of my names), as well as WebSockets, and Rockets.
6. Rawkets is a multiplayer space game that allows you to shoot your friends in the face with
HTML5 technologies.
It’s 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.
Perhaps 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 pretty horrible).
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.
9. es
u
ss ge
I n lle
ha
ac
be
an
esc
gam
aking
M
It’s not all plain sailing when making a game using HTML5 and JavaScript.
I’m going to cover a few of the main issues that tripped me up during the development of
Rawkets.
10. io n
a t
n im ontrol
g a r in
c
akin ow
se
we he
br
T uttin
gt
P
One of the simplest fixes is to stop using setTimeout or setInterval and to use
requestAnimationFrame instead.
If you use setTimeout or setInterval and don’t manage it then you put a huge amount of
stress on the CPU and continue that stress even if you switch tabs or minimise the browser.
By using requestAnimationFrame you give the browser control over when a new animation
loop should occur, reducing load on the CPU and saving battery life on mobile devices.
requestAnimationFrame also automatically limits the number of updates if you switch to
another tab or minimise the browser, again saving resources and keeping your players happy.
Right now you can’t easily set a specific framerate when using requestAnimationFrame but so
long as you use time-based updates (not frame-based) in your game then you’ll be fine.
11. in g
o rk
etw ug
ht
N Itho
y as
as
se
ta
No
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.
12. col
to n
ro atio
e p
sag mun
ic
es tcom
M hor
ds
an
ured
ct
Stru
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.
13. Enumeration
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.
14. Message package
MSG_ID PLAYER_ID TIMESTAMP X Y
1 | 1234567890 | 1316763202872 | 5 | 34
Put together with the message types, a full message package is put together as a simple
string 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 MSG_ID that you can see above is a reserved key that is used solely for the message type.
The other items in this example are the player id, timestamp, and the player position.
15. io n
s
es ible
pr ss
om po
C uch
as
asm
ata
gd
cin
du
Re
Data in WebSockets is normally 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.
16. ge s
essa ion
m icat
ary mun
Bin ste
rcom
, fa
er
rt
sho
en
Ev
I never got around to implementing this but there is now binary message support in
WebSockets.
By switching to binary you can reduce the size of your messages by a noticeable amount
while also increasing the amount of data that you can transmit at a single point in time.
http://hobbycoding.posterous.com/websockt-binary-data-transfer-benchmark-rsult
http://hobbycoding.posterous.com/the-fastest-websocket-module-for-nodejs
17. in g
it
lim ation
ate un
ic
R om
m
c
n on
ow
gd
uttin
C
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.
18. 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.
19. 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.
20. 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.
21. 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…
22. 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.
23. nce
lige es
tel essag
In se m
iti
prior
e
am
theg
tting
Le
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.
24. TC P
ing
ect lw
ith
it
esp .D
ea
R sesT
CP
etsu
ck
So
Web
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.
25. e r
ord
th e ou
t it
ey ab
Ob om
uch
’t d
can
You
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. Although
similar protocols are in the pipeline and may make their way into our lives relatively soon,
things like Media Streaming APIs and WebRTC.
26. ters
ea
Ch urse
ac
and
ssing
ble
A
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.
27. a d
b
a re pen
als ide
o
lob ew
G pc
od
ee
’t k
Don
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
anything like 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 actually pretty cool.
28. rity
o
th hing
a u
nt oo
dt
Clie ys
ag
a
alw
’t
isn
er
Pow
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.
29. ri ty
o
th wer
a u
r
ve ish th at
po
er
S elinqu
R
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.
30. Inherent latency
40ms 40ms
Client Server Client
+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.
31. io n
dict h
pre no
ug
nt ’t e
Clie hority isn
ut
vera
Ser
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.
32. Instant movement
40ms 40ms
Client Server Client
+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.
33. ion
ct
re rong
or
C oesw
ng
tio
redic
p
hen
W
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.
34. ility
b
ta ning
S un
er
am
theg
ping
Kee
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.
I also needed a way to scale the game and keep it running as fast as possible.
35. Forever
I use a little Node module called Forever. It’s amazing!
https://github.com/nodejitsu/forever
36. Forever
forever start game.js
All I have to do now is make sure the game process quits on a catastrophic error and Forever
will automatically restart it for me.
Using Forever is as simple as installing the module with NPM and then starting your Node
script using the Forever demon. The rest is taken care of for you.
37. Hook.io
Some of you may also be interested in hook.io, which can help create more stable Node
applications.
The concept is to decouple your application logic by breaking it into individual processes so
that if one process goes down the rest can continue to run and your entire game doesn’t
crash.
You use hook.io through its event system that lets you communicate between these separate
processes, regardless of whether they’re on the same server or not. It’s a pretty cool concept.
https://github.com/hookio/hook.io
38. Rob Hawkes
@robhawkes
Rawkes.com
Personal website and blog
RECENT PROJECTS MORE COOL STUFF
Twitter sentiment analysis Rawket Scientist
Delving into your soul Technical Evangelist at Mozilla
Rawkets.com Slides
HTML5 & WebSockets game slideshare.net/robhawkes
Get in touch with me on Twitter: @robhawkes
Follow my blog (Rawkes) to keep up to date with stuff that I’m working on: http://
rawkes.com
I’ve recently worked on a project that analyses sentiment on Twitter: http://rawkes.com/
blog/2011/05/05/people-love-a-good-smooch-on-a-balcony
Rawkets is my multiplayer HTML5 and JavaScript game. Play it, it’s fun: http://rawkets.com
These slides are online at http://slideshare.net/robhawkes