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 Games2. Web Developer3. Vice Coordinator of IGDA Sacramento Chapter4. Podcaster5. Google plus fan boy6. Lover of all things Javascript

http://about.me/josephburchett

All aboard the hype train!

Javascript good, HTML bad...

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!

Platforms supported

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

I need more power!

API’S TO USENamePhaser.jsjaws.jsMelon.jsCrafty.jsPixi.jsImpact.jsthreejsVoxel.js

Linkphaser.iohttp://jawsjs.com/http://melonjs.org/http://craftyjs.com/http://www.pixijs.com/http://impactjs.com/http://threejs.org/http://bit.ly/voxeljs

Type2D2D2D2D2D2D3D3D

RenderingCanvas, WebglCanvasCanvasCanvasCanvas, WebglCanvas WebglWebgl

List of a ton morehttps://github.com/bebraw/jswiki/wiki/Game-Engines

IDE’S YOU CAN USE

Sublime Text 2

TOOLS TO USE FOR MOBILE

TOOLS TO USE FOR DESKTOP

Distribution platforms

Market.js

Micro Consoles

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

Browser Quest

Unreal Engine Citadel Demo

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 make3. choose the platform that fits it best4. KISS!5. Go to google and type in “learning canvas”.6. use tools I mentioned!7. good luck and have fun!

You sure talk a lot...

Shameless Plug

http://igdasacramento.org/

Questions?