[SOLVED] Imagebutton Hover And Idle Question

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
Nero
Veteran
Posts: 248
Joined: Tue Aug 09, 2016 2:59 pm
Contact:

[SOLVED] Imagebutton Hover And Idle Question

#1 Post by Nero »

How can I make an imagebutton that when it's idle it displays image and when it's hovered the text over previous image appears something like this:

Image

If I do it this way then the text image without background will hide the actuall "idle" image which is understandable. So how can I make way around this?

Code: Select all

imagebutton:
    hover "images/attack_no_bg.png"
    idle "images/sad_dummy.png"
    action NullAction()
Note that I don't want to make ATTACK image over and over for every enemy that wouldn't be very effective way of doing it I believe.
Last edited by Nero on Tue Feb 27, 2018 6:27 pm, edited 1 time in total.

irredeemable
Regular
Posts: 78
Joined: Thu Feb 08, 2018 7:57 am
Contact:

Re: Imagebutton Hover And Idle Question

#2 Post by irredeemable »

Code: Select all

imagebutton:
    background "sad_dummy.png"
    hover "attack_no_bg.png"
    idle Null()
    action NullAction()

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

Re: Imagebutton Hover And Idle Question

#3 Post by Imperf3kt »

If I'm reading you right, you want to have an idle image, that stays below the hover image instead of being replaced by the hover?
I'm not sure if any do that, but imagebuttons have more states than just idle and hover.

Alternatively, might using a dynamic displayable work? This is just a thought, I don't know whether it works or not, but maybe use LiveComposite?
https://www.renpy.org/doc/html/displaya ... eComposite
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Current project: GGD Mentor

Twitter

Nero
Veteran
Posts: 248
Joined: Tue Aug 09, 2016 2:59 pm
Contact:

Re: Imagebutton Hover And Idle Question

#4 Post by Nero »

irredeemable wrote: Tue Feb 27, 2018 2:59 pm

Code: Select all

imagebutton:
    background "sad_dummy.png"
    hover "attack_no_bg.png"
    idle Null()
    action NullAction()
Isn't working the image just gets frozen I can't interact with it or see the idle-hover animation.

Imperf3kt - Yes that is what I'm looking for. Really would like to do it with imagebutton as it gives me action button so I can call my function from it. I guess I will have to work around it some other way. No luck using dynamic displayable either.

irredeemable
Regular
Posts: 78
Joined: Thu Feb 08, 2018 7:57 am
Contact:

Re: Imagebutton Hover And Idle Question

#5 Post by irredeemable »

Nero wrote: Tue Feb 27, 2018 5:04 pm
irredeemable wrote: Tue Feb 27, 2018 2:59 pm

Code: Select all

imagebutton:
    background "sad_dummy.png"
    hover "attack_no_bg.png"
    idle Null()
    action NullAction()
Isn't working the image just gets frozen I can't interact with it or see the idle-hover animation.

Imperf3kt - Yes that is what I'm looking for. Really would like to do it with imagebutton as it gives me action button so I can call my function from it. I guess I will have to work around it some other way. No luck using dynamic displayable either.
Maybe I misunderstand what you're trying to do then. I assumed that sad_dummy.png was the background image and that attack_no_bg.png was simply the text overlay you wanted to appear on top of sad_dummy.png whenever the imagebutton is hovered. If that is the case then then it should work fine. The only issue might be the need to explicitly declare the size of the imagebutton if it isn't already in an explicitly-sized container. You can do that by setting xysize, setting the height and width of Null, or even setting idle back to "sad_dummy.png" as you'll still have the background image once the idle image is replaced.

User avatar
xavimat
Eileen-Class Veteran
Posts: 1460
Joined: Sat Feb 25, 2012 8:45 pm
Completed: Yeshua, Jesus Life, Cops&Robbers
Projects: Fear&Love, unknown
Organization: Pilgrim Creations
Github: xavi-mat
itch: pilgrimcreations
Location: Spain
Contact:

Re: Imagebutton Hover And Idle Question

