[Solved] Screen: Fix different-sized idle/hover/selected button image to a uniform size

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
RLinZ
Newbie
Posts: 17
Joined: Wed Jul 18, 2018 9:34 pm
Contact:

[Solved] Screen: Fix different-sized idle/hover/selected button image to a uniform size

#1 Post by RLinZ »

Hello there!

I am using imagebuttons for my screen and I have button_hover.png larger than button_idle.png and button_selected.png, as I would like the button to grow in size when hovered.
However when I put multiple such buttons in a hbox with spacing, the entire line of buttons are affected by the hovered, enlarged one.

Code: Select all

screen navigation():
    hbox:
        xalign 0.9 yalign 0.98
        spacing 30
        imagebutton auto "gui/screen/nav/back_%s.png" action Return()
        imagebutton auto "gui/screen/nav/save_%s.png" action ShowMenu("save")
        imagebutton auto "gui/screen/nav/load_%s.png" action ShowMenu("load")
        imagebutton auto "gui/screen/nav/options_%s.png" action ShowMenu("preferences")
        imagebutton auto "gui/screen/nav/extra_%s.png" action ShowMenu("extra_screen")
Is there a way to frame / crop / pad all button images to fit the largest variation and fix spacing so that the enlarged button does not affect the alignment of the rest?

One possible solution I could think of is to use fixed instead of hbox, but I'd like to know if you have better ideas!

I searched around but had not discovered similar posts so please pardon me if this has been asked before.
Any insight is greatly appreciated!
Last edited by RLinZ on Thu Sep 20, 2018 9:20 pm, edited 1 time in total.

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

Re: [Question] Screen: Fix different-sized idle/hover/selected button image to a uniform size

#2 Post by Imperf3kt »

The best solution is to make all images the same size, and make sure the images are centered, with the smaller image having more blank canvas (alpha)
This will still cause some issues, so I suggest instead of alpha, use the larger image as an alpha mask - shading the area covered on the smaller image, any color at 1% or less opacity.
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

philat
Eileen-Class Veteran
Posts: 1900
Joined: Wed Dec 04, 2013 12:33 pm
Contact:

Re: [Question] Screen: Fix different-sized idle/hover/selected button image to a uniform size

#3 Post by philat »

Not really. You choose between either automatic spacing (which is necessarily affected by the size of the things inside) and fixed position. If you make all the images the same size, it will change the way the entire line looks (i.e., the unhovered buttons will be farther apart than they were before the change). It's really just a matter of what you want it to look like. For my two cents, it's not worth it to zoom the button -- the drop shadow effect or highlight is fine, but that's up to your vision.

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

Re: [Question] Screen: Fix different-sized idle/hover/selected button image to a uniform size

#4 Post by Imperf3kt »

The thing is, if you have two differently sized buttons for hover and idle, their activation area is going to change on mouseover/mouseoff
So on hover, a larger image shows, thats fine. But what if a smaller image shows? You aren't mouseover anymore, so it reverts to idle, which is bigger, so mousrover is true, so the hovered image shows which...
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

philat
Eileen-Class Veteran
Posts: 1900
Joined: Wed Dec 04, 2013 12:33 pm
Contact:

Re: [Question] Screen: Fix different-sized idle/hover/selected button image to a uniform size

#5 Post by philat »

Imperf3kt wrote: Tue Sep 18, 2018 11:35 pm The thing is, if you have two differently sized buttons for hover and idle, their activation area is going to change on mouseover/mouseoff
So on hover, a larger image shows, thats fine. But what if a smaller image shows? You aren't mouseover anymore, so it reverts to idle, which is bigger, so mousrover is true, so the hovered image shows which...
To be clear, I was responding to OP, not you.

RLinZ
Newbie
Posts: 17
Joined: Wed Jul 18, 2018 9:34 pm
Contact:

Re: [Question] Screen: Fix different-sized idle/hover/selected button image to a uniform size

#6 Post by RLinZ »

Imperf3kt wrote: Mon Sep 17, 2018 1:17 am The best solution is to make all images the same size, and make sure the images are centered, with the smaller image having more blank canvas (alpha)
This will still cause some issues, so I suggest instead of alpha, use the larger image as an alpha mask - shading the area covered on the smaller image, any color at 1% or less opacity.
philat wrote: Tue Sep 18, 2018 9:37 pm Not really. You choose between either automatic spacing (which is necessarily affected by the size of the things inside) and fixed position. If you make all the images the same size, it will change the way the entire line looks (i.e., the unhovered buttons will be farther apart than they were before the change). It's really just a matter of what you want it to look like. For my two cents, it's not worth it to zoom the button -- the drop shadow effect or highlight is fine, but that's up to your vision.
Sorry I didn't make it clear in the original post - the buttons are differently-sized exactly because of the drop shadow effect and the highlight, but I think I get your points you and thank you both for your inputs! :D

Post Reply

Who is online

Users browsing this forum: Semrush [Bot]