Documentation:Advanced use/More about sprites

When running Game Maker in advanced mode the A number of advanced options exist. When you open the sprite form it will look as follows:



A new button Save Sprite has appeared. With this button you can save the sprite in a proprietary format. This format will not only store the image(s) of the sprite but also other settings, such as collision settings and the origin. The file will have the extension .gmspr. Game Maker can load such files but also the games can load them.

At the bottom-left, you can indicate the origin of the sprite. This is the point in the sprite that corresponds with its position in the room. When you set an instance at a particular position, the origin of the sprite is placed there. Default it is the top left corner of the sprite but it is sometimes more convenient to use the center (by clicking the Center button) or some other important point. You can even choose an origin outside the sprite. You can also set the origin by clicking in the sprite image. The origin will be shown with a cross.

Most important are the options related to collision checking. Whenever two instances meet a collision event is generated. Collisions are checked in the following way. Each sprite has a mask. Default this corresponds to all pixels that are not fully transparent. When two pixels in the masks of the two sprites overlap, a collision is reported.

Sometimes you don't want precise collision checking. In this case, uncheck the box Precise collision checking. Now the bounding box is used as the mask.

When the sprites has multiple subimages, default there is just a single mask that combines the masks of all subimages. Normally this is what you want but in certain situations you might want each subimage to have its own mask. In this case check the box Separate collision masks.

Collision Masks
If you want even more control over the collision masks, press the button Modify Mask. The following window will show:



At the left top there is again the information about the sprite image. You can show the different subimages. Also you can indicate here whether to show the collision mask (default on). In this case, in the images at the right the mask is shown in dark. You can also zoom in and out to get a better view.

To the right of this you can change the bounding box. Only pixels inside this bounding box are used for the mask. Default the bounding box is automatically computed, taking the alpha tolerance into account, separate for each subimage, when using separate collision masks. You can also set it to the full image or you can set it to manual. In the latter case you can specify the bounding box yourself. When set to manual you can also draw the bounding box with the left mouse button in the image, or you can move it with the right mouse button. (Note though that the mask is shown while drawing, not the bounding box!)

Below this you can indicate the shape of the mask. Default is precise, pixel-wise collision checking, but you can select here also to use the bounding rectangle, a disk (or ellipse) inside it, or a diamond shape. Rectangles or disks are is many cases better representations of the shape. (Note that the choice has no effect on speed!)

Finally, at the left bottom you can (again) indicate whether or not there should be separate collision masks for all subimages. (Note that if you set the bounding box manual, a single bounding box will be used for all subimages, regardless of this setting.) You can also indicate the tolerance with respect to the transparency. With a higher tolerance also pixels that are partially transparent are left outside the mask. This influences both the bounding box (when not set to manual) and the mask for precise collision checking.

It is important to carefully decide on the collision mask you use for your sprites. Although precise collision checking might seem the most logical option, in many cases game play is improved by using bounding boxes or disks, or masks that are a bit smaller than the actual sprites. If you want even further control over the mask, note that for objects you can specify a different sprite to use as mask. In this way you can make the collision mask completely independent of the image.

Once you are done, press OK. If the mask was modified, the word Modified will show in the sprite form such that you are reminded that you changed some settings here.

Editing your sprites
Up to now we loaded our sprites from files. It is though also possible to create and in particular modify them within Game Maker. To do this, open the sprite property window by double clicking on one of your sprites (or by creating a new one). Now press the button labeled Edit Sprite. A new form will appear showing all the subimages that make up the sprite.

The sprite editor form will look as follows:



