Inventory Item Tooltips
What, this item gives +20% bonus to health?
In this tutorial, I want to show you how to modify the Game Creator inventory to add a tooltip with certain information that gets shown when you hover over an item.
- Install Unity
- Install IDE (I use Visual Studio 2019)
- Import Game Creator
- Import and enable the Inventory module
A tooltip is a window that shows additional information on a GUI element you hover over. The information may contain a description, a reference to something else, pictures and more. The tooltip I made for this tutorial looks like this:
It accesses the icon of the item, the description and a custom entry I added with the help of a previous tutorial (linked in Prerequisites and below). But let's start from the beginning.
Depending on which informations you want to have in your tooltip, you need to add custom entries to the Inventory items. In my case, I want the icon and description of the item as well as a custom string entry with the name My Bonus 1.
You can add custom entries too when following the guide Inventory Custom Entries. They can be of any type you want (int, string, a stat value etc.).
You need a tooltip gameobject in your preferred item prefab, like ItemRPG or ItemAdventure (even though I prefer using the ItemRPG because it has much more space to be used for the tooltip). I have already prepared a basic tooltip prefab for you to just drag below the root gameobject of your item prefab.
Tooltip.unitypackage
2KB
Binary
Download the package and import it into your project. Drag it into your item prefab like this:
Add the image/text etc. elements you want to display below GameObject, and change them to your needs (font color, font size, background sprites etc.). The prefab is fully customizable. Make sure the tooltip gameobject is deactivated before entering the play mode so it doesn't show when you open the inventory.
Now we need to add some variables and functionality to the ItemUI script, which you can find under Assets --> Plugins --> GameCreator --> Inventory --> Mono --> UI --> Inventory --> ItemUI.cs.
In the PROPERTIES section, below
public Text textDescription , add the following lines of code: [Space]
public Image tooltipImage;
public Text tooltipDescription;
public Text tooltipMyBonus1;
Add a variable for each element you want to display in the tooltip.
Now we need add some functionality to assign values to these variables when opening the inventory. In the
UpdateUI() method in the PUBLIC METHODS section, below if (this.textDescription != null) this.textDescription.text = item.itemDescription.GetText(); add this code: if (this.tooltipImage != null) this.tooltipImage.sprite = item.sprite;
if (this.tooltipDescription != null) this.tooltipDescription.text = item.itemDescription.GetText();
if (this.tooltipMyBonus1 != null) this.tooltipMyBonus1.text = item.myBonus1;
If the variables we added before are not null (empty), the image, description and the myBonus1 property of the item are being assigned to the variables. If you want to assign your own values, you obviously need to choose your own properties.
In your item prefab, assign the image, description and other gameobjects to the variables we just added in the script:
The last thing we need to do is enable the tooltip gameobject when you hover over the item and disable it when you leave the item area. Do this in the hovering event fields of the same script/gameobject as in the previous image:
Run the game and see how the tooltips appear and disappear while showing the information you want.