SlideShare a Scribd company logo
1 of 80
Download to read offline
Introductions…

Hi, I’m Rob Hawkes and I’m here today so we can explore gaming with HTML5 and JavaScript.
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.
1ST-CLASS HONOURS
                    Interactive Media Production



And as of 4am this morning (midday in the UK) I found out that I achieved a First-class
Honours in the university degree that I’ve been studying for the past three years.

Which has certainly helped make all the time and effort feel a little more worth while!

But I digress…
All of this means that I have a slight addiction to experimentation and mucking about with
code, particularly if it involves anything visual, or HTML5…

And for those of you who doubt my dedication to HTML5…

A while ago my girlfriend made me this chicken and leek pie with the HTML5 logo on top
(which was delicious).

It’s HTML… Pive… get it?
I don’t actually remember when I first started playing games, although I know that I started
with consoles… ZX Spectrum…
…SNES…
Megadrive, etc.
And spread throughout that time I dabbled in PC gaming, starting with games like Sim City…
…Megarace…
And playing 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.
THE TIME IS NOW
                   Threshold of something cool



And 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 used to make
websites with.
NOTABLE EVENTS
                Recent events in HTML5 gaming



Funding for HTML5 games companies.

Acquisition of HTML5 gaming engines, like Aves by Zynga, and Rocket Engine by Disney.

First large-scale HTML5 gaming conference this September, onGameStart in Poland.

Another large gaming conference announced in the last few days for the San Francisco area
this November, it’s called New Game and it looks promising.

Facebook getting involved in HTML5 gaming performance.
* made by Phil Banks (@emirpprime)


So why is HTML5 gaming so cool?

Because we can now use the technologies within the browser to make fast and enjoyable
games.

And just to clarify, by HTML5 I'm referring to HTML5 and JavaScript.
WRITE ONCE
                                  Use anywhere



Any device with a browser that supports HTML5 will run your game code, after all it’s just
JavaScript and HTML.

You may have to implement little differences for variations in controls, like touch on mobile
devices, but the majority of the code will remain the same.
NO COMPILATION
         Save time with development and testing



Doesn't require compiling, so development and testing can be extremely rapid.

These technologies encourage a culture of hacking stuff together quickly to experiment, then
tidying things up later – or perhaps that's just me.

Either way, I like the rapid nature that JavaScript and HTML brings.
LIGHTWEIGHT
          Text and image files take up little room



JavaScript and HTML are just text files and images, which don't take up much room.
OPEN DEVELOPMENT
                  Gives you a warm fuzzy feeling



It gives you a warm fuzzy feeling inside to be using open technologies
But it’s not all rosy with HTML5, why would you not want to use it?

Here are just two of the major issues that are floating around right now.
FULL COMPATIBILITY
              Not all browsers support everything



Not every browser supports every part of HTML5.

For example, canvas isn’t supported out of the box by any IE below 9. Although, you can use
ExplorerCanvas to replicate canvas functionality, but it’s not ideal and as doesn’t perform as
well.

WebSockets still isn’t supported by IE yet, nor is it supported in Android. But again, you can
fake this by using Flash for the sockets, like with Socket.IO.

WebGL also has patchy support, with absolutely no support in current versions of IE, Safari,
and Opera.
NO DRM
             These technologies aren’t made for it



If you need DRM or have a burning desire to hide absolutely everything about your code.

Remember, the code isn’t compiled, so where would the DRM go? The beauty of Web
technologies is that they can be read as plain text by simply viewing the page source.

However, DRM isn't bulletproof in itself – you can still crack into Flash.

You can still obfuscate and minify your code if you think it will help.
TECHNOLOGY
        Some of the tech involved in Web gaming



So there are a variety of technologies that are involved in HTML5 game development.

In case I haven’t made it obvious by now, all of these technologies are related to HTML or
JavaScript.
CANVAS & WEBGL
                           2D and 3D graphics



Canvas for 2D graphics.

WebGL, which uses the canvas, for 3D graphics.
HTML5 AUDIO
           Sound effects and background music



HTML5 audio for game sound effects and background music.
WEBSOCKETS
                     Multiplayer communication



WebSockets are used for bi-directional communication between a client (the player) and a
server.

By managing communication on the server you can create multiplayer games with relative
ease.
NODE.JS
                            JavaScript on the server



Node is only really applicable if you’re making multiplayer games, as you’ll need a server to
communicate with.

JavaScript on the server.

Asynchronous, event-based.

Great third-party modules, like Socket.IO for WebSockets.
LOCAL STORAGE
                 Storing data on the player device



Local Storage is great for storing data locally on the player device.

This way you can cache game data and allow the game to pick up where the player left off.
MONGODB & REDIS
                      Storing data on the server



MongoDB and Redis are two examples of ways to store data remotely on the game server.

MongoDB is a document-oriented database, what’s often referred to as NoSQL.

Redis is a key-value data store and is much less structured than MongoDB, but it stores data
in memory which makes it super fast.
EXISTING GAMES
        Some of my favourite and best examples



There aren’t a huge amount of HTML5 games just yet, but I thought I’d show you a selection
of my favourites.
QUAKE II
   Google port using Web technologies




Multiplayer Quake II remake with Google GWT (Google Web Toolkit)

Canvas & WebGL
HTML5 audio
WebSockets
Local Storage

http://code.google.com/p/quake2-gwt-port/
MINECRAFT
    We’ll see this fully working in JavaScript soon




Minecraft map viewer, using WebGL.

