Creating Sprites In GameMaker Studio 2

Creating Sprites In GameMaker Studio

A sprite is any image you want to use in a game in GameMaker Studio. A sprite can contain a single image or multiple images to support animation. The images themselves can be created it GameMaker Studio using the Sprite Editor, or created in another application and imported into the sprite.

Creating A Sprite

To create a sprite, find the node labeled "Sprites" in the resource tree, right click and select "Create". If you start typing immediately you can enter a name for your sprite.
Creating a Sprite in GameMaker Studio
Creating a Sprite from an Object in GameMaker Studio
You can also create a sprite when creating an object by clicking the "New Sprite" button in the object properties panel.
Another method for creating a sprite is to right click in the workspace and select "Resources -> Create Sprite". You can also use the keyboard shortcut "ALT + S" to do the same thing.
Creating a Sprite in GameMaker Studio by right clicking the workspace.

Naming A Sprite

As mentioned above, if you created a sprite by right clicking on the resource tree, you can name your sprite by typing immediately after creating the sprite. You can also slowly double click the sprite in the resource tree. If you open the sprite in your workspace, in the sprite properties panel there is a property called "Name" that can be changed.
Naming a Sprite in GameMaker Studio

Assigning An Image To A Sprite

Editing an image in GameMaker Studio using the Sprite Editor
There are a few different ways you can assign an image to a sprite. First, in the image properties panel click the "Edit Image" button to open the image editor. The image editor is a tool similar to other applications like paint.net or Graphics Gale, both of which I have used with great success, but the image editor can be just as capable in many situations.
The second method for assigning an image to a sprite is to click the "Import" button from the sprite properties panel. You can then select an image stored in any format supported by GameMaker Studio. Keep in mind that if you import an image and then edit it using the image editor in GameMaker Studio, the source file you imported from won't change, only the image associated to the sprite inside your GameMaker Studio project. Similarly, importing a sprite will overwrite any changes you might have made in the image editor.
Importing an image into a Sprite in GameMaker Studio
Importing an animated strip image into a Sprite in GameMaker Studio
The third method you can use is designed to support animation. In the sprite properties panel, click "Edit Image". Then, from main menu in the image editor select "Image -> Import Strip Image". This will take a file containing multiple frames of the same sprite and convert it into multiple frames in the sprite. For example, if you have walking animation your source image might have 4 separate images with the character facing one direction with their feet in a different position that when shown in series give the illusion of walking.
After selecting your source image, in the "Convert To Frames" window you'll need to adjust the settings to match your image. Typically you'll specify the number of frames in a row, along with the height and width of the separate frames. So in the example described above we might change "Frames Per Row" to 4 indicating that we have 4 frames, and we might also change the height to indicate that our character is taller than they are wide. Then click the "Convert" button.
Converting a strip image into frames of a Sprite in GameMaker Studio

Excercise

Download the resource file below, and using the provided resources complete the following steps.
  • - Extract the resources pack and open the provided GameMaker Studio project file.
  • - Create a new sprite by right clicking in the resource tree and selecting "Create Sprite". Name the sprite "spr_edit_image".
  • - From the sprite properties panel, select "Edit Image". Using the toolbox in the sprite editor, draw something in the sprite. When you're done, return to your workspace using the tabs at the top of the screen.
  • - Create another new sprite by right clicking in the workspace and selecting "Create Sprite". Name the sprite "spr_import_image".
  • - From the sprite properties panel, select "Import". In the resources file, find the image called "Import.png".
  • - Create a third sprite by pressing "ALT + S" while in the workspace. Name the sprite "spr_import_strip_image". Follow the steps above for importing a strip image, using the file "Import_Strip_Image.png" from the resources pack. Set the number of frames per row to 4, and the height to 48.
  • - In the resource tree, find the node labeled objects. Under objects, double click "obj_edit_image". In the object properties panel, under the label "Sprite" click where it says "No Sprite". Select "spr_edit_image".
  • - Repeat this step for "obj_import_image", selecting "spr_import_image" as the sprite, and "obj_import_strip_image" selecting "spr_import_strip_image" as the sprite.
  • - Run the game by selecting the Run button from the menu, or by pressing F5 on the keyboard. This should open a window with the three sprites you just created. The first item on the left will be the one you created using the image editor, in the middle there should be an image of a character standing still, and on the right should be an animated sprite that looks like they're walking in place.

    The game we created as a result of this tutorial on GameMaker Studio

Further Research

  • - Try creating your own sprite image using a program like paint.net or Graphics Gale.
  • - Search around at Open Game Art and find a character you like. Sometimes the formatting for sprites isn't exactly the same as what we dealt with when we imported the strip image. Try adjusting the settings in the "Convert to Frames" window to match the image you found.
  • - See the tutorial on Creating Objects