One codebase, multiple platforms; Using HTML5/js for game dev

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

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

DON’T BE A NINJA BE AN ENGINEER
NO YES

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!

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

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

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 );
}

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

IDE’S YOU CAN USE
Sublime Text 2

Distribution platforms
Market.js

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

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

Oculus Rift
OculusBridge.js, vr.js

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

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!

Shameless Plug
http://igdasacramento.org/

One codebase, multiple platforms; Using HTML5/js for game dev

More Related Content

Similar to One codebase, multiple platforms; Using HTML5/js for game dev

Recently uploaded

One codebase, multiple platforms; Using HTML5/js for game dev