This isn’t really a game, but it’s not a long way from becoming a JavaScript port of Minecraft.

http://alteredqualia.com/three/examples/geometry_minecraft_ao.html
WORD²
    Massively multiplayer Scrabble




Word², massively multiplayer Scrabble.

Uses WebSockets for real-time communication.

http://wordsquared.com
I love the map view.

Every single pixel on this view is a Scrabble tile.
FREECIV
    Open source clone of Civilisation




Freeciv, an open source clone of Civilisation that uses canvas and WebSockets.

3D WebGL version currently being worked on.

http://freeciv.net
RAWKETS
    Because I made it and it’s addictive




Rawkets is a multiplayer space shooter that I created while at university to explore canvas
and WebSockets.

I’m now developing it a lot further as a proper game, and plan to use it to teach others how
to make multiplayer HTML5 games.

Still not even at a beta release level yet, hence the bugs you can see in this video.

http://rawkets.com
LOADS MORE
               Games directories are everywhere



Game directories specifically focused on HTML5 are popping up all over the place.

Also, Kongregate now accept HTML5 games so long as they run in an iframe.

html5games.com
FUNDAMENTALS
                     Making games with HTML5



Here are a few fundamental aspects of a HTML5 game. It’s all pretty basic, but they’re useful
to cover.

Not all of these are required, it depends what kind of game you're working on…
GAME LOOP
                         The heart of the game



Most games will have a loop of some kind to manage all the logic and animation that needs
to happen.

This is the heart of the game and is where things happen on each frame.
PHYSICS UPDATE
                             Updating positions



The physics update is part of the game loop that deals with any kind of physics, or even just
simple movement.
GRAPHICS UPDATES
                          Making things visible



Graphics updates are another part of the game loop, but they deal with drawing all the game
assets onto the screen.
NETWORKING
                    Breaking out of single player



Network infrastructure will allow you to take your game multiplayer, perhaps even real-time
by using WebSockets.
CONTROLS AND UI
                        So important to get right



Controls and UI, so massively important to get right.

For Rawkets I hired a designer to do the UI for me so it was as good as possible.
Seb Lee-Delisle implemented some awesome JavaScript controls for iOS devices based on
some previous iOS games.

http://sebleedelisle.com/2011/04/multi-touch-game-controller-in-javascripthtml5-for-
ipad/
http://www.gamasutra.com/view/feature/6323/a_guide_to_ios_twin_stick_shooter_.php
PERFORMANCE
                Keeping things running smoothly



Performance isn’t really a fundamental feature, but it’s definitely something that you need to
be keeping on top off through the development of a game with HTML5.

I’ll run through a couple of tips for performance in a moment.
GAME ENGINES
                Making game development easy



You don't have to create an entire game infrastructure from scratch…
Impact.

I used this recently, and it’s really well made.

The documentation is great and the author is active and very helpful.

Will support WebSockets with a plugin, although you’ll still need to code the network logic
from scratch.

http://impactjs.com/
Crafty

Not my favourite engine, but it’s free and is doing much better than other free engines out
there.

http://craftyjs.com/
IsongenicEngine.

One of the most promising engines out there today.

Massively multiplayer networking built in
Uses Node and MongoDB
Canvas or DOM-based graphics

http://www.isogenicengine.com
ISOGENICENGINE
    Iso City demo




Rob Evan’s, the creator of Isogenic, is putting together a little demo called Iso City to show
off the engine.
LIBRARIES & SERVICES
                  Saving you time in the long run



If you do want to build your own engine, then there are some libraries and external services
out there which might help you from having to create everything from scratch…
BOX2DWEB
      JavaScript port of the Box2D physics engine



Box2DWeb allows you to add a physics engine into your game with little hassle.

It’s a port of the Box2D physics engine, which is the same one that Angry Birds uses.

http://code.google.com/p/box2dweb/
MOTION.JS
              Solving client-side prediction issues



Motion.js is a new library that attempts to solve the client-side prediction issues with
multiplayer gaming, some of the most difficult issues to overcome.

The library doesn’t do much yet, but it’s a great idea and something to keep an eye on.

https://github.com/tmpvar/motionjs
Joyent’s Node cloud servers

Provides a remotely hosted Node server that allows you to quickly get a multiplayer game up
and running.

It supports WebSockets, which a lot of other hosted Node services doesn’t allow.
Pusher is for real-time communication and uses WebSockets.

Remotely hosted.

This is the service that Word² uses, the game that I highlighted earlier.
Kaazing.

Self-hosted WebSockets communication platform.

http://kaazing.com/
There’s also Electroserver5.

Self-hosted communication platform (not WebSockets) and game server for logic.

http://www.electrotank.com/es5.html
KEY LESSONS
                          What I’ve learnt so far



Over the last few years I’ve learnt a lot of lessons about game development.

Here are just a few of the most important ones.
CUT DOWN LOOPS
                                     Less is more



The less loops you can get away with the faster your game will be.

Do as little as possible, no more.
NO TIMEOUTS
            Use requestAnimationFrame instead



Another simple lesson is to stop using JavaScript timeouts and to use requestAnimationFrame
instead.

requestAnimationFrame puts the browser in control of when an animation should happen and
generally increases performance. It also doesn’t run in an inactive browser tab, saving you
more precious resources.

Paul Irish has made a shim that allows you to use the requestAnimationFrame API in browsers
that don’t support it. It won’t have the cool browser-controlled animations, but it means that
you don’t need to change your code.

http://paulirish.com/2011/requestanimationframe-for-smart-animating/
NETWORK TRICKS
               Cutting down on communication