#6 Post by xavimat »

Nero wrote: Tue Feb 27, 2018 5:04 pmReally would like to do it with imagebutton as it gives me action button so I can call my function from it.
You can, just tell the image button that the hover image is the new Composited image.

Does this code do what you want?

Code: Select all

image myidlebutton = Solid("#000", xysize=(100, 150))
image myhoverbutton = LiveComposite(
    (100, 150),
    (0, 0), "myidlebutton",
    (0, 0), Text("TEXT"))

screen test():
    hbox:
        # EXAMPLE 1
        imagebutton:
            idle Solid("#000", xysize=(100, 150))
            hover LiveComposite(
                (100, 150),
                (0, 0), Solid("#000", xysize=(100, 150)),
                (0, 0), Text("TEXT")
                )
            action NullAction()
        null width 50
        
        # EXAMPLE 2
        imagebutton:
            idle "myidlebutton"
            hover "myhoverbutton"
            action NullAction()
I use "Solid" and "Text" only for test purposes, you use your actual images:
Solid -> images/sad_dummy.png
Text -> images/attack_no_bg.png
Last edited by xavimat on Tue Feb 27, 2018 5:45 pm, edited 1 time in total.
Comunidad Ren'Py en español: ¡Únete a nuestro Discord!
Rhaier Kingdom A Ren'Py Multiplayer Adventure Visual Novel.
Cops&Robbers A two-player experiment | Fear&Love Why can't we say I love you?
Honest Critique (Avatar made with Chibi Maker by ~gen8)

Nero
Veteran
Posts: 248
Joined: Tue Aug 09, 2016 2:59 pm
Contact:

Re: Imagebutton Hover And Idle Question

#7 Post by Nero »

Yes that's exactly what I want. However now I tried to test it again in new script file and still it doesn't work. The "background" image is staying there but when I hover over it nothing happens. Size is already adjusted so it isn't a problem. Seems to me like idle Null() fully disabled imagebutton. action is also not working even if i change action from NullAction() still nothing will happen.

Here is a code I was testing right now maybe I'm doing something wrong:

Code: Select all

screen test_screen:

    imagebutton:
        background "test1.png"
        hover "test2.png"
        idle Null()
        action NullAction()



label start:

    "Test1"
    show screen test_screen
    "Test2"
    "Test3"

User avatar
xavimat
Eileen-Class Veteran
Posts: 1460
Joined: Sat Feb 25, 2012 8:45 pm
Completed: Yeshua, Jesus Life, Cops&Robbers
Projects: Fear&Love, unknown
Organization: Pilgrim Creations
Github: xavi-mat
itch: pilgrimcreations
Location: Spain
Contact:

Re: Imagebutton Hover And Idle Question

#8 Post by xavimat »

My suggestion was with LiveComposite, but irredeemable's suggestions also work:

1. xysize inside the imagebutton:

Code: Select all

screen test_screen():   # <- Don't forget the parenthesis

    imagebutton:
        xysize (200, 300)  # <- This, the size of the actual images test1.png and test2.png
        background "test1.png"
        hover "test2.png"
        idle Null()
        action NullAction()
Comunidad Ren'Py en español: ¡Únete a nuestro Discord!
Rhaier Kingdom A Ren'Py Multiplayer Adventure Visual Novel.
Cops&Robbers A two-player experiment | Fear&Love Why can't we say I love you?
Honest Critique (Avatar made with Chibi Maker by ~gen8)

Nero
Veteran
Posts: 248
Joined: Tue Aug 09, 2016 2:59 pm
Contact:

Re: Imagebutton Hover And Idle Question

#9 Post by Nero »

xavimat wrote: Tue Feb 27, 2018 5:38 pm
Nero wrote: Tue Feb 27, 2018 5:04 pmReally would like to do it with imagebutton as it gives me action button so I can call my function from it.
You can, just tell the image button that the hover image is the new Composited image.

Does this code do what you want?

Code: Select all

