Using a Button to Display an Image and Text?

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
Braydxne
Regular
Posts: 50
Joined: Tue Aug 08, 2017 4:03 am
Projects: DR: Chains of Trust
Contact:

Using a Button to Display an Image and Text?

#1 Post by Braydxne »

I'm trying to use a button that has both image and test. This code works fine for hovering over it, as the text changes.
But how can I make it so
a) the image changes states as well
b) the text and image both have a selected state?

Code: Select all

button:
	action episode.Action("Prologue")
	has vbox
	add "images/UI/cph_idle.png"
	text "Prologue" style "labelly" xalign 0.5

User avatar
Remix
Eileen-Class Veteran
Posts: 1628
Joined: Tue May 30, 2017 6:10 am
Completed: None... yet (as I'm still looking for an artist)
Projects: An un-named anime based trainer game
Contact:

Re: Using a Button to Display an Image and Text?

#2 Post by Remix »

As you are only using two children (an image and a text) you could just use background and foreground (or just use a textbutton with background states as images)

Code: Select all

screen btn():
    fixed:
        button:
            area (0,0, 128, 108)
            action NullAction()

            hover_background Transform("images/bg 0.png", zoom=0.1)
            idle_background Transform("images/bg 1.png", zoom=0.1)
            
            hover_foreground Text("Hover", pos=(0, 74))
            idle_foreground Text("Idle", pos=(0, 74))
Other states, (insensitive, idle, hover, selected_idle, selected_hover) are just prepended to the _foreground or _background attributes.
Frameworks & Scriptlets:

User avatar
Braydxne
Regular
Posts: 50
Joined: Tue Aug 08, 2017 4:03 am
Projects: DR: Chains of Trust
Contact:

Re: Using a Button to Display an Image and Text?

#3 Post by Braydxne »

Remix wrote: Sat Nov 17, 2018 6:32 am As you are only using two children (an image and a text) you could just use background and foreground (or just use a textbutton with background states as images)

Code: Select all

screen btn():
    fixed:
        button:
            area (0,0, 128, 108)
            action NullAction()

            hover_background Transform("images/bg 0.png", zoom=0.1)
            idle_background Transform("images/bg 1.png", zoom=0.1)
            
            hover_foreground Text("Hover", pos=(0, 74))
            idle_foreground Text("Idle", pos=(0, 74))
Other states, (insensitive, idle, hover, selected_idle, selected_hover) are just prepended to the _foreground or _background attributes.
Thank you so much! This worked!

User avatar
Braydxne
Regular
Posts: 50
Joined: Tue Aug 08, 2017 4:03 am
Projects: DR: Chains of Trust
Contact:

Re: Using a Button to Display an Image and Text?

#4 Post by Braydxne »

Although, for some reason the selected states aren't working. Do I have to do something to make it work?

User avatar
Remix
Eileen-Class Veteran
Posts: 1628
Joined: Tue May 30, 2017 6:10 am
Completed: None... yet (as I'm still looking for an artist)
Projects: An un-named anime based trainer game
Contact:

Re: Using a Button to Display an Image and Text?

#5 Post by Remix »

What syntax are you using? selected_idle_background or what?

Plus, are you sure the selected state is properly being set? ( just add " selected True " as an attribute to test)
Frameworks & Scriptlets:

User avatar
Braydxne
Regular
Posts: 50
Joined: Tue Aug 08, 2017 4:03 am
Projects: DR: Chains of Trust
Contact:

Re: Using a Button to Display an Image and Text?

#6 Post by Braydxne »

Remix wrote: Sat Nov 17, 2018 6:44 pm What syntax are you using? selected_idle_background or what?

Plus, are you sure the selected state is properly being set? ( just add " selected True " as an attribute to test)
Yes! I am using selected_idle_background! When I tested it as you said, it's all set up properly. But I'm didn't actually set it to be selected-- I guess I just unrealistically thought it would automatically do it. I thank you again for replying, it means a lot!

User avatar
Remix
Eileen-Class Veteran
Posts: 1628
Joined: Tue May 30, 2017 6:10 am
Completed: None... yet (as I'm still looking for an artist)
Projects: An un-named anime based trainer game
Contact:

Re: Using a Button to Display an Image and Text?

#7 Post by Remix »

If you have written your own Action class (and it extends Ren'Py's base one) you can use the methods get_selected and get_sensitive inside that...

https://www.renpy.org/dev-doc/html/scre ... tml#Action
Frameworks & Scriptlets:

Post Reply

Who is online

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