Rob Hawkes gives a talk about creating games using HTML5 and JavaScript. He discusses technologies like Canvas, WebGL, WebSockets, and the Gamepad API. Hawkes shows examples of existing HTML5 games and demos the Gamepad API. He encourages the audience to try HTML5 game development and recommends game engines like Impact.js and Crafty.js. Hawkes concludes by sharing his contact information and projects.
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.
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.
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.
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.
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.
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.
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.
Providing content for education: the eJewish.info repository of Jewish Resources in the Internet. The Second EVA/MINERVA Jerusalem International Conference on Digitisation of Cultural Heritage, Beth Shmuel, Jerusalem, November 29-30, 2005.
Explanation of the policies of the European Union, the relations with Israel and the MINERVA project for coordination of policies of cultural heritage digiisation. Seminar at the School for Interdisciplinary Studies, the Beit Berl Academic College, Seminar for the Faculty of the Program for Information Sciences and Librarianship, Apri 26, 2006.
Presentation of the Europeana Digital Library and more specifically initiatives related to Judaica Europeana and enhanced publishing of Jewish digital content. Enrichment of such content with context rich vocabularies expressed in Linked Data
Rawkets - A Massively Multiplayer HTML5 Game [Mozilla GameOn10]Robin Hawkes
This is my 10 minute talk about Rawkets from the Open Web Gaming event put on in London by Mozilla and Six to Start.
Watch it on YouTube: http://www.youtube.com/watch?v=Z9JM9CpASS0
Presentation of the EUN Future Classroom Lab by Karina Batat at the Israel Scientix National Conference on 18-19 March 2015
Presented at the workshop that took place in the conference with the HQ staff of the National Program for Adapting the Educational System to the 21st Century, Israel Institute of Energy and Environment, Tel Aviv 19.3.2015
One of Monitoring and Evaluation (M&E) focus is on program result and impact.
Bureau of Planning and Development not merely concern with planning but also has M&E function
This presentation draw program result and impact related to research approach and appropriate methodology
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.
Providing content for education: the eJewish.info repository of Jewish Resources in the Internet. The Second EVA/MINERVA Jerusalem International Conference on Digitisation of Cultural Heritage, Beth Shmuel, Jerusalem, November 29-30, 2005.
Explanation of the policies of the European Union, the relations with Israel and the MINERVA project for coordination of policies of cultural heritage digiisation. Seminar at the School for Interdisciplinary Studies, the Beit Berl Academic College, Seminar for the Faculty of the Program for Information Sciences and Librarianship, Apri 26, 2006.
Presentation of the Europeana Digital Library and more specifically initiatives related to Judaica Europeana and enhanced publishing of Jewish digital content. Enrichment of such content with context rich vocabularies expressed in Linked Data
Rawkets - A Massively Multiplayer HTML5 Game [Mozilla GameOn10]Robin Hawkes
This is my 10 minute talk about Rawkets from the Open Web Gaming event put on in London by Mozilla and Six to Start.
Watch it on YouTube: http://www.youtube.com/watch?v=Z9JM9CpASS0
Presentation of the EUN Future Classroom Lab by Karina Batat at the Israel Scientix National Conference on 18-19 March 2015
Presented at the workshop that took place in the conference with the HQ staff of the National Program for Adapting the Educational System to the 21st Century, Israel Institute of Energy and Environment, Tel Aviv 19.3.2015
One of Monitoring and Evaluation (M&E) focus is on program result and impact.
Bureau of Planning and Development not merely concern with planning but also has M&E function
This presentation draw program result and impact related to research approach and appropriate methodology
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 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.
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
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.
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.
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
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.
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development.
This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
"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.
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.
Let's dive deeper into the world of ODC! Ricardo Alves (OutSystems) will join us to tell all about the new Data Fabric. After that, Sezen de Bruijn (OutSystems) will get into the details on how to best design a sturdy architecture within ODC.
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
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.
Essentials of Automations: Optimizing FME Workflows with Parameters
Open Web Games with HTML5 & JavaScript
1. ES
M t
A rip
G
B avaSc
E
W L5 & J es
EN TM bH
aw
k
OP ing H Ro
s U
Hi, I’m Rob Hawkes and I’m here today to talk about creating games on the open Web using
HTML5 and JavaScript.
2. I work at Mozilla, a non-profit fighting for a better Web. The guys who make Firefox.
Unsure about how much I like Mozilla? This here is a beautiful chicken and leek pie with extra
Firefox goodness.
It was made by my talented girlfriend and it was delicious.
3. My official job title is Technical Evangelist, but I prefer what it says on my business card.
Part of my job is to engage with developers like you and I about cool new technologies on the
Web.
And for those of you with no idea of what a rawket is, I made a multiplayer game called
Rawkets in which players fly around in little rockets and shoot each other in the face with the
latest Web technologies. It’s quite addictive!
http://rawkets.com
4. I’m not sure how much time we’ll have for questions at the end, but feel free to grab me in
person after the talk or on Twitter.
These slides will go online after this talk.
I’ll put all the details up at the end.
5. So let’s go back in time for a moment.
Now I don’t actually remember when I first started playing computer games, although I know
that I started with consoles.
6. My first experience was with the ZX Spectrum and its amazing noises and epic loading times,
which I sorely miss…
7. Then there was the SNES, which really got me addicted to gaming.
Although it turns out my SNES was stolen when I was a kid. I did wonder where it went…
8. My parents replaced it with the Megadrive which, although not quite as awesome, was just as
fun.
From there it has been a constant stream of consoles, each smashing the performance and
functionality of its predecessor.
The N64, the Gamecube, the Dreamcast, the Playstation, the xBox.
You get the idea…
9. And spread throughout that time I dabbled in PC gaming, starting with games like Sim City…
11. And playing multiplayer Doom at my Dad’s Internet cafe.
What I’m getting at here is that gaming has been a big part of my life growing up, as it has
been with a lot of other people as well.
They’re fun to play, and they’re surprisingly fun to make.
12. ow
is n
e cool
tim thing
he om
e
T do
fs
ol
resh
Th
Today we’re now on the threshold of something cool; being able to create awesome and
addictive games with nothing more than the technologies that we normally use to make
websites, namely HTML5 and JavaScript.
Since I began developing on the Web I really can’t remember a time when so many people are
working together to achieve something like this.
13. es
g a m
ing ples
ist exam
Ex he
be
st
ft
eo
Som
The number of HTML5 games out there is growing every day.
In any case I thought I’d show you a selection of my favourites, just a tiny amount of what’s
out there.
14. Quake II
Multiplayer Quake II remake with Google GWT (Google Web Toolkit).
http://code.google.com/p/quake2-gwt-port/
15. Angry Birds
There isn’t much to say about Angry Birds really, most of you probably know about it.
The HTML5 version uses WebGL for accelerated 2D graphics.
18. Bejeweled
Bejeweled is a massively popular game on a whole variety of platforms.
Popcap recently released a purely HTML5 version that uses WebGL for accelerated 2D
graphics.
19. Command & Conquer
Command & Conquer: Tiberium Alliances is a HTML5 game from EA that uses canvas for the
graphics.
20. GT Racing
GT Racing: Motor Academy by Gameloft and Mandreel. Using WebGL for accelerated 3D
graphics.
http://www.mandreel.com/?page_id=1312
21. Created by Phil Banks (@emirpprime)
It’s clear that HTML5 is something that is really becoming a contender for games on the Web.
22. g y
o lo
chn es
Te L5g
am
TM
fH
so
cene
s
he
dt
hin
Be
There are a few key technologies that are involved in the development of HTML5 games.
Here are some of my favourites.
23. vas
an
C tfo
rm
pla
ics
raph
g
2D
Canvas is a 2D graphics platform that uses both HTML5 and JavaScript.
It’s quite amazing what can be done with such simple drawing and image manipulation tools.
https://developer.mozilla.org/en/HTML/Canvas
24. Silk is a stunning example of what can be achieved by combining the simple drawing tools
available in canvas.
http://weavesilk.com
25. GL
eb
W form
lat
sp
hic
grap
3D
WebGL brings the ability to provide advanced 3D graphics directly within the browser.
https://developer.mozilla.org/en/WebGL
26. HelloRacer is a little game that lets you drive a Formula One car around your browser. It’s a
beautiful example of WebGL in action.
http://helloracer.com/webgl/
27. Rome is a music video created with WebGL. It’s an amazing example of what the technology
can achieve in a real-world situation given a large team.
http://ro.me
28. This is a rather freaky example of how interesting WebGL is.
It’s a demo that shows just how realistic WebGL can render materials, like skin. This isn’t
much unlike the quality of modern games consoles!
http://www.everyday3d.com/j3d/demo/014_Head.html
29. m e
Fra
on ps
ati ati
on
loo
nim d anim
estA timise
qu Op
re
requestAnimationFrame is the new, better way of managing animation in JavaScript.
Instead of constantly running a setTimeout or setInterval function, which lack performance
and spike CPU usage, requestAnimation frame puts the browser in control of things and
keeps things running smoothly.
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.
30. d io
a u
L5 usic
TM nd
m
H grou
ck
ba
nd
ctsa
effe
nd
Sou
HTML5 audio allows for plugin-less game sound effects and background music.
Audio data APIs implemented by Mozilla and Google allow for manipulation of audio and
much more fine-grained control.
https://developer.mozilla.org/en/HTML/Element/audio
31. This is something I made especially for the ASSEMBLY 2011 event in Finland.
It’s an audio visualiser that uses WebGL and the HTML5 Audio Data API.
http://robhawkes.github.com/webgl-html5-audio-visualiser/
32. e ts
ock
bS ation
e
W omm un
ic
yerc
ltipla
Mu
WebSockets can be used for the real-time communication between a player and the game
server.
With WebSockets you can create multiplayer games with relative ease.
https://developer.mozilla.org/en/WebSockets
33. P I
A
o ck ace
L
use no
ne
pl
Mo rso
ri
cu
he
gt
ockin
L
The Mouse Lock API is an attempt at improving the mouse as an input device.
It would be used in situations like games and 3D visualisations where the mouse position
rotates or moves you around a 3D space.
As it stands there’d still be a cursor moving around the screen causing all sorts of trouble
when you want to click on something in your game.
With the new API you can lock your mouse position and stop it from getting in the way and
being a nuisance.
Both Google and Mozilla are working on an implementation of this right now, it’s available in
a custom build of Firefox.
https://bugzilla.mozilla.org/show_bug.cgi?id=633602
34. P I
d A
p a eb
me he
W
Ga et
ot
ol
ns co
he
gt
gin
Brin
The Gamepad API is one of the major improvements to input that is coming.
Both Mozilla and Google are working an an implementation of this and there is actually an
experimental build of Firefox available to the public that has it working. The API is also in the
dev build of Chrome.
What I find most interesting about the Gamepad API is that it might be just the thing we need
to finally justify HTML5 gaming on a TV or console.
Who wants to use a keyboard and mouse while sitting on the sofa?
https://wiki.mozilla.org/GamepadAPI
http://www.gamepadjs.com
https://github.com/jbuck/input.js
35. Gamepad API demo
I’d like to show you a quick demo of the Gamepad API working in Firefox Nightly and Google
Chrome.
In this example I’ve connected my Logitech controller to my Mac, but I could also use a PS3
controller or practically any other USB controller.
36. This is another little demo that I put together to show off the Gamepad API implemented in
my game Rawkets.
37. Connection
function onGamepadConnected(e) {
var controller = e.gamepad;
console.log("Gamepad connected", controller.id);
}
window.addEventListener("MozGamepadConnected",
onGamepadConnected);
MozGamepadConnected
It passes an event object that itself contains a gamepad object in reference to the connected
gamepad.
38. Disconnection
function onGamepadDisconnected(e) {
var controller = e.gamepad;
console.log("Gamepad disconnected", controller.id);
}
window.addEventListener("MozGamepadDisconnected",
onGamepadDisconnected);
MozGamepadDisconnected
It passes an event object that itself contains a gamepad object in reference to the
disconnected gamepad.
39. Button events
function onGamepadButtonDown(e) {
var button = e.button;
console.log("Gamepad button pressed", button);
}
function onGamepadButtonUp(e) {
var button = e.button;
console.log("Gamepad button released", button);
}
window.addEventListener("MozGamepadButtonDown", onGamepadButtonDown);
window.addEventListener("MozGamepadButtonUp", onGamepadButtonUp);
MozGamepadButtonDown
MozGamepadButtonUp
Each pass an event object that contains a button property.
The button property is the index number of the specific button, respective to the entire array
of buttons on the gamepad.
40. Axis events
function onGamepadAxisMove(e) {
var axis = e.axis;
var value = e.value;
console.log("Gamepad axis move", axis, value);
}
window.addEventListener("MozGamepadAxisMove", onGamepadAxisMove);
MozGamepadAxisMove is fired on movement of a joystick or analogue trigger.
Passes an event object that contains axis and value properties.
The axis property is the index number of the specific axis that was moved, respective to the
entire array of axes on the gamepad.
The value property is a -1.0 to 1.0 float. For example, an x-axis on a joystick when fully
pressed to the left would have a -1.0 value.
41. Gamepad state
function checkState() {
for (var i = 0; i < controller.buttons.length; i++) {
console.log("Button state", i, controller.buttons[i]);
}
for (var j = 0; j < controller.axes.length; j++) {
console.log("Axis state", j, controller.axes[j]);
}
}
If you don’t want to use events you can also poll the entire gamepad state whenever you
want.
The only pre-requisite is that a gamepad is already connected and you’ve stored a reference
to it somewhere, perhaps in a variable or array.
Once you have reference to a gamepad you get the state by reading its buttons and axes
objects. These are both arrays that contain data about every single button and axis available.
The value of each button in the buttons array is a boolean that tells you whether the button is
pressed down (true) or not (false).
The value of each axis in the axes array is a -1.0 to 1.0 float that tell you exactly where a
joystick is or how far a trigger has been pulled.
42. We’ve brought along 6 Logitech gamepads for you to play with today.
I’d love to see the kind of stuff that you can come up with that uses the Gamepad API,
whether a game or something entirely different!
I also have a USB stick with the custom Firefox build on, or you can download it yourself from
the Mozilla wiki page for the Gamepad API – Google for “Mozilla Gamepad API”
https://wiki.mozilla.org/GamepadAPI
43. n s
tio
plica bsite
ap yw
e
eb ta
fanc
W ot jus
N
The concept of Web apps is something that is gaining a lot of traction at the moment.
HTML5 games are effectively glorified Web apps.
It’s no doubt this this traction is as a result of the success of native applications and games
on the desktop and mobile, particularly with iOS and Android.
44. It’s something we’re spending a lot of time on at Mozilla.
We envisage Web apps to run on any device, any browser, and to be distributed through any
store or website.
https://apps.mozillalabs.com
https://developer.mozilla.org/en/OpenWebApps
45. nce
erie
exp scre
en
like ho
me
p- op
or
Ap eskt
thed
from
ch
un
La
Something that needs to be tackled with Web apps is how to make them feel like real
applications rather than glorified websites.
One way that is being considered is completely removing the browser chrome and running
the application in it’s own window.
This will effectively mean that you have full control of the app UI and it won’t look like it’s
being run in a browser.
46. At Mozilla we call this WebRT, which stands for Web Run-Time.
By using WebRT you can install a Web app directly into the OS just like you would a native
application.
The WebRT app will look and feel like a native application when launched but will actually be
running a browser rendering engine behind the scenes.
This is an example of Rawkets running as a WebRT app with the Firefox rendering engine.
Notice the lack of browser UI.
47. e s
gin
e n ay
e
m game st
od
Ga
ML5
HT
te
Crea
If you haven’t already then I encourage you to give HTML5 game development a go.
And you don't have to create an entire game infrastructure from scratch, you can use some of
the existing engines that are proving popular.
48. Impact. A 2D game engine.
I used this recently, and it’s really well made and has a good level editor and development
tools.
The documentation is great and the author is active and very helpful.
http://impactjs.com/
49. Crafty. Another 2D game engine.
It’s a free engine and is doing much better than other free engines out there.
http://craftyjs.com/
50. Isongenic Engine. A 2D to 2.5D game engine.
One of the most promising engines out there today.
Massively multiplayer networking built in, uses Node and MongoDB, and has canvas or DOM-
based graphics.
http://www.isogenicengine.com
51. 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
HTML5 & WebSockets game
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
52. U
O r
Y te
K e la
N m
A rab
TH ?G es
wk es
Ha wk
ob ha
R b
ion @ro
est
Qu
Thank you.
If you have any questions feel free to grab me here, on Twitter (@robhawkes)