Displaying image with a loop for in a scrolling window

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.
Message
Author
sculpteur
Veteran
Posts: 312
Joined: Fri Nov 17, 2017 6:40 pm
Completed: Apocalypse Lovers
Projects: Apocalypse Lovers
Organization: Awake_Production
Location: France
Discord: https://discord.gg/apocalypse-lovers
Contact:

Displaying image with a loop for in a scrolling window

#1 Post by sculpteur »

I am displaying an achievement window but I have serveral things I am not able to make.


Image


This is my code :

Code: Select all

transform testTransform:
    on show:
        xpos 540
        ypos 260
        alpha 0.0
        linear 1.0 alpha 1.0
    on hide:
        alpha 1.0
        linear 1.0 alpha 0.0

screen innerTestScreen(viewId):
    side "c r":
        viewport id viewId:
            has vbox
            for i in xrange(1,5):
                text "    "
                text "    ACHIEVEMENT NUMBER {0}".format(i):
                    font "GoodDog.otf"
                    color "#66cc00"
                #text "hi {0}"
                #image "gui/AwardLock.png" action Show("character1")
                #image "AwardLock.png"
                imagebutton:
                    idle "gui/AwardLock.png"
                    hover "gui/AwardLock.png"
                    action [Play ("sound", "0 - sound_hoveritem.mp3"), Show("test{0}")]
        vbar:
            value YScrollValue(viewId)

screen achievement:
    frame:
        area (250, 0, 850, 450)
        at testTransform
        use innerTestScreen("viewportB")

screen test1:
    add "gui/jess_carac_window.png" xpos 620 ypos 250
screen test2:
    add "gui/jess_carac_window.png" xpos 620 ypos 250
screen test3:
    add "gui/jess_carac_window.png" xpos 620 ypos 250
screen test4:
    add "gui/jess_carac_window.png" xpos 620 ypos 250
screen test5:
    add "gui/jess_carac_window.png" xpos 620 ypos 250
Image

“He asked me to calm down, close my eyes and be quiet. He explained to me that if I was afraid, the shadow that ran barefoot in the street would feel it. I got scared seeing Jumanji on TV, so let me tell you, we didn't stay hidden for long and had to start running again.”
Jessica's Diary.

sculpteur
Veteran
Posts: 312
Joined: Fri Nov 17, 2017 6:40 pm
Completed: Apocalypse Lovers
Projects: Apocalypse Lovers
Organization: Awake_Production
Location: France
Discord: https://discord.gg/apocalypse-lovers
Contact:

Re: Displaying image with a loop for in a scrolling window

#2 Post by sculpteur »

1) So like you see, in the loop, I generate multiples imagebutton. But I want each clickable imagebutton to open differend picture so I don't know how to proceed. Like you see I tried this Show("test{0}") in the action section, but it's not working.
Image

“He asked me to calm down, close my eyes and be quiet. He explained to me that if I was afraid, the shadow that ran barefoot in the street would feel it. I got scared seeing Jumanji on TV, so let me tell you, we didn't stay hidden for long and had to start running again.”
Jessica's Diary.

sculpteur
Veteran
Posts: 312
Joined: Fri Nov 17, 2017 6:40 pm
Completed: Apocalypse Lovers
Projects: Apocalypse Lovers
Organization: Awake_Production
Location: France
Discord: https://discord.gg/apocalypse-lovers
Contact:

Re: Displaying image with a loop for in a scrolling window

#3 Post by sculpteur »

2) I want a condition for each imagebutton achievement. Because they are loked at the begining, and will display when you unlock them. But I have no idea where and how I should put the condition.
Image

“He asked me to calm down, close my eyes and be quiet. He explained to me that if I was afraid, the shadow that ran barefoot in the street would feel it. I got scared seeing Jumanji on TV, so let me tell you, we didn't stay hidden for long and had to start running again.”
Jessica's Diary.

sculpteur
Veteran
Posts: 312
Joined: Fri Nov 17, 2017 6:40 pm
Completed: Apocalypse Lovers
Projects: Apocalypse Lovers
Organization: Awake_Production
Location: France
Discord: https://discord.gg/apocalypse-lovers
Contact:

