Your SlideShare is downloading. ×
0
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 IGD...
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...
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 CANVA...
I need more power!
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...
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 make
3. choose...
You sure talk a lot...
Shameless Plug
http://igdasacramento.org/
Questions?
One codebase, multiple platforms; Using HTML5/js for game dev
Upcoming SlideShare
Loading in...5
×

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

914

Published on

This is a presention I gave at a local event hosted by intel.

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
914
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

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

    Clipping is a handy way to collect important slides you want to go back to later.

×