image myidlebutton = Solid("#000", xysize=(100, 150))
image myhoverbutton = LiveComposite(
    (100, 150),
    (0, 0), "myidlebutton",
    (0, 0), Text("TEXT"))

screen test():
    hbox:
        # EXAMPLE 1
        imagebutton:
            idle Solid("#000", xysize=(100, 150))
            hover LiveComposite(
                (100, 150),
                (0, 0), Solid("#000", xysize=(100, 150)),
                (0, 0), Text("TEXT")
                )
            action NullAction()
        null width 50
        
        # EXAMPLE 2
        imagebutton:
            idle "myidlebutton"
            hover "myhoverbutton"
            action NullAction()
I use "Solid" and "Text" only for test purposes, you use your actual images:
Solid -> images/sad_dummy.png
Text -> images/attack_no_bg.png
Yes that it! Didn't know imagebutton can be used LiveComposite in hover slot. Really needed this example this one was pretty complicated for me. Thx for making both examples also I like example 1 more as I can repeat this code to learn it :) .

Thx a lot guys my problem is solved!

User avatar
xavimat
Eileen-Class Veteran
Posts: 1460
Joined: Sat Feb 25, 2012 8:45 pm
Completed: Yeshua, Jesus Life, Cops&Robbers
Projects: Fear&Love, unknown
Organization: Pilgrim Creations
Github: xavi-mat
itch: pilgrimcreations
Location: Spain
Contact:

Re: Imagebutton Hover And Idle Question

#10 Post by xavimat »

Wait a moment :wink: , I'm trying irredeemable's suggestions and I like them more:
2. Put width and height inside the Null

Code: Select all

screen test_screen():   # <- Don't forget the parenthesis
    imagebutton:
        background "test1.png"
        hover "test2.png"
        idle Null(width=100, height=150)  # <- Here
        action NullAction()
3. Put the same background image in idle:

Code: Select all

screen test_screen():   # <- Don't forget the parenthesis
    imagebutton:
        background "test1.png"
        hover "test2.png"
        idle "test1.png"
        action NullAction()
Now you have five different ways to do the same. :lol:
Comunidad Ren'Py en español: ¡Únete a nuestro Discord!
Rhaier Kingdom A Ren'Py Multiplayer Adventure Visual Novel.
Cops&Robbers A two-player experiment | Fear&Love Why can't we say I love you?
Honest Critique (Avatar made with Chibi Maker by ~gen8)

Nero
Veteran
Posts: 248
Joined: Tue Aug 09, 2016 2:59 pm
Contact:

Re: Imagebutton Hover And Idle Question

#11 Post by Nero »

xavimat wrote: Tue Feb 27, 2018 5:53 pm My suggestion was with LiveComposite, but irredeemable's suggestions also work:

1. xysize inside the imagebutton:

Code: Select all

screen test_screen():   # <- Don't forget the parenthesis

    imagebutton:
        xysize (200, 300)  # <- This, the size of the actual images test1.png and test2.png
        background "test1.png"
        hover "test2.png"
        idle Null()
        action NullAction()
Oh this example also works now. Cool thanks!
One thing at this example is how do I move hover image only? Not the entire imagebutton that would be xpos or xalign but only the hover image?

User avatar
xavimat
Eileen-Class Veteran
Posts: 1460
Joined: Sat Feb 25, 2012 8:45 pm
Completed: Yeshua, Jesus Life, Cops&Robbers
Projects: Fear&Love, unknown
Organization: Pilgrim Creations
Github: xavi-mat
itch: pilgrimcreations
Location: Spain
Contact:

Re: Imagebutton Hover And Idle Question

#12 Post by xavimat »

Nero wrote: Tue Feb 27, 2018 6:11 pmOne thing at this example is how do I move hover image only? Not the entire imagebutton that would be xpos or xalign but only the hover image?
The hover image should have the same size than the idle (otherwise, when you hover over the idle, it shows the hover, but if the hover is smaller, then the cursor is not hovering anymore, so it shows the idle, so it's hovering, so it shows the hover, so it's not hovering... so you get an ugly flickering effect).
Make your hover image with the needed transparent space. Use your image editor.
Comunidad Ren'Py en español: ¡Únete a nuestro Discord!
Rhaier Kingdom A Ren'Py Multiplayer Adventure Visual Novel.
Cops&Robbers A two-player experiment | Fear&Love Why can't we say I love you?
Honest Critique (Avatar made with Chibi Maker by ~gen8)

