Evidence List, textbutton help [SOLVED]

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Post Reply
Message
Author
Westeford
Regular
Posts: 57
Joined: Mon Jun 19, 2017 4:43 pm
Projects: Dangan Ren'Py
Location: United States
Contact:

Evidence List, textbutton help [SOLVED]

#1 Post by Westeford » Wed May 16, 2018 6:20 pm

I'm trying to make an inventory system like in Ace Attorney and Danganronpa.
Here are the steps involved.
1. The player brings up the evidence menu. The thumbnail (Top) and description (Bottom) boxes are empty.
2. Click on a piece of evidence on the list. (Currently only luggage and autopsy.)
3. That brings up an image of the selected evidence and a description describing it.

I've gotten through steps 1 and 2, but the third step is what I'm stuck on.
I'm not sure how to tell the buttons to place an image and description in the boxes.

Here's a screenshot.
screen.png
And here's my current working code.

Code: Select all

screen inventory():
    tag menu
    use game_menu(_("Inventory")):
        vpgrid:
            default selected_item = None
            cols 1
            spacing 5
            draggable True
            mousewheel True
            scrollbars "vertical"
            side_xalign 0.0
            for i in range(1, 2):
                frame:
                    if evidence >= 1:
                        textbutton "Luggage" xysize (300, 25)
                    else:
                        textbutton "" xysize (300, 25)
                frame:
                    if evidence >= 2:
                        textbutton "Autopsy" xysize (300, 25)
                    else:
                        textbutton "" xysize (300, 25)

        #Thumbnail
        frame:
            xalign 1.0
            yalign 0.0
            xysize (250, 250)
            vbox:
                null #The game crashes unless there is something here.
                
        #Description
        frame:
            xalign 1.0
            yalign 1.0
            xysize (600, 300)
            vbox:
                null
I know I'm doing something horribly wrong.
I want the boxes to be null until one of the items on the list is selected. I'm imagining something like: if luggage is selected, show luggage_pic and luggage_desc. else null
I think I would store the evidence images and descriptions somewhere. So for luggage I'll have:

Code: Select all

luggage_pic = "luggage.png" size (250, 250)
luggage_desc = text "It's a bag..."
Any suggestions will be very helpful. I could be missing something REALLY obvious and I just don't know it. (I tend to do that a lot lol.)
I prefer instructions over a link to a similar thread. Unless the thread is EXACTLY like what I'm trying to do.

Anyway, I'm done rambling. I appreciate the help. :)
Last edited by Westeford on Thu May 17, 2018 11:11 am, edited 1 time in total.

User avatar
Imperf3kt
Eileen-Class Veteran
Posts: 1483
Joined: Mon Dec 14, 2015 5:05 am
Location: Your monitor
Contact:

Re: Evidence List, textbutton help

#2 Post by Imperf3kt » Wed May 16, 2018 9:06 pm

The best thing I can think of (but cannot make) would be, you make a new screen with a viewport where the image goes, and one where the text goes.
Your buttons then open this screen with keyword arguments to tell it what items to show which is passed to the screen containing the item and secription.

This way adding new items is as easy as defining them in the screen.
I think.


I can't help you make this as I barely understand any of what I just wrote.
Image

Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

kivik
Miko-Class Veteran
Posts: 519
Joined: Fri Jun 24, 2016 5:58 pm
Contact:

Re: Evidence List, textbutton help

#3 Post by kivik » Thu May 17, 2018 4:04 am

First thing first, you need to use a data structure that allows you to go through you inventory dynamically and contextually.

What I mean by that is, your list of evidence will change over time, as you get new items and discard them. Well luckily there's a data structure for that - a list! https://www.tutorialspoint.com/python/python_lists.htm

So you can have evidence_list that stores your evidence, and you'd iterate through it using your for loop (except I don't understand what your for loop does), but instead of hard coding in the item names you just grab the next item from the for loop and create a textbutton:

Code: Select all

for evidence_item in evidence_list:
    frame:
        style_prefix "evidence_item"
        textbutton evidence_item.name

...

stylel evidence_item_textbutton is textbutton:
    xysize (300, 25)
I've taken the liberty of adding a style_prefix to your evidence item's frame as well so you can style it outside of your screen for ease


So we've got an evidence_list, we can loop through it, what next? Let's talk about the image and the description. You'll have noticed that I've used "evidence_item.name" already - that's because I'm making the items python objects: https://www.tutorialspoint.com/python/p ... bjects.htm

The long and short is, objects can have attributes and these attributes will store everything you need to know about an item:

Code: Select all

init python:
    class Item(object):
        def __init__(self, name, desc, pic):
            self.name = name
            self.desc = desc
            self.pic = pic

define luggage = Item("Luggage", "It's a bag", "luggage.png")
define knife = Item("Knife", "A butter knife, must be a slow death.", "knife.png")
default evidence_list = [luggage, knife]
The code above should create a couple of items, they're now in the evidence list. We're doing well - just need to display them on the screen when you click on an item!

Well your screen already has most of the component, particularly this line:

Code: Select all

