The Image Editor - IDE Basics

Introduction

In this tutorial we are going to look at the GameMaker Studio 2 Image Editor. The image editor is where you can make graphics (images) which in turn can then be used within your game project. All images created in your projects will become sprite resources, which in turn can then be used to create moving instances, backgrounds, or tile sets.

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

The Image Editor looks like this:

As you continue through this tutorial, we will aim to show you how to use the image editor to create these sprites, showing off some of the unique features available to you as we go. Even if you don't consider yourself the greatest artist in the world, you'll soon see that the image editor is an indispensable tool when creating your projects as it enables you to quickly visualise animations and edit details in an intuitive and easy fashion.

Creating An Image

Before you can start creating an image you need to first create a sprite resource for your game. All images in GameMaker Studio 2 are stored as sprites, regardless of their final use in your project, so right-click on the sprite resource folder in the resource tree and select Create:

This will open up the Sprite Editor where you can set certain properties for the final sprite resource, but we don't need to set any of that up for this tutorial as we are focusing on the Image Editor itself, so simply click the button Edit Image

This will open a new workspace with the Image Editor in it:

Above you can see the basic initial layout of the image editor. We'll briefly explain the different areas you see before moving on to create our first sprite.

The first thing to note is that the main IDE Context Menu at the top now has extra options related to the image editor, like Images and View. We'll cover these in more detail later. Next, in the top left, you can see the frame view, which is where you will see listed the various sub-images that compose the sprite (a sub-image is simply another name for "frame" of animation for the sprite). If the sprite is animated you will add more sub-images (frames) here, but for single static sprites, backgrounds or tile sets you'll leave this as a single frame.

You'll notice too that you have additional frame tools to the left of the images. These can be used to animate the separate frames, set the animation speed, enable onion-skinning (more on this later...) or set the animation type from linear to ping-pong and back.

The main part of the editor is taken up with the drawing canvas which is where all your sprites will be drawn using one or more of the various brushes available. You can select a brush from the top right of the editor, and the basic brushes come in circular or square form with a few pre-set sizes to choose from.

Below the brushes you have the colour picker. Colours are assigned to the left and right mouse buttons by simply clicking on one of the swatches with the respective button, and you can paint onto the drawing canvas using either button, with the chosen colour being merged with the base brush.

Finally, underneath the colour picker, we have the drawing Toolbox and then the Layer Editor. The toolbox contains a number of different draw tools that permit you to draw shapes, flip the image and do a number of other things, while the layer editor permits you to create new drawing layers for the sprite, so you can composite things together.

So, that's the basic overview of the editor itself. But how to use it? Let's get drawing and find out...

Drawing

To start drawing simply select a brush from the top right and then click (either with the left or the right mouse button) a colour and then select the Pencil tool before clicking (with either mouse button) on the canvas to create your base image. If you should make a mistake, you can go to the toolbox and select the Eraser tool, and then click again on the image to erase what you have done (using the same brush shape that you have chosen for drawing).

Beside the Eraser you have the Flood Fill tool which can be used to fill in whole areas of the image with a single colour on the third row down you have the Colour Picker tool . This can be handy when working with a strict colour pallet as a method to ensure that you are using the same colour, since you can select the tool and then click ( or ) on a pixel in the canvas to set the left or right mouse button to the selected colour.

You should take a moment now to play with the rest of the tools in the toolbox, either letting your mouse hover over each one to get a brief tooltip description of each one, or opening the GameMaker Studio 2 manual (press f1) to get a full description of what each does. They are all fairly self-explanatory though and it's more fun to play, so just click on them and see what happens!

Before continuing it's worth noting that some of the tools appear to be "split" diagonally - namely with the tools for drawing shapes. These buttons are actually dual purpose and the behaviour of the tool will change depending on which side of the split you click.

The top left of the split will let you draw outlined shapes, while the bottom-right part of the button will draw filled shapes. The outline of the shape will also change depending on the brush used, so if you want a thick outline you'll use a larger brush size.

Draw some stuff now and get to know the toolset before moving on...

Custom Brushes

Now you know how to draw on the canvas and you also know how to use the brushes and tools from the toolbox. But what if the pre-defined brushes aren't quite what you need? Or what if you need to use the same detail several times in a number of sub-images or across various sprites? That's where custom brushes come into play.

Custom brushes start life as something that you've drawn onto the main canvas, so make an image now, small like this gem stone:

You then need to choose the select tool from the toolbox and select the part of the canvas that you want to use as your new brush (click and drag):

You now need to copy this into the clipboard, either from the Image drop down menu at the top of the image editor workspace selecting Cut or Copy, or by simply using / + C or / + X. You should now see this section of image has been added to the brushes at the top right, and that you can paint with it, or use it in the other draw tools, just as you would any other brush!

One thing to note when using custom brushes like this though is that if you change the brush colour using the colour picker, the new colour will be blended with the brush colour to give different results that may not be what you expect, so if you want to maintain the original brush colours you should be using white. Below you can see the gem sprite drawn blended with white, then cyan, orange and red:

Colours

We've briefly mentioned that you can select a colour for either the left or right mouse button by simply clicking on the required swatch with that button, but GameMaker Studio 2 has a lot more functionality and control with relation to how you use and create colours than that. To start with, there is an advanced Colour Picker tool that can be used to generate new colour swatches for your palette (accessed by double clicking on any swatch):