Be very aware about how much data you’re sending back and forth when creating a
multiplayer 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.

Fortunately there is a way around this that cuts down the amount of messages sent from the
server; 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. It’s such a simple solution, but
it’s one that I never even considered at first.
CHEATERS
                You can’t avoid them completely



Your code is going to be visible to anyone who wants to look at the source.

It’s mainly an issue with multiplayer gaming, as cheating in a single player game would only
affect one player.

I experienced this early on in the development of Rawkets. The solution is to make the server
authoritative, which means that you prevent manipulation of the player’s code from doing
any damage.
DOM OR CANVAS
                      Which one should you use?



How do you decide whether you go with the DOM or canvas for rendering?

This is something that I’ve been thinking about a lot lately.

In my opinion DOM has some performance benefits, but canvas is the right tool and is going
in a better direction.

The situations reminds me a little of the way tables were used for layout before CSS was
adopted. Using DOM content elements for animation feels hacky, in a bad way.

I don’t have an easy solution that will make canvas perform as well, but I think it’s important
that we try and make and use canvas better rather than turning our backs on it and clinging
onto the DOM.

Now I'm being a bit dramatic, but I really think developers need to think long and hard before
turning away from the ideal technologies like JavaScript, canvas and SVG.

This is something that I hope to look into a lot more in the near future.
THE FUTURE
                 What HTML5 gaming still needs



HTML5 gaming is still at an early stage and there are still plenty of things that can be
improved.
DOCUMENTATION
           Specific to HTML5 game development



More documentation and teaching materials on the complex areas of game development in
JavaScript.

We need something like Glen Fiedler’s Gaffer on Games website, but dedicated to HTML5
instead.
WEBGL SUPPORT
                  Support is shocking right now



Wider support for WebGL.
MORE ENGINES
         Not many decent ones around right now



Better game engines that really solve all the major issues, particularly with multiplayer
games.
IMPROVED AUDIO
                         More reliable looping



Improved HTML5 audio support, with proper looping.
POWERFUL MOBILE
                   Better hardware acceleration



More powerful mobile devices, with better hardware acceleration for canvas.
BETTER CONTROLS
       Break away from the keyboard and mouse



Better more console-like systems for control, like Seb Lee-Delisles iOS controller.
Brass Monkey turns a smart phone into a controller, which I had the luxury of seeing demoed
recently and I must say that it’s pretty damn cool.

http://brassmonkeysdk.com/
MONETISATION
                      Making profit from games



Better monetisation options for developers.

Right now there aren't (m)any games making a profit out of these new technologies.

How do you monetise a game where the code is open for all to see?
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
COFFEE FWD
    Mozilla Web FWD get together




                                                 Friday July 15th

                                                 Red Rock Cafe, Mountain View

                                                 Innovation acceleration

                                                 Meet some great people

                                                 Show off your stuff

                                                 FRI JULY 15TH @ RED ROCK CAFE, MV




Just a quick one to let you know about an event Mozilla are putting on this Friday in Mountain
View.

It’s called Coffee FWD and it’s a get together related to the Web FWD Innovation Accelerator
for the open Web.

It’s a chance for us to work with you to help push the Web forward, so if you’re working on
something cool then you should definitely come down and say hi.

http://coffeefwd.eventbrite.com/
https://www.webfwd.org
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 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
Thanks for listening, and I hope you enjoy the rest of your day.

I believe we have some time set aside for questions…

More Related Content

What's hot

School For Games 2015 - Unity Engine Basics
School For Games 2015 - Unity Engine BasicsSchool For Games 2015 - Unity Engine Basics
School For Games 2015 - Unity Engine BasicsNick Pruehs
 
The Future of Firefox and JavaScript
The Future of Firefox and JavaScriptThe Future of Firefox and JavaScript
The Future of Firefox and JavaScriptjeresig
 
Ewd senchatouch classactivity_part_i
Ewd senchatouch classactivity_part_iEwd senchatouch classactivity_part_i
Ewd senchatouch classactivity_part_ivxVistA.org
 
Jake hyatt Y1 gd engine_terminology
Jake hyatt Y1 gd engine_terminologyJake hyatt Y1 gd engine_terminology
Jake hyatt Y1 gd engine_terminologyJakeyhyatt123
 
What Would Blizzard Do
What Would Blizzard DoWhat Would Blizzard Do
What Would Blizzard DoNick Pruehs
 

What's hot (7)

School For Games 2015 - Unity Engine Basics
School For Games 2015 - Unity Engine BasicsSchool For Games 2015 - Unity Engine Basics
School For Games 2015 - Unity Engine Basics
 
The Future of Firefox and JavaScript
The Future of Firefox and JavaScriptThe Future of Firefox and JavaScript
The Future of Firefox and JavaScript
 
Ewd senchatouch classactivity_part_i
Ewd senchatouch classactivity_part_iEwd senchatouch classactivity_part_i
Ewd senchatouch classactivity_part_i
 
Jake hyatt Y1 gd engine_terminology
Jake hyatt Y1 gd engine_terminologyJake hyatt Y1 gd engine_terminology
Jake hyatt Y1 gd engine_terminology
 
Phaser presentation
Phaser presentationPhaser presentation
Phaser presentation
 
What Would Blizzard Do
What Would Blizzard DoWhat Would Blizzard Do
What Would Blizzard Do
 
Amazon Ec2
Amazon Ec2Amazon Ec2
Amazon Ec2
 

Viewers also liked

