Help with buttons with multiple components.

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
User avatar
White Phantom Games
Newbie
Posts: 1
Joined: Thu Aug 26, 2021 11:46 am
itch: whitephantomgames
Location: United Kingdom
Discord: White Phantom#8625
Contact:

Help with buttons with multiple components.

#1 Post by White Phantom Games »

Hello,

I'm currently making an achievement gallery for my game, and I could use a bit of a hand with the buttons if anybody can aid me.

This is my first button and everything works in it, it displays the Achievement Icon, the Achievement Name, and when you hover over it, it displays the unlocked reward image that you can click and view full screen.

Code: Select all

button:
                        sensitive achievement.has("Day1Complete")
                        style "achievementbutton"
                        add "images/v22/menu/ItsOnlyMonday.jpg" xalign 0.5 yalign 0.3
                        text "On the First Day": 
                            style "achievementbuttontext"
                        hover_foreground "images/v22/menu/secret1.jpg"
                        action SetVariable("achimg", 1), Show("ShowAch")
However I need a second button to display when the achievement isn't unlocked, and on that button I want the hover to remove the original text and replace it with a short guide on how to unlock the achievement.

Essentially I want button 1 to switch to button 2 on hover

Code: Select all

                    1. button:
                        style "achievementlockedbutton"
                        add "images/v22/menu/ItsOnlyMondayLocked.jpg" xalign 0.5 yalign 0.3
                        text "On the First Day": 
                            style "achievementlockedbuttontext"
                        action NullAction()

                    2. button:
                        style "achievementlockedbutton"
                        text "Complete the first day.":
                            style "achievementlockedguidetext"
                        action NullAction*()
These are the style codes if they are necessary:

Code: Select all

style achievementbuttontext:
    color "#ffffff"
    size 30
    xalign 0.5
    yalign 0.9

style achievementbutton:
    xsize 362
    ysize 201
    idle_background "images/v22/menu/achievementbackground.jpg" 

style achievementlockedbutton:
    xsize 362
    ysize 201
    idle_background "images/v22/menu/achievementlockedbackground.jpg" 

style achievementlockedbuttontext:
    color="#C0C0C0"
    size 30
    xalign 0.5
    yalign 0.9

style achievementlockedguidetext:
    color="#C0C0C0"
    size 20
    xalign 0.5
I'm using

Code: Select all

                if achievement.has("Day1Complete"):
and

Code: Select all

else:
currently to determine which button displays, if there's a way to just do it with

Code: Select all

sensitive achievement.has("Day1Complete")
then that would be great as there are going to be 50 Achievements minimum so there will be a lot of if and elses, but if not it's alright.

Each Achievement Button will have it's own Icon and Name, and when hovered either the Guide Text or the Unlocked Image, and the background colour also needs to change, this is why I'm not using an imagebutton or a textbutton.

Thanks in advance if there is any way of solving this, I'm a self-taught coder so this has gone beyond my skillset a bit, and I can't find a good tutorial on just buttons on Youtube or anywhere, everybody is using text or image buttons there which I understand.

Thanks,

WP

User avatar
m_from_space
Eileen-Class Veteran
Posts: 1004
Joined: Sun Feb 21, 2021 3:36 am
Contact:

Re: Help with buttons with multiple components.

#2 Post by m_from_space »

White Phantom Games wrote: Tue Apr 30, 2024 10:04 am Thanks in advance if there is any way of solving this, I'm a self-taught coder so this has gone beyond my skillset a bit, and I can't find a good tutorial on just buttons on Youtube or anywhere, everybody is using text or image buttons there which I understand.
So I am missing your actual question or problem, but I guess you are asking about how to make it efficient, meaning less, but useful code for all those 50 achievements?

In my opinion, if you have a lot of "same-same" stuff in a game, you should try to use some sort of loop that just reads and writes all the necessary data instead of writing 50 times the same code. In your case I suggest using a list of dictionaries that defines all the buttons and then just a simple screen that loops through all the data and showing the buttons with the data. Here is an example (simple one):

Code: Select all

define achies = [
    {
        "title": "On the First Day",
        # you do not have to use full paths to images in Renpy as long as they are in the images folder!
        "bg": "ItsOnlyMonday",
        "fg": "secret1",
        "action": [SetVariable("achimg", 1), Show("ShowAch")]
    },
    {
        # another achievement here, etc.
    }
]

screen achievements():
    vbox:
        for ach in achies:
            button:
                action ach.action
                add ach.bg
                text ach.title style "achievementbuttontext"
                hover_foreground ach.fg
Now of course you can change this to whatever you need, even using a simple if else statement for when the button needs to change. The good thing is, you only have to write it down once.

Let me know if that is actually helpful.

Post Reply

Who is online

Users browsing this forum: No registered users