default selected_item = None
This is how you declare a screen variable - which only exists within your screen. We just need to make our textbutton set our selected_item to your item, and then we can display the selected_item's information.

First we make our textbutton put the current item into selected_item:

Code: Select all

                    textbutton evidence_item.name:
                        action (SetScreenVariable(name='selected_item', value= evidence_item))
The SetScreenVariable() function put the current item in your loop - evidence_item - in your loop into the selected_item screen variable, so once the player clicks it, we can access it in the thumb and desc areas:

Code: Select all

        #Thumbnail
        frame:
            xalign 1.0
            yalign 0.0
            xysize (250, 250)
            vbox:
                if selected_item:
                    add selected_item.pic
                else:
                    pass # if selected_item is still None basically. null and pass can both prevent error, pass is the typical method to prevent empty blocks (vbox here) from throwing errors.

        #Description
        frame:
            xalign 1.0
            yalign 1.0
            xysize (600, 300)
            vbox:
                if selected_item:
                    text selected_item.desc
                else:
                    pass
Final note: you'll notice that I've just put an image name in the pic variable - that's because image declaration is a bit weird in Renpy (due to the image tags system). You should generally make your thumbs the exact right size (250x250) anyway so as to not having to resize them inside the game. If you need both a thumb and a full size pic in your game, you can always add a thumbnail attribute to your Items() object and put the image path of the thumbnail and pic in separately, and show selected_item.thumb instead of selected_item.pic.

You can get around this by actually defining the images first, then putting the image inside the Item() objects, and thus reuse the full size image for thumbnail by resizing it, if that's what you prefer.

Westeford
Regular
Posts: 57
Joined: Mon Jun 19, 2017 4:43 pm
Projects: Dangan Ren'Py
Location: United States
Contact:

Re: Evidence List, textbutton help

#4 Post by Westeford » Thu May 17, 2018 11:11 am

Thank you so much! It's working like a charm.

There is one thing I'm confused about.
kivik wrote:
Thu May 17, 2018 4:04 am

Code: Select all

stylel evidence_item_textbutton is textbutton:
    xysize (300, 25)
I've taken the liberty of adding a style_prefix to your evidence item's frame as well so you can style it outside of your screen for ease
I'm not completely sure where I'm supposed to put this part to the code.

The code is working exactly how I want it to. I can't thank you enough.

Westeford
Regular
Posts: 57
Joined: Mon Jun 19, 2017 4:43 pm
Projects: Dangan Ren'Py
Location: United States
Contact:

Full Inventory Code

#5 Post by Westeford » Thu May 17, 2018 11:23 am

Here's the final code for the inventory. Special thanks to kivik for helping me out.

Code: Select all

init python:
    class Item(object):
        def __init__(self, name, desc, pic):
            self.name = name
            self.desc = desc
            self.pic = pic

define luggage = Item("Luggage", "It's a bag! You put stuff in it. It ain't rocket science dude.", "luggage")
define knife = Item("Knife", "A butter knife, must be a slow death.", "knife")
default evidence_list = []

screen inventory():
    tag menu
    use game_menu(_("Inventory")):
        vpgrid:
            default selected_item = None
            cols 1
            spacing 5
            draggable True
            mousewheel True
            scrollbars "vertical"
            side_xalign 0.0
            for evidence_item in evidence_list:
                frame:
                    style_prefix "evidence_item"
                    textbutton evidence_item.name xysize (300, 25):
                        action (SetScreenVariable(name='selected_item', value=evidence_item))

        #Thumbnail
        frame:
            xalign 1.0
            yalign 0.0
            xysize (250, 250)
            vbox:
                if selected_item:
                    add selected_item.pic
                else:
                    pass
                
        #Description
        frame:
            xalign 1.0
            yalign 1.0
            xysize (600, 300)
            vbox:
                if selected_item:
                    text selected_item.desc
                else:
                    pass
Then when I add an item to the list add this.

Code: Select all

$ evidence_list += [luggage]
This is what it looks like after adding the luggage, and clicking on it.
screen.png

kivik
Miko-Class Veteran
Posts: 519
Joined: Fri Jun 24, 2016 5:58 pm
Contact:

Re: Evidence List, textbutton help

#6 Post by kivik » Thu May 17, 2018 11:25 am

Westeford wrote:
Thu May 17, 2018 11:11 am
Thank you so much! It's working like a charm.

There is one thing I'm confused about.
kivik wrote:
Thu May 17, 2018 4:04 am

Code: Select all

stylel evidence_item_textbutton is textbutton:
    xysize (300, 25)
I've taken the liberty of adding a style_prefix to your evidence item's frame as well so you can style it outside of your screen for ease
I'm not completely sure where I'm supposed to put this part to the code.

The code is working exactly how I want it to. I can't thank you enough.
Oops I left a typo in there: it's style not stylel.

You don't have to use it, but sometimes it's a good idea especially if you have lots of style properties being applied to the same thing. You can put it outside a label block anywhere in your code. You can read more about styles here: https://www.renpy.org/doc/html/style.html

Post Reply

Who is online

Users browsing this forum: No registered users