Go to hell Flash, we don't need you anymore! GothamJs
Go to hell Flash, we don't need you anymore! GothamJsGo to hell Flash, we don't need you anymore! GothamJs
Go to hell Flash, we don't need you anymore! GothamJsmichalbu
 
4007655 introduction-to-javascript
4007655 introduction-to-javascript4007655 introduction-to-javascript
4007655 introduction-to-javascriptVikash Chandra
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Nicholas Zakas
 
A million connections and beyond - Node.js at scale
A million connections and beyond - Node.js at scaleA million connections and beyond - Node.js at scale
A million connections and beyond - Node.js at scaleTom Croucher
 
Dark patterns - An Overview for Brand Owners
Dark patterns - An Overview for Brand OwnersDark patterns - An Overview for Brand Owners
Dark patterns - An Overview for Brand OwnersHarry Brignull
 
Sass: The Future of Stylesheets
Sass: The Future of StylesheetsSass: The Future of Stylesheets
Sass: The Future of Stylesheetschriseppstein
 
Javascript Guide - Belajar Pemrograman JavaScript
Javascript Guide - Belajar Pemrograman JavaScriptJavascript Guide - Belajar Pemrograman JavaScript
Javascript Guide - Belajar Pemrograman JavaScriptBeni Krisbiantoro
 
PhoneGap: Building Mobile Applications with HTML/JS
PhoneGap: Building Mobile Applications with HTML/JSPhoneGap: Building Mobile Applications with HTML/JS
PhoneGap: Building Mobile Applications with HTML/JSRyan Stewart
 
jQuery Proven Performance Tips & Tricks
jQuery Proven Performance Tips & TricksjQuery Proven Performance Tips & Tricks
jQuery Proven Performance Tips & TricksAddy Osmani
 
Apps with Apache Cordova and Phonegap
Apps with Apache Cordova and PhonegapApps with Apache Cordova and Phonegap
Apps with Apache Cordova and PhonegapChristian Grobmeier
 
Know yourengines velocity2011
Know yourengines velocity2011Know yourengines velocity2011
Know yourengines velocity2011Demis Bellot
 
2012.06.28 Learning Sessions 2 - ArtBridge
2012.06.28 Learning Sessions 2 - ArtBridge2012.06.28 Learning Sessions 2 - ArtBridge
2012.06.28 Learning Sessions 2 - ArtBridgejvielman
 
Judaica Europeana Dov Winer
Judaica Europeana Dov WinerJudaica Europeana Dov Winer
Judaica Europeana Dov WinerDov Winer
 
080724 Mosaica Content Related Rtd
080724 Mosaica Content Related Rtd080724 Mosaica Content Related Rtd
080724 Mosaica Content Related RtdDov Winer
 
大山里的日子(一)
大山里的日子(一)大山里的日子(一)
大山里的日子(一)yangbqada
 
Learning sessions #5 pre incubator - BooTown
Learning sessions #5 pre incubator - BooTownLearning sessions #5 pre incubator - BooTown
Learning sessions #5 pre incubator - BooTownjvielman
 
Wikis and Blogs: When, Why, and How to Use Them
Wikis and Blogs: When, Why, and How to Use ThemWikis and Blogs: When, Why, and How to Use Them
Wikis and Blogs: When, Why, and How to Use ThemLeslieOflahavan
 
Raisa anthony web programming 1st week
Raisa anthony   web programming 1st weekRaisa anthony   web programming 1st week
Raisa anthony web programming 1st weekRaisa Anjani
 

Viewers also liked (20)

Go to hell Flash, we don't need you anymore! GothamJs
Go to hell Flash, we don't need you anymore! GothamJsGo to hell Flash, we don't need you anymore! GothamJs
Go to hell Flash, we don't need you anymore! GothamJs
 
4007655 introduction-to-javascript
4007655 introduction-to-javascript4007655 introduction-to-javascript
4007655 introduction-to-javascript
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
 
A million connections and beyond - Node.js at scale
A million connections and beyond - Node.js at scaleA million connections and beyond - Node.js at scale
A million connections and beyond - Node.js at scale
 
Dark patterns - An Overview for Brand Owners
Dark patterns - An Overview for Brand OwnersDark patterns - An Overview for Brand Owners
Dark patterns - An Overview for Brand Owners
 
Sass: The Future of Stylesheets
Sass: The Future of StylesheetsSass: The Future of Stylesheets
Sass: The Future of Stylesheets
 
Javascript Guide - Belajar Pemrograman JavaScript
Javascript Guide - Belajar Pemrograman JavaScriptJavascript Guide - Belajar Pemrograman JavaScript
Javascript Guide - Belajar Pemrograman JavaScript
 
PhoneGap: Building Mobile Applications with HTML/JS
PhoneGap: Building Mobile Applications with HTML/JSPhoneGap: Building Mobile Applications with HTML/JS
PhoneGap: Building Mobile Applications with HTML/JS
 
jQuery Proven Performance Tips & Tricks
jQuery Proven Performance Tips & TricksjQuery Proven Performance Tips & Tricks
jQuery Proven Performance Tips & Tricks
 
Apps with Apache Cordova and Phonegap
Apps with Apache Cordova and PhonegapApps with Apache Cordova and Phonegap
Apps with Apache Cordova and Phonegap
 
Object Oriented CSS
Object Oriented CSSObject Oriented CSS
Object Oriented CSS
 
Know yourengines velocity2011
Know yourengines velocity2011Know yourengines velocity2011
Know yourengines velocity2011
 
