The Sprite Editor - IDE Basics


The Sprite Editor - IDE Basics

Introduction

In this tutorial we are going to look at the GameMaker Studio 2 Sprite Editor. The sprite editor is where you define the different sprite resources that your game will use, which means assigning (or creating) an image for them and setting up certain basic properties.

You can also watch the following video on the Sprite Editor:

The sprite editor window looks like this:

The Sprite Editor

Sprites are used for almost everything that will be drawn in your game, but can also form the basis for collisions (in general) between instances. In this tutorial we will explain how to add an image, set these properties and ensure that it has an appropriate collision mask. First you need to add a sprite to your project, which is done by right clicking on the Sprite resource folder and selecting Create.


Adding Frames

Sprites are the basically the graphics for your whole game. Almost everything that you draw within the game, with the exception of text and 3D models, will be drawn using sprites, and sprites also play a very important role in collisions too. A bitmap sprite (*.bmp, *.jpg, *.png, *.gif) can be a single image, a composite image (for making tile sets), a group of images or a strip of images, as shown below:

Image Formats

You can also import Skeletal Animation sprites (made with the program Spine and Vector sprites (*.swf). These are treated slightly differently within GameMaker Studio 2 so please check the manual (press ) as this tutorial is going to concentrate on bitmap sprites.

Adding an image can be done either by clicking Import and then selecting either a single image file or multiple single image files. If you select multiple files, they will be added as separate frames (also called sub-images) of the sprite and they should all be the same size for best results. If you wish to import a sprite strip or create a new image (or set of image frames) then you need to click on the Edit Image button to open the Image Editor. We won't go into any details about the image editor as we have a tutorial on how to use it and all the tools are explained in the manual, but we will briefly explain how to add a sprite strip to create multiple sub-images - simply open the Image Editor, goto the Image menu and select Import From Strip, then select your image file to import. You will be shown options for how to split the sprite into frames before it is imported.

NOTE: You can add a strip sprite directly from the Import button if the sprite name has been suffixed with "_stripXX". GameMaker Studio 2 will automatically split the image into the number of frames given - for example a strip image with 12 frames could be named "player_strip12.png" and on import the strip will be automatically split into the required 12 frames.

Once you've imported your sprite, you can name it - use regular characters, numbers and the underscore "_", and many people prefix their resources to make them easier to identify, like "spr_Player" or "sTree" - and then set the Texture Settings. All sprites are stored on texture pages (also known as texture atlases), so if you have 20 sprites in your game, they will all be placed on a single texture page. This is a standard optimisation for storing and using graphics, but it does mean that you need to set a couple of things up.

Basically, sprites go onto a texture page with a certain number of pixels as padding around the edge. This is done so that when scaling up or down to non-integer values the image uses the correct pixels, so an image that is to be tiled will have the edges (horizontal or vertical) added to by the edges from the opposite side, while if no tiling is selected the sprite will be clamped and the edges pixels will be repeated (smeared). The following image illustrates this:

Texture Values

The option Separate Texture Page will add the sprite to a single texture page only for it (in general you'd use this only with 3D or shaders), and you can also choose a specific Texture Group to have it assigned to (see the manual for more details on these aspects of the sprite editor).

The last two texture options can generally be left unchecked, as they relate to certain visual artifacts that can show up when a sprite is added to a texture page. By selecting Pre-multiply Alpha you will be telling GameMaker Studio 2 to "fix" the semi-transparent pixels of your sprite by pre-multiplying it with the matte colour of the alpha channel before placing it on the texture page - this should only be enabled if you have issues when placing sprites with feathered or ant-aliasing edges into your game, and isn't guaranteed to fix these issues (you may need to re-edit them in the sprite editor or some other image processing software). As for Edge Filtering, this option is specifically for when you have linear interpolation enabled for your game and you are seeing "halos" of colour around your sprites. This is caused by the hardware interpolating from multiple source texels on the texture page all at once, and can be particularly obvious when you scale games up in resolution. Enabling this will filter the edge pixels to take on the colour of the nearest full alpha sprite pixel and so blend the interpolated pixels without the halo that was present previously.


Animated Sprites

If you've added an animated sprite, ie: one with a number of image frames, then you will see each frame of the animation shown in the Sprite editor, and you can click on any of them to select it to be shown in the main preview window. If you press while on a selected frame you can remove it from the sprite, and you can also select multiple frames pressing + on the frames you want to select together.

Animation Frames

Above the preview and frames window you have buttons to Play the animation, loop or ping-pong the animation when previewing. Beside these controls you can set the animation speed too. This value is based on the game frames (a game frame is the time it takes to do one full game "loop"), so if you have, for example, a game fps (frames per second) of 60, and set the animation speed to 10, the animation will loop 6 times every second. Setting this value here will affect how the animation will look in the game, and is not just for preview purposes.

Animation Preview

It's worth noting that you can set the animation to run either using frames per second, or frames per game frame, so choose carefully which one you use as 15 frames per second is not the same as 15 frames per game frame!


Sprite Origin

In the middle of the editor you have a bar for defining the sprite origin and the collision mask (we'll cover the collision mask in next page of the tutorial):

Sprite Origin Bar

The origin of the sprite is the point on the sprite that corresponds to its position within the room, ie: when you create an instance at a particular (x/y) position, the origin of the sprite is placed there. By default it is the top left corner of the sprite but it is often more convenient to use the center it, or you may want some other point on the sprite. To change it, you can set the origin manually by clicking in the sprite preview image which will move the origin cross (indicated in the image above) to the point you clicked, or you can input different values for x and y in the corresponding boxes. For fixed placement (and to make things easier) there is a drop down menu with a number of preset positions that you can choose from:

Origin Preset Values

Note that you can even set an origin outside the area of sprite by using negative numbers (for left and up) or positive numbers larger than the sprite width and height (for right and down), which can be very useful when dealing with objects that need to be drawn with composite sprites.


Collision Mask

The final thing to talk about in this tutorial is the ability to set the collision mask for a sprite. The collision mask is the area that GameMaker Studio 2 uses to calculate when two instances with sprites assigned are in collision (or not) and trigger a Collision Event. Expanding the collision mask menu presents you with a number of options and gives a graphical representation of the current collision mask on the preview window:

Editing The Collision Mask

The mask will, by default, cover the whole image area, but you can click any of the mask "handles" (marked in the image above) and then drag to resize the mask. Manually setting the mask will ignore the alpha tolerance value, but if you set this then it will automatically calculate the mask area based on the alpha value of the pixels that make up the sprite and ignore any manual values you have set. You can also switch on/off the preview using the control in the center bar of the sprite editor.

NOTE: The area covered by the collision mask is commonly called the bounding box and there are special variables for getting this value from sprites while your game is running, useful for doing your own custom collisions.

You are not limited to a rectangular collision mask and can choose from any of the following as well:

Different Collision Masks

Anything except the default rectangular collision mask will be slower to process than the rectangle, but by far the slowest to process are those marked as precise. These are per-pixel collisions and so require much more processing to resolve. Also note that the normal Precise collision will be based off of a mask created from the superimposition of all sub-images within the sprite to create a single mask, while the option Precise Per Frame will create a unique mask for every single frame of the animation.


Summary

That brings us to the end of the Sprite Editor tutorial. As always, you can find more in-depth details about everything discussed here from the manual (press ), but you should now have no issues creating sprites ready for use in your game. Just remember: don't forget to set the origin to the sprites you make appropriate to your project and also don't forget to check the collision mask for the sprites you make, as the default values are not always the best.