Something that has been on my mind recently has been how to efficiently manage sprites (or layers, really).
I thought I would have a post compiling some historical approaches as well as more modern uses of layers.
What are sprites?
Sprites in the classical sense are bitmaps that can be used to display content.
Usually sprites are individually addressable and can be positioned on a screen independently. There is usually some sprite manager or engine that takes care of composing sprites to assemble the output to a display.
So, a smidge more interesting than simple bitmaps, but usually a reasonably thin abstraction on top.
What are they good for?
The two main uses for sprites or layers are in 2D game scenarios, where you might have multiple enemies
What can you do with them?
Other than lifecycle things like loading, configuring or unloading sprites, the basic operation is the blit, basically copying the sprite contents somewhere.
But because there are a number of tweaks you can do with them, this is where you can get some interesting effects.
- Atlases or spritesheets. If you control an offset and dimensions into the source texture (instead of "the whole thing"), you can pack multiple sprites within a larger texture and manage that in more interesting and/or efficient ways.
- Animation. It's easy to animate sprites if you have an atlas by simply updating the offset to create an animation effect. Here's a Unity example.
- Scrolling. Instead of using discrete blocks within a larger texture, you can also have a longer/continuous area and offset little by little to provide a scrolling effect. This opens the door for very low-latency effects when you can couple the offset update to a low-level system like a touch recognizer.
- Clipping. By updating the size rather than the offset of a sprite, you can create clipping effects easily, which helps with layering.
- Scaling. We've come a long way since the coarse "2x resize" like in Commodore 64. With smooth scaling and proper clipping, you can do touch-zooming effects very efficiently with equivalent setups. This also motivates level-of-detail alternatives if you want to reduce pixelation effects.
- Sorting. Keeping sprites sorted opens up the door for things like foreground/background (background tiling might leverage sprites or more likely be its own thing).
- Transparency/blending/masking. The composition of sprites allows for flexible effects (see for example these Unity docs on sprite masks).
- Hit-testing. With positions and bounds for all sprites, you can do coarse hit-testing, and go down to the pixel level to do more fine-grained hit-testing if desired.
Where do you find them today?
Here are some systems that use layers explicitly and where you can find similar concepts.
Classic Sprites
- 2D game engines like Godot or Unity use sprites profusely.
- Win32 Image Lists can be used for things like toolbars and can be used to manage a spritesheet of sorts.
- Tools like piskelapp that cater to building assets for 2D games.
Layers
Here are some examples, I'm sure you can find more.
- UI frameworks like the UIView framework or the Android UI framework. These can draw more content than available to allow scrolling without layout/rendering, and may manage virtualization. For example UIScrollView documentation states As users scroll in the scroll view, this object adds and removes subviews as necessary. as well as While the gesture is in progress, the scroll view doesn't send any tracking calls to the subview. which suggests that more expensive layout/renders are not done synchronously.
- Chromium layers. The RenderingNG architecture document describes how composited layers are used for things like scrolling (although it also plays a role in rasterizing things).
- Windows Desktop Composition. See for example the sample on animating a layered child window.
Happy sprites!
References
Tags:
graphics
Home