intro to html5 game development


Alex Porter

@streetalchemist


Dev Workshop Indy

May 1, 2013

Who am i?

Alex Porter

Interactive Developer at BaM - bamideas.com
(Bradley and Montgomery)




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)


  1. Come up with an idea for a game
  2. Write EVERYTHING down!
  3. Talk about the idea with someone
  4. Draw, sketch, write prose!
  5. Brush up on your Trig skills...
  6. Decide on your engine/technology
  7. 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!

THE FUTURE OF HTML5 GAMES






Questions?


intro to html5 game development

By streetalchemist