Browser Game Development with           HTML5       Chances and Pitfalls
OutlineIntroductionHTML 5Developing with HTML and JavaScriptShowcasesConclusion
Bytro LabsFounded in 2009Focus: browser based online gamesDevelopment and distribution15 employees2 mio. registered usersC...
Bytro Labs GamesSupremacy 1914                                Industrie TycoonPanzerWars                       <HTML>
Goals:  State of the art social browser game  High quality graphics  Massive number of objects rendered in real-time  Grap...
OutlineIntroductionHTML 5Developing with HTML and JavaScriptShowcasesConclusion
What is HTML 5Collection of standards, extensions and technologiesNew tags, JavaScript APIs and styling optionsPlug-in les...
HTML 5 Support                                                        caniuse.com                                         ...
HTML 5 in Topia IslandCanvas 2DWeb SocketsCSS3Web StoragePlanned  Audio  Web Worker
OutlineIntroductionHTML 5Developing with HTML and JavaScriptShowcasesConclusion
Client Server Architecture    JavaScript                                        •   Visualization                         ...
Developing with HTML and JavaScriptClient Server Code  Keep Java and JavaScript data structures and code in sync     Googl...
Developing with HTML and JavaScriptBackwards compatibility and Cross-Browser support  Cross Browser libraries (e.g. jQuery...
OutlineIntroductionHTML 5Developing with HTML and JavaScriptShowcasesConclusion
HTML 5 Laser EngineClient              Canvas 2Dmainloopupdate();render();requestAnimationFrame();                        ...
HTML 5 Laser Engine ShowcasesSelection BitmaskHighlight OutlineTransparent MaskingAnimation
Selection BitmaskReceive Image DataStore Bitmask with JavaScript Bit Operations                     imageData = canvasCont...
Highlight OutlineSetup / InitoffscreenCanvas = document.createElement(canvas);offscreenCanvas.setAttribute(width, image.wi...
Transparent MaskingDraw Masked SpritemaskBufferContext.clearRect(0, 0, spriteWidth, spriteHeight);maskBufferContext.drawIm...
AnimationSprite Animation  drawImage(image, source rectangle, destination rectangle)2D Animation  2D Transformations     T...
OutlineIntroductionHTML 5Developing with HTML and JavaScriptShowcasesConclusion
Performance    HTML5 Canvas 2D performance comparable with Flash and Java    performance    HW acceleration can not be pre...
Conclusion   Browser Game Development with HTML5Chances   Browser Plug-in-less   Increasing support   High quality, high p...
Thank you!www.topiaisland.com   jobs@bytro.com
Upcoming SlideShare
Loading in …5
×

HTML5 - Chances and Pitfalls (Bytro Labs GmbH)

3,378 views

Published on

When we decided to publish a new game, we knew we had to find a way to leave plug-in based clients behind. So for "Topia Island", we created a client based on HTML5. This presentation shows the problems one might encounter but above all the many advantages HTML5 has.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,378
On SlideShare
0
From Embeds
0
Number of Embeds
47
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML5 - Chances and Pitfalls (Bytro Labs GmbH)

  1. 1. Browser Game Development with HTML5 Chances and Pitfalls
  2. 2. OutlineIntroductionHTML 5Developing with HTML and JavaScriptShowcasesConclusion
  3. 3. Bytro LabsFounded in 2009Focus: browser based online gamesDevelopment and distribution15 employees2 mio. registered usersCompletely independent
  4. 4. Bytro Labs GamesSupremacy 1914 Industrie TycoonPanzerWars <HTML>
  5. 5. Goals: State of the art social browser game High quality graphics Massive number of objects rendered in real-time Graphical effects Animations Object Highlighting (Semi-) transparent Masking Low latency client server communication Easy access, good outreach
  6. 6. OutlineIntroductionHTML 5Developing with HTML and JavaScriptShowcasesConclusion
  7. 7. What is HTML 5Collection of standards, extensions and technologiesNew tags, JavaScript APIs and styling optionsPlug-in lessIncreasing hardware acceleration support (for graphics)Standard(s) not finalized – “Living Standard”
  8. 8. HTML 5 Support caniuse.com browser-statistik.de- For older IE versions: Chrome Frame 25.09.2012 – Last 30 Days
  9. 9. HTML 5 in Topia IslandCanvas 2DWeb SocketsCSS3Web StoragePlanned Audio Web Worker
  10. 10. OutlineIntroductionHTML 5Developing with HTML and JavaScriptShowcasesConclusion
  11. 11. Client Server Architecture JavaScript • Visualization • User Interaction Client • Data Structures client.js index.html • Simulation Logic Web Socket Protocol: JSON • Data StructuresWeb Server Game Server • Game Logic Java Cassandra DB
  12. 12. Developing with HTML and JavaScriptClient Server Code Keep Java and JavaScript data structures and code in sync Google Web Toolkit (GWT) – Everything in Java; JS cross-compiled note.js – Everything in JavaScript Strongly-Typed JavaScript (st-js) – Simple Java to JavaScript cross-compilerJavaScript Code Structuring and Management Use supporting tools and libraries, e.g. require.js, Google ClosureJavaScript Tools Support Syntax highlighting and autocompleting can break easily Disciplined development (e.g. use Constructor / Prototype syntax, JSDoc type hints /** @type {string} */ var example; )
  13. 13. Developing with HTML and JavaScriptBackwards compatibility and Cross-Browser support Cross Browser libraries (e.g. jQuery) PolyfillsHTML GUI Development Missing WYSIWYG editor Code generation problem Application Suitability e.g. Multi-layer mouse listener problemFuture Development: Editors for HTML5 (e.g. Adobe Edge) HTML5 Libraries (e.g. CreateJS)
  14. 14. OutlineIntroductionHTML 5Developing with HTML and JavaScriptShowcasesConclusion
  15. 15. HTML 5 Laser EngineClient Canvas 2Dmainloopupdate();render();requestAnimationFrame(); Web Storage WebSocket
  16. 16. HTML 5 Laser Engine ShowcasesSelection BitmaskHighlight OutlineTransparent MaskingAnimation
  17. 17. Selection BitmaskReceive Image DataStore Bitmask with JavaScript Bit Operations imageData = canvasContext.getImageData(0, 0, image.width, image.height); while(...) {Selection Test ... pixelAlphaValue = imageData.data[(x + y * image.width) * 4 + 3]; ... 1. Bounding Box if(pixelAlphaValue > threshold) { bitmask[byteIndex] |= (1 << bitIndex); 2. Bitmask } ... }
  18. 18. Highlight OutlineSetup / InitoffscreenCanvas = document.createElement(canvas);offscreenCanvas.setAttribute(width, image.width);offscreencanvas.setAttribute(height, image.height);offscreenContext = offscreenCanvas.getContext(2d);offscreenContext.drawImage(image, 0, 0);imageData = offscreenContext.getImageData(0, 0, image.width, image.height);while(...) { ... pixelAlphaValue = imageData.data[(x + y * image.width) * 4 + 3]; ...}Draw Highlight Vectorization (Simplified potrace algorithm)mainContext.beginPath();mainContext.moveTo(point[0][0], point[0][1]);while(...) { context.lineTo(point[i][0], point[i][1]);}context.stroke();
  19. 19. Transparent MaskingDraw Masked SpritemaskBufferContext.clearRect(0, 0, spriteWidth, spriteHeight);maskBufferContext.drawImage(spriteImage, 0, 0, spriteWidth, spriteHeight);gradient = maskBufferContextctx.createRadialGradient(midX, midY, 0, midX, midY, spriteWidth/2);gradient.addColorStop(0.2, white);gradient.addColorStop(1, rgba(255,255,255,0));maskBufferContext.fillStyle = gradient;maskBufferContext.globalCompositeOperation = destination-out;maskBufferContext.beginPath();maskBufferContext.arc(midX, midY, spriteWidth/2, 0, 360);maskBufferContext.closePath();maskBufferContext.fill();mainContext.drawImage(maskBufferContext.canvas, spriteX, spriteY, spriteWidth, spriteHeight);
  20. 20. AnimationSprite Animation drawImage(image, source rectangle, destination rectangle)2D Animation 2D Transformations Translate Scale Rotate Matrix Stack
  21. 21. OutlineIntroductionHTML 5Developing with HTML and JavaScriptShowcasesConclusion
  22. 22. Performance HTML5 Canvas 2D performance comparable with Flash and Java performance HW acceleration can not be presumedComparable Flash Game Topia Island ~13 FPS ~18 FPS
  23. 23. Conclusion Browser Game Development with HTML5Chances Browser Plug-in-less Increasing support High quality, high performance graphicsPitfalls Large scale JavaScript undersupported Disciplined development required Different competing HTML5 technologies
  24. 24. Thank you!www.topiaisland.com jobs@bytro.com

×