2012.06.28 Learning Sessions 2 - ArtBridge
2012.06.28 Learning Sessions 2 - ArtBridge2012.06.28 Learning Sessions 2 - ArtBridge
2012.06.28 Learning Sessions 2 - ArtBridge
 
Judaica Europeana Dov Winer
Judaica Europeana Dov WinerJudaica Europeana Dov Winer
Judaica Europeana Dov Winer
 
080724 Mosaica Content Related Rtd
080724 Mosaica Content Related Rtd080724 Mosaica Content Related Rtd
080724 Mosaica Content Related Rtd
 
大山里的日子(一)
大山里的日子(一)大山里的日子(一)
大山里的日子(一)
 
Learning sessions #5 pre incubator - BooTown
Learning sessions #5 pre incubator - BooTownLearning sessions #5 pre incubator - BooTown
Learning sessions #5 pre incubator - BooTown
 
Implikasi Pelaksanaan Undang Undang Desa (161115)
Implikasi Pelaksanaan Undang Undang Desa (161115)Implikasi Pelaksanaan Undang Undang Desa (161115)
Implikasi Pelaksanaan Undang Undang Desa (161115)
 
Wikis and Blogs: When, Why, and How to Use Them
Wikis and Blogs: When, Why, and How to Use ThemWikis and Blogs: When, Why, and How to Use Them
Wikis and Blogs: When, Why, and How to Use Them
 
Raisa anthony web programming 1st week
Raisa anthony   web programming 1st weekRaisa anthony   web programming 1st week
Raisa anthony web programming 1st week
 

Similar to HTML5 & JavaScript Games

Html5 workshop part 1
Html5 workshop part 1Html5 workshop part 1
Html5 workshop part 1NAILBITER
 
Webgl 기술동향 2011.8
Webgl 기술동향 2011.8Webgl 기술동향 2011.8
Webgl 기술동향 2011.8Seung Joon Choi
 
Bringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile DevicesBringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile DevicesBrian Crescimanno
 
HTML5 Games Status and issues
HTML5 Games Status and issuesHTML5 Games Status and issues
HTML5 Games Status and issuesJ.h. Liu
 
Flex vs. HTML5 for RIAS
Flex vs. HTML5 for RIASFlex vs. HTML5 for RIAS
Flex vs. HTML5 for RIASPamela Fox
 
The Future of Flash
The Future of FlashThe Future of Flash
The Future of FlashChris Black
 
Introduction to html5 game programming with ImpactJs
Introduction to html5 game programming with ImpactJsIntroduction to html5 game programming with ImpactJs
Introduction to html5 game programming with ImpactJsLuca Galli
 
Cross-platform Desktop application with AngularJS and build with Node-webkit
Cross-platform Desktop application with AngularJS and build with Node-webkitCross-platform Desktop application with AngularJS and build with Node-webkit
Cross-platform Desktop application with AngularJS and build with Node-webkitWittawas Wisarnkanchana
 
Bringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkersBringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkersCorey Clark, Ph.D.
 
Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentation
Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentationAmsterdam HTML5 Game Developement Meetup - ThreeDee Media presentation
Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentationThreeDee Media
 
Building Droids with JavaScript
Building Droids with JavaScriptBuilding Droids with JavaScript
Building Droids with JavaScriptAndrew Fisher
 
Full stack development in Go
Full stack development in GoFull stack development in Go
Full stack development in GoYves Junqueira
 
HTML5 Canvas Performance optimization
HTML5 Canvas Performance optimizationHTML5 Canvas Performance optimization
HTML5 Canvas Performance optimizationDavid Goemans
 
BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
 BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
BoosterMedia: Overcome the bottleneck of HTML5 mobile game performanceDevGAMM Conference
 
HTML5_Games_Ecosystem_Jan2013
HTML5_Games_Ecosystem_Jan2013HTML5_Games_Ecosystem_Jan2013
HTML5_Games_Ecosystem_Jan2013BoosterMedia
 

Similar to HTML5 & JavaScript Games (20)

Presentation3
Presentation3Presentation3
Presentation3
 
HTML5 Game Development frameworks overview
HTML5 Game Development frameworks overviewHTML5 Game Development frameworks overview
HTML5 Game Development frameworks overview
 
Html5 workshop part 1
Html5 workshop part 1Html5 workshop part 1
Html5 workshop part 1
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
Webgl 기술동향 2011.8
Webgl 기술동향 2011.8Webgl 기술동향 2011.8
Webgl 기술동향 2011.8
 
Bringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile DevicesBringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile Devices
 
HTML5 Games Status and issues
HTML5 Games Status and issuesHTML5 Games Status and issues
HTML5 Games Status and issues
 
Flex vs. HTML5 for RIAS
Flex vs. HTML5 for RIASFlex vs. HTML5 for RIAS
Flex vs. HTML5 for RIAS
 
The Future of Flash
The Future of FlashThe Future of Flash
The Future of Flash
 
Introduction to html5 game programming with ImpactJs
Introduction to html5 game programming with ImpactJsIntroduction to html5 game programming with ImpactJs
Introduction to html5 game programming with ImpactJs
 
Cross-platform Desktop application with AngularJS and build with Node-webkit
Cross-platform Desktop application with AngularJS and build with Node-webkitCross-platform Desktop application with AngularJS and build with Node-webkit
Cross-platform Desktop application with AngularJS and build with Node-webkit
 
Bringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkersBringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkers
 
Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentation
Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentationAmsterdam HTML5 Game Developement Meetup - ThreeDee Media presentation
Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentation
 
