HTML5 - Chances and Pitfalls (Bytro Labs GmbH)
•Download as PPTX, PDF•
1 like•3,453 views
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.
Recommended
More Related Content
Viewers also liked
Viewers also liked (19)
Similar to HTML5 - Chances and Pitfalls (Bytro Labs GmbH)
Similar to HTML5 - Chances and Pitfalls (Bytro Labs GmbH) (20)
Recently uploaded
Recently uploaded (20)
HTML5 - Chances and Pitfalls (Bytro Labs GmbH)
- 1. Browser Game Development with HTML5 Chances and Pitfalls
- 2. Outline Introduction HTML 5 Developing with HTML and JavaScript Showcases Conclusion
- 3. Bytro Labs Founded in 2009 Focus: browser based online games Development and distribution 15 employees 2 mio. registered users Completely independent
- 4. Bytro Labs Games Supremacy 1914 Industrie Tycoon PanzerWars <HTML>
- 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. Outline Introduction HTML 5 Developing with HTML and JavaScript Showcases Conclusion
- 7. What is HTML 5 Collection of standards, extensions and technologies New tags, JavaScript APIs and styling options Plug-in less Increasing hardware acceleration support (for graphics) Standard(s) not finalized – “Living Standard”
- 8. HTML 5 Support caniuse.com browser-statistik.de - For older IE versions: Chrome Frame 25.09.2012 – Last 30 Days
- 9. HTML 5 in Topia Island Canvas 2D Web Sockets CSS3 Web Storage Planned Audio Web Worker
- 10. Outline Introduction HTML 5 Developing with HTML and JavaScript Showcases Conclusion
- 11. Client Server Architecture JavaScript • Visualization • User Interaction Client • Data Structures client.js index.html • Simulation Logic Web Socket Protocol: JSON • Data Structures Web Server Game Server • Game Logic Java Cassandra DB
- 12. Developing with HTML and JavaScript Client 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-compiler JavaScript Code Structuring and Management Use supporting tools and libraries, e.g. require.js, Google Closure JavaScript 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. Developing with HTML and JavaScript Backwards compatibility and Cross-Browser support Cross Browser libraries (e.g. jQuery) Polyfills HTML GUI Development Missing WYSIWYG editor Code generation problem Application Suitability e.g. Multi-layer mouse listener problem Future Development: Editors for HTML5 (e.g. Adobe Edge) HTML5 Libraries (e.g. CreateJS)
- 14. Outline Introduction HTML 5 Developing with HTML and JavaScript Showcases Conclusion
- 15. HTML 5 Laser Engine Client Canvas 2D mainloop update(); render(); requestAnimationFrame(); Web Storage WebSocket
- 16. HTML 5 Laser Engine Showcases Selection Bitmask Highlight Outline Transparent Masking Animation
- 17. Selection Bitmask Receive Image Data Store 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. Highlight Outline Setup / Init offscreenCanvas = 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. Transparent Masking Draw Masked Sprite maskBufferContext.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. Animation Sprite Animation drawImage(image, source rectangle, destination rectangle) 2D Animation 2D Transformations Translate Scale Rotate Matrix Stack
- 21. Outline Introduction HTML 5 Developing with HTML and JavaScript Showcases Conclusion
- 22. Performance HTML5 Canvas 2D performance comparable with Flash and Java performance HW acceleration can not be presumed Comparable Flash Game Topia Island ~13 FPS ~18 FPS
- 23. Conclusion Browser Game Development with HTML5 Chances Browser Plug-in-less Increasing support High quality, high performance graphics Pitfalls Large scale JavaScript undersupported Disciplined development required Different competing HTML5 technologies
- 24. Thank you! www.topiaisland.com jobs@bytro.com