One codebase, multiple platforms; Using HTML5/js for game dev
-
Upload
joseph-burchett -
Category
Technology
-
view
885 -
download
2
description
Transcript of One codebase, multiple platforms; Using HTML5/js for game dev
![Page 1: One codebase, multiple platforms; Using HTML5/js for game dev](https://reader035.fdocuments.us/reader035/viewer/2022081400/55498cf9b4c905c26a8b51a9/html5/thumbnails/1.jpg)
Using HTML5/JS to develop games.
ONE CODEBASE, MULTIPLE PLATFORMS
![Page 2: One codebase, multiple platforms; Using HTML5/js for game dev](https://reader035.fdocuments.us/reader035/viewer/2022081400/55498cf9b4c905c26a8b51a9/html5/thumbnails/2.jpg)
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
![Page 3: One codebase, multiple platforms; Using HTML5/js for game dev](https://reader035.fdocuments.us/reader035/viewer/2022081400/55498cf9b4c905c26a8b51a9/html5/thumbnails/3.jpg)
All aboard the hype train!
![Page 4: One codebase, multiple platforms; Using HTML5/js for game dev](https://reader035.fdocuments.us/reader035/viewer/2022081400/55498cf9b4c905c26a8b51a9/html5/thumbnails/4.jpg)
Javascript good, HTML bad...
![Page 5: One codebase, multiple platforms; Using HTML5/js for game dev](https://reader035.fdocuments.us/reader035/viewer/2022081400/55498cf9b4c905c26a8b51a9/html5/thumbnails/5.jpg)
DON’T BE A NINJA BE AN ENGINEER
NO YES
![Page 6: One codebase, multiple platforms; Using HTML5/js for game dev](https://reader035.fdocuments.us/reader035/viewer/2022081400/55498cf9b4c905c26a8b51a9/html5/thumbnails/6.jpg)
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!
![Page 7: One codebase, multiple platforms; Using HTML5/js for game dev](https://reader035.fdocuments.us/reader035/viewer/2022081400/55498cf9b4c905c26a8b51a9/html5/thumbnails/7.jpg)
Platforms supported
![Page 8: One codebase, multiple platforms; Using HTML5/js for game dev](https://reader035.fdocuments.us/reader035/viewer/2022081400/55498cf9b4c905c26a8b51a9/html5/thumbnails/8.jpg)
What it has to offer
Gamepad support Audio support Local Storage
Web Sockets Web RTC Fullscreen
![Page 9: One codebase, multiple platforms; Using HTML5/js for game dev](https://reader035.fdocuments.us/reader035/viewer/2022081400/55498cf9b4c905c26a8b51a9/html5/thumbnails/9.jpg)
Boys and girls it’s Canvas time! Are you ready?
![Page 10: One codebase, multiple platforms; Using HTML5/js for game dev](https://reader035.fdocuments.us/reader035/viewer/2022081400/55498cf9b4c905c26a8b51a9/html5/thumbnails/10.jpg)
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 ); }
![Page 11: One codebase, multiple platforms; Using HTML5/js for game dev](https://reader035.fdocuments.us/reader035/viewer/2022081400/55498cf9b4c905c26a8b51a9/html5/thumbnails/11.jpg)
I need more power!
![Page 12: One codebase, multiple platforms; Using HTML5/js for game dev](https://reader035.fdocuments.us/reader035/viewer/2022081400/55498cf9b4c905c26a8b51a9/html5/thumbnails/12.jpg)
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
![Page 13: One codebase, multiple platforms; Using HTML5/js for game dev](https://reader035.fdocuments.us/reader035/viewer/2022081400/55498cf9b4c905c26a8b51a9/html5/thumbnails/13.jpg)
IDE’S YOU CAN USE
Sublime Text 2
![Page 14: One codebase, multiple platforms; Using HTML5/js for game dev](https://reader035.fdocuments.us/reader035/viewer/2022081400/55498cf9b4c905c26a8b51a9/html5/thumbnails/14.jpg)
TOOLS TO USE FOR MOBILE
![Page 15: One codebase, multiple platforms; Using HTML5/js for game dev](https://reader035.fdocuments.us/reader035/viewer/2022081400/55498cf9b4c905c26a8b51a9/html5/thumbnails/15.jpg)
TOOLS TO USE FOR DESKTOP
![Page 16: One codebase, multiple platforms; Using HTML5/js for game dev](https://reader035.fdocuments.us/reader035/viewer/2022081400/55498cf9b4c905c26a8b51a9/html5/thumbnails/16.jpg)
Distribution platforms
Market.js
![Page 17: One codebase, multiple platforms; Using HTML5/js for game dev](https://reader035.fdocuments.us/reader035/viewer/2022081400/55498cf9b4c905c26a8b51a9/html5/thumbnails/17.jpg)
Micro Consoles
![Page 18: One codebase, multiple platforms; Using HTML5/js for game dev](https://reader035.fdocuments.us/reader035/viewer/2022081400/55498cf9b4c905c26a8b51a9/html5/thumbnails/18.jpg)
TOOLS TO USE FOR CONSOLES
https://wiiu-developers.nintendo.com/
![Page 19: One codebase, multiple platforms; Using HTML5/js for game dev](https://reader035.fdocuments.us/reader035/viewer/2022081400/55498cf9b4c905c26a8b51a9/html5/thumbnails/19.jpg)
TOOLS TO USE FOR ROBOTICS
http://nodebots.io/
Johnny Five https://github.com/rwaldron/johnny-five
![Page 20: One codebase, multiple platforms; Using HTML5/js for game dev](https://reader035.fdocuments.us/reader035/viewer/2022081400/55498cf9b4c905c26a8b51a9/html5/thumbnails/20.jpg)
Oculus Rift
OculusBridge.js, vr.js
![Page 21: One codebase, multiple platforms; Using HTML5/js for game dev](https://reader035.fdocuments.us/reader035/viewer/2022081400/55498cf9b4c905c26a8b51a9/html5/thumbnails/21.jpg)
![Page 22: One codebase, multiple platforms; Using HTML5/js for game dev](https://reader035.fdocuments.us/reader035/viewer/2022081400/55498cf9b4c905c26a8b51a9/html5/thumbnails/22.jpg)
Browser Quest
![Page 23: One codebase, multiple platforms; Using HTML5/js for game dev](https://reader035.fdocuments.us/reader035/viewer/2022081400/55498cf9b4c905c26a8b51a9/html5/thumbnails/23.jpg)
Unreal Engine Citadel Demo
![Page 24: One codebase, multiple platforms; Using HTML5/js for game dev](https://reader035.fdocuments.us/reader035/viewer/2022081400/55498cf9b4c905c26a8b51a9/html5/thumbnails/24.jpg)
Duuuuuuh, muh brain meats they hurt! Where do I start?
![Page 25: One codebase, multiple platforms; Using HTML5/js for game dev](https://reader035.fdocuments.us/reader035/viewer/2022081400/55498cf9b4c905c26a8b51a9/html5/thumbnails/25.jpg)
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!
![Page 26: One codebase, multiple platforms; Using HTML5/js for game dev](https://reader035.fdocuments.us/reader035/viewer/2022081400/55498cf9b4c905c26a8b51a9/html5/thumbnails/26.jpg)
You sure talk a lot...
![Page 27: One codebase, multiple platforms; Using HTML5/js for game dev](https://reader035.fdocuments.us/reader035/viewer/2022081400/55498cf9b4c905c26a8b51a9/html5/thumbnails/27.jpg)
Shameless Plug
http://igdasacramento.org/
![Page 28: One codebase, multiple platforms; Using HTML5/js for game dev](https://reader035.fdocuments.us/reader035/viewer/2022081400/55498cf9b4c905c26a8b51a9/html5/thumbnails/28.jpg)
Questions?