How to make an object with its own sprite draw an additional sprite on top of itself

Question

I'm making character select buttons for a Game Maker Studio 2 game, hoping to do so by just having a single object I can edit on an individual basis to change which character it represents. I also want the button itself to display the sprite of the character it's meant to represent like an image overlaying the button's own sprite. I can't seem to get a clear, direct answer on how this is done.

To sum up:

• Character select button is an object with its own assigned sprite.

• Each individual button object holds (a reference to) a corresponding character object the player may select by clicking that specific button.

• Button object should be able to check the sprite of the character object it references, and draw it on top of its own sprite without replacing it entirely.

If anyone can help show me how to do that last part- or barring that, perhaps point me toward a better way to achieve a similar effect, it would be appreciated.

Answer 1

If you are using drag and drop then you should be able to simply have it "create instance" of an object with the sprite you want and set its position relative to the button. If you want it to be slightly transparent just add a draw event in the object and add "draw self" and then add "set alpha". If you want to scale the sprite just add a create event and add a "set instance scale" block. To ensure that it is on top set it's depth lower.

Answer 2

I can think of two different approaches, the earlier keeps code simple whilst requiring more graphics; the latter needs no additional sprites though a little more code to reference the correct sprites.

Solution 1: a specific sprite for characters

You add just one line of code, and use an additional sprite resource representing the characters preview to be drawn on your button.

If your buttons have an index reference to a given character like this:

/* Button Create Event */
char_ref = -1;    // character reference

Create a sprite with as many frames as the number of your characters. Each frame depicts one of your characters (so, 5 char's = 5 frames). Let's call it sprButtonCharacters.

If sprButtonCharacters' first frame is the first character, and so do other frames, you can use the value of char_ref to choose a sub-image of sprButtonCharacters to be drawn on top of the button object.

In the button Draw Event:

/* Button Draw Event */
draw_self();    // draw sprite_index
draw_sprite(sprButtonCharacters, char_ref, x, y);    // draw char. sprite

You are first drawing the button (you can change draw_self() with whatever script or functions you use to render the button), then you draw the sprite representing the characters on top of it by choosing the desired sub-image.

You can add some values to x and y if you need to draw such sprite with given horizontal and vertical offsets.

Solution 2: everything via code

Every time you add a new character, just add a new line of code to a script in charge of choosing the sprite to be drawn onto the button. No additional sprites needed.

We still have a char_ref variable which tells us what character the button is referencing to, but this time we have different code functions to draw the overlay sprites we need. In the button Draw Event:

// Button Draw Event
draw_self();    // draw sprite_index
switch (char_ref)    // choose character sprite to draw
{
    case 0: draw_sprite(sprTonyIdle, 0, x, y); break;    // first character
    case 1: draw_sprite(sprAllyCyborg, 0, x, y); break;    // second character
    case 2: draw_sprite(sprRogueWarrior, 0, x, y); break;    // third character
    { ... }
    default: break;    // no character assigned
}

This way you can assign any sprite you want to be drawn by the button, and no new resources are needed since the sprite is supposed to be already present in your game project.

Also, if you use -1 instead of 0 as subimage argument to sprite_draw(), you can draw animated character previews instead of static ones.