This document discusses using HTML5 and JavaScript to develop games that can run on multiple platforms. It outlines several game engines and frameworks like Phaser.js, Melon.js and Crafty.js that use HTML5 technologies to build 2D and 3D games. It also mentions tools for developing games targeting mobile, desktop, consoles and other platforms. The document provides code examples for basic canvas animation and advises starting simple, choosing the right platform and having fun learning.

1. Using HTML5/JS to develop games.
ONE CODEBASE,
MULTIPLE PLATFORMS

2. Who are you?
1. Build Master of Dawn of the Dragons Mobile at
5th Planet Games
2. Web Developer
3. Vice Coordinator of IGDA Sacramento Chapter
4. Podcaster
5. Google plus fan boy
6. Lover of all things Javascript
http://about.me/josephburchett

3. All aboard the hype train!

4. Javascript good, HTML bad...

5. DON’T BE A NINJA BE AN ENGINEER
NO YES

6. The good, bad, ugly and fugly
● Can leverage web skill sets!
● It can be super confusing at
times
● With great power comes
great responsibility
● Really inconsistent feature
support across browsers
● No one can seem to agree
on anything.
● It’s extremely
overwhelming!
● People not using javascript
will look at you in disgust.
● It’s not ready!
● Things move fast, really
fast!

7. Platforms supported

8. What it has to offer
Gamepad support Audio support Local Storage
Web Sockets Web RTC Fullscreen

9. Boys and girls it’s Canvas time! Are
you ready?

10. Canvas Example code
var context = canvas.getContext( "2d" );
var FRAME_RATE = 30 / 1000;
var CANVAS_WIDTH = 800;
var CANVAS_HEIGHT = 600;
var FILL_COLOR = “#000000”;
var xPosition = 0;
var yPosition = 0;
var width = 50;
var height = 50;
gameLoop();
function gameLoop()
{
xPosition += 2;
context.clearRect( 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT );
context.fillStyle = FILL_COLOR;
context.fillRect( xPosition, yPosition, width, height );
setTimeout( gameLoop, FRAME_RATE );
}

11. I need more power!

12. API’S TO USE
Name
Phaser.js
jaws.js
Melon.js
Crafty.js
Pixi.js
Impact.js
threejs
Voxel.js
Link
phaser.io
http://jawsjs.com/
http://melonjs.org/
http://craftyjs.com/
http://www.pixijs.com/
http://impactjs.com/
http://threejs.org/
http://bit.ly/voxeljs
Type
2D
2D
2D
2D
2D
2D
3D
3D
Rendering
Canvas, Webgl
Canvas
Canvas
Canvas
Canvas, Webgl
Canvas
Webgl
Webgl
List of a ton more
https://github.com/bebraw/jswiki/wiki/Game-Engines

13. IDE’S YOU CAN USE
Sublime Text 2

14. TOOLS TO USE FOR MOBILE

15. TOOLS TO USE FOR DESKTOP

16. Distribution platforms
Market.js

17. Micro Consoles

18. TOOLS TO USE FOR CONSOLES
https://wiiu-developers.nintendo.com/

19. TOOLS TO USE FOR ROBOTICS
http://nodebots.io/
Johnny Five
https://github.com/rwaldron/johnny-five

20. Oculus Rift
OculusBridge.js, vr.js

22. Browser Quest

23. Unreal Engine Citadel Demo

24. Duuuuuuh, muh brain meats they hurt! Where do I start?

25. Cool, should I go indie?
1. Don’t be stupid, keep your day job!
2. Figure out what type of game you want to make
3. choose the platform that fits it best
4. KISS!
5. Go to google and type in “learning canvas”.
6. use tools I mentioned!
7. good luck and have fun!

26. You sure talk a lot...

27. Shameless Plug
http://igdasacramento.org/

28. Questions?