irredeemable
Regular
Posts: 78
Joined: Thu Feb 08, 2018 7:57 am
Contact:

Re: Imagebutton Hover And Idle Question

#13 Post by irredeemable »

xavimat wrote: Tue Feb 27, 2018 6:04 pm Wait a moment :wink: , I'm trying irredeemable's suggestions and I like them more:
2. Put width and height inside the Null

Code: Select all

screen test_screen():   # <- Don't forget the parenthesis
    imagebutton:
        background "test1.png"
        hover "test2.png"
        idle Null(width=100, height=150)  # <- Here
        action NullAction()
3. Put the same background image in idle:

Code: Select all

screen test_screen():   # <- Don't forget the parenthesis
    imagebutton:
        background "test1.png"
        hover "test2.png"
        idle "test1.png"
        action NullAction()
Now you have five different ways to do the same. :lol:
:lol: It's funny you should say that because I just tested it and was about to post that while setting xysize or setting the idle image to the background image worked fine, I got a flickering mess when I set the height and width of nulll. I was using a Text displayable as the hover rather than an image file, but I can't think of why that would matter. So, yeah, it seems to me that since you know the size of the image (and, so, the size of the imagebutton) that the simplest, most efficient solution is just to set the xysize.

User avatar
xavimat
Eileen-Class Veteran
Posts: 1460
Joined: Sat Feb 25, 2012 8:45 pm
Completed: Yeshua, Jesus Life, Cops&Robbers
Projects: Fear&Love, unknown
Organization: Pilgrim Creations
Github: xavi-mat
itch: pilgrimcreations
Location: Spain
Contact:

Re: Imagebutton Hover And Idle Question

#14 Post by xavimat »

irredeemable wrote: Tue Feb 27, 2018 6:18 pm :lol: It's funny you should say that because I just tested it and was about to post that while setting xysize or setting the idle image to the background image worked fine, I got a flickering mess when I set the height and width of nulll. I was using a Text displayable as the hover rather than an image file, but I can't think of why that would matter. So, yeah, it seems to me that since you know the size of the image (and, so, the size of the imagebutton) that the simplest, most efficient solution is just to set the xysize.
Yeah, I had the same flickering using Text displayable to test, then changed it to Solid and it works fine.
I like more the third solution, because the xysize it's not needed.
Comunidad Ren'Py en español: ¡Únete a nuestro Discord!
Rhaier Kingdom A Ren'Py Multiplayer Adventure Visual Novel.
Cops&Robbers A two-player experiment | Fear&Love Why can't we say I love you?
Honest Critique (Avatar made with Chibi Maker by ~gen8)

Nero
Veteran
Posts: 248
Joined: Tue Aug 09, 2016 2:59 pm
Contact:

Re: Imagebutton Hover And Idle Question

#15 Post by Nero »

xavimat wrote: Tue Feb 27, 2018 6:18 pm
Nero wrote: Tue Feb 27, 2018 6:11 pmOne thing at this example is how do I move hover image only? Not the entire imagebutton that would be xpos or xalign but only the hover image?
The hover image should have the same size than the idle (otherwise, when you hover over the idle, it shows the hover, but if the hover is smaller, then the cursor is not hovering anymore, so it shows the idle, so it's hovering, so it shows the hover, so it's not hovering... so you get an ugly flickering effect).
Make your hover image with the needed transparent space. Use your image editor.
Oh got it. I'm going to use example 1 as this has the most options for adjustments which is what I like. More options more power :mrgreen: . Anyways I wont be taking anymore of your time you saved me a lot of time!

Thanks again I'm going back to my project now.

Post Reply

Who is online

Users browsing this forum: haitai