NO COMPILATION
Save time with development and testing
Slide 16
Slide 16 text
LIGHTWEIGHT
Text and image files take up little room
Slide 17
Slide 17 text
OPEN DEVELOPMENT
Gives you a warm fuzzy feeling
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
FULL COMPATIBILITY
Not all browsers support everything
Slide 20
Slide 20 text
NO DRM
These technologies aren’t made for it
Slide 21
Slide 21 text
TECHNOLOGY
Some of the tech involved in Web gaming
Slide 22
Slide 22 text
CANVAS & WEBGL
2D and 3D graphics
Slide 23
Slide 23 text
HTML5 AUDIO
Sound effects and background music
Slide 24
Slide 24 text
WEBSOCKETS
Multiplayer communication
Slide 25
Slide 25 text
NODE.JS
JavaScript on the server
Slide 26
Slide 26 text
LOCAL STORAGE
Storing data on the player device
Slide 27
Slide 27 text
MONGODB & REDIS
Storing data on the server
Slide 28
Slide 28 text
EXISTING GAMES
Some of my favourite and best examples
Slide 29
Slide 29 text
QUAKE II
Google port using Web technologies
Slide 30
Slide 30 text
MINECRAFT
We’ll see this fully working in JavaScript soon
Slide 31
Slide 31 text
WORD²
Massively multiplayer Scrabble
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
FREECIV
Open source clone of Civilisation
Slide 34
Slide 34 text
RAWKETS
Because I made it and it’s addictive
Slide 35
Slide 35 text
LOADS MORE
Games directories are everywhere
Slide 36
Slide 36 text
FUNDAMENTALS
Making games with HTML5
Slide 37
Slide 37 text
GAME LOOP
The heart of the game
Slide 38
Slide 38 text
PHYSICS UPDATE
Updating positions
Slide 39
Slide 39 text
GRAPHICS UPDATES
Making things visible
Slide 40
Slide 40 text
NETWORKING
Breaking out of single player
Slide 41
Slide 41 text
CONTROLS AND UI
So important to get right
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
PERFORMANCE
Keeping things running smoothly
Slide 44
Slide 44 text
GAME ENGINES
Making game development easy
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
ISOGENICENGINE
Iso City demo
Slide 49
Slide 49 text
LIBRARIES & SERVICES
Saving you time in the long run
Slide 50
Slide 50 text
BOX2DWEB
JavaScript port of the Box2D physics engine
Slide 51
Slide 51 text
MOTION.JS
Solving client-side prediction issues
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
KEY LESSONS
What I’ve learnt so far
Slide 57
Slide 57 text
CUT DOWN LOOPS
Less is more
Slide 58
Slide 58 text
NO TIMEOUTS
Use requestAnimationFrame instead
Slide 59
Slide 59 text
NETWORK TRICKS
Cutting down on communication
Slide 60
Slide 60 text
1 1
MESSAGES IN
1
MESSAGES OUT
1
Slide 61
Slide 61 text
1 2
2 1
MESSAGES IN
2
MESSAGES OUT
4
Slide 62
Slide 62 text
1 4
4 1
1
4
4
1
MESSAGES IN
4
MESSAGES OUT
16
Slide 63
Slide 63 text
MESSAGES IN
30
MESSAGES OUT
900
1 30
30 1
1
30
30
1
Slide 64
Slide 64 text
MESSAGES IN
100
MESSAGES OUT
10000
1 100
100 1
1
100
100
1
Slide 65
Slide 65 text
CHEATERS
You can’t avoid them completely
Slide 66
Slide 66 text
DOM OR CANVAS
Which one should you use?
Slide 67
Slide 67 text
THE FUTURE
What HTML5 gaming still needs
Slide 68
Slide 68 text
DOCUMENTATION
Specific to HTML5 game development
Slide 69
Slide 69 text
WEBGL SUPPORT
Support is shocking right now
Slide 70
Slide 70 text
MORE ENGINES
Not many decent ones around right now
Slide 71
Slide 71 text
IMPROVED AUDIO
More reliable looping
Slide 72
Slide 72 text
POWERFUL MOBILE
Better hardware acceleration
Slide 73
Slide 73 text
BETTER CONTROLS
Break away from the keyboard and mouse
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
MONETISATION
Making profit from games
Slide 76
Slide 76 text
Rawkets.com
HTML5 & WebSockets game.
Twitter sentiment analysis
Delving into your soul.
RECENT PROJECTS
Rawkes.com
Personal website and blog
MORE COOL STUFF
ExplicitWeb.co.uk
Web development podcast.
Mozilla Technical Evangelist
My job
ROB HAWKES
@robhawkes
Slide 77
Slide 77 text
Become a canvas master
FOUNDATION HTML5 CANVAS
My amazing book on canvas, animation, and making games.
RAWKES.COM/FOUNDATIONCANVAS
Out now
Paperback and digital formats
Learn how to animate
Make two cool space games
Slide 78
Slide 78 text
COFFEE FWD
Mozilla Web FWD get together
Innovation acceleration
FRI JULY 15TH @ RED ROCK CAFE, MV
Friday July 15th
Red Rock Cafe, Mountain View
Meet some great people
Show off your stuff
Slide 79
Slide 79 text
DEV DERBY
Experimenting with the latest Web technologies
Manipulate video with canvas
DEVELOPER.MOZILLA.ORG/EN-US/DEMOS/DEVDERBY
Every month
This month is HTML5 video
Win prizes (like an Android)
Next month is all about touch