2.4.3 Sprites

For those who are new to this game, a sprite is a 2D rectangular bitmap that is rendered to the screen. For 2D games, sprites are the most essential graphical abstraction. They are used for drawing maps, players, NPCs, items, particles, text, etc. In Chickadee, bitmaps are stored in textures (see Textures) and can be used to draw sprites via the draw-sprite procedure.

Scheme Procedure: draw-sprite texture region [#:scale] [#:rotation] [#:blend-mode alpha] [#:texture-region] [#:shader]

It’s not uncommon to need to draw hundreds or thousands of sprites each frame. However, GPUs (graphics processing units) are tricky beasts that prefer to be sent few, large chunks of data to render rather than many, small chunks. Using draw-sprite on its own will involve at least one GPU call per sprite, which will quickly lead to poor performance. To deal with this, a technique known as “sprite batching” can be used. Instead of drawing each sprite immediately, the sprite batch will build up a large of buffer of sprites to draw and defer rendering until the last possible moment. Batching isn’t a panacea, though. Batching only works if the sprites being drawn share as much in common as possible. Every time you draw a sprite with a different texture or blend mode, the batch will be sent off to the GPU. Therefore, batching is most useful if you minimize such changes. A good strategy for reducing texture changes is to stuff many bitmaps into a single image file and create a “texture atlas” (see Textures) to access the sub-images within.

Taking advantage of sprite batching in Chickadee is easy, just wrap the code that is calling draw-sprite a lot in the with-batched-sprites form.

Scheme Syntax: with-batched-sprites body …

Use batched rendering for all draw-sprite calls within body.

With a basic sprite abstraction in place, it’s possible to build other abstractions on top of it. One such example is the “nine patch”. A nine patch is a sprite that can be rendered at various sizes without becoming distorted. This is achieved by diving up the sprite into nine regions:

• the center, which can be scaled horizontally and vertically
• the four corners, which can never be scaled
• the left and right sides, which can be scaled vertically
• the top and bottom sides, which can be scaled horizontally

The one caveat is that the bitmap regions must be designed in such a way so that they are not distorted when stretched along the affected axes. For example, that means that the top and bottom sides could have varying colored pixels vertically, but not horizontally.

The most common application of this technique is for graphical user interface widgets like buttons and dialog boxes. By using a nine patch, they can be rendered at any size without unappealing scaling artifacts.

Scheme Procedure: draw-nine-patch texture region [#:margin 0] [#:top-margin margin] [#:bottom-margin margin] [#:left-margin margin] [#:right-margin margin] [#:texture-region] [#:scale] [#:rotation] [#:blend-mode alpha] [#:shader]

Draw a nine patch sprite. A nine patch sprite renders texture as a width x height rectangle whose stretchable areas are defined by the given margin measurements top-margin, bottom-margin, left-margin, and right-margin. The margin argument may be used to configure all four margins at once.

Refer to draw-sprite (see Sprites) for information about the other arguments.