Text causes other screen elements to shift/displace when hovered

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
dasauto1
Regular
Posts: 38
Joined: Sun Oct 31, 2021 2:26 pm
Contact:

Text causes other screen elements to shift/displace when hovered

#1 Post by dasauto1 »

I have a textbutton that gets bigger in size when is hovered. this causes other screen elements to be displaced accordingly. How do I isolate this textbutton? thanks.

User avatar
Alex
Lemma-Class Veteran
Posts: 3098
Joined: Fri Dec 11, 2009 5:25 pm
Contact:

Re: Text causes other screen elements to shift/displace when hovered

#2 Post by Alex »

Did you place this textbutton inside a container (hbox/vbox/grid/vpgrid, etc.) along with the other elements?
If so, try to position it separately.

dasauto1
Regular
Posts: 38
Joined: Sun Oct 31, 2021 2:26 pm
Contact:

Re: Text causes other screen elements to shift/displace when hovered

#3 Post by dasauto1 »

The button is inside an hbox and the other elements are in another hbox. both hbox are same level children of a vbox.

felsenstern
Regular
Posts: 72
Joined: Tue Jul 11, 2017 2:13 am
Contact:

Re: Text causes other screen elements to shift/displace when hovered

#4 Post by felsenstern »

The idea behind boxes, vbox and hbox is that the arranging of displayables. And if you make one element bigger then they are shifting/moving everything out of the way to correctly display them. You can of course always manage the position of those elements on your own. You don't need a vbox or hbox to arrange texts, frames, boxes and so on. Of course you have to consider anchors and positions.
---
Yes, I've Read The F*cking Manual
Yes, I've used the f*cking search function
Yes, I've used a site search
No, I don't need a reminder that search functions exist
No, I don't need your astonished outbreak that I couldn't find the information
No, I don't need your answer if you can't just give it without all the BS around it

Inksword
Regular
Posts: 83
Joined: Fri Oct 24, 2014 1:20 am
Tumblr: inksword
Contact:

Re: Text causes other screen elements to shift/displace when hovered

#5 Post by Inksword »

You can also solve this by changing your art assets instead, by having an invisible transparent box around your un-hovered button that takes up the same space as the big button. So, if your smaller button is 50 x 50px and your big button is 80 x 80px, make the first button 50x50 but with a transparent border that makes it 80 x 80px including the transparency. That way the actual size isn't changing in terms of the space it's given by the GUI, but it visually changes sizes on the hover.

dasauto1
Regular
Posts: 38
Joined: Sun Oct 31, 2021 2:26 pm
Contact:

Re: Text causes other screen elements to shift/displace when hovered

#6 Post by dasauto1 »

Inksword wrote: Tue Nov 02, 2021 4:19 am You can also solve this by changing your art assets instead, by having an invisible transparent box around your un-hovered button that takes up the same space as the big button. So, if your smaller button is 50 x 50px and your big button is 80 x 80px, make the first button 50x50 but with a transparent border that makes it 80 x 80px including the transparency. That way the actual size isn't changing in terms of the space it's given by the GUI, but it visually changes sizes on the hover.
Thank you. I managed to solve this by using xmaximum, ymaximum. these give the effect you described, it leaves a certain "transparent" free area around the text that the text can't go pass it. The values I used for these properties is the same value of the bigger (maximum) size of the button when hovered.

Post Reply

Who is online

Users browsing this forum: Amazon [Bot], Silac