Inventory tutorial

Intruduction

This tutorial is created for Game Maker 5 and 6 and assumes a basic knowledge of GML. For this tutorial advanced mode must be enabled. Please note that there are many methods of creating an inventory and that this is only one method and that there will very likely be better and faster methods available. I have tried to make a tutorial for this as user friendly as possible. Where there are differences within code between Game Maker 5 and Game Maker 6 I have placed both codes. All other codes should be compatible with both versions.

Note: this script uses inventory as a variable name and hence it will not work if you have an object, room, sprite or anything else also named inventory.

How to start

First you must think out for your self what you want to have in the inventory. Which items should be in it. For the tutorial I am going to use the following items:

• lives
• sword
• large sword
• bow
• money

We now need to decide how many of each item you may have and how many you get at the game start

• lives (Max. 10, start with 3)
• sword (Max. 1 start with 1)
• large sword (Max. 1 start without it)
• bow (Max. 1 start without it)
• money (no max. so add a max of lets say: 999999. start with 10)

For the inventory I am going to use one room in which all items are displayed as sprites with a number in the corner showing how many of the item you got. For this inventory I am going to use an array to store all the data in. We must first decide what data this is. In our case we will store the following data:

• Name of the item
• Description of the item
• Sprite of the item
• Max amount of the item
• Current amount of the item

To store this data I am going to use a 2D array. Every item will receive a number. Within a 2D array you can now store for every item several things. All this information must be declared at the start of the game. This will go like:

Now you have declared the lives item in your inventory. Please note that All information is stored in a global variable so every object can read this data at any time. In my case I gave every piece of info it's own number. For instance the sprite has received number 2. Also the item lives has received number 0. If you now want to declare the sword item you change the 0 after global.inventory[ to a new number. You can call the sword for instance 1. Then declaring the sword will go:

Now you can use the same code for all the other items as well. You then get a long script in which every single specification is declared for every item. Place this script in the Game Start event. The last item in the list of declarations is the code to execute when the item is selected. You could execute a script at that time or change a variable. This tutorial does not descripe how to do this.

Drawing the inventory

You now need to draw the inventory system. In this tutorial I will explain how to do it in a special room for the inventory where everything is stored. To draw the inventory a special object is used that is only placed in that room. To make the inventory look nicely I will take the following sizes:

• all the sprites of the items are 100x100
• the room is 640x480

Since we have 5 items to display of each 100 width it requires a width of at least 100*5=500 pixels. Since the room is 640 width we can place the inventory completely on one line and draw in the rest of the screen the description of the items. If we have 5 items we have 6 empty spaces between the items. So we have 6 items of a width of (640-500)/6=23.3 pixels width

Now lets start with the drawing code. We need to draw the items one by one on the screen. We have five items. So first we need to have a loop that draws the sprites of all the objects (Of cource the drawing code goes in the drawing event):

This code will draw the five inventory images on the screen on the top line as the screenshot shows. However you only want the item to be displayed if it is in your posession. So you need to use (Of cource the drawing code goes in the drawing event):

If the item is not in your this code will draw a white square on the coordinates the sprite should be drawn at. An other thing what you would like to have is that the number of items you have of the object is displayed with the image. You however only want that with items of which you can have more then one. So use the code (Of cource the drawing code goes in the drawing event):

brush_style:=bs_solid;
brush_color:=c_white;
pen_size:=2;
pen_color:=c_black;
font_align:=fa_right;
font_size:=12;
font_color:=c_yellow;
for(i:=0; i<=4; i+=1)
  {
  if global.inventory[i,4]>0 then
    {
    draw_sprite( global.inventory[i,2] , -1 , 23.3 + i*(100+23.3) , 23.3);
    if global.inventory[i,3]>1 then
      {
      draw_text(23.3 + i*(100+23.3) + 97 , 100 , global.inventory[i,4]);
      }
    }
  else
    {
    draw_rectangle(23.3+i*(100+23.3),23.3,23.3+i*(100+23.3)+100,123.3);
    }
  }

draw_set_font(fnt_your_font);
draw_set_halign(fa_right);
for(i:=0; i<=4; i+=1)
  {
  if global.inventory[i,4]>0 then
    {
    draw_sprite( global.inventory[i,2] , -1,23.3 + i*(100+23.3) , 23.3);
    if global.inventory[i,3]>1 then
      {
      draw_set_color(c_yellow);
      draw_text(23.3 + i*(100+23.3) + 97 , 100 , global.inventory[i,4]);
      }
    }
  else
    {
    draw_set_color(c_black);
    draw_rectangle(23.3 + i*(100+23.3) , 23.3 , 23.3 + i*(100+23.3) + 100 , 123.3,false);
    }
  }

Now on the right button corner the number is being displayed of the number of items you have. Now comes the most difficult part of it all. You need to make it so that when you move your mouse over the image it displays the objects discription and clicking on it will execute the given code. For this you can use the following code (Since this code draws the meaning of the object you are hovering over you must put this code in the drawing event as well):

//if the mouse is going at the correct vertical height:
if mouse_y>23.3 and mouse_y<123.3 then
  {
  //check every item seperately
  for(i:=0; i<=4; i+=1)
    {
    //if the mouse is at the correct x coordinate
    if mouse_x > (23.3 + i*123.3) and mouse_x < (123.3 + i*123.3) then
      {
      //set the font and draw the description
      font_size:=14;
      font_align:=fa_center;
      font_color:=c_white;
      draw_text_ext(320 , 140 , global.inventory[i,1] , -1 , 630);
      //if you click on the item
      if mouse_button=mb_left then
        {
        execute_string( global.inventory[i,5]);
        }
      }
    }
  }

//if the mouse is going at the correct vertical height:
if mouse_y>23.3 and mouse_y<123.3 then
  {
  //check every item seperately
  for(i:=0; i<=4; i+=1)
    {
    //if the mouse is at the correct x coordinate
    if mouse_x > (23.3+i*123.3) and mouse_x < (123.3+i*123.3) then
      {
      draw_set_font(fnt_your_font);
      draw_set_halign(fa_center);
      draw_set_color(c_white);
      draw_text_ext(320 , 140 , global.inventory[i,1] , -1 , 630);
      //if you click on the item
      if mouse_button=mb_left then
        {
        execute_string( global.inventory[i,5]);
        }
      }
    }
  }

Now the only thing we still need to do is to create the possibility to get more items. For this you can use the script:

//argument0 is the item you want to add
//argument1 is the amount you want to add
global.inventory[argument0,4]+=argument1;
if global.inventory[argument0,4]>global.inventory[argument0,3] then
  {
  global.inventory[argument0,4]:=global.inventory[argument0,3];
  }

Simply add this script to your game as a script. Lets assume you named it add_item. Then when you want to add 10 gold coins and you gave the item gold the number 4 use:

add_item(4,10);

This will add 10 items of kind 4 to the inventory unless you have reached the maximum number of items.

Another example:

if you lose a live use the following code:

if global.inventory[0,4]>1 then
  {
  global.inventory[0,4]-=1;
  room_restart();
  }
else
  {
  highscore_show(score);
  game_restart();
  }

This code will take one live off your total and if it drops below 0 it will show the hiscore and restart the game. Else it will only restart the current room.

I have created a very basic GMD and GM6 to show how to use this code, get it here. If you want to use multiple lines of items simply paste the code twice and replace with every command the y coordinate with the new one.

This tutorial has been created by

Simon Donkers

gmmentor@simondonkers.com

www.simondonkers.com