Sprite transformation

There are many situations where you will want to transform your sprites in simple ways. You may want, for example, to make them bigger or smaller or to rotate or flip them. The most convenient method for doing this is by using CSS transforms. In the last few years, CSS transforms have become well supported by most browsers.

If you decide to use this feature, you just have to realize that versions before Microsoft Internet Explorer 9 do not support it. There is the possibility to use the proprietary filter CSS property, but in most cases, it's way too slow.

Another possibility is that of using a technique used in some of the old 8-bit and 16-bit games. You can simply generate the images for the transformed sprite. This has the advantage of being very fast and being compatible with all browsers. On the other hand, it will increase the size of your artworks and requires you to regenerate all the transformations if you need to change your sprite at some point.

We will here...