You’ll often hear the word “sprite” used a lot in game development, and it’s for good reason. Without them, your game wouldn’t have any visual representation! Here, we’ll learn about what sprites are in GameMaker and how to use them.
A sprite is an image or images that are used for your game. They are often the visual representation of objects, and can be made up of a single image, or a set of images that when played in sequence, make up an animation.
This is a sprite. It is made up of just one, single, static image. We call a single image in a sprite a frame, or subimage.
Here we also have a sprite, but there’s clearly something more exciting about it. It is made up of six frames, or subimages. GameMaker will play all frames in a sprite in sequence to give it animation.
How Do I Create a Sprite?
Creating sprites is easy, and there’s a few different ways you can do it.
- One way is to first right-click on the “Sprites” folder in the resource tree, then click on “Create Sprite”.
- Another way is to click on “Resources” in the top toolbar, then click on “Create Sprite.”
- Click and drag an image from any folder on your computer directly into the workspace in GameMaker.
- Click on the “New Sprite” button in the object properties window after you’ve created an object. More on objects at a later time…
If you prefer hotkeys, simply press ALT+S to create a sprite.
How to Edit the Sprite
After a sprite is created, its property window will automatically open up. It should look just like this:
There’s a lot going on here, so let’s take it one piece at a time.
Name: This is simply where you name your sprite. Make sure to give it a unique name. This is how the sprite will be referenced in the rest of your project, so make it consistent with the other resources. If you added the sprite by dragging it from a folder, it’ll automatically be renamed whatever the filename is. Otherwise, with the other methods, it’ll probably start out as something like “Sprite0”.
Image: Here you’ll be able to edit the image by resizing it, drawing onto the sprite directly, or importing a sprite from a folder on your computer.
Texture Settings: For now, you should know that when sprites are stored in your game, they’re actually placed on a larger image that is made up of smaller images of of all visual resources in your game. These larger images are called textures, and you can control some of the sprite’s behaviors on the texture pages with these settings. Textures are an entire topic on their own and we’ll cover them in-depth at a later time.
Collision Mask: There are two main components of every sprite. The visual representation of the sprite, and the space that the sprite occupies, called its Collision Mask. This is important to define as it’ll dictate how objects in the game will collide with each other.
There are three Collision Mask Modes:
- Automatic (left): GameMaker will create a collision mask large enough to cover every pixel in the image.
- Full Image (center): The collision mask will cover the entire image.
- Manual (right): You can define your own mask by using the Left, Top, Right, and Bottom input boxes.
The Collision Mask doesn’t necessarily have to be a rectangle, either. There are several different Collision Mask Types:
- Rectangle
- Rectangle with Rotation
- Ellipse (Slow)
- Diamond (Slow)
- Precise (Slow)
- Precise Per Frame (Slow)
While most shapes should be self-explanatory, I wanted to talk about “Precise.” Precise Collision Masks will create a Collision Mask with a shape that is exactly the same as the pixels that make up the sprite. While it will a pixel-perfect collision mask, please use this Collision Mask with caution as it can be very slow. “Precise Per Frame” creates separate Precise Collision Masks for every frame in the sprite.
Along the top right of the Sprite Properties window, we have some controls for the sprite’s animation.
The Play button simply plays the sprite’s animation if there are 2 or more frames in the sprite. The loop button, if toggled, will loop the animation as it plays back to the beginning after the animation has finished.
To the right of that, “Speed” will dictate how quickly the animation will play. There are two different options to select as a unit of speed.
- Frames per second
- Frames per game frame
Since you can control sprite animation speed in-game, I prefer to set Speed to 1 and the units to “Frames per game frame”. This means that for every frame that the game runs, one frame of animation will play.
“Current Frame” simply displays what frame of animation is showing in the preview window below. Please note that with sprites, counting starts at “0,” so the first frame of animation is frame 0, the second is frame 1, etc.
If you want to add a frame to the sprite, you can click the “+” to the left of the sprite frame previews. You can also click and drag a frame before or after another frame to change the animation order. You can click on a frame to select it, then click on the “X” in the upper right to delete the frame. You can also double-click a frame in the sprite to edit that particular frame, but more on the Sprite Editor at another time.
In the sprite preview window, there’s a few last (but important!) options.
Toggle “Preview Mask” to see the mask drawn over the sprite to the right. The Mask will appear as a semi-transparent dark color.
Origin: The point in that corresponds to a sprite’s position in a room is called its origin. There are lots of reasons you would want to have the origin at different positions for different objects in your game.
The picture on the left shows us what would happen if we placed the sprite at the red x with the sprite’s origin set to the upper-left (default). The picture on the right shows us what would happen if we placed the sprite at the red x with the sprite’s origin set to the bottom-center. For things like characters, I prefer to set the origin to the bottom-center of the sprite, one pixel below the character’s feet.
You can manually enter the sprite’s origin in these fields, or you can automatically select an origin from the drop-down box.
What Do I Do with a Sprite?
Most importantly, sprites gives your game its graphical element! Now that you know how to create a sprite, they’ll be available to use in your game however you want. You can:
- Create characters, backgrounds, and tiles
- Replace the mouse with a unique, animated graphic
- Create custom fonts
- Create menus
- Much more!
Now that you know how to create sprites, it’s time to play. Toggle each option and see how your sprite is affected. Change values and move things around! The best way to learn is by doing.
