How to Create a Drag n' Drop Inventory System in Multimedia Fusion 2 and Clickteam Fusion

Some games, such as the FATE series, allow the player to pick up various equipment and items. Such systems allow the player to interact with the in-game enviroment in a meaningful way, possibly resulting in an enhanced game experience This tutorial will guide you how to properly create such an inventory system and explain its various mechanics/components.

Quick Links:

• Rate This Tutorial
  

Downloads:

• MFA File
  

• Tutorial PDF

Practically, the easiest way to have a space-based inventory system would be as follows:

• The entire inventory will be composed of smaller inventory slots
  

• Move item when the item has been selected
  

• Check to see if any invalid moves occur (two items overlapping, an item partially off the screen, etc...)
  

• Restore X-Position/Y-Position of selected object if any invalid moves occur
  

These four statements compromise the fundamentals for this tutorial. Everything done will be relating to one of these four elements.

Before any kind of coding is added, some various properties of the active will need to be adjusted.

1. The "Inventory Spaces" should have two animations; an occupied and an unoccupied animation; each representing its respective state (occupied/unoccupied).

2. Enable/disable the "Fine Detection for each of the "Inventory Item" active objects and the "Inventory Space" object. Enabling/disabling will affect the how the final inventory system will function, but this option can be changed at any time without consequence.

3. If you wish to have the inventory system to be grid based, have each "Inventory Item" be a multiple of the grid size, and have the "Inventory Space", "Outside Inventory Space", and "Invalid Spot" objects be the size of the grid. So if the grid was 16 x 16 for example, the "Inventory Space", "Outside Inventory Space", and "Invalid Spot" should be 16 x 16.

4. Although not required, it is highly recommend that you place all the "Inventory Item" objects into one qualifier (such as the "Inventory Item" qualifier) and the "Inventory Space" objects into another qualifier (such as the "Inventory" qualifier).

5. Each "Inventory Item" object will use four alterable values; Width, Height, Origin X, and Origin Y in that order. The purpose of these alterable values will be explained as they are used further on.

The first aspect we want to implement is selection one inventory item and allowing movement of said item with the mouse.

For the former (selecting one inventory item) we add following event:

Flag #0 of the "Inventory Items" will be designated to determine if an item has been selected. Towards the end of all the events, another event is added that will turn Flag #0 off for all "Inventory Item" objects when the left mouse button is pressed.

When an "Inventory Item" is initially clicked, the X/Y position of the object will be stored into the Alterable C/D respectively. This way if an invalid placement occurs, the item return to its previous X/Y position easily.

Now that that objects are selectable, the next step is to make them draggable.

We know that when an items internal Flag #0 on, it has been selected by the player. Now we just need to act upon it. There are two type distinct types of dragging possible; free dragging and grid-based dragging.

Free dragging is as simple as setting the item's coordinates to those of the mouse, as shown below:

• Repeat while left-mouse key is pressed
  

• "Inventory Item Qualifier" Flag #0 is turned on
  

• Set X-Position of "Inventory Item Qualifier" to "Xmouse" (x-position of mouse)
  

• Set Y-Position of "Inventory Item Qualifier" to "Ymouse" (y-position of mouse)
  

Grid-based dragging gets slightly more complicated. The X-Position and Y-Position need to be forced to a multiple of the grid width and grid height respectively. Though it may seem complicated, we can easily force the X/Y coordinates into a grid by dividing the values by the grid width/height, and multiplying the dividend by the same value, as shown below.

Grid-based dragging:

• Repeat while left-mouse key is pressed
  

• "Inventory Item Qualifier" Flag #0 is turned on
  

• Set X-Position of "Inventory Item Qualifier" to "(Round(XMouse/Block Size Width)*Block Size Width)"
  

• Set Y-Position of "Inventory Item Qualifier" to "(Round(YMouse/Block Size Height)*Block Size Height)"

At this point, we can select inventory items and move them. Now we must restrict the possible placements of the inventory items.

An easy way to restrict the placement of the inventory items is to add an object that the "Inventory Items" cannot be placed on.
If an "Inventory Item" is overlapping said invalid item, restore the X-position and Y-position of the "Inventory Item" as shown below.

• "Inventory Item Qualifier" is overlapping "Invalid Spot"
  

• Set X-Position of "Inventory Item Qualifier" to Alterable Value C("Inventory Item Qualifier")
  

• Set Y-Position of "Inventory Item Qualifier" to Alterable Value D("Inventory Item Qualifier")
  

Remember that Alterable Value C and Alterable Value D are the "Safe X_Position" and "Safe Y_Position" for the Inventory Item Qualifier respectively. You can add any number of conditions which restrict the placement of the "Inventory Items" to the previous event without consequence.

At the point, the core of our engine is completed. There may be a few more mechanics that we may want to be include, such as "Inventory Item" rotation, discussed in the next tab.

Adding rotation for the inventory items is extremely similar to the movement engine we just implemented before. The steps are as follows;

• An inventory item is rotated
  
• Check for any invalid rotation placements for the rotated inventory item
  
• Reset rotation if any invalid rotations occur
  

To begin, let's use a flag to designate if an object has been recently rotated.

• Repeat while right mouse-key is pressed
  

• Mouse is over "Inventory Item Qualifier"
  

• Only one action when event loops
  

• Set angle of "Inventory Item Qualifier" to [Current angle of Inventory Item Qualifier] - 90
  

• Turn internal Flag #1 on for "Inventory Item Qualifier"
  

Now that we can rotate the objects, we need to perform a check to see if any invalid rotations occur. For this example, the conditions for the invalid rotation and the movement restrictions are the exact same.

For example;

• "Inventory Item Qualifier" is overlapping "Invalid Spot"
  

• Internal Flag #1 of "Inventory Item Qualifier" is on
  

• Set angle of "Inventory Qualifier" to [Current age of Inventory Item Qualifier] -90
  

• Turn internal Flag #1 off for "Inventory Item Qualifier"
  

The only difference between this event and its counterpart is the addition of the "Internal Flag #1 is on" condition.

Finally we need to have something to default to in case no rotation errors occur.

• "Inventory Item Qualifier" internal Flag #1 is off
  

• "Inventory Item Qualifier" is NOT overlapping another "Inventory Item Qualifier"
  

• Turn internal Flag #1 off for "Inventory Item Qualifier"