Re: Displaying image with a loop for in a scrolling window

#4 Post by sculpteur »

3) I want to modify the basic frame I use to used a custom one I have created with better border, but I am not familiar with vbox: and frame: neither. So where I should put my background image for the window ?
Image

“He asked me to calm down, close my eyes and be quiet. He explained to me that if I was afraid, the shadow that ran barefoot in the street would feel it. I got scared seeing Jumanji on TV, so let me tell you, we didn't stay hidden for long and had to start running again.”
Jessica's Diary.

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

Re: Displaying image with a loop for in a scrolling window

#5 Post by kivik »

Interesting way to boost your post count :P

1) So like you see, in the loop, I generate multiples imagebutton. But I want each clickable imagebutton to open differend picture so I don't know how to proceed. Like you see I tried this Show("test{0}") in the action section, but it's not working.

That's because you haven't supplied i to it:

Code: Select all

"test{0}".format(i)
2) I want a condition for each imagebutton achievement. Because they are loked at the begining, and will display when you unlock them. But I have no idea where and how I should put the condition.

You'll need to store the achievement unlocks in a dict - if you want the achievements to be unlocked across play sessions, then use a persistent dict:

Code: Select all

define persistent.achievements = {}
Put the archievements inside the dict so you can reference them to check if they're locked or unlocked.

3) I want to modify the basic frame I use to used a custom one I have created with better border, but I am not familiar with vbox: and frame: neither. So where I should put my background image for the window ?

You put the background in frame - vbox doesn't take "Window Style Properties" which includes background:
Frame
Background Style Property

If you want to make a background with a different border, then you probably want to use Frame() for the background.

So an example would be:

Code: Select all

frame:
    background Frame("your_image.png",15,15,15,15)

sculpteur
Veteran
Posts: 312
Joined: Fri Nov 17, 2017 6:40 pm
Completed: Apocalypse Lovers
Projects: Apocalypse Lovers
Organization: Awake_Production
Location: France
Discord: https://discord.gg/apocalypse-lovers
Contact:

Re: Displaying image with a loop for in a scrolling window

#6 Post by sculpteur »

Thank you really much kivik !
Interesting way to boost your post count :P
My bad, it's just my problems were poping in my head one after an other :lol:


So thanks to you I easily solved the first matter and the third one.

But for the " 2) ", it's an other story.

You explain well but I think I don't understand what you said because I have a lack of knowledge in python.

I have no idea about what a " dict " is. Is it some kind of list ?

I had try to understand it on the internet and I find (maybe) that's mean Dictionaries.
Like in here : https://docs.python.org/2/library/stdty ... pesmapping

But I am a noob in python like I said, so if had a little spare time to give me a tips or two on the way I should implement it and use it inside my code it will be great !

Thanks again dude.
Image

“He asked me to calm down, close my eyes and be quiet. He explained to me that if I was afraid, the shadow that ran barefoot in the street would feel it. I got scared seeing Jumanji on TV, so let me tell you, we didn't stay hidden for long and had to start running again.”
Jessica's Diary.

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

Re: Displaying image with a loop for in a scrolling window

#7 Post by kivik »

Yeah dicts are short for dictionarys - basically they're indexed lists - so you can reference an entry directly:

Code: Select all

achievement = {"game_over": "Death come for us all achievement", "first_boss": "Killed the first boss"}
achievement["new_game"] = "New game started achievement"
achievement["first_fight"] = "First fight achievement"
You'll probably want a more advanced dictionary than that, maybe create an achievement class object that stores useful information, like name, points, thumbnail, etc.

Then with the persistent dict, you only have to store True or False:

Code: Select all

label start:
    persistent.achievements["new_game"] = True
Hope that makes sense!

sculpteur
Veteran
Posts: 312
Joined: Fri Nov 17, 2017 6:40 pm
Completed: Apocalypse Lovers
Projects: Apocalypse Lovers
Organization: Awake_Production
Location: France
Discord: https://discord.gg/apocalypse-lovers
Contact:

Re: Displaying image with a loop for in a scrolling window

#8 Post by sculpteur »

Yeah I think I got the idea. But still, I am not familliar with formatting (the syntax).