Building Droids with JavaScript
Building Droids with JavaScriptBuilding Droids with JavaScript
Building Droids with JavaScript
 
HTML5 Games Ecosystem
HTML5 Games EcosystemHTML5 Games Ecosystem
HTML5 Games Ecosystem
 
Full stack development in Go
Full stack development in GoFull stack development in Go
Full stack development in Go
 
HTML5 Canvas Performance optimization
HTML5 Canvas Performance optimizationHTML5 Canvas Performance optimization
HTML5 Canvas Performance optimization
 
BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
 BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
 
HTML5_Games_Ecosystem_Jan2013
HTML5_Games_Ecosystem_Jan2013HTML5_Games_Ecosystem_Jan2013
HTML5_Games_Ecosystem_Jan2013
 
Ffd 05 2012
Ffd 05 2012Ffd 05 2012
Ffd 05 2012
 

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 3DRobin 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 visualisationRobin 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 cameraRobin 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 DataRobin 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 visualisationRobin 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 WebGLRobin Hawkes
 
Beautiful Data Visualisation & D3
Beautiful Data Visualisation & D3Beautiful Data Visualisation & D3
Beautiful Data Visualisation & D3Robin 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 WorldRobin Hawkes
 
The State of WebRTC
The State of WebRTCThe State of WebRTC
The State of WebRTCRobin 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 & WebGLRobin Hawkes
 
Mobile App Development - Pitfalls & Helpers
Mobile App Development - Pitfalls & HelpersMobile App Development - Pitfalls & Helpers
Mobile App Development - Pitfalls & HelpersRobin 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 PlatformRobin 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 JSRobin 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 JSRobin Hawkes
 
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 CodeRobin Hawkes
 
MelbJS - Inside Rawkets
MelbJS - Inside RawketsMelbJS - Inside Rawkets
MelbJS - Inside RawketsRobin 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 PlatformRobin 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 CustomisationRobin 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 & JavaScriptRobin 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 MobileRobin 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
 
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
 
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
 

Recently uploaded

The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfHyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfPrecisely
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESmohitsingh558521
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 

Recently uploaded (20)

The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfHyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 

