Improving the Visual Design of a Game – Better Sprite Design

So far, we have been using single image sprites in our games. However, sprites offer much more potential than this. In particular, sprites typically contain several images that can be used to animate the motion of a character. Each ‘frame’ in the sprite animation is displayed in turn to give the appearance of motion (similar to the way an animated gif actually ‘contains’ several images that are displayed in sequence). However, it is also possible to select and display just a single frame image from within the sprite at any particular time, as you will discover…

In particular, you are going to animate your player character so that as it moves, it appears to be looking in the direction it is traveling.

Save your game, and then save it again with a new name to create a new version of it. Click on the player sprite and load in the new sprite playerNice.gif from the maze game resources folder.

In the Sprite Properties window, you should see that the sprite contains several image frames that you can click through.

Opening the Image Editor makes the compound, packaging nature of the sprite even more evident.

The separate frames may be used to animate a character so that it appears to move (for example, animating a character’s legs so that it appears to be walking or running, or animating a fire so that it appears to be burning) or simply be used as separate, static images to change the (fixed) view of a character depending on what it is doing at any particular time.

The player sprite you have just loaded will be used to animate the player character in this second sense. That is, rather than animating the character so that it appears to move, we shall animate it so that the view we have of it is depnedent on what it is doing.

As the game originally stood, even though the player character could move in one of four different directions, it always looked the same. that is, it never ‘really’ looked where it was going. If you clicked through the sprite images, you should have seen that the sprite depicts four faces of the player character – left facing , forward facing, right facing and backward facing.

To set the subimage that is displayed when the player character changes direction, you will need to add and a Change Sprite action from the Sprite panel on the main1 actions tab to each of the keyboard events associated with the player object.

By way of example, for the left arrow, add the Change Sprite action and configure it as follows: select the player sprite, select the appropriate subimage (click through the subimages with the Sprite Editor menu to identify the correct one) and set the speed to 0. (The speed here corresponds to the speed at which each of the images contained within the sprite are cycled through; because we are not using the sprite images as ‘free running’ animation frames, we don’t want Game Maker to cycle through them for us each time the character is redrawn, so we set the speed to zero.)

Run your game. How much more ‘realistic’ is the behaviour of the player character now?

If you are feeling particularly creative, have a go at editing the player sprite, for example by changing the colour – or “cut” – of its clothes. Sprite design is just one of the many tasks required of graphic artists in the games industry. Would you have what it takes to become a sprite designer? What skills do you think are required?.

If you are using the movement scheme in which the player character only moves whilst a key is being pressed, which sprite subimage works best when no key is pressed? What happens if you do not use the Set Sprite action at all in this case?

If you did not set the sprite subimage for the event, you may have found that the sprite appears to spin round when you are not pressing any keys. To keep the sprite facing the direction it was facing in previously in this case, you should set the sprite within the person create event to an appropriate subimage of the person sprite and with speed zero. The speed setting here is crucial. Setting the sprite’s image changing speed to zero here means that the sprite image will be essentially fixed, unless the speed is set to a non-zero positive value elsewhere.

With a little imagination, sprites can be used to provide a ‘context sensitive’ view of a character. If you think back to the original Pacman game, the view of the player character depending on which direction it was facing, and the colour of the ghosts changed depending on whether they were in “fight” mode – when they could kill the player character – or “flight” mode – when, after eating a particular piece of fruit, the player character had a period of grace in which it could attack the ghosts and send them back to the pen in the centre of the room.


4 Responses to “Improving the Visual Design of a Game – Better Sprite Design”

  1. 1 Tony Hirst March 25, 2008 at 1:53 pm

    The sprites that we are using in Game Maker are examples of “bitmapped” pixel art. To learn more about how pixels are used to create an image, and how bitmapped images are represented within a computer, check out the following section of the free OpenLearn unit “Crossing the boundary – analogue universe, digital worlds”:

    Crossing the boundary – Introducing pixels ( )

    • 2 James Oland June 18, 2010 at 6:34 pm

      Heya Tony, I’m currently playing catch up after some personal matters needed dealing with and I’ve come to this lesson and found that I can’t preform the task asked.

      To start with I don’t have the sprite you are refering to to use for the animation, and I don’t have the option of sub-images on my sprite menu. Is there anything I am missing from the download pack at the start of the course?

  2. 3 Richard Jarvis November 7, 2010 at 1:06 pm

    Hi Tony, my character often gets stuck in a wall when I hold down the directional keys and collide with the wall. How do I prevent this because I have to restart my game each time and can’t test my further rooms :s

  1. 1 Monsters on Patrol « Digital Worlds - Interactive Media and Game Design Trackback on April 19, 2008 at 10:36 am

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s



%d bloggers like this: