Instead of creating shaders and assigning UV coordinates to simple meshes, you can (perhaps surprisingly) achieve nearly the same hyper-efficient performance using simple DOM sprites. Just like a WebGL, Unity, or Stage3D polygonal mesh that uses a texture, the image data is sent to your GPU and gets drawn in hardware extremely efficiently.
In today’s web browsers, DIVs are typically rendered using hardware acceleration.
The rendering of DIVs has undergone massive optimizations each year for well over a decade, and by now textual elements like DIVs render super fast: silky smooth on virtually all browsers, old and new. In particular, consider the vast amount of engineering R&D that has gone into making regular HTML div elements render as fast as possible. Taken to the extreme, you could make an entire HTML5 game using nothing more than divs, each styled and animated using javascript and css! Why would anyone want to do this? If you were to leave it empty and use CSS to give it a size, position and background image, you could use it to display an in-game sprite, such as a mushroom, bullet, or explosion. Take, for example, the humble and ubiquitous DIV tag. These DOM elements don’t necessarily have to contain walls of text. Each element contains text or images, and are positioned, sized and styled according to CSS stylesheet rules and can be animated with javascript. HTML files are typically made up of DIVs and SPANs and many other elements. The DOM (document object model) is the basic model by which web pages can be manipulated. It’s a great alternative, and one that you may not have considered. This article explores the whys and hows of using the decidedly less sexy, lower tech, but more compatible DIV elements for sprite rendering instead of pushing pixels using a canvas tag. What is this secret new technique, you ask? DOM sprites!įor skeptics, before you read on, try out this demo. It even runs well on mobile devices - sometimes faster than canvas by a long shot. It is also generally hardware accelerated on modern setups, which means you’ll get great performance. Luckily, there’s an alternative - one that occasionally outperforms canvas and “just works” on more devices. On some legacy hardware and software, there’s NO support for canvas at all! Though canvas is what people think of first when considering ways to render game sprites using HTML5, it is notoriously slow on older mobile devices, obsolete browsers, and many game consoles. The best part? It is easy to implement, and works everywhere! Today we’re going to look at an alternative to the CANVAS tag which works great for HTML5 games.
0 kommentar(er)
