How to add images to inventory grid?

[DewyNebula]

Hello, I am creating an inventory system for my game and need some help. I followed this excellent guide https://www.youtube.com/watch?v=237jY-KtbVA on how to make one, editing it slightly to have a grid appearance. However, the code I followed used text to represent items instead of images. How would I do so with the code provided below? What I want to do is have an image button of a health potion, hovering it gives a tooltip of what it does, and clicking it will increase health and remove 1 health potion.

Code: Select all

# List of items and their names and descriptions
default inventory = Inventory([],0)
define door_key = InventoryItem("Door key", "Try using it in a door")
# Inventory grid amount (there are 4 columns, and 16 slots = a square grid container)
default slot_count = 16
default player_inventory = []
# Inventory python code
init python:
    # What the items can do (add and remove)
    class Inventory():
        def __init__(self, items, no_of_items):
            self.items = items
            self.no_of_items = no_of_items
        # Add the item - to add item to inventory use "$ inventory.add_item(item)"
        def add_item(self, item):
            self.items.append(item)
            self.no_of_items += 1
        # Remove the item - to remove item from inventory use "$ inventory.remove_item(item)"
        def remove_item(self, item):
            self.items.remove(items)
            self.no_of_items -= 1
    # How the items show (name and description)
    class InventoryItem():
        def __init__(self, name, description)
            self.name = name
            self.descrption = description
# Access MC inventory
screen mc_inventory_hud():
    # Open inventory Button
    imagebutton:
        align(0.0, 0.0)
        auto "hud-backpack-%s"
        action [ToggleScreen("mc_inventory_hud"), Show("mc_inventory")]
# Opened MC Inventory
screen mc_inventory():
    add "bg-inventory"
    modal True
    # Close inventory Button
    imagebutton:
        align(0.0, 0.0)
        auto "hud-backpack-done-%s"
        action [hide(), ToggleScreen("mc_inventory_hud")]
    # Inventory Grid
    vpgrid cols 4:
        spacing 10
        align(0.5, 0.5)
        for slot in range(slot_count):
            frame:
                maximum(150, 150)
                if slot < len(player_inventory)
                    for item in inventory.items:
                        text "[item.name] - [item.description]"
                else:
                    pass

[m_from_space]

What I want to do is have an image button of a health potion, hovering it gives a tooltip of what it does, and clicking it will increase health and remove 1 health potion.

How far have you come trying to create this for now? I mean what's the exact issue you have?

So here is how you create an imagebutton inside of a screen: https://www.renpy.org/doc/html/screens.html#imagebutton

That's the tooltip explanation: https://www.renpy.org/doc/html/screen_a ... l#tooltips

When clicking the button, you have to write down the action the button should execute. In your case I recommend using IncrementVariable() to increase health (not sure where this is stored inside your game) and Function() for the removal of the item, calling the .remove_item() class function.

[Milkymalk]

You have a typo in the class definition of InventoryItem(), you missed an "i" in "self.description", and also "items" instead of "item" in the remove_item() method of the Inventory() class.