This window permits you to select a base colour and set it's saturation using the tools on the left, and then you can "fine tune" this value using the RGB and HSV tools on the right. Note too that you can set the colour using a hexadecimal value (in RGB format so a value of 00ffff would give you cyan, for example) and that if you want to reset your changes you can simply click the left hand of the colour comparison window:

Once you are happy with the colour simply click "Okay" to save it as part of the colour swatches. If you do not want to change the actual swatch colour, then you can first click on a colour to select it then double click on the "recent colours" swatches (shown in the image below) and edit that instead, making sure to use the "Save New Colour" option so as not to lose the colour later.

Before we move on to talk about Image Layers it's worth mentioning an extra couple of options for creating custom colour palettes and applying them to other sprite images. These options can be accesed from the small "hamburger" menu in the top right of the colour swatch window:

From this menu you can choose to import a colour palette from any sprite in the resource tree for use in the current sprite. You click the option then select the sprite to use and the palette will adopt the colours that were used in the given sprite, so that if you are working with a restricted palette (for example) you could make a sprite that only contains the colours for this palette and then import them to each new sprite you make to maintain consistency. You can also select the copy colours to sprite option to export the palette for the current sprite into any other sprite from the resource tree.

Layers

What you've seen so far is great for creating single images or simple images, but what about things that are more complex or that you wish to later animate? Well, another important feature of the image editor that will help you there is the ability to create layers.

Essentially, when you draw to the main canvas you are drawing to a layer of 0 alpha pixels (alpha is the transparency of a pixel and goes from 0 - fully transparent - to 255 - fully opaque). When drawing, you are converting the pixels from 0 alpha to a new alpha value (typically 255 or "full" alpha) and giving them a colour. Note that even a 0 alpha pixel has a colour, even if you can't see it! However you aren't just limited to one layer of pixels and you can create multiple different pixel layers which can then be manipulated independently without destroying or changing any of the pixels on the layer beneath.

To show how this works, make a new sprite and open the image editor for it, then look at the bottom right of the editor. You can see a panel called Layers:

There is always at least one layer in a sprite and a new sprite will have this layer called Default. To create a new layer you simply click on the Add Layer button at the bottom. You can also group layers together by clicking the Add Layer Group button and then dragging the layers into the new layer group. Layers can also be removed by clicking the Delete Layer button .

To show how layers can help you, let's make a simple sprite over a couple of layers. We'll create a simple figure and then assign the arms, legs and head to separate layers like this:

As you can see, each part of the body has a separate layer meaning that we can now create different sub-images and move each layer independently to create our animation. You can get further control over the layers by double clicking on them in the layer list. This will open up a new window where you can set the layer name, how it should be blended with the layers beneath, and also its opacity value. Opacity is cumulative with the alpha of the pixels that make up the layer, so if you have semi-transparent pixels in the image and then lower the opacity, these pixels will become even more transparent.

Sub Images (Frames)

We have mentioned sub-images and animating a couple of times so far, so let's actually look at animating a sprite. I'm using an explosion sprite for this as it shows nicely how the image editor treats animated sprites, but you can animate just about anything as long as you change what's drawn in the different sub-images.

To animate a sprite, you first have to add more sub-images to the main sprite by clicking the (+) button at the top in the frame view:

This will add a new, blank, frame. If you have already created a base image, like with the example explosion sprite, then you may want to carry the image data across to the next frame for editing, in which case you should click on the base frame and then use / + C to copy it and then / + V to paste it (these options to cut and paste frames are also available in the Image context menu at the top).

You can now edit the new frame just as you did the original base frame so that it looks different, and keep adding more frames until you have something that you think will animate as you wish:

Note that although you are copying image data from a previous frame, you can still edit the different layers that you have used - or the whole image if layers aren't being used - for any individual frame and it will only affect that frame. You can then test how this animation looks by clicking the Play button underneath the frame view, and you can set the playback speed from the Speed setting.

If you think the image preview shown in the image view is too small or two big then you can resize it to suit using the Magnify buttons, and you can also set the type of loop to be performed on the animation from the Toggle Loop / Ping-Pong button.

It's worth noting that there is also a button to activate Onion Skinning, which will draw an overlay of the previous or subsequent frames in the colour of your choice along with the current frame on the draw canvas, like this:

You can see in the main image that there are no parts that are drawn using a translucent red colour to show where previous and subsequent frames will be. You can set the opacity and number of frames to be drawn as well as the draw colour for these "onion skins" from the Onion Skin Properties window. This window can be opened from the Image Editor context menu for View. This is incredibly useful when animating to make sure that any movement is smooth and also coincides with what went before.

One final feature of the Image Editor that we are going to discuss is the ability to draw while the animation is running. This can be a very powerful tool for creating smooth motion in your animations and is something that not many editors permit you to do.

How it works is that you create all the frames you require for your image at once, for example add 6 blank frames to a sprite, and then press Play on the frame view to start the animation. You can now select a brush and a colour (if required) and start drawing onto the canvas area and what you draw will be added to the frame that is currently animating.

It can be rather fiddly to get this right and will require you to experiment with the speed at which the animation plays as well as the speed that you move the brush around at, but when you get it right you can create some marvellous effects!

Summary

This tutorial has covered most of the important parts of the image editor, so it's now up to you to start drawing and experimenting to see what you can come up with. Hopefully you'll see that the Image Editor is very powerful, yet very simple to use, and you'll find yourself creating animated sprites and other resources in no time at all. Note that while we've covered all the main parts here, there are a few extra tools available to you from the different context menus at the top of the Image Editor, so check them out too and have fun! And remember, if you aren't sure of anything, you can always check the manual (press ) for more details.