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
You might be wondering why it’s necessary to use a
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