intro to html5 game development
Alex Porter
May 1, 2013
Who am i?
Alex Porter
Interactive Developer at BaM - bamideas.com
(Bradley and Montgomery)
Founder of Street Alchemy Games
Some stuff I've Done
Built games + experiences for Microsoft - Internet Explorer to show off what HTML5 can do!
Bored To Death - boredtodeath.ie
Thief of Thieves Experience - ie10bethethief.com
What Do we mean by "html5" game?
Really, we just mean no plugins.
(Flash, Silverlight, Unity, etc.)
Let the built-in features of the browser power our game.
WHY SHOULD I BUILD IT IN HTML5?
Pros
- New features all the time!
- Getting faster every day
- Javascript!
Cons
- Cross-browser bugs
- Decreased performance in some cases
- Javascript!
DOM vS CANVAS
Right now we have two options.
Both are widely considered "HTML5" game dev.
DOM (Document Object Model)
- Animating HTML elements
- Can "work" on very old browsers
<canvas>
- "Actually" HTML5
- A big grid of pixels for you to paint on
- Can be very performant under the right conditions
- Advanced image/bitmap capabilities
DOM VS CANVAS
For this workshop we're going to focus
on the <canvas> method of building HTML5 Games
A Bit on GAme Design Theory
(from your head to a .js file)
- Come up with an idea for a game
- Write EVERYTHING down!
- Talk about the idea with someone
- Draw, sketch, write prose!
- Brush up on your Trig skills...
- Decide on your engine/technology
- THEN start building
Some EXAMPLE DEV NOTES
Some ENGINES!
Once you decide on HTML5, you'll need an engine!
(seriously, don't build you're own)
Impact JS - Fantastic Tile Engine ($99)
Phaser - Basically Flixel for HTML5
Create JS - Not really a game engine, but can be!
Pulse - Basic canvas game engine
Giant list of other engines here!
Building Your First GAme
Elementary
(demo time)
Challenge!
Elementary is fully open source under an MIT license
Fork it, add some awesomeness, let's make a great game together!
Elementary is fully open source under an MIT license
THE FUTURE OF HTML5 GAMES
- New Features keep pushing what we can do
- Pointer lock
- Gamepad API
- Web Audio API
- Web GL
Questions?
intro to html5 game development
By streetalchemist
intro to html5 game development
- 2,654