Inventory Help

[CharacterGreen]

I need help creating an inventory for my visual novel, and the other links I've viewed before asking are too complicated for me to use or it doesn't work at all. I need a way for the player to click a button that'll open up a screen showing a 3x3 grid. As the game progresses, the items will be added into the inventory and taken out if needed. The items in question are more like key items and not consumables, and I want to be able to hover over the image of the item and a description of the item will be shown somewhere near the bottom of the screen.

Can someone show me the code and walk me through what's going on in the code so that I'll be able to comprehend and learn more about the coding language?

[Alex]

Try something like

Code: Select all

screen onscreeen_button():
    textbutton "Inv" text_size 50 align (0.95,0.05) action If(not renpy.get_screen("inventory_scr"), Show("inventory_scr"), Hide("inventory_scr"))
    
screen inventory_scr():
    
    default description = None
    
    vbox:
        pos (0.05, 0.05) anchor (0.0, 0.0)
        
        #### inventory slots
        frame:            
            side "c r":
                # size of the inventory visible area
                area (0, 0, inv_item_width*inv_cols+inv_spacing*(inv_cols-1), inv_item_height*inv_rows+inv_spacing*(inv_rows-1))

                viewport id "vp":
                    draggable True


                    grid inv_cols len(inventory)/inv_cols+1 spacing inv_spacing:
                        for item in inventory:
                            button:
                                xysize(inv_item_width, inv_item_height)
                                
                                #### Choose one option and delete the other:
                                #
                                # 1) show just text
                                text item["name"] align (0.5, 0.5)
                                
                                # 2) show an image
                                #add item["img"] align (0.5, 0.5)
                                
                                action NullAction()
                                
                                hovered SetScreenVariable("description",item["dscrptn"])
                                unhovered SetScreenVariable("description",None)
                        
                        # empty slots to fill the grid
                        for i in range ((len(inventory)/inv_cols+1)*inv_cols-len(inventory)):
                            null width inv_item_width height inv_item_height
                            
                vbar value YScrollValue("vp")
                
        #### description
        if description:
            text "{i}[description]{/i}" size 25 xalign 0.5
        else:
            null

# something about our inventory...
define inv_cols = 3
define inv_rows = 3
define inv_item_width = 150
define inv_item_height = 45
define inv_spacing = 5

# some images
image apple = "apple.png"
image orange = "orange.png"
image cake = "cake.png"

# we have nothing by default 
default inventory = []

# items to obtain
define apple = {"name":"an apple", "img":"apple", "dscrptn":"~green apple~"}
define orange = {"name":"an orange", "img":"orange", "dscrptn":"~juicy orange~"}
define cake = {"name":"*an apple cake*", "img":"cake", "dscrptn":"~~~My Precious~~~"}


label start:

    scene black

    show screen onscreeen_button

    "I woke up early in the morning. One thought doesn't let me calm - I need... {w=5.0}an apple cake?!"


    menu my_menu:
        "What should I do now?"
        "Send little robot to buy an orange":
            "Move on, little $#!, bring be an orange!"
            $ inventory.append(orange)
            "Ah, give it to me..."
            jump my_menu

        "Send little robot to buy an apple":
            "I need an apple, go!"
            $ inventory.append(apple)
            "Ah, here it is..."
            jump my_menu
            
        "Make an apple cake...O_o" if inventory.count(apple) >= 4:
            $ inventory.remove(apple)
            $ inventory.remove(apple)
            $ inventory.remove(apple)
            $ inventory.remove(apple)
            $ inventory.append(cake)
            "Ye-e-e-s, ye-e-e-s..."
            "*omnomnom*..."

    "Happy end  ^-^"

    return

Some useful links:
viewtopic.php?f=8&t=35844&hilit=inventory#p394361

https://www.renpy.org/doc/html/screens.html

https://www.renpy.org/doc/html/screen_actions.html

https://www.renpy.org/doc/html/style_properties.html

https://www.renpy.org/doc/html/text.html

https://www.renpy.org/doc/html/screen_p ... get_screen

https://www.renpy.org/doc/html/genindex.html

https://docs.python.org/2.7/tutorial/da ... structures

[CharacterGreen]

This works perfectly! But there is still one issue; none of the images are appearing and there are instead words. I even implemented some of my own images and changed the names accordingly but there's still nothing changing.

[Alex]

Change this part

Code: Select all

                                #### Choose one option and delete the other:
                                #
                                # 1) show just text
                                text item["name"] align (0.5, 0.5)
                                
                                # 2) show an image
                                #add item["img"] align (0.5, 0.5)

to

Code: Select all

                                #### Choose one option and delete the other:
                                #
                                add item["img"] align (0.5, 0.5)

[CharacterGreen]

