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.
I have created a few buttons (each of them with background + specific text) and I'd like to make sure both background and text are perfectly aligned. So far I managed to do it manually by changing the padding for each button based on the text length, but if there's any change in the text length (e.g. translation) the background is not aligned anymore:
I am not sure what do you want to od there. Do you want text to be centered on same vertical axis, so all labels would be over one another and have background images slightly shifted horisontally for each button?
Hey, thanks for reaching out - I would like to align the button background on the text (both vertically and - mainly - horizontally).
As you can see on the screenshot:
- texts are properly aligned to one another (centered on vertical axis)
- background for "Preferences" button is definitely not vertically aligned as it overflows to the left (while "Gallery" button looks OK)
Is there a way to do so without applying a case-by-case padding to each button?
Can you show more of your screen code? At least of the button container (I suppose it vbox, but it is better to actually see its properties). And could you post gui/menuselector.png image, so I could try to reproduce this problem?
Ok, main problem is that your button are of different sizes (because text is of different size) and background image is placed at top-left corner. We need to fix that. Most obvious solution is to align image to the center of the button. For that we need to declare out image with a transform applied to it. You can do it in the screen, like that: default bg_button_image = Image("gui/menuselector.png", xalign=0,5)
This already fixes this problem, but you can go one step further:
vbox:
default bg_button_image = Image("gui/menuselector.png", style="main_menu_button_background") # use styles instead of manually supplying properties
button:
size_group "main menu button" # makes everyone with the same size_group be the same size
text _("Preferences") style "main_menu_button_text" # apply style instead
background bg_button_image # add our defined custom image instead of relying on default behavior
hover_background bg_button_image
action ShowMenu("preferences")
button:
size_group "main menu button"
text _("Gallery") style "main_menu_button_text"
background bg_button_image
hover_background bg_button_image
action ShowMenu("gallery")
button:
size_group "main menu button"
text _("Pdfgdfgrhgffghjehkghkfghkghkeghkghkrghkghkences") style "main_menu_button_text"
background bg_button_image
hover_background bg_button_image
action ShowMenu("preferences")
#... just styles I used there
style main_menu_button is button:
padding (0,0)
ymargin 0.015
xalign 0.5
style main_menu_button_text is text:
color "#ffffff"
hover_color "#e4bb53"
size 20
align (0.5, 0.5)
style main_menu_button_background:
align (0.5, 0.5)
Even if the text is long enough to flow outside of the button, it does not break anything else:
Thank you so much for all your help Ocelot, just tried your code and it works perfectly! I could also use this for some other buttons in the settings and it looks flawless now - thanks a lot!