HTML5 Games



Eric Terpstra
@eterps

WHAT  IS an 


game?

A GAME THAT WILL RUN
IN A WEB BROWSER
WITHOUT USE OF
third party plugins

no!


 

Well gee,
what can I use?

Your old pals...


...with some new tricks

localStorage • audio • video • device orientation • progress • regions • svg
resize • media queries • 3D transforms • masks • gradients • file API
typed arrays • web SQL • notifications • full screen • mouse lock • offline

html5 <canvas>


http://codepen.io/pixelgrid/pen/ECrKd

WEB GL

http://workshop.chromeexperiments.com/stars/

Awesome!


Why isn't everyone
doing this?

Well...


Image via Matt Collins and the New York Times

performance can be an issue


monetization?

omg!

wtf?

THxbutnothx

Hold on a sec...


With a little effort 

and some neat tools, you can:


  1. Get native performance

  2. Release in app stores

  3. Profit!*

*Profit not guaranteed.
Through black magic and dark wizardry...




... your <canvas> games become 
accelerated mobile apps.


Plus, all the cool kids are using 

HTML5 for apps and games now.


 

Ok, I'm convinced.

so how do I get started?

html5 game engines!


Free, open source, and javascript:

  • Crafty
  • LimeJS
  • Starling.js
  • CreateJS (EaselJS)
  • Cocos2D-html5
  • RPG.js
  • Isogenic
  • Many more....

https://github.com/bebraw/jswiki/wiki/Game-Engines

Some new hotness:

  phaser



or pay some $$$ to get fancy



look at some code



http://city41.github.io/breakouts/

grab some libs, do whatever


  • INPUT: Hammer.js, Mousetrap

  • SOUND: Howler.js, Buzz

  • SPRITES: Spritely

  • ANIMATION: GSAP, TweenJS

  • VECTOR GFX: Paper, Raphael

http://jster.com

ok, but where do i get ideas and graphics and sounds and stuff?

ideas


Read a book (or a magazine)

  • The Art of Game Design: A Book of Lenses by Jesse Schell
  • A Theory of Fun for Game Design by Raph Koster
  • Kill Screen Magazine (and blog)

Play some games

graphics


sounds and music


so exciting!
But how do I stay excited after this slide show?

join a competition or game jam



CompoHub.com

$ do it for the money $

just kidding!

You probably won't make any money.

impress your friends and family

Demo time?

thanks!

Eric Terpstra
www.ericterpstra.com
@eterps