It works perfectly! Thanks so much for your help, it really did alot! (If you could answer one last time, I'll be even more grateful! Is it possible for me to not use that box that the inventory's in, and just insert my own image as a background for the inventory?)

[Alex]

Yes, you can set background property for frame, containing slots, and for each slot (that is button). This might be pre-made image (having relevant size) or a Frame("img.png", 1, 1) that will shrink/stretch to the size of the frame/button. Try

Code: Select all

    vbox:
        pos (0.05, 0.05) anchor (0.0, 0.0)
        
        #### inventory slots
        frame:
            background "my_bg_img.png" #file name including path from game folder (if needed)
            
            rest of the code

Also, you can change the description part somehow to have some background.

https://www.renpy.org/doc/html/displayables.html#Frame

https://www.renpy.org/doc/html/style_pr ... properties

[CharacterGreen]

I feel like I'm hassling you with all of these questions but every time I use one of my backgrounds, none of the items appear. I even created a background that was just transparent to see if the item would appear behind the background but it still doesn't appear. If I were to go back to the original code, the original frame would pop up and I'd be able to see my items in their respective slots. Can you help me with this issue?

[trooper6]

You probably have to name it: “images/my_image.png”

[CharacterGreen]

I still have the same problem, the items still won't show whenever I use my own background but I were to take the background off and use the original code that Alex has given me, then it would work and I'd see the item in its spot.

[trooper6]

where did you put the image files? I mean in which folder?

[CharacterGreen]

I put it into the images folders, inside of a subfolder named items

[trooper6]

You need to have the full image path in your name. So the full path of what is under game. So if inside game there is a folder named "items" and inside "items" there is a folder named "bgs" and inside "bgs" you image exists, then you have to name it "items/bgs/my_image.png"

Full file path.

[CharacterGreen]

It still doesn't work, and I made sure that all of my images were in the right folders and I used the right paths.

Code: Select all

# The script of the game goes in this file.

#Inventory

screen onscreeen_button():
    imagebutton idle "inventory" hover "inventory_hovered" xpos 1080 ypos 66 action If(not renpy.get_screen("inventory_scr"), Show("inventory_scr"), Hide("inventory_scr"))
    
screen inventory_scr():
    modal True
    imagebutton idle "inventory" hover "inventory_hovered" xpos 1080 ypos 66 action If(not renpy.get_screen("inventory_scr"), Show("inventory_scr"), Hide("inventory_scr"))
    default description = None
    
    vbox:
        pos (363, 0.05) anchor (0.0, 0.0)
        
        #### inventory slots
        frame:
            background "images/inventory_screen.png"  #file name including path from game folder (if needed)
                # size of the inventory visible area
                area (0, 0, inv_item_width*inv_cols+inv_spacing*(inv_cols-1), inv_item_height*inv_rows+inv_spacing*(inv_rows-1))

                viewport id "vp":
                    draggable True


                    grid inv_cols len(inventory)/inv_cols+1 spacing inv_spacing:
                        for item in inventory:
                            button:
                                xysize(inv_item_width, inv_item_height)
                                
                                #### Choose one option and delete the other:
                                
                                
                                # 2) show an image
                                add item["img"] align (0.5, 0.5)
                                
                                action NullAction()
                                
                                hovered SetScreenVariable("description",item["dscrptn"])
                                unhovered SetScreenVariable("description",None)
                        
                        # empty slots to fill the grid
                        for i in range ((len(inventory)/inv_cols+1)*inv_cols-len(inventory)):
                            null width inv_item_width height inv_item_height
                            
                vbar value YScrollValue("vp")
                
        #### description
        if description:
            text "{i}[description]{/i}" size 25 xalign 0.5
        else:
            null

# something about our inventory...
define inv_cols = 3
define inv_rows = 3
define inv_item_width = 143
define inv_item_height = 143
define inv_spacing = 36

# some images
image candy = "images/items/candybar.png"

# we have nothing by default 
default inventory = []

# items to obtain
define candy = {"name":"Candy", "img":"candybar", "dscrptn":"Sally gave you this as \n recognition for being new!"}

[trooper6]

Didn't you say that the images folder was in a subfolder inside of the game folder? All folders under game have to be in the name.

What exactly is your folder structure? Starting from game on top down to the image you are wanting.

[Alex]

The next thing to check is the size of "inventory_screen.png" - is it big enough for inventory frame? If not - try to stretch it, like

Code: Select all

background Frame("images/inventory_screen.png", 1, 1)

https://www.renpy.org/doc/html/displayables.html#Frame

Edit:

Code: Select all

# some images
image candy = "images/items/candybar.png"
# items to obtain
define candy = {"name":"Candy", "img":"candybar", "dscrptn":"Sally gave you this as \n recognition for being new!"}

you've declared image as "candy", but gave "img"-key value "candybar"?!
Also try not to use the same names for different stuff (image "candy" and variable "candy" that represents item for inventory).