So it's still a bit blur in my head and I don't know how to check the True or False condition on this dict.

I think my main difficulties will be in this part :

Code: Select all

            for i in xrange(1,5):
                text "    "
                text "    ACHIEVEMENT NUMBER {0}".format(i):
                    font "GoodDog.otf"
                    color "#66cc00"
How do I inser the dict in the code. Is it somthing like : for i in xrange.dict(achievement) blablabla ?

Where should I put the True or False condition ?
You'll probably want a more advanced dictionary than that, maybe create an achievement class object that stores useful information, like name, points, thumbnail, etc.
No. In fact I want something really simple. My thumbnail achievement are imagebutton, so each of them will open a different screen. I just want them to be lock or unlock. So my achievement screen will only show unlocked achievement. That's why my achievement have to be True or False. Like this :
achievement["first_fight"] is false = locked (don't display it in the achievement window)
achievement["first_fight"] is true = unlock (it will be displayed in the achievement window)

But like you see I am not familiar with the syntax.
Image

“He asked me to calm down, close my eyes and be quiet. He explained to me that if I was afraid, the shadow that ran barefoot in the street would feel it. I got scared seeing Jumanji on TV, so let me tell you, we didn't stay hidden for long and had to start running again.”
Jessica's Diary.

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

Re: Displaying image with a loop for in a scrolling window

#9 Post by kivik »

Have a look up python loop through dict and it should give you an idea of how to do it. I'm pushing you to look it up yourself because it's the best way for you to learn how things work - instead of just recycling code snippet with no real understanding of what they're doing.

I'll give you more pointers once you've had a go and see what you come back with though :) I typically have a blank project just for testing code that I don't understanding, so that may be helpful for you to just play around with looping through a dict.
No. In fact I want something really simple. My thumbnail achievement are imagebutton, so each of them will open a different screen.
But that's exactly the reason you want to keep more information - i.e. the imagebutton's filename and location. If you just have a dict with true or false values, then you have to hardcode in what each achieve is called, what thumbnail they use, what description they may have etc.

My suggestion is about having two dictionaries: one to check whether an achievement is unlocked or not (persistent), another as a lookup for the information about the individual achievements itself.

Imagine one dictionary is the textbook with reference to different birds, their name, colour, description, weight etc. that's your achievement information dictionary; the other dictionary is a checklist of which birds you've spotted, and it's just a simple sheet of paper on your clipboard, with just the name of the birds, this is your unlock dictionary.

Hope that makes more sense!

Keep us posted on progress. I'm sorry I'm pushing you to self learn, but it'll really pay off when you'll end up with knowledge of how to do a lot of things, and even if you don't know how to do something, we may be able to say "Oh use that thing" and since you've understood what "that thing" is by learning it properly, it'll make sense straight the way :)

sculpteur
Veteran
Posts: 312
Joined: Fri Nov 17, 2017 6:40 pm
Completed: Apocalypse Lovers
Projects: Apocalypse Lovers
Organization: Awake_Production
Location: France
Discord: https://discord.gg/apocalypse-lovers
Contact:

Re: Displaying image with a loop for in a scrolling window

#10 Post by sculpteur »

I know.
You are right.

What you say is perfectly understandable.

But I have already tried to learn alone by the past without much success.
I have even spend some decent money for individual classes in Python, a teacher was coming in my home and explain me what a Python class is, object, list, mother class, etc. I tried to understood the basic of Python langage. I learn some useful stuff but I lost my motivation after burning my eyes on codes too hard for me or on the way to incorporate Python codes in renpy.


About this topic and my current matter, I tried again. In here for exemple :
https://developmentality.wordpress.com/ ... in-python/
https://www.mkyong.com/python/python-ho ... ictionary/
https://stackoverflow.com/questions/329 ... -for-loops
Still without much success...

And you said something which is really interesting about the way I work :
instead of just recycling code snippet with no real understanding of what they're doing.
But unfortunatly this is the only way I know to learn and gain coding knowledge.
Because I am not a scholar or a scientist, I am an artist.
So my way of progressing is not to learn something from the begining to the end in the right order, I progress through experimentation of existing working piece of code.
Because I don't enjoy so much writting complexe coding just for the pleasure of coding.
I am coding for an artistic purpose.