At the right you see the different images that make up the sprite. Note that in Game Maker all subimages of a sprite must have the same size. At the left an animation of the sprite plays. (If you don't see the animation, check the box labeled Show Preview.) Below the preview you can change the speed of the animation and the background color. Also you can select one of the backgrounds in your game and whether it must be streched. In this way you can get an idea of what the animation will look like in the game. (Note that this speed is only for preview. The speed of the animation during the game depends on the room speed.)

The sprite editor contains many commands to create and change the sprite. These are all given through the menus. (For some there are buttons on the toolbar.) Some commands work on individual images. They require that you first select a subimage with the mouse.

File Menu
The file menu contains a number of commands related to loading and saving sprites.


 * New. Creates a new, empty sprite. You must indicate the size of the sprite. (Remember, all images in a sprite must have the same size.)
 * Create from File. Creates the sprite from a file. Many file types can be used. They all create a sprite consisting of a single image, except for animated GIF files that are split into the subimages and strips that have an name ending with _stripXX. When selecting a file you can indicate whether the image should be opaque, whether to remove the background, and whether to smooth the edge. You can select multiple images which will then all be loaded. They should preferably have the same size, otherwise, their canvas sizes will be adapted.
 * Add from File. Adds an image (or multiple images) from a file to the current sprite. If the images do not have the same size you can choose where to place them or to stretch them. You can select multiple images which will then all be loaded. They must preferably have the same size.
 * Save as PNG File. Saves the sprite as a strip in a PNG file. When the sprite has multiple subimages the text _stripXX with XX the number of subimages is automatically appended.
 * Create from Strip. Allows you to create a sprite from a strip. See the next section for more information.
 * Add from Strip. Use this to add images from a strip. See the next section.
 * Close Saving Changes. Closes the form, saving the changes made to the sprite. If you don't want to save the changes, click on the close button of the form.

Edit menu
The edit menu contains the following commands:


 * Undo. Undo the last change. The last 16 changes can be undone.
 * Redo. Redo the last undone change.
 * Cut. Cut the currently selected subimage to the clipboard. You can edit or use the subimage in a different program this way. However, the transparency information might be lost.
 * Copy. Copy the currently selected subimage to the clipboard.
 * Paste. Paste the image on the clipboard as a new subimage. When it has not the correct size you should indicate how to change this. When the image came from a different program, transparency information might be lost.
 * Erase. Erase the current, or all images to a particular color. A form open in which you can select the color and the opacity (alpha) value. A preview of the result it shown. You can indicate whether to erase all images or only the current one.
 * Delete. Delete the currently selected subimage.
 * Move Left. Move the currently selected subimage one position to the left in the sequence.
 * Move Right. Move the currently selected subimage one position to the right in the sequence.
 * Add Empty. Add a new empty subimage at the end of the sequence.
 * Insert Empty. Insert a new empty subimage before the currently selected subimage.
 * Edit. Edit the currently selected subimage using the built-in image editor.
 * Set Tranparency Background. Here you can indicate how the transparent area of the sprites should be shown in the sprite editor. You can either use the (default) block pattern, or a color that you can change by clicking on the color box.

Transform menu
In the transform menu you can perform a number of transformations on the images. For most of them you can choose whether to apply them only to the current sub image or to all images.


 * Shift. Here you can shift the image(s) an indicated amount horizontally and vertically.
 * Mirror/Flip. Mirror the image(s) horizontally and/or flip them vertically.
 * Rotate. You can rotate the image(s) 90, 180 or 270 degrees, or an arbitrary amount.
 * Scale. This command scales the image(s) (but not the image size!). You can indicate the scale factor and whether to scale horizontally and/or vertically.
 * Skew. This command skews the image(s) horizontally and/or vertically with a given amount.
 * Resize Canvas. Here you can change the size of the canvas. You can also indicate where the images are placed on the new canvas.
 * Stretch. Here you can stretch the images into a new size. You can indicate the scale factor and the quality.


 * Crop. This makes the images as small as possible. This is very useful because the larger the images, the more video memory Game Maker will use. You can indicate the size of a transparent border around the images. If you provide a negative value, the outside of the images will be cut off.

Images menu
In the images menu you can perform a number of operation on the images. Some of these are only available in the Pro Edition.


 * Cycle Left. Cycles all images one place to the left. This effectively starts the animation at a different point.
 * Cycle Right. Cycles all images one place to the right.
 * Black and White. Makes the image(s) black and white (that is, grayscale).
 * Colorize. Here you can change the color (hue) of the images. Use the slider to pick the new hue. When you indicate to shift the hue the colors are shifted over the amount indicated giving rather interesting effects.
 * Colorize Partial. Here you can change the color (hue) of part of the images. You can select the old hue and a tolerance around it and then indicate the new hue with which to replace this range of colors. This can be used for instance to change only the color of the shirts of players. You can pick the old hue also by clicking in the left image.
 * Intensity. Here you can change the intensity by providing values for the color saturation and the value of the new images.
 * Invert. Inverts the colors in the images.
 * Make Opaque. Remove all transparency information from the images, making them opaque.
 * Erase a Color. You can select a color (either by clicking on the color box or by clicking in the left image. Also you specify a tolerance. All pixels with a color close the the selected color will be made transparent.
 * Smooth Edges. Smooth the edges around the opaque part of the image(s) somewhat to make them look nicer. (A stronger effect can be created by using Blur but only blurring the transparency; see below.
 * Opacity. Here you can change the opacity (transparency) for the whole image. You can either set it relative to the current opacity or absolute. (Fully transparent pixels always stay fully transparent.)
 * Set Alpha from File. You select an image. The lightness of the pixels of that image will be used as transparency value. Black pixels will lead to completely transparent pixels, while white

pixels will lead to opaque pixels. When the image does not have the correct size it will be stretched. Only available in the Pro Edition.
 * Fade. Here you specify a color and an amount. The pixels in the image(s) are now faded towards this color with the given amount.
 * Blur. By blurring the images the colors are mixed a bit, making it more vague. You can select a small, medium, or large blur. Also you can select whether to blur the color values and/or the transparency values. Only blurring the transparency values is a nice way to smooth the boundary of the images.
 * Sharpen. This is sort of the reverse of blurring. The image will be made more sharp, enhancing the edges. You can do a subtle sharpening or a strong sharpening. The special sharpening puts additional empasis on the edges, leading to a funny effect. You can sharpen the color values and/or the transparency values.
 * Outline. Create an outline around the image. You are asked for the color and a thickness of the outline. You can also indicate to place the outline inside the image. You can indicate whether to remove the image itself, just keeping the outline, and whether to smooth the outline. Only available in the Pro Edition.
 * Shadow. Create a shadow behind the image. (This will only work when the image is partially transparent.) You indicate the color of the shadow and the opacity. Also you indicate the relative position of the shadow. Finally you can indicate whether it should be a soft or a hard shadow. Only available in the Pro Edition.
 * Glow. Create a colored glow around the image. You indicate the color of the glow, the opacity and the thickness. You can also indicate to place the glow inside the image. Only available in the Pro Edition.
 * Buttonize. Turn the image(s) into a button. You specify the color of the button and the opacity. Also you must indicate the thickness of the button boundary and whether it should be smooth or not. Only available in the Pro Edition.
 * Gradient Fill. Adds a gradient fill to the image(s). You specify the two colors of the fill, the opacity, and the kind of fill. Default the image is replace by the gradient although the transparency is maintained. By unchecking the Replace box the gradient is blended onto the image. By checking the Change Transparency box the alpha value of the original image is changed as well. You can create great effects. For example, make an image black-and-white and then blend a gradient on it. Only available in the Pro Edition.

You will have to experiment with these commands to get the sprites you want.

Animation menu
Under the animation menu you can create new animated sprites out of the current sprite. There are many options and you should experiment a bit with them to create the effects you want. Also don't forget that you can always save an animated sprite and later add it to the current one. Also you can always add some empty images and delete unwanted ones. We will briefly go through the different possibilities.


 * Set Length. Here you can change the length of your animation. The animation is repeated enough times to create the number of frames you indicate. (Normally you want this to be a multiple of the current number of frames.)
 * Stretch. This command also changes the length of the animation. But this time, frames are duplicated or removed to get the right number. So if you increase the number of frames the animation goes slower and if you decrease the number it goes faster.
 * Reverse. Well, as you could guess this reverses the animation. So it is played backwards.
 * Add Reverse. This time the reverse sequence is added, doubling the number of frames. This is very useful for making an object go left and right, change color and return, etc. You sometimes might want to remove the double first and middle frame that occur.
 * Translation Sequence. You can create an animation in which the image slightly translates in each step. You must provide the number of frames and the total amount to move horizontally and vertically.
 * Rotation Sequence. Creates an animation in which the image rotates. You can either choose clockwise or counterclockwise rotation. Specify the number of frames and the total angle in degrees (360 is a complete turn). (You might need to resize the canvas first to make sure the total image remains visible during the rotation.)
 * Colorize. Creates an animation that turns the image into a particular color.
 * Fade to color. Creates an animation that fades the image to a particular color.
 * Disappear. Makes the image disappear by making it more transparent in each step.
 * Shrink. Shrinks the image to nothing. You can indicate the direction.
 * Grow. Grows the image from nothing.
 * Flatten. Flattens the image to nothing in a given direction.
 * Raise. Raises the image from a given direction.
 * Overlay. Overlays the animation with another sprite or image in a file. You indicate the file and the image(s) from that file are then placed on top of the current animation. When the image from the file has a different size it is stretched.
 * Morph. Morphs the animation to an animation or image from a file. Note that morphing works best if the two animations cover the same area of the image. Otherwise, halfway certain pixels disappear and others suddenly appear.

In particular the last two commands are very powerful. For example, to blow up an object, add a number of copies and then a number of empty frames. Then overlay it with an explosion animation. (Make sure the numbers of images match.) Alternatively, morph it to the explosion. With some practice you can make great sprites.

Editing individual images
Game Maker has a built-in image editor that can be used to edit individual subimages of sprites and background images. To call the editor for a subimage of a sprite, select the subimage in the sprite editor and choose Edit Image from the Image menu (or double click on it). To edit a background, open the background properties for and press the button Edit Background.

The built-in image editor is pretty powerful and especially suited for creating sprites and backgrounds for Game Maker. However, it does not have all the features of full-blown paint and drawing packages. The buitl-in editor is primarily meant for making changes to images, not for creating sprites and backgrounds from scratch. For this you probably want to use a separate paint program, save the images as PNG files, and load them into Game Maker. You can also set an external image editor in the preferences.

When you start the image editor it will typically looks as follows:



The form shows the image in the middle and a number of drawing tools at the left. Below there you can set certain properties of the drawing tools. These will change depending on the tool you select (see below). In the middle you see the current image. You can zoom in and out using the buttons on the toolbar. At the right there is information about the colors with which the draw. You can set a separate color for the left and the right mouse button. You can change these by clicking with the left or right mouse button in the color selector images. Also you can change them by clicking in the boxes at the top that repesent the colors. Below the colors you see the Opacity. This indicates how opaque or transparent the color is. When you set it to 255 the pixels your draw are fully opaque. When you set it to 0 they are fully transparent. Normally when you draw partially transparent pixels they are blended with the current color. By setting the Color Mode to Replace, the pixels will be replaced with the new color. Finally at the bottom of the form there is a statusbar with some infomation about the current drawing tool, the position of the mouse, the size of the image, and the amount of memory it requires.

Drawing tools
The following drawing tools are available (from left to right, top to bottom).


 * Paint. With this tool you can paint on the image. You can use the left or right mouse button to paint in the different colors. You can select the size of the pen. When holding  when starting to paint you only paint horizontal or vertical lines. When holding the  key you can select a new paint color.
 * Spray. With this tool you can spray on the image. Spray is like paint except that you use a brush that is partially transparent at the sides. You can use the left or right mouse button to paint in the different colors. You can select the size of the brush. You can also select the hardness of the brush. A soft brush will be more transparent near the sides. When holding  when starting to spray you only paint horizontal or vertical lines. When holding the  key you can select a new spray color.
 * Erase. With this tool you can erase part the image. It looks a lot like spray but you erase what is below the mouse. How much you erase depends on the the Opacity. For a value of 255 you erase completely. For a smaller value you only make the image a bit more transparent. You can set the hardness of the eraser. When holding  when starting to spray you only paint horizontal or vertical lines.
 * Color Picker. With this tool you can set the left or right mouse color to the color of a pixel in the image. Note that also the opacity value is set.
 * Line. With this tool you can can draw straight lines. When holding  you can draw horizontal, vertical, or diagonal lines. You can set the width of the line and whether is should have arrows. By selecting Anti-alias the line is drawn with partially transparent pixels on the side to make it more smooth.
 * Polygon. With this tool you can can draw a closed polygon. You click on the position of the first vertex. Next you can either drag the next vertex or click on the position of the next vertex. In this way you continue. You end the polygon with the  key. When holding  you can draw horizontal, vertical, or diagonal lines. You can set the width of the line and whether the polygon should be filled or not. By selecting Anti-alias the polygon is drawn with partially transparent pixels on the side to make it more smooth.
 * Rectangle. With this tool you can can draw a rectangle. When holding  you can draw a square. When holding  you draw the rectangle from the center. You can set the width of the line and whether the rectangle should be filled or not. By selecting Anti-alias the rectangle is drawn with partially transparent pixels on the side to make it more smooth.
 * Ellipse. With this tool you can can draw an ellipse. When holding  you can draw a circle. When holding  you draw the ellipse from the center. You can set the width of the line and whether the ellipse should be filled or not. By selecting Anti-alias the ellipse is drawn with partially transparent pixels on the side to make it more smooth.
 * Rounded Rectangle. With this tool you can can draw a rounded rectangle. When holding  you can draw a square. When holding  you draw the rounded rectangle from the center. You can set the width of the line and whether the rounded rectangle should be filled or not. By selecting Anti-alias the rounded rectangle is drawn with partially transparent pixels on the side to make it more smooth.
 * Select Region. With this tool you can can select a rectangular region. You can extend the current selection by holding the  key. Also you can remove parts by holding the  key. Once you made a selection you can pick it up with the mouse and drag it to a new position. When you use the right mouse button you make a copy. The selection can also be cut or copied to the clipboard. It can be deleted with the <Del> key. You can end the selection using the <Esc> key.
 * Select with Magic Wand. In this case you make the selection by clicking on a pixel. All connected pixels with the same color will be selected. You can indicate the tolerance in color valu with which to select pixels and whether only the color or also the transparency value should match. You can extend the current selection by holding the <Shift> key. Also you can remove parts by holding the <Ctrl> key. You can manipulate the selection as above.
 * Select by Spraying. In this case you make the selection by spraying with the mouse on the image. You can set the size of the selector. For the rest the selection can be treated as above. Different selection types can be combined.
 * Text. To add a text click on the image. A pop-up window appears in which you can enter the text. Use the # symbol to insert a newline. Once you press OK the text is put in the image, with a box around it. You can now move the text by pressing with the mouse in the box and dragging the text. You can change the text by clicking with the right mouse button in the box. You can set the Font of the text and how the different lines should be aligned.
 * Fill. Click on a pixel in the image and all connected pixels with the same color will be turned into the new pixel. You can set the tolerance with which the color should match. Also you can set whether to only match on the color value or also take the transparency value into account. Not that when the Color Mode is set to Blend the fill color is blended with the existing one. To replace it, set the Color Mode to Replace.
 * Change Color. Click on a pixel in the image and all pixels in the image with the same color will be turned into the new pixel. You can set the tolerance with which the color should match. Also you can set whether to only match on the color value or also take the transparency value into account. Not that when the Color Mode is set to Blend the new color is blended with the existing one. To replace it, set the Color Mode to Replace.

Menus
A number of further commands are available through the menus. For some of these there is a corresponding button on the tool bar.

File menu

 * New. Creates a new, empty image. You must indicate the size of the image. (When the image is part of a sprite with multiple images you cannot set the size.) (Remember, all images in a sprite must have the same size.)
 * Open. Open an image from a file. This menu item is not available when the image is part of a sprite with multiple images.
 * Previous Image. Only available when the image is part of a sprite with multiple images. Saves the changes and opens the previous subimage.
 * Next Image. Only available when the image is part of a sprite with multiple images. Saves the changes and opens the next subimage.
 * Save as PNG File. Saves the image as a PNG file. No other file formats are supported.
 * Close Saving Changes. Closes the form, saving the changes made to the image. If you don't want to save the changes, click on the close button of the form.

Edit menu
Here you find the usual commands to Undo the last change and Redo the last undo, to delete, cut, or copy the current selection to the clipboard, to paste the image on the clipboard as a selection in the image, and to select all. (Note that when using the clipboard, transparency information might be lost.) Two additional commands require a bit more explanation.


 * Erase to Left Color. This erases the image and replaces it by the left color (and opacity setting).
 * Paste from File. You can select an image from a file. This image is then pasted into the current image as a selection. You can then move that selection to the appropriate place.

View menu

 * Zoom Out. You can zoom out to see more of the image. You can also hold the <Ctrl> key and move the mouse scroll wheel to zoom in or out.
 * No Zoom. Sets the image back to the normal size.
 * Zoom In. You can zoom in to more precisely draw in an area of the image.
 * Toggle Grid. You can toggle the grid on or off. Note that the grid is only shown when you zoom in enough.
 * Grid Options. Here you can set the size of the grid and the color. You can indicate whether to use exclusive or when drawing the grid (might make it more visible) and whether the drawing should be snapped to the grid.
 * Show Preview. Show a preview of the image in the right bottom corner in the normal size. This is in particular useful when you are zooming in a lot to make small changes. If the image is larger than the preview are you can use the mouse to drag the part of the image you want to see. You can also double click on the preview image to open a separate preview window in which you can see the complete image.
 * Set Transparency Background. Here you can indicate how the transparent area of the image should be shown in the sprite editor. You can either use the (default) block pattern, or a color that you can change by clicking on the color box.

Transform menu
This menu contains the same transformation commands as in the sprite editor. You can read about their function there. Note that Resize Canvas, Stretch, and Crop are not available when the image is part of a sprite with multiple images, because in that case we cannot change the size of the image.

Image menu
This menu contains the same commands as in the sprite editor. You can read about their function there. Note that some commands are only available in the Pro Edition.