Sprites are a concept specific to Game Development. NO, they are not glowing white balls, they are the building blocks of most 2D games. You might wonder why, so let me demystify the idea of a Sprite by first talking about Bitmaps/Pictures.


Bitmaps And Pictures

A picture is a collection of pixels, single bits on the screen of different colors that make up an image. This is then eventually turned into a bitmap, this bitmap is fundamentally different from the picture that is being used by the Bitmap. It is a computer representation of the image data. Remember those pixels? Their colors and placements are all a part of the data of the bitmap. A bitmap has programmed methods associated with it as well to make working with them easier in the computer.

For example, in RPGMakerMV Bitmaps have listeners for when it’s loaded, options to draw, fill, and clear the bitmap, plus more. All these actions edit the underlying image data. So, conceptually, a bitmap is like a piece of paper you can always erase, edit, modify.


It’s All About The Pixels

In the industry, there are these special images called spritesheets. These sheets are a single image that have frames of similar images on them. Think of them as flip books used for animation; each frame contains a motion for a particular sprite. 

You might be wondering why it’s necessary to use a spritesheet instead of a collection of images. The reason for this was that it was easier to import a single image with all the frames you needed for your game due to hardware limitations in the past. Mario for example is just a collection of individual frames on a spritesheet in the original game. In the picture above, we use the same concept, each individual square is a single frame, which we can use to create motion from a set of images.

Now, that you have a fundamental understanding of the starting point of the humble Sprite, let’s talk about an actual sprite!


Sprites And Frames

Sprites are a programming concept. A sprite in the most basic sense is a container for images. These image containers have code associated with them that allow you to adjust what part of the image you see. Think of the sprite as a viewport for your image, allowing you to create animation similar to a movie reel. This is where the drawing flip book example comes in.

This is the fundamental idea of a sprite. They can also be moved around, rotated, and more. It pays to have an image container right?! It gives you the ability to do complex tasks on the container and then apply it to any images inside.

Here is an example of a Sprite in action using Pixi.js: 
PIXI.js Sprite Example

Further Readings

PIxi.js Tutorial On Sprites

Sprites Wikipedia

%d bloggers like this: