HTML5 - Chances and Pitfalls (Bytro Labs GmbH)
•Descargar como PPTX, PDF•
1 recomendación•3,453 vistas
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.
Recomendados
Más contenido relacionado
Destacado
Destacado (19)
Similar a HTML5 - Chances and Pitfalls (Bytro Labs GmbH)
Similar a HTML5 - Chances and Pitfalls (Bytro Labs GmbH) (20)
Último
Último (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