HTML5 - Chances and Pitfalls (Bytro Labs GmbH)
Download as PPTX, PDF1 like3,458 views
This document discusses the development of browser games using HTML5, highlighting the advantages such as high-quality graphics and real-time rendering, as well as challenges like maintaining cross-browser compatibility. It covers various aspects of HTML5, including client-server architecture, performance considerations, and essential tools and frameworks for development. The conclusion emphasizes the potential of HTML5 for browser games while noting the need for disciplined development practices due to competing technologies.
![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 }
...
}](https://image.slidesharecdn.com/html5chancesandpitfalls-bytrolabsgmbh-130129074031-phpapp02/85/HTML5-Chances-and-Pitfalls-Bytro-Labs-GmbH-17-320.jpg)
![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();](https://image.slidesharecdn.com/html5chancesandpitfalls-bytrolabsgmbh-130129074031-phpapp02/85/HTML5-Chances-and-Pitfalls-Bytro-Labs-GmbH-18-320.jpg)
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