How To Change Sprite Size, Colour And Rotation in GameMaker

Sprites are important for your game: it’s how you get images to show up on the player’s screen.

Your objects use sprites, and you can also draw your own sprites with code. There are also ways to change how that sprite is drawn.

You can change its size, colour, rotation and make many more customisations! Let’s see how.

How To Draw A Sprite In GameMaker

The simplest way to draw a sprite is to assign it to an object:

Then, put this object in a room, and run the game. You'll see your sprite in-game.

GameMaker is flexible: you can tell your object to draw more sprites, as many as you want, wherever you want.

This is done through the Draw event, where you can tell it to draw any sprite you want. Let’s see how.

In your object, add the Draw event. Once you’re in the event, you can draw a sprite with a function.

If you’re using GML Code, use draw_sprite(), and in GML Visual, use “Draw Sprite” to draw a sprite to the screen.

draw_sprite(spr_icon, 0, x, y);

In this function, you tell GameMaker four things:

1. The sprite you want to draw.
2. Which frame you want to draw from the sprite.
3. The X position in the room where the sprite is drawn.
4. The Y position in the room where the sprite is drawn.

In my project, I tried to draw an icon on my chest. However, when I ran the game, I discovered the chest was missing:

This is because when I added the Draw event, it disabled the object’s sprite being drawn automatically.

The fix is easy though! In the event, add draw_self() or “Draw Self”:

draw_self();

My chest now appears again, but now it’s drawing above the icon:

This is because in my event, the icon is drawn first, and the instance itself is drawn second. This makes the instance overlap the icon.

To fix this, I’ll swap the order of my functions, so Draw Self runs first.

draw_self();
draw_sprite(spr_icon, 0, x, y);

This fixes the draw order:

So keep this in mind when drawing sprites, as you can easily make sprites draw in the wrong order.

How To Change Sprite Size In GameMaker

Every instance has image_xscale and image_yscale variables: its horizontal scale and its vertical scale, respectively. They’re set to 1 by default.

Make that number bigger, and the sprite gets bigger on that dimension. Make it smaller and it shrinks.

See how the icon’s size doesn’t change. That’s because it’s drawn separately, and isn’t a part of the instance’s sprite.

Let’s try an interactive example.

In the Step event, I’ll check if the mouse is hovering on the chest, and set both the X and Y scales to 0.8. Otherwise, I’ll keep it at the default value of 1.

if (position_meeting(mouse_x, mouse_y, id))
{
    image_xscale = 0.8;
    image_yscale = 0.8;
}
else
{
    image_xscale = 1;
    image_yscale = 1;
}

I have highlighted the fields in “If Collision Point” that you need to change, the rest are unchanged

With this, the sprite shrinks when you put your mouse cursor on it:

draw_sprite_ext(sprite, frame, x, y, xscale, yscale, rotation, colour, alpha);

var _scale = 0.5;
if (distance_to_object(obj_player) < 100)
{
    scale = 1;
}
draw_sprite_ext(icon_sprite, 0, x, y, _scale, _scale, 0, -1, 1);

image_angle += 2;

draw_sprite_ext(sprite, frame, x, y, xscale, yscale, rotation, colour, alpha);

Of course, using a modified angle here will not rotate the mask of the instance, as this rotation only applies to the sprite that the function is drawing.

How To Change Sprite Colour In GameMaker

The image_blend variable stores the colour that is blended with the instance’s sprite. This will only tint the image – it can’t entirely change the colours.

For example, if the player is near the chest, let’s give it a yellow tint to signal it can be opened.

In the Step event of my chest object, I’ll do this:

if (distance_to_object(obj_player) < 100)
{
    image_blend = c_yellow;
}
else
{
    image_blend = c_white;
}

c_white is always the default blend colour, which results in no change.

So with the above code, we get this:

When using draw_sprite_ext(), you can pass a colour to its colour argument.

It can be one of the c_ constants, e.g. c_white, c_red, c_gray, etc. You can use make_color_rgb() to make a new colour from RGB (red, green, blue) values, or use make_color_hsv() for hue, saturation and value.

You can also write hex colours in the #RRGGBB format.

// Make colour from RGB
var _magenta = make_color_rgb(255, 0, 187);

// Make the same colour from hex codes
var _magenta = #FF00BB;

// Using the colour
draw_sprite_ext(icon_sprite, 0, x, y, 1, 1, 0, _magenta, 1);

If you’re using GML Visual, you can use the colour picker:

How To Change Sprite Transparency

Transparency is controlled by the image_alpha variable. At 1, the instance is fully visible, and at 0 it’s fully invisible.

In my chest object, I’ll add a Mouse Left Pressed event. Here, I’ll set its alpha to 0.5 to signal that the chest has become “unusable” after being clicked on once:

image_alpha = 0.5;

This changes its transparency when you click on it:

If you’re using GML Visual and your alpha doesn’t change, see if you’re using “Set Instance Colour” in a Step/Draw event, and disable its “Use Alpha” option.

This will stop the colour’s alpha overriding your image_alpha value.

In draw_sprite_ext() and “Draw Sprite Transformed”, this is the last argument, and works the same way:

draw_sprite_ext(sprite, frame, x, y, xscale, yscale, rotation, colour, alpha);

More Sprite Functions

In addition to draw_sprite_ext(), there are more sprite drawing functions that serve different purposes. Here are some of my favourites:

• draw_sprite_part(): This lets you draw a rectangular part of the sprite, essentially cropping it before drawing it.
• draw_sprite_stretched(): This lets you set the final width and height of the sprite before drawing it, so GameMaker scales it automatically to fit that size.
• draw_sprite_pos(): This lets you draw a sprite with each corner in a different position, distorting the image’s proportions.

Read about more sprite functions in the GameMaker manual.

Happy GameMaking!