In this tutorial: disabling buttons and tinting their icons (sprites) a darker color to indicate that they cannot be interacted with by the player.
What we’re making
Here’s my game’s item vault. It displays a grid of buttons, each one representing an inventory “slot” and each button can be used to display an item the player actually owns. There’s an icon and a slot label to help the player understand what each item is (ie: a sword, a robe, a pair of boots, etc.)
This is great for viewing all the items, but sometimes the player wants to fill a specific slot on their character. Here’s what the character page looks like:
When the player goes to select, for example, a “jewelry” item for their character to wear, I want to make it easy to spot which items in the inventory vault are actually jewelry.
To do this, I will write script that figures out which items are not jewelry, disable their buttons, and tint their icons a darker color. The end result should look something like this:
(I could have just hidden all the non-jewelry items, but I think having items “move around” on the player would be confusing. Tinting the non-jewelry items seemed, to me, anyway, like the better user experience.)
Setting it up in script
The initial creation of the inventory button instances takes place in my game’s “vault” scene. Below is a simplified version of my game’s code that (hopefully) demonstrates how the grid of buttons is created and populated with icons and labels. (PS: I have a separate tutorial specific to making a grid of buttons just like this.)
Thematically, the vault represents a shared inventory across all of the player’s characters in my RPG-style game. The shared inventory is represented as an array named global.guildItems.
Each inventory “slot” is represented as an itemButton instance (itemButton is a scene I created, we’ll look at it more closely in a bit).
The first method, _position_vault_buttons(), creates the blank buttons and places them in a grid, the second method, _draw_vault_items(), “populates” them with actual items from the inventory.
This way, we always get X number of buttons, where X is the total capacity of the player’s inventory, and only some of them are used to “hold” the items the player actually owns.
(A lengthier explanation of how I know which item slot to filter by is outside the scope of this tutorial, but it’s done with a global flag set by the heroPage and you can see evidence of it in this code sample below about 6 lines from the end. It’s the one that goes “if (global.guildItems[i].slot != global.browsingForSlot):”)
#vault.gd
func _ready():
#display inventory size and capacity
_position_vault_buttons()
func _position_vault_buttons():
#this method handles the STRUCTURE of the buttons
#it places the empty buttons in the grid
#use _draw_vault_items() to put icons and data into buttons
for i in range(global.vaultSpace):
var itemButton = preload("res://menus/itemButton.tscn").instance()
itemButton._set_vault_index(i)
itemButton.connect("updateSourceButtonArt", self, "_draw_vault_items")
$centerContainer/grid.add_child(itemButton)
buttonArray.append(itemButton)
_draw_vault_items()
func _draw_vault_items():
#now we pair each physical button with data from global.guildItems array
#grab each button from buttonArray and "decorate" it
var currentButton = null
for i in range(buttonArray.size()):
currentButton = buttonArray[i]
if (global.guildItems[i]):
currentButton._set_label(global.guildItems[i].slot)
currentButton._set_icon(global.guildItems[i].icon)
currentButton._set_data(global.guildItems[i])
if (global.currentMenu == "vaultViaHeroPage"):
if (global.guildItems[i].slot != global.browsingForSlot):
currentButton._set_disabled() #script I wrote in itemButton.gd
else:
currentButton._clear_label()
currentButton._clear_icon()
currentButton._clear_data()
About 4 lines up from the bottom is this line of code:
currentButton._set_disabled()
That _set_disabled() method is a method I wrote on the itemButton’s script, it’s not something built into Godot.
Let’s take a look at the itemButton scene and see how it works.
itemButton scene and script
An itemButton, in my game, is made up of a Button node along with a couple labels and a sprite.
Here is the scene’s structure:
Here is the script that disables the button and dims the sprite over the button:
func _set_disabled(): $Button.disabled = true $Button.modulate = Color(0.5,0.5,0.5,1) $Button/sprite_itemIcon.modulate = Color(0.25,0.25,0.25)
The tricky part here, for me, was figuring out how modulate works. The Godot docs are thin on examples and it took some Googling just to figure out that the key word here was “modulate”, not “tint” or “color” or other terms I was initially guessing.
Some things to note about “modulate”:
- Modulate is a property, so you can set it using “dot” notation.
- It uses Color, which is built into Godot.
- set_modulate and get_modulate are the old way of working with modulate (if you see reference to them the guide you’re reading/watching was probably made prior to Godot 3)
There’s a bunch of ways to work with Color, my example is just one of them. Mine is Color(R, G, B, alpha). Here are some more examples of working with Color in Godot.
This method could be expanded to a near-infinite number of uses, my example is just one tiny, specific use case.
References and more reading:
- Godot docs: CanvasModulate
- Godot docs: Color (this is more useful than the disappointing Modulate documentation above)
- Godot Q&A: How to use modulate in script