HTML5 and Other Modern Browser Game Tech

18,113 views

Published on

Overview of HTML5 and other modern browser game technologies. Presented at Game Developers Conference 2011 by Vincent Scheib

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
18,113
On SlideShare
0
From Embeds
0
Number of Embeds
7,451
Actions
Shares
0
Downloads
0
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide
  • - New and Upcoming tech- Why care - Zero friction – available in browser, no plugins - Forward looking – Some tech ready today, more coming - Mobile – Many platforms, ubiquity
  • - No Flash on iOS browser- Security an issue with plugins
  • - Important metric is how many users will play, if a plugin is installed already or not
  • -Plugins worst – full permission for any web page
  • -Lots of options on desktop-iOS limited!-Webkit on several
  • -WebKit over 50%-HTML5 support pervasive
  • -WebKit over 50%-HTML5 support pervasive
  • - Android allows C++/Java from JS- Rich input if correct forms used- Android has simple touch, iOSmultitouch
  • 120M Chrome users
  • - Synced between browsers- Easy offline- Permissions cleared at “install” time
  • CWS is a new platform for distributing games and apps on the webTargeted at 120M Chrome usersMonetization currently includes in-store payments and adsIn-app payments solution is coming soon and is a perfect fit for gamesSign up for early betaMore details at the booth
  • - 2D context, widely supported (IE9)- Procedural images- Dynamic OK, but not designed specifically for “animated frames”
  • -Simple 2D- Physics- Shooters (typing shooter) “Z-type”-Retro Sprite “Onslaught”- MMO Scrabble “Word Squared”-3D (mostly flat, though textured possible to)
  • -DrawImage takes Sub Regions as well
  • - Implementations around for 5 years, standard started 10 years ago
  • -EXTERNAL Javascript tool-Capturevis HUD-Step Draw Calls-State-Texture state-Texture Browser-Shader programs, view parameters-View shaders-View data buffers as well
  • -Optional to use Google API, but easy
  • -Larger API
  • -Larger API
  • -Editor’s Draft
  • -W3C Editors Draft of Spec
  • -3 component accelerations, rotations-interval in milliseconds
  • -Session storage clears at end of session
  • -HTML5
  • -Copies message data between processes-No DOM access
  • -Plugins have full access to OS-JS safely sandboxed, browser offers security-NaCl does the same for C++
  • HTML5 and Other Modern Browser Game Tech

    1. 1. HTML5 and other Modern Browser Game Tech<br />Vincent Scheib<br />Software Engineer, Chrome GPU team<br />February 28, 2011<br />1<br />
    2. 2. This is an Overview<br />Overview & Motivation<br />Browsers, Platforms<br />Technology Survey<br />Graphics, Audio, Networking, Storage…<br />Libraries, Benchmarks<br />2<br />
    3. 3. Overview & Motivation<br />3<br />
    4. 4. My Perspective on the Last Decade & Web Tech<br />4<br />GPU Acceleration<br />C++ in Browser<br />Chrome OS<br />
    5. 5. April 1 2010 – Quake II in HTML5<br />Ray Cromwell, Stefan Haustein, Joel Webber – Google<br />- WebGL, canvas<br />- Web Sockets<br />- Local Storage<br />- Audio<br />Chrome & Safari<br />5<br />
    6. 6. No Plugins<br />6<br />Not discussing: Flash, Java, Silverlight, Unity<br />
    7. 7. Plugin Use / Installation% of Chrome Users<br />7<br />iOS<br />* Data from users opting in to reporting usage statistics, 2010<br />
    8. 8. Low Friction, Better Security<br />8<br />
    9. 9. Browsers and Platforms<br />9<br />
    10. 10. Browser Trends<br />10<br />IE<br />Firefox<br />Chrome<br />
    11. 11. Mobile Trends<br />Opera<br />iPhone<br />Nokia<br />BlackBerry<br />Android<br />11<br />
    12. 12. Mobile Trends<br />iPhone<br />Android<br />Nokia<br />BlackBerry<br />Opera<br />iPhone<br />Nokia<br />BlackBerry<br />Android<br />12<br />
    13. 13. Mobile Native or Web App?<br />iOS & Android Monetize Native Apps<br />WebApp wrappers: PhoneGap, appMobi<br />Performance<br />Native has greater perf, but<br />On Android, can call through to C++ from JS<br />Forms Input<br />HTML5 input forms produce correct input device<br />Touch<br />13<br />
    14. 14. Chrome Web Store – Distribution & Monetization<br />14<br />
    15. 15. Chrome Web Store – Chrome Integration<br />15<br />
    16. 16. Chrome Web Store<br />Discovery, Distribution and Monetization on the Web<br />16<br />Web Apps<br />120 million users<br />In-app payments coming soongoogle.com/checkout/inapp<br />… And Monetization<br />
    17. 17. The Browser is the Platform<br />ChromeOS<br />webOS<br />17<br />
    18. 18. Browser Technologies<br />18<br />
    19. 19. Canvas 2D<br />19<br />
    20. 20. Canvas 2D –Examples<br />20<br />
    21. 21. Canvas 2D – Overview<br />Mostly Sprites<br />Flash <br />Widely supported (mobile & desktop)<br />IE9 brings GPU performance<br />Javscript Shim Libraries run on old IE, e.g. ExplorerCanvas<br />GPU upgrades Hundreds to Thousands of Draws @30fps<br />Immediate Mode<br />Popular<br />21<br />
    22. 22. Canvas 2D – API<br />Primitives<br />rect, circle arcs, lines, bezier curves, text, images<br />Drawing<br />fill and stroke<br />Effects<br />shadows, gradients, image patterns, line styles, clipping, compositing operations<br />Transforms<br />rotate, scale, matrix transform (2x2 + translation)<br />22<br />Text<br />
    23. 23. Canvas 2D – Simple Sample<br /><canvas id="e" width="200" height="100"></canvas><script>  var context =document.getElementById("e").getContext("2d");  var cat = new Image();  cat.src = "images/cat.png";  cat.onload = function() {    context.drawImage(cat, 0, 0); };</script><br />23<br />
    24. 24. Canvas 2D – Fill and Stroke Sample<br />// Draw eyesctx.fillRect(160, 130, 20, 80);ctx.fillRect(220, 130, 20, 80);// Draw mouthctx.beginPath();ctx.moveTo(100, 230); // Start smilectx.bezierCurveTo(100, 230, 200, 380, 300, 230);ctx.moveTo(219, 298); // Start tonguectx.bezierCurveTo(278, 351, 315, 315, 277, 258);ctx.lineWidth = 20;ctx.stroke();<br />(adapted from IE9 sample)<br />24<br />
    25. 25. Canvas 2D – Availability<br />Chrome – Firefox – Safari: GO!<br />Internet Explorer: Soon in IE9<br />Mobile: GO!<br />25<br />- caniuse.com, Feb 2011 <br />
    26. 26. Scalable Vector Graphics<br />SVG<br />26<br />
    27. 27. SVG – Examples<br />27<br />
    28. 28. SVG – Overview<br />Vector markup language<br />Declarative or retainedprocedural API<br />Tools (Illustrator, Inkscape)<br />HTML5 Enables SVG Markup Inline with HTML<br />Retained API<br />GPU Acceleration Friendly - Retained data structures allow caching<br />Little Groundswell<br />Complex API? Retained?<br />28<br />
    29. 29. SVG – Sample<br /><!DOCTYPE html><html><body> <br /> <svg id=“mySVG”> <br /> <circle id="circle0" <br />cx="100" cy="75" r="50" <br /> fill="grey" <br /> stroke="black" <br /> stroke-width="5“<br />onmousedown="alert('clicked');"> <br /> <text x="60" y="155">Hello World</text> <br /> </svg><br />...<br />29<br />
    30. 30. SVG – Sample<br /> <script><br />var circle = document.createElementNS(<br /> "http://www.w3.org/2000/svg", "circle");<br />circle.setAttribute('cx', 90); <br />circle.setAttribute('cy', 90);<br />circle.setAttribute('r', 30);<br />circle.setAttribute('onmousedown', "alert('no, me!');");<br />document.getElementById("svg0").appendChild(circle);<br /> </script><br /></body></html><br />30<br />
    31. 31. SVG – Links<br />raphaeljs.com<br />Ease of use, charts, etc.<br />burst.bocoup.com<br />Renders SVG into Canvas 2D<br />31<br />
    32. 32. SVG – Availability<br />Chrome – Firefox – Safari: GO!<br />Internet Explorer: Soon in IE9<br />Mobile: iOS GO! – Android: No<br />32<br />- caniuse.com, Feb 2011 <br />
    33. 33. Canvas 3D<br />WebGL<br />33<br />
    34. 34. WebGL – Examples<br />34<br />
    35. 35. WebGL – Overview<br />Open GL ES 2<br />Textures, Framebuffers, Blending<br />Vertex and Fragment Shaders (GLSL)<br />Khronos group specification 1.0 Q1 2011<br />Matrix libraries come separately<br />What will Microsoft do?<br />35<br />
    36. 36. WebGL – Libraries<br />Many Higher Level Libraries<br />C3DL<br />Copperlicht<br />GLGE<br />O3D<br />Processing.js<br />SpiderGL<br />SceneJS<br />three.js<br />WebGLU<br />XB PointStream<br />36<br />
    37. 37. WebGL Inspector (Ben Vanik)<br />37<br />
    38. 38. WebGL – Sample Spinning Box<br />38<br />
    39. 39. WebGL – Sample Spinning Box<br /><script id="vshader" type="x-shader/x-vertex"> <br /> uniform mat4 u_modelViewProjMatrix;<br /> uniform mat4 u_normalMatrix;<br /> uniform vec3 lightDir;<br /> attribute vec3 vNormal;<br /> attribute vec4 vColor;<br /> attribute vec4 vPosition;<br /> varying float v_Dot; <br /> varying vec4 v_Color;<br /> void main() {<br />gl_Position = u_modelViewProjMatrix * vPosition;<br />v_Color = vColor;<br /> vec4 transNormal = u_normalMatrix * vec4(vNormal, 1);<br />v_Dot = max(dot(transNormal.xyz, lightDir), 0.0);<br />39<br />
    40. 40. WebGL – Sample Spinning Box<br /><script id="fshader" type="x-shader/x-fragment"> <br /> varying float v_Dot;<br /> varying vec4 v_Color;<br /> void main()<br /> {<br />gl_FragColor = vec4(v_Color.xyz * v_Dot, v_Color.a);<br /> }<br /></script><br />40<br />
    41. 41. WebGL – Sample Spinning Box<br />gl = canvas.getContext(“webgl”, args);<br />gl.createShader(shaderType);<br />gl.shaderSource(shader, shaderScript.text);<br />gl.compileShader(shader);<br />var colors = new Uint8Array( [ 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1,<br /> 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, <br /> //…<br />gl.box.colorObject = gl.createBuffer();<br />gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.colorObject);<br />gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);<br />//…<br />41<br />
    42. 42. WebGL – Sample Spinning Box<br />function drawPicture(gl) {<br />reshape(gl);<br />gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);<br />// Make a model/view matrix.<br />gl.mvMatrix.makeIdentity();<br />gl.mvMatrix.rotate(20, 1,0,0);<br />gl.mvMatrix.rotate(currentAngle, 0,1,0);<br />//…<br />gl.drawElements( gl.TRIANGLES, gl.box.numIndices, gl.UNSIGNED_BYTE, 0);<br />42<br />
    43. 43. WebGL – Demos<br />NinePointFive<br />Aquarium<br />Google Body<br />43<br />
    44. 44. WebGL – Availability<br />Chrome – Firefox – Safari: Chrome Shipped. Soon in FF4 & Safari<br />Internet Explorer: No<br />Mobile: Waiting on Firefox 4, other browsers in progress.<br />44<br />- caniuse.com, Feb 2011 <br />
    45. 45. aka – your render loop<br />requestAnimationFrame<br />45<br />
    46. 46. requestAnimationFrame – Overview<br />Status Quo: Draw, Draw, Draw, Blindly! <br />setInterval(draw, 16)<br />Browser Calls You (FireFox Beta 4, Chrome 10)<br />function draw() {<br /> //... Do Drawing Work, then ask to called again:<br />window.requestAnimationFrame(draw);<br />}<br />// kick off first frame:<br />window.requestAnimationFrame(draw);<br />46<br />setInterval(draw, 16)<br />setInterval(draw, 16)<br />setInterval(draw, 16)<br />setInterval(draw, 16)<br />setInterval(draw, 16)<br />setInterval(draw, 16)<br />setInterval(draw, 16)<br />setInterval(draw, 16)<br />
    47. 47. requestAnimationFrame – Availability<br />Chrome – Firefox – Safari: Soon in Chrome 10, FF4<br />Use a Shim, future compatible:// shim layer with setTimeout fallback – Paul Irish<br />window.requestAnimFrame = (function(){<br /> return window.requestAnimationFrame || <br />window.webkitRequestAnimationFrame || <br />window.mozRequestAnimationFrame || <br />window.oRequestAnimationFrame || <br />window.msRequestAnimationFrame || <br /> function(/* function */ callback, /* DOMElement */ element){<br />window.setTimeout(callback, 1000 / 60);<br /> };<br />})();<br />47<br />
    48. 48. Cascading Style Sheets – 3D Transformations<br />CSS 3D<br />48<br />
    49. 49. CSS 3D – Examples<br />CSS3D<br />49<br />
    50. 50. CSS 3D – Overview<br />Add 3D to Any Web Content<br />Helps make cool HUD<br />50<br />
    51. 51. CSS 3D – Sample<br /><!DOCTYPE html><html><body> <br /><div style="-webkit-perspective: 400;"><br /><iframe<br />src="http://www.gdconf.com/" width = 1024 height = 768<br /> style="-webkit-transform: rotate3d(1,0,0, 15deg)"><br /></iframe><br /></div><br /></body></html><br />51<br />
    52. 52. CSS 3D – Availability<br />Chrome – Firefox – Safari: Soon in Chrome, FF No, Safari GO!<br />Internet Explorer: No<br />Mobile: iOS GO! – Android: No<br />52<br />- caniuse.com, Feb 2011 <br />
    53. 53. Web Fonts<br />53<br />
    54. 54. Web Fonts – Overview<br />Game UI via HTML<br />Serve Custom Fonts<br />Easy Google Fonts API<br /><link href='http://fonts…?family=Chewy‘rel='stylesheet' type='text/css'><br />In CSS:<br />h1 { font-family: 'Chewy', arial, serif; }<br />54<br />
    55. 55. Web Fonts – Availability<br />Chrome – Firefox – Safari: GO!<br />Internet Explorer: Best in IE9<br />Mobile: Mostly… <br />55<br />- caniuse.com, Feb 2011 <br />
    56. 56. <audio><br />56<br />
    57. 57. <audio> – Overview<br />Tags in HTML, or created by javascript<br />57<br />
    58. 58. <audio> – Sample <br />var audio = new Audio();<br />audio.addEventListener("canplaythrough", function () { audio.play(); });<br />audio.src = “treasure.ogg”;<br />58<br />
    59. 59. <audio> – Issues<br />iOS >= 4 – only one sample at a time<br />No one codec supported by all browsers. <br />Pick 2 from: MP3, Vorbis, WAV<br />detect suitability before loading, with e.g. new Audio().canPlayType(“audio/ogg”);<br />59<br />
    60. 60. <audio> – Future1<br />FireFox Audio Data API supports Read/Write samples<br />var output = new Audio();<br />output.mozSetup(1, 44100);<br />var samples = new Float32Array(22050);<br />varlen = samples.length;<br /> for (vari = 0; i < samples.length ; i++) {<br /> samples[i] = Math.sin( i / 20 );<br /> }<br />output.mozWriteAudio(samples);<br />60<br />
    61. 61. <audio> – Future2<br />Web Audio API<br />Node graph<br />Low latency<br />Spatialization, 3d<br />Reverb<br />Native implementation performance<br />61<br />
    62. 62. <audio> – Links<br />SoundManager 2<br />Flash fallback<br />www.schillmania.com/projects/soundmanager2<br />62<br />
    63. 63. <audio> – Availability<br />Chrome – Firefox – Safari: GO!<br />Internet Explorer: Soon in IE9<br />Mobile: (With limits)<br />63<br />- caniuse.com, Feb 2011 <br />
    64. 64. <video><br />64<br />
    65. 65. <video> – Overview<br />Source for textures in <canvas> 2D or WebGLvideoElement.play(); <br />videoElement.addEventListener("timeupdate",updateTexture, true); <br /> function updateTexture() { <br />gl.bindTexture(gl.TEXTURE_2D, cubeTexture); <br /> gl.texImage2D(gl.TEXTURE_2D, 0, videoElement, true); <br />gl.generateMipmap(gl.TEXTURE_2D);<br /> }<br />Demo<br />65<br />
    66. 66. <video> – Availability<br />Chrome – Firefox – Safari: GO!<br />Internet Explorer: Soon in IE9<br />Mobile: GO!<br />66<br />- caniuse.com, Feb 2011 <br />
    67. 67. WebSockets<br />67<br />
    68. 68. WebSockets – Overview<br />Low latency, persistent, full duplex <br />Upgrades from HTTP handshake<br />UTF8<br />Simple<br />var socket = new WebSocket(“ws://server.com”);<br />socket.onopen = function(event) { socket.send(“Hello Server”); }<br />socket.onmessage = function(event) { <br />alert(“Server says: “ + event.data);<br />68<br />
    69. 69. WebSockets - Future<br />FireFox and Opera Behind Flag<br />Standard for protocol upgrade<br />Binary<br />Peer to Peer<br />Unreliable (vs TCP)<br />69<br />
    70. 70. WebSockets – Links<br />socket.io<br />Higher level library<br />Transport on WebSockets, Flash, Ajax, …<br />github.com/gimite/web-socket-js<br />Shim implementation on top of Flash<br />70<br />
    71. 71. Web Sockets – Availability<br />Chrome – Firefox – Safari: Yes, Still Stabilizing, Some Behind a Flag<br />Internet Explorer: In HTML5 Labs<br />Mobile: iOS Stabilizing, Android?<br />71<br />- caniuse.com, Feb 2011 <br />
    72. 72. Javascript on your Server<br />Node.JS<br />72<br />
    73. 73. Node.JS – Overview<br />Ease of Same Language and Client & Server<br />Simple, lots of uptake<br />Tools / Plugins<br />WebSockets, manage connections, render server side, just lots...<br />Visual Debugger<br />73<br />
    74. 74. GeoLocation<br />74<br />
    75. 75. GeoLocation – Sample<br />Mobile, and Desktops too<br />navigator.geolocation.getCurrentPosition( <br /> function (location) {<br />doSomething(location.coords.latitude, location.coords.longitude); });<br />75<br />
    76. 76. GeoLocation – Availability<br />Chrome – Firefox – Safari: GO!<br />Internet Explorer: Soon in IE9<br />Mobile: GO!<br />76<br />- caniuse.com, Feb 2011 <br />
    77. 77. DeviceOrientationDeviceMotionEvent<br />77<br />
    78. 78. DeviceOrientation – Overview<br />iOS >= 4.2<br />Chrome on Mac<br />78<br />
    79. 79. DeviceOrientation – Sample<br />window.addEventListener("devicemotion", function(event) {<br /> // event.acceleration, // event.accelerationIncludingGravity,<br /> // event.rotationRate,<br /> // event.interval<br /> }, true);<br />79<br />
    80. 80. DeviceOrientation – Availability<br />Chrome – Firefox – Safari: Yes, but not on all devices<br />Internet Explorer: ?<br />Mobile: Only iOS >= 4.2<br />80<br />
    81. 81. Some options…<br />Saving Data on the Client<br />81<br />
    82. 82. 82<br />
    83. 83. Web Storage – Overview<br />Local Storage & Session Storage<br />5MB of key value pair strings<br />localStorage["levels-unlocked"] = 5 // or .getItem() / .setItem()<br />localStorage.removeItem()<br />localStorage.clear(); // Dump everything<br />Widely supported<br />Non Transactional<br />No good recourse if over limit<br />83<br />
    84. 84. Web Storage – Availability<br />Chrome – Firefox – Safari: GO!<br />Internet Explorer: GO!<br />Mobile: GO!<br />84<br />- caniuse.com, Feb 2011 <br />
    85. 85. File API: Directories & Systems – Availability<br />Chrome: Yes for Apps and Extensions<br />Firefox – Safari: No<br />Internet Explorer: No<br />Mobile: No<br />85<br />
    86. 86. Application Cache – Overview<br />Cache HTML pages and Resources<br />Manifest File<br /> CACHE MANIFEST<br /> index.html<br /> stylesheet.css<br /> images/logo.png<br /> scripts/main.js<br />86<br />
    87. 87. Application Cache – Availability<br />Chrome – Firefox – Safari: GO!<br />Internet Explorer: No<br />Mobile: GO!<br />87<br />- caniuse.com, Feb 2011 <br />
    88. 88. window.navigator.onLinedocument.body.addEventListener(“online”, callback);<br />Offline<br />88<br />
    89. 89. Multithreading Javascript<br />Web Workers<br />89<br />
    90. 90. Web Workers – Sample<br />html5rocks.com/tutorials/workers/basics/<br />main.js (main thread):<br />var worker = new Worker('doWork.js');<br />worker.addEventListener('message', <br /> function(e) { console.log('Worker said: ', e.data); }, false);<br />worker.postMessage('Hello World'); // Send data to our worker.<br />doWork.js (the worker):<br />self.addEventListener('message', function(e) {<br />self.postMessage(e.data + “? ” + e.data + “!”); }, false);<br />// Output “Worker said: Hello World? Hello World!”<br />90<br />
    91. 91. Web Workers – Availability<br />Chrome – Firefox – Safari: GO!<br />Internet Explorer: No<br />Mobile: No<br />91<br />- caniuse.com, Feb 2011 <br />
    92. 92. C++ for your web app<br />Native Client<br />92<br />
    93. 93. Native Client – Overview<br />Machine Code Served to Browser<br />C/C++, Mono(C#), others<br />NoPlugins<br />Legacy C++ Codebase in your Web App<br />Performance<br />Cross Platform<br />93<br />A Web Page<br />Full of text, lots of interesting stuff, links, blah blah. Don’t read all the links, all this text.<br />JS<br />A Web Page<br />Full of text, lots of interesting stuff, links, blah blah. Don’t read all the links, all this text.<br />C++<br />
    94. 94. Native Client – Security<br />Static analysis & Sandboxing<br />Restricted instructions<br />Isolate code<br />Custom Toolchain<br />94<br />Browser<br />NaCl<br />v8<br />JS<br />C++<br />Browser<br />Plugin<br />Operating System<br />Operating System<br />
    95. 95. Native Client – Availability<br />Chrome: Behind flag<br />Open Source<br />95<br />
    96. 96. How much time is left?<br />Whew<br />96<br />
    97. 97. GPU Acceleration<br />Chrome 9<br />WebGL shipped February 3rd<br />Chrome Developer & Canary<br />Video, 3D CSS, Canvas 2D, Compositing<br />Firefox 4 Beta<br />WebGL, Video, 2D CSS, Canvas 2D, SVG, Compositing<br />IE 9 Beta<br />“all graphics and text rendering”<br />97<br />
    98. 98. Benchmarks Needed<br />JSGameBench, Facebook<br />“over 125 million people visit Facebook using HTML5 capable browsers just from their mobile phone”<br />Sprite performance, options (WebGL, <canvas>, <img>, <div>, …)<br />1000-4000 @30fps on GPU<br />50-200 mid range desktops<br />20-30 iOS & Android<br />98<br />
    99. 99. Libraries<br />Canvas 2D<br />ImpactJS, Akihabara<br />WebGL<br />GLGE, C3DL, Copperlicht, SpiderGL, SceneJS, O3D, Processing.js and XB PointStream, WebGLU<br />Document Object Model (DOM)<br />Rocket Engine, Zynga Germany (was Aves Engine)<br />Physics<br />Box2DWeb, Jiglib 3D<br />99<br />
    100. 100. What’s Missing<br />Mouse Capture<br />Gamepads<br />Audio input<br />Webcam input<br />100<br />
    101. 101. More! At GDC<br />Google Sessions Today and Tomorrow<br />Cloud Services, WebGL, Native Client, YouTube APIs<br />Android AndroidAndroidAndroidAndroid<br />Google Booth<br />Sketchup,Web Store, WebGL Native Client, AppEngine, Android<br />Other HTML5 Sessions<br />WebGL News and Technology Updates (Khronos), Thursday<br />Getting Your Games onto the BlackBerry PlayBook Tablet, Thursday<br />HTML5: The New UI Library for Games, Friday<br />101<br />
    102. 102. Thanks<br />Alexis Deveria, caniuse.com feature tables<br />Athena's Pix [flickr], overview image<br />Chris Pruett<br />Daniel Galpin<br />Darius Kazemi<br />Geoff Blair<br />Gregg Tavares<br />Mark DeLoura<br />Mark Pilgrim (diveintohtml5.org)<br />Matt Hackett<br />102<br />
    103. 103. Q&A<br />103<br />code.google.com/games<br />@GoogleGameDev<br />

    ×