Make games with click and drag inventory and character panels.

This is what stands out at this point.  Having control panels that can be dragged around the screen.

These are made up of two main elements:  the topbar (black) and the brown surface that “follows” the topbar wherever it goes.  Then there are the squares, or item slots.  There is something very particular about these that we will discuss a bit later.

Creating and destroying the panels.

The first step is creating the panel.  This happens when the left mouse button released event occurs for the adequate object (either the blue button for the character panel or the bag button for the inventory panel).  Left mouse released doesn't happen when the player clicks, it happens when he releases the button.  Almost the same but not quite.

The code starts by checking if the topbar exists already.  If it doesn't, the if condition is met so it reads variable values, which will be used to define where the topbar is located. tbx is topbar x coordinate, tby is topbar y coordinate.

Then it will assign the location for the brown inventory box (just below it) and the item slot squares.

Then it will create the two, and since they are always a fixed distance from each other, when the topbar is clicked and dragged, the brown box follows.

But we still have to make the topbar react to clicking and dragging. 

This is done in a very similar way, by using the No button mouse event on the topbar object, which is triggered when the mouse runs over the topbar without clicking.  When this is active, it calculates the x and y distance between the mouse cursor and the top-left pixel of the topbar.

These variables are recalculated at every step (1/60th of a second according to Room Properties.)

When the mouse is clicked on the Topbar (Left Button mouse event), the variables stop changing and can be used to determine where the topbar is located at every step.

And the inventory box called equiped follows, as well as the squares.

A bit more detail about the code:

When the mouse is over the topbar and no button is pressed, this generates the “no button” event.   What happens then is a constant recalculation of the distance between the mouse and the topbar’s “origin”.

Note that the origin can be set in the sprite’s settings.  It can be the center of the topbar, or the top left corner (x=0 and y=0) or any coordinate you choose.  This doesn’t matter much, as long as it is the same for all the objects involved.

This is how the distance between the mouse and the origin are calculated at each step:

    global.tb_correct_x=mouse_x-x;

    global.tb_correct_y=mouse_y-y;

tb_correct_x stands for topbar correct x (for the x coordinate).  That’s a variable name I chose.  Always be explicit with variables so that you can recognize their function when debugging, or reviewing your code for whatever reason.

mouse_x is the built-in variable for the mouse’s x coordinate.

x is the topbar’s built-in x coordinate.  Note that it doesn’t need to be global since it is only used for the current object (topbar).

global.tb_correct_x and global.tb_correct_y are respectively the horizontal and vertical distance between the topbar’s top left corner (origin) and where the mouse is during that step.  Those are global variables because I will use them later to determine where the topbar needs to be at each step.

When the left button is pressed over the topbar, this generates the Left Button mouse event for the topbar.  The following code is then applied:

x=mouse_x-global.tb_correct_x;

y=mouse_y-global.tb_correct_y;

x and y stay at a constant distance from the mouse because since the no button event is no longer occurring, the recalculations aren’t happening.  This means that global.tb_correct_x and global.tb_correct_y aren’t changing.

When you move the mouse, the topbar just “follows” as long as you keep the left button down.

global.equiped_x=x+global.equiped_correct_x;

global.equiped_y=y+global.equiped_correct_y;

This keeps the brown square at equal distance between the topbar’s origin (x and y), which means it “follows” as well.

global.square100_x=x+global.square100_correct_x;

global.square100_y=y+global.square100_correct_y;

This keeps the item slot square at equal distance between the topbar’s origin (x and y), which means it “follows” as well.

The same can be done for any other object.  More item slot squares of course, but also any number of tabs, buttons (…).

Frequent problem

If you look at the room settings you’ll see I changed the room speed (default = 30, I set it to 60).  If it is too slow, the mouse keeps popping out of the topbar space because your mouse runs at system speed (much faster).

Changing the speed, however, also speeds up all the objects in the game.  Your character walks faster for instance.  Setting it too high would make the click and drag work better but you’d need to slow down the game with a sleep() command at each step.

Room speed being 60 means 60 steps occur per second instead of 30.

Conclusion

That’s it for now!  Keep an eye out for a bigger version of the same game, with more explained features!

Not in my email course list yet?  Give it a try, it's free!  You get to keep the source code to custimize it and make it your own.