I use code snippet and recycle them for a dedicated purpose. I work a lot on my little code snippet to adapt it to my project. Once it's working, I am able to reproduce it by myself and I gain a little bit more knowledge.

It's like when you learn a new spoken langage like Italian for exemple.
Some people will hardwork studies italian grammar books and gain a lot of knowledge and vocabulary in italian throught book lesson and intellectual learning.

But my way of being is : as soon as I have some elementary basis, I will try to speak with a real Italian in order to progress and enjoy speaking at the same time. Even if iam just begining and don't have much vocabulary. But even if the conversation will be ridiculous and akward, I will learn from the italian and gain experience in italian langage.





So to come back to the matter we are talking about :
I understand how dict works, but I have not tested it yet because I don't use Python compilator alone, I use directly Renpy.
So one of my main difficulties is to integrate Python portion of code inside a Renpy code that I don't understand.
When I understand my Renpy code, it's easy to integrate Python in it. But when I don't even understand the portion of Renpy code I am using this is really frustrating lol

I tried some stuff without much result.

And I dont find any tutorial online who deal with Python dict and Renpy at the same time.
So, once again, I had to become a CODE SCAVENGER.

I dig around in order to find an existing code I could stole and recycle and I found this :

Code: Select all

init python:
    cust_masterD = {"CGC1":"A Close Shave", "CGC2":"Bloody Angelo", "CGC3":"The Depression",
        "CGC4":"Unrepentant Grifter", "CGC5":"Redemption", "CGC6":"Last Call"}

    grey = "#666666"
    yellow = "#FFFFCC"

image end_title = Text("Major Ending Variations Achieved", color="#FFFFCC", size=44)
    
screen endings():
   
    # This ensures that any other menu screen is replaced.
    tag menu
    
    # Include the navigation menu.    
    use navigation

    vbox:
        spacing 25
        ymaximum 500
        yalign .02
        xalign .5
        
        add "end_title":
            xalign .5
            yalign .02
        
        frame:
            background None
            vbox: # Or viewport or anything else you like
                yalign .02
                frame:
                    label "Customer Variations":
                        text_color yellow
                frame:
                    background None
                    add "top small":
                        xalign .5
                frame:
                    has vbox
                    for k, v in cust_masterD.items():
                        if k in persistent.end_set:
                            text("{color=[yellow]}  [v]  ") 
                            # assumes that you have colors as variables and 
                            #strings representing the endings.
                        else:
                            text("{color=[grey]}  [v]  ") # Not yet 
                            #achieved, same conditions as above apply...

So please tell me if you think I can manage to adapt it to my needs.

I think the part I should be interested in is this one :

Code: Select all

                
                frame:
                    has vbox
                    for k, v in cust_masterD.items():
                        if k in persistent.end_set:
                            text("{color=[yellow]}  [v]  ") 
                            # blablalba1
                        else:
                            # blablalba2

And modifiying in something like this :

Code: Select all


$ my_achievement_dict = {"game_over": "Death come for us all achievement", "first_boss": "Killed the first boss"}
$ persistent.achievements = {}
______________________________
                frame:
                    has vbox
                    for k, v in my_achievement_dict.items():
                        if k in persistent.achievement:
                            text("{color=[yellow]}  [v]  ") My achievement is display in grey because it's unlocked
                            # blablalba1
                        else:
                            text("{color=[grey]}  [v]  ") # My achievement is display in grey because it's still locked
                            # blablalba2

What do you thing about this my patient friend ? :P
Image

“He asked me to calm down, close my eyes and be quiet. He explained to me that if I was afraid, the shadow that ran barefoot in the street would feel it. I got scared seeing Jumanji on TV, so let me tell you, we didn't stay hidden for long and had to start running again.”
Jessica's Diary.

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

Re: Displaying image with a loop for in a scrolling window

#11 Post by kivik »

