Interact with elements using draw_sprite

[Ember]

Hi everyone,

I'm currently developing a RPG and I've created save and inventory icons that I have placed using the draw_sprite function.

This works nicely and the icons appear where I want and they are in a fixed position so that when the camera moves, they stay where the are.

But now, I'm a little bit confused as to how I would interact with these icons. I'm not asking for the exact code, just a nudge in the right direction.

I am pretty new to GML but I have the basics down and I've managed quite nicely so far but this has really stumped me.

Perhaps I'm looking too much into it but all I need is to have the sprites perform an action when clicked, if they were objects, I could do this quite easily but since they are sprites, I am stumped.

Here is what I've done in the object of the player using a Draw GUI event:
//save
draw_sprite(spr_save, 0, 930, 10)

//inventory
draw_sprite(spr_inventory, 0, 870, 10)

 

[Simon Gust]

The first information you need for this to work are the positions of the buttons on the GUI.

var x1 = 930;
var y1 = 10;

You can save the positions for the first button in variables to make it as easy and readable as possible.
It is best if the sprite origins for these sprites are in the top left btw.

Then you need to width and height of the sprites to get the right and bottom coordinates.
x1, y1, x2 and y2 if you will.

var x2 = x1 + sprite_get_width(spr_save);
var y2 = y1 + sprite_get_height(spr_save);

With these 2 coordinate pairs you can define a rectangular area that can be found by the cursor using the function point_in_rectangle().
where the "point" in "rectangle" would be the coordinates of your cursor.
To check for mouse inputs, use mouse_check_button_pressed().

// set sprite coordinates
var x1 = 930;
var y1 = 10;
var x2 = x1 + sprite_get_width(spr_save);
var y2 = y1 + sprite_get_height(spr_save);

// get mouse coordinates
var mx = display_mouse_get_x();
var my = display_mouse_get_y();

// check whether the mouse is over the button
var hover = point_in_rectangle(mx, my, x1, y1, x2, y2);
if (hover)
{
  // check for a mouse input to press the button
  if (mouse_check_button_pressed(mb_left))
  {
    // save game
    
  }
}

// draw the button sprite
draw_sprite(spr_save, 0, x1, y1);

 

[Ember]

The first information you need for this to work are the positions of the buttons on the GUI.

var x1 = 930;
var y1 = 10;

You can save the positions for the first button in variables to make it as easy and readable as possible.
It is best if the sprite origins for these sprites are in the top left btw.

Then you need to width and height of the sprites to get the right and bottom coordinates.
x1, y1, x2 and y2 if you will.

var x2 = x1 + sprite_get_width(spr_save);
var y2 = y1 + sprite_get_height(spr_save);

With these 2 coordinate pairs you can define a rectangular area that can be found by the cursor using the function point_in_rectangle().
where the "point" in "rectangle" would be the coordinates of your cursor.
To check for mouse inputs, use mouse_check_button_pressed().

// set sprite coordinates
var x1 = 930;
var y1 = 10;
var x2 = x1 + sprite_get_width(spr_save);
var y2 = y1 + sprite_get_height(spr_save);

// get mouse coordinates
var mx = display_mouse_get_x();
var my = display_mouse_get_y();

// check whether the mouse is over the button
var hover = point_in_rectangle(mx, my, x1, y1, x2, y2);
if (hover)
{
  // check for a mouse input to press the button
  if (mouse_check_button_pressed(mb_left))
  {
    // save game
   
  }
}

// draw the button sprite
draw_sprite(spr_save, 0, x1, y1);

Hi Simon, thanks for your answer, it's really in depth and gives me the perfect answer!
Unfortunately for you, I actually figured this out myself (which I was quite proud about). I should have probably updated my question with what I'd done, my fault entirely.

However, if I hadn't have figured it out, you would have certainly given me a massive help and hopefully this will help others who are stuck in a similar situation as to what I had been in