Open Web TechnologiesCanvas: Low-level 2D drawable regionHardware-accelerated almost everywhereSpec: http://j.mp/canvas_specTutorials: https://developer.mozilla.org/en/Canvas_tutorial
Open Web TechnologiesWebGL: H/W accelerated 3D interface on top ofcanvasRuns on the GPU (must be shader-capable)shaders speciﬁed in a dialect of GLSLNo mobile support yet, not supported in IE
Why do I care?“I am a __________ andwould like to build ____ games for _____.” Image: http://umad.com
Why do I care?(Check all that apply)I Am: I Want To: a web developer build web games a Flash game developer build Facebook games a C/C#/C++ game build games for mobile developer devices not a developer (yet) build in 2D build in 3D
Distribution! ABI Research: 2.1 billion HTML5-capable mobile devices by 2015 Windows 8 Metro - no plugins (pure HTML5) Rich Hilleman, CCO EA @ New Game Conf: "When you get paid on the way out the door, you want the maximum distribution possible from all possible sites."
We’re just getting started Rich Hilleman, speaking of desktop browsers: “No reason we can’t have immersive experiences on this platform” “PS2-level hardware is where we’re at now, more than enough for immersive experiences” Accelerants: Spaceport, appMobi open source, Bocoup, us. :)
The Rough SpotsDevelopment toolsPerformance (not at the front of the curve, butdramatically improved over 6 months ago)Asset management / asset pipelineSound
Coming from Flash?ThinkPixel’s PL (https://github.com/thinkpixellab/pl/tree/master/src/retained)Easel.js: http://easeljs.com/ Retained-mode graphics Hierarchical Display ListSee also: Zoë http://easeljs.com/zoe.html (spritesheets from SWF animations)
Coming from C/C#/C++?WebGL 3D is challenging right now (IE, mobile supportlacking)three.js works on 2D canvas and is AMAZING: http://mrdoob.github.com/three.js/Gamepad support, mouse lock, fullscreen - all beingworked on, none ready yetBF3 for the web is a year or two out.
Coming from Web Dev?Get reading!Dozens of tutorials, engines, and other resources tohelp you get started: Engines: http://easeljs.com, http://impactjs.com Canvas tutorial: https://developer.mozilla.org/en/ Canvas_tutorial WebGL: http://learningwebgl.com