That's great, you're on the right track. What made me ask you to look up dict was because the loop you thought you needed had nothing to do with dictionaries - you wrote xrange.dict(achievement), which meant you didn't understand what xrange does in the for loop in the code example you shared. This was why I felt you needed to do some reading up, so that you'd find out that xrange has nothing to do with dictionaries - and your latest code samples shows that :)

So yes, I think you can adapt the above into what you need!


What you said about artist coding out of needs - I totally get you on that! I also code out of necessity, but I had an interest in programming as well so it helped me a bit - though I'm still a very lousy programmer by all means! However I like to understand what my code does when I put it in my programs, so that I could establish whether I can use the same principle on anything else - sometimes I'd return to a bit of code later because I realised there's a better / more efficient way!

sculpteur
Veteran
Posts: 312
Joined: Fri Nov 17, 2017 6:40 pm
Completed: Apocalypse Lovers
Projects: Apocalypse Lovers
Organization: Awake_Production
Location: France
Discord: https://discord.gg/apocalypse-lovers
Contact:

Re: Displaying image with a loop for in a scrolling window

#12 Post by sculpteur »

Alright. Yes you did good to point me the way on this. Now I am more operational.
Image

“He asked me to calm down, close my eyes and be quiet. He explained to me that if I was afraid, the shadow that ran barefoot in the street would feel it. I got scared seeing Jumanji on TV, so let me tell you, we didn't stay hidden for long and had to start running again.”
Jessica's Diary.

sculpteur
Veteran
Posts: 312
Joined: Fri Nov 17, 2017 6:40 pm
Completed: Apocalypse Lovers
Projects: Apocalypse Lovers
Organization: Awake_Production
Location: France
Discord: https://discord.gg/apocalypse-lovers
Contact:

Re: Displaying image with a loop for in a scrolling window

#13 Post by sculpteur »

But I still have some difficulties on formating.

I can't manage to incorporate button name in the loop :(
I think it's comming from this :
idle "[v]"
hover "[v]"


If you want to take a look :

Code: Select all

$  achievement_image = {"game_over": "gui/AwardLock - Save.png", "first_boss": "gui/AwardLock.png"}

    side "c r":
        viewport id viewId:
            has vbox
            text "   "
            for k, v in achievement_image.items():
                text "Achievement Name : [k]":
                    font "GoodDog.otf"
                    color "#66cc00"
                imagebutton:
                    idle "[v]"
                    hover "[v]"
                    action [Play ("sound", "0 - sound_hoveritem.mp3"), Show("test_{0}".format(k))]
        vbar:
            value YScrollValue(viewId)


screen test_game_over:
    add "gui/jess_carac_window.png" xpos 620 ypos 250
screen test_first_boss:
    add "gui/jess_carac_window.png" xpos 620 ypos 250
Image

“He asked me to calm down, close my eyes and be quiet. He explained to me that if I was afraid, the shadow that ran barefoot in the street would feel it. I got scared seeing Jumanji on TV, so let me tell you, we didn't stay hidden for long and had to start running again.”
Jessica's Diary.

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

Re: Displaying image with a loop for in a scrolling window

#14 Post by kivik »

I think perhaps the text isn't getting interpolated - I'm not sure if there's a list of where [variable_name] gets translated but I suspect you can't do it there in idle and hover.

Try this (not tested)

Code: Select all

idle "%s" % (v)
hover "%s" % (v)
It's python's way of easily putting variables in strings:
http://www.diveintopython.net/native_da ... rings.html

sculpteur
Veteran
Posts: 312
Joined: Fri Nov 17, 2017 6:40 pm
Completed: Apocalypse Lovers
Projects: Apocalypse Lovers
Organization: Awake_Production
Location: France
Discord: https://discord.gg/apocalypse-lovers
Contact:

Re: Displaying image with a loop for in a scrolling window

#15 Post by sculpteur »

Yep, that's perfectly working. And thanks for the link it's really usefull.
Image

“He asked me to calm down, close my eyes and be quiet. He explained to me that if I was afraid, the shadow that ran barefoot in the street would feel it. I got scared seeing Jumanji on TV, so let me tell you, we didn't stay hidden for long and had to start running again.”
Jessica's Diary.

Post Reply

Who is online

Users browsing this forum: Google [Bot], Majestic-12 [Bot]