HTML5 & JavaScript Games

  • 1. Introductions… Hi, I’m Rob Hawkes and I’m here today so we can explore gaming with HTML5 and JavaScript.
  • 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. 1ST-CLASS HONOURS Interactive Media Production And as of 4am this morning (midday in the UK) I found out that I achieved a First-class Honours in the university degree that I’ve been studying for the past three years. Which has certainly helped make all the time and effort feel a little more worth while! But I digress…
  • 4. All of this means that I have a slight addiction to experimentation and mucking about with code, particularly if it involves anything visual, or HTML5… And for those of you who doubt my dedication to HTML5… A while ago my girlfriend made me this chicken and leek pie with the HTML5 logo on top (which was delicious). It’s HTML… Pive… get it?
  • 5. I don’t actually remember when I first started playing games, although I know that I started with consoles… ZX Spectrum…
  • 8. And spread throughout that time I dabbled in PC gaming, starting with games like Sim City…
  • 10. And playing 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.
  • 11. THE TIME IS NOW Threshold of something cool And 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 used to make websites with.
  • 12. NOTABLE EVENTS Recent events in HTML5 gaming Funding for HTML5 games companies. Acquisition of HTML5 gaming engines, like Aves by Zynga, and Rocket Engine by Disney. First large-scale HTML5 gaming conference this September, onGameStart in Poland. Another large gaming conference announced in the last few days for the San Francisco area this November, it’s called New Game and it looks promising. Facebook getting involved in HTML5 gaming performance.
  • 13. * made by Phil Banks (@emirpprime) So why is HTML5 gaming so cool? Because we can now use the technologies within the browser to make fast and enjoyable games. And just to clarify, by HTML5 I'm referring to HTML5 and JavaScript.
  • 14. WRITE ONCE Use anywhere Any device with a browser that supports HTML5 will run your game code, after all it’s just JavaScript and HTML. You may have to implement little differences for variations in controls, like touch on mobile devices, but the majority of the code will remain the same.
  • 15. NO COMPILATION Save time with development and testing Doesn't require compiling, so development and testing can be extremely rapid. These technologies encourage a culture of hacking stuff together quickly to experiment, then tidying things up later – or perhaps that's just me. Either way, I like the rapid nature that JavaScript and HTML brings.
  • 16. LIGHTWEIGHT Text and image files take up little room JavaScript and HTML are just text files and images, which don't take up much room.
  • 17. OPEN DEVELOPMENT Gives you a warm fuzzy feeling It gives you a warm fuzzy feeling inside to be using open technologies
  • 18. But it’s not all rosy with HTML5, why would you not want to use it? Here are just two of the major issues that are floating around right now.
  • 19. FULL COMPATIBILITY Not all browsers support everything Not every browser supports every part of HTML5. For example, canvas isn’t supported out of the box by any IE below 9. Although, you can use ExplorerCanvas to replicate canvas functionality, but it’s not ideal and as doesn’t perform as well. WebSockets still isn’t supported by IE yet, nor is it supported in Android. But again, you can fake this by using Flash for the sockets, like with Socket.IO. WebGL also has patchy support, with absolutely no support in current versions of IE, Safari, and Opera.
  • 20. NO DRM These technologies aren’t made for it If you need DRM or have a burning desire to hide absolutely everything about your code. Remember, the code isn’t compiled, so where would the DRM go? The beauty of Web technologies is that they can be read as plain text by simply viewing the page source. However, DRM isn't bulletproof in itself – you can still crack into Flash. You can still obfuscate and minify your code if you think it will help.
  • 21. TECHNOLOGY Some of the tech involved in Web gaming So there are a variety of technologies that are involved in HTML5 game development. In case I haven’t made it obvious by now, all of these technologies are related to HTML or JavaScript.
  • 22. CANVAS & WEBGL 2D and 3D graphics Canvas for 2D graphics. WebGL, which uses the canvas, for 3D graphics.
  • 23. HTML5 AUDIO Sound effects and background music HTML5 audio for game sound effects and background music.
  • 24. WEBSOCKETS Multiplayer communication WebSockets are used for bi-directional communication between a client (the player) and a server. By managing communication on the server you can create multiplayer games with relative ease.
  • 25. NODE.JS JavaScript on the server Node is only really applicable if you’re making multiplayer games, as you’ll need a server to communicate with. JavaScript on the server. Asynchronous, event-based. Great third-party modules, like Socket.IO for WebSockets.
  • 26. LOCAL STORAGE Storing data on the player device Local Storage is great for storing data locally on the player device. This way you can cache game data and allow the game to pick up where the player left off.
  • 27. MONGODB & REDIS Storing data on the server MongoDB and Redis are two examples of ways to store data remotely on the game server. MongoDB is a document-oriented database, what’s often referred to as NoSQL. Redis is a key-value data store and is much less structured than MongoDB, but it stores data in memory which makes it super fast.
  • 28. EXISTING GAMES Some of my favourite and best examples There aren’t a huge amount of HTML5 games just yet, but I thought I’d show you a selection of my favourites.
  • 29. QUAKE II Google port using Web technologies Multiplayer Quake II remake with Google GWT (Google Web Toolkit) Canvas & WebGL HTML5 audio WebSockets Local Storage http://code.google.com/p/quake2-gwt-port/
  • 30. MINECRAFT We’ll see this fully working in JavaScript soon Minecraft map viewer, using WebGL. This isn’t really a game, but it’s not a long way from becoming a JavaScript port of Minecraft. http://alteredqualia.com/three/examples/geometry_minecraft_ao.html
  • 31. WORD² Massively multiplayer Scrabble Word², massively multiplayer Scrabble. Uses WebSockets for real-time communication. http://wordsquared.com
  • 32. I love the map view. Every single pixel on this view is a Scrabble tile.
  • 33. FREECIV Open source clone of Civilisation Freeciv, an open source clone of Civilisation that uses canvas and WebSockets. 3D WebGL version currently being worked on. http://freeciv.net
  • 34. RAWKETS Because I made it and it’s addictive Rawkets is a multiplayer space shooter that I created while at university to explore canvas and WebSockets. I’m now developing it a lot further as a proper game, and plan to use it to teach others how to make multiplayer HTML5 games. Still not even at a beta release level yet, hence the bugs you can see in this video. http://rawkets.com
  • 35. LOADS MORE Games directories are everywhere Game directories specifically focused on HTML5 are popping up all over the place. Also, Kongregate now accept HTML5 games so long as they run in an iframe. html5games.com
  • 36. FUNDAMENTALS Making games with HTML5 Here are a few fundamental aspects of a HTML5 game. It’s all pretty basic, but they’re useful to cover. Not all of these are required, it depends what kind of game you're working on…
  • 37. GAME LOOP The heart of the game Most games will have a loop of some kind to manage all the logic and animation that needs to happen. This is the heart of the game and is where things happen on each frame.
  • 38. PHYSICS UPDATE Updating positions The physics update is part of the game loop that deals with any kind of physics, or even just simple movement.
  • 39. GRAPHICS UPDATES Making things visible Graphics updates are another part of the game loop, but they deal with drawing all the game assets onto the screen.
  • 40. NETWORKING Breaking out of single player Network infrastructure will allow you to take your game multiplayer, perhaps even real-time by using WebSockets.
  • 41. CONTROLS AND UI So important to get right Controls and UI, so massively important to get right. For Rawkets I hired a designer to do the UI for me so it was as good as possible.
  • 42. Seb Lee-Delisle implemented some awesome JavaScript controls for iOS devices based on some previous iOS games. http://sebleedelisle.com/2011/04/multi-touch-game-controller-in-javascripthtml5-for- ipad/ http://www.gamasutra.com/view/feature/6323/a_guide_to_ios_twin_stick_shooter_.php
  • 43. PERFORMANCE Keeping things running smoothly Performance isn’t really a fundamental feature, but it’s definitely something that you need to be keeping on top off through the development of a game with HTML5. I’ll run through a couple of tips for performance in a moment.
  • 44. GAME ENGINES Making game development easy You don't have to create an entire game infrastructure from scratch…
  • 45. Impact. I used this recently, and it’s really well made. The documentation is great and the author is active and very helpful. Will support WebSockets with a plugin, although you’ll still need to code the network logic from scratch. http://impactjs.com/
  • 46. Crafty Not my favourite engine, but it’s free and is doing much better than other free engines out there. http://craftyjs.com/
  • 47. IsongenicEngine. One of the most promising engines out there today. Massively multiplayer networking built in Uses Node and MongoDB Canvas or DOM-based graphics http://www.isogenicengine.com
  • 48. ISOGENICENGINE Iso City demo Rob Evan’s, the creator of Isogenic, is putting together a little demo called Iso City to show off the engine.
  • 49. LIBRARIES & SERVICES Saving you time in the long run If you do want to build your own engine, then there are some libraries and external services out there which might help you from having to create everything from scratch…
  • 50. BOX2DWEB JavaScript port of the Box2D physics engine Box2DWeb allows you to add a physics engine into your game with little hassle. It’s a port of the Box2D physics engine, which is the same one that Angry Birds uses. http://code.google.com/p/box2dweb/
  • 51. MOTION.JS Solving client-side prediction issues Motion.js is a new library that attempts to solve the client-side prediction issues with multiplayer gaming, some of the most difficult issues to overcome. The library doesn’t do much yet, but it’s a great idea and something to keep an eye on. https://github.com/tmpvar/motionjs
  • 52. Joyent’s Node cloud servers Provides a remotely hosted Node server that allows you to quickly get a multiplayer game up and running. It supports WebSockets, which a lot of other hosted Node services doesn’t allow.
  • 53. Pusher is for real-time communication and uses WebSockets. Remotely hosted. This is the service that Word² uses, the game that I highlighted earlier.
  • 54. Kaazing. Self-hosted WebSockets communication platform. http://kaazing.com/
  • 55. There’s also Electroserver5. Self-hosted communication platform (not WebSockets) and game server for logic. http://www.electrotank.com/es5.html
  • 56. KEY LESSONS What I’ve learnt so far Over the last few years I’ve learnt a lot of lessons about game development. Here are just a few of the most important ones.
  • 57. CUT DOWN LOOPS Less is more The less loops you can get away with the faster your game will be. Do as little as possible, no more.
  • 58. NO TIMEOUTS Use requestAnimationFrame instead Another simple lesson is to stop using JavaScript timeouts and to use requestAnimationFrame instead. requestAnimationFrame puts the browser in control of when an animation should happen and generally increases performance. It also doesn’t run in an inactive browser tab, saving you more precious resources. Paul Irish has made a shim that allows you to use the requestAnimationFrame API in browsers that don’t support it. It won’t have the cool browser-controlled animations, but it means that you don’t need to change your code. http://paulirish.com/2011/requestanimationframe-for-smart-animating/
  • 59. NETWORK TRICKS Cutting down on communication Be very aware about how much data you’re sending back and forth when creating a multiplayer game.
  • 60. 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.
  • 61. 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.
  • 62. 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.
  • 63. 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…
  • 64. 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. Fortunately there is a way around this that cuts down the amount of messages sent from the server; 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. It’s such a simple solution, but it’s one that I never even considered at first.
  • 65. CHEATERS You can’t avoid them completely Your code is going to be visible to anyone who wants to look at the source. It’s mainly an issue with multiplayer gaming, as cheating in a single player game would only affect one player. I experienced this early on in the development of Rawkets. The solution is to make the server authoritative, which means that you prevent manipulation of the player’s code from doing any damage.
  • 66. DOM OR CANVAS Which one should you use? How do you decide whether you go with the DOM or canvas for rendering? This is something that I’ve been thinking about a lot lately. In my opinion DOM has some performance benefits, but canvas is the right tool and is going in a better direction. The situations reminds me a little of the way tables were used for layout before CSS was adopted. Using DOM content elements for animation feels hacky, in a bad way. I don’t have an easy solution that will make canvas perform as well, but I think it’s important that we try and make and use canvas better rather than turning our backs on it and clinging onto the DOM. Now I'm being a bit dramatic, but I really think developers need to think long and hard before turning away from the ideal technologies like JavaScript, canvas and SVG. This is something that I hope to look into a lot more in the near future.
  • 67. THE FUTURE What HTML5 gaming still needs HTML5 gaming is still at an early stage and there are still plenty of things that can be improved.
  • 68. DOCUMENTATION Specific to HTML5 game development More documentation and teaching materials on the complex areas of game development in JavaScript. We need something like Glen Fiedler’s Gaffer on Games website, but dedicated to HTML5 instead.
  • 69. WEBGL SUPPORT Support is shocking right now Wider support for WebGL.
  • 70. MORE ENGINES Not many decent ones around right now Better game engines that really solve all the major issues, particularly with multiplayer games.
  • 71. IMPROVED AUDIO More reliable looping Improved HTML5 audio support, with proper looping.
  • 72. POWERFUL MOBILE Better hardware acceleration More powerful mobile devices, with better hardware acceleration for canvas.
  • 73. BETTER CONTROLS Break away from the keyboard and mouse Better more console-like systems for control, like Seb Lee-Delisles iOS controller.
  • 74. Brass Monkey turns a smart phone into a controller, which I had the luxury of seeing demoed recently and I must say that it’s pretty damn cool. http://brassmonkeysdk.com/
  • 75. MONETISATION Making profit from games Better monetisation options for developers. Right now there aren't (m)any games making a profit out of these new technologies. How do you monetise a game where the code is open for all to see?
  • 76. 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
  • 77. 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
  • 78. COFFEE FWD Mozilla Web FWD get together Friday July 15th Red Rock Cafe, Mountain View Innovation acceleration Meet some great people Show off your stuff FRI JULY 15TH @ RED ROCK CAFE, MV Just a quick one to let you know about an event Mozilla are putting on this Friday in Mountain View. It’s called Coffee FWD and it’s a get together related to the Web FWD Innovation Accelerator for the open Web. It’s a chance for us to work with you to help push the Web forward, so if you’re working on something cool then you should definitely come down and say hi. http://coffeefwd.eventbrite.com/ https://www.webfwd.org
  • 79. 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 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
  • 80. Thanks for listening, and I hope you enjoy the rest of your day. I believe we have some time set aside for questions…