How to make the left panel show, hide using GML GameMaker

The panel menu can be showed and hidden by clicking on the menu icon. We often called it as 'Left Slide Menu'. How to create left slide menu in game maker using gamemaker studio GML.

In this game maker tutorial lab, we need only two sprites (spr_left_panel_background, spr_menu_icon), two objects (obj_left_panel, obj_menu_icon).

Step 1: Create spr_left_panel_background width x height : 200 x 600 pixels and paint any color background for it. We will use it as a left panel menu.
Step 2: Create spr_menu_icon button 32 x 32 pixels. We need 2 images 1 for the left click icon (image 0) and 1 for the right click icon (image 1).

Left Slide Menu - Show Hide Left Menu

Step 3: Create obj_left_panel and select the background for it. obj_left_panel object has 2 events Create and Step.

We will add [Jump to Position] x,y 0,0 Action of tab Move into Create Event.

Show hide Left Menu Left Slide Menu GML game maker 

Then we add the Code Action like this to Create Event

hide = 0; // hide equal 0 is show, 1 is hide... when hide = 1 we will call the code and make the panel move to the left
hidespeed = 3; // the speed of panel moving
hidefact = 0.6; // we use this to make the panel moving smoothly
width = sprite_get_width(spr_left_panel_background); // get the width of obj_left_panel
instance_create(x + width ,y + 32,obj_menu_icon); // create object obj_menu_icon right beside the panel

Step 4: We add Code Action to Step Event of obj_left_panel object like this

if(hide == 0)
{
         // show panel, move the panel to the right
         if(x<0)
         {
              hidespeed +=  hidefact;
              x = x + hidespeed ;
              obj_menu_icon.x = obj_menu_icon.x + hidespeed;
          }
         else
         {
              hidespeed = 3;
              obj_menu_icon.image_index = 0;
          }
}
else
{
          // hide panel, move the panel to the left
          if(x>-width)
          {
              hidespeed += hidefact;
              x = x - hidespeed;
              obj_menu_icon.x = obj_menu_icon.x - hidespeed;
           }
           else
           {
              hidespeed = 3;
              obj_menu_icon.image_index = 1;
            }   
}

Step 5: Create obj_menu_icon Object, select spr_menu_icon sprite for it. This object has two Events Create and Left Released.  In the Event Create, we add the Change Sprite Action of Main1 Tab. We need to do that to set the speed of the image to 0 in order to not let the image of spr_menu_icon spirte changing over time. It means the image index will be 0 in the first time and no change to another image index until we click on this obj_menu_icon object.

Show hide Left Menu Left Slide Menu GML game maker  

In the Event Left Released of this obj_menu_icon Object, We add the Action Code

if(obj_left_panel.hide = 0)
{
obj_left_panel.hide = 1;
}
else
{
obj_left_panel.hide = 0;
}

When we release the left mouse click, the obj_menu_icon will check the status of the hide variable of obj_left_panel and toggle it. Then the obj_left_panel object will based on the hide value to move to right or left/ hide or show.

Step 6: Put the obj_left_panel to the room and run the game, then try to click on the obj_menu_icon you will see the left panel menu slides (We dont need to place the obj_menu_icon object to the room because it will be added automatically by obj_left_panel)

Roberts

good Tips. i will use it when i make a game by myself. thank you for your share.

5/13/2016 4:00:07 AM