Using The GameMaker Studio 2 Image Editor

Along with the room editor, the image editor in GameMaker Studio 2 has been improved and expanded, with a host of new features and tools for you to use to make your sprites, tiles and backgrounds. The feature list is a long one, but we'll cover here a few of the most interesting to get you started...

NOTE: There is an extensive tutorial on how to use the image editor and it's features in the Tutorials section of the GameMaker Studio 2 Start Page.

Animate And Draw

The image editor has one feature which is both surprising and innovative... it permits you draw as you animate through the frames! Essentially, if you make a multi-frame animation then you can press play on the frame controller (at the top) and see it animated in the editor window. While the animation plays in the editor window, you can then draw in the editor and each frame will be drawn to as it passes. This is a great way to get fluid and dynamic animations for explosions, or swing effects or anything else that requires a smooth movement.


This can take a bit of practice to get right, but with the onion skinning and the ability to change the playback speed of the animation you should be able to easily find what works for you.


The image editor toolbox also requires a mention here. There are a number of tools to the right of the editor, some of which work in a way that you may not expect. All the tools for drawing use the left and the right mouse button, both of which can be assigned a colour, and the most obvious ones are the pencil, the eraser and the paint bucket tools. However there are also tools for drawing forms like ellipses and rectangles.

You'll notice that some of the draw tools are split diagonally. This is because if you click in the top left then it will draw an outline of the chosen form. If, however you click to the bottom right of the tool button then you'll get the filled shape.

It's worth mentioning here that there is a special "split view" tool. This tool will split the editor window (as shown in the image below) into two parts, where one is the regular editor window, and the other is a zoomed in version. You can draw and edit in both views, and you can actually use the mouse wheel to zoom both windows in or out as you please, giving you a great way to act on specific areas with great precision or with a wider stroke as required.

Apart from the draw tools, you also have masking tools, text tools and tools for flipping, mirroring and rotating the current image layer. Which brings us to the next thing to be featured here...


The GameMaker 2 image editor permits you to create multiple layers per sprite, and each layer has its own set of frames. This means that you can create a single layer for a base, and then over the frames add animations on different layers. Layers can be ordered by clicking and dragging, and you can add and remove them and even name them too from the layer editor.


If you double click on any of the layers you create, then the window shown above will open and you can change some of the layer properties. This is "global" in that all changes here are applied to every frame, and you can set the opacity and the blend mode that the layer uses. The blend modes are the basic ones of additive, subtractive and multiply, but they are very useful for creating special effects.

Custom Brushes

At the top right of the image editor you can find the various default brushes, both square and round. These can be selected for painting and will use the colour assigned to the mouse button that you draw with. The brushes are all used by the different drawing tools too, so if you draw an outlined rectangle with a large brush, the outline will be thicker as it uses the brush to draw it.

So far so normal, right? Well, the fun part of brushes is that you can create your own really easily! 


When you create an image on a layer, you can use the selection tools to select an area of the image and then use either CTRL + C or CTRL + X to cut or copy what is selected. However this doesn't go to the clipboard, but instead get's added to the custom brush list and can now be used to paint into the sprite, and it can even be used along with the shape tools! If you don't want a brush anymore then you can click on it and press <Backspace> to delete it. Note that this means CTRL + V (paste) is only used when copying from external sources!


The image editor is somewhere where you'll likely spend a fair bit of time and along with the room editor and the code editor a lot of time has been spent developing these tools to be as fun and useful as possible - GameMaker 2 has improved these key areas and added new features to make your life easier and increase workflow, so we hope that you enjoy them and we're looking forward to getting your feedback! 

Have more questions? Submit a request


Article is closed for comments.