Centered text on Custom Choice Menu

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
Hiddenwall
Regular
Posts: 32
Joined: Sun May 14, 2017 6:57 pm
Contact:

Centered text on Custom Choice Menu

#1 Post by Hiddenwall »

I'm having an issue with centering the text for a custom choice menu that I have. It's centered into the middle for the xalign, but there is nothing that allows me to do the same for the yalign. Anyone know how to change this. First picture is reference to what I'm trying to achieve, while the 2nd picture is what the game is doing.

https://imgur.com/20MpYdi

https://imgur.com/9Dm79Vi

Code that might be relevant:

Code: Select all

## Choice Buttons ##############################################################
##
## Choice buttons are used in the in-game menus.

define gui.choice_button_width = 678
define gui.choice_button_height = 104
define gui.choice_button_tile = False
define gui.choice_button_borders = Borders(100, 5, 100, 5)
define gui.choice_button_text_font = gui.text_font
define gui.choice_button_text_size = gui.text_size
define gui.choice_button_text_xalign = 0.5
define gui.choice_button_text_idle_color = "#d8dfef"
define gui.choice_button_text_hover_color = "#d8dfef"
define gui.choice_button_text_insensitive_color = "#444444"

Code: Select all

## Choice screen ###############################################################
##
## This screen is used to display the in-game choices presented by the menu
## statement. The one parameter, items, is a list of objects, each with caption
## and action fields.
##
## https://www.renpy.org/doc/html/screen_special.html#choice

screen choice(items):
    style_prefix "choice"

    vbox:
        for i in items:
            textbutton i.caption action i.action
    add "choice_screen.png"


## When this is true, menu captions will be spoken by the narrator. When false,
## menu captions will be displayed as empty buttons.
define config.narrator_menu = True


style choice_vbox is vbox
style choice_button is button
style choice_button_text is button_text

style choice_vbox:
    xalign 0.5
    ypos 270
    yanchor 0.3

    spacing gui.choice_spacing

style choice_button is default:
    properties gui.button_properties("choice_button")

style choice_button_text is default:
    properties gui.button_text_properties("choice_button")

User avatar
isobellesophia
Miko-Class Veteran
Posts: 979
Joined: Mon Jan 07, 2019 2:55 am
Completed: None
Projects: Maddox and Friends! (AI Teacher friend), Friendly Universities! (Soon)
Organization: Friendly Teachers series
Deviantart: SophBelle
itch: Child Creation
Location: Philippines, Mindanao
Contact:

Re: Centered text on Custom Choice Menu

#2 Post by isobellesophia »

Try this one, and then copy it.

Code: Select all

define gui.choice_button_text_ypos = (any numbers that can fit.) 
I am a friendly user, please respect and have a good day.


Image

Image


Hiddenwall
Regular
Posts: 32
Joined: Sun May 14, 2017 6:57 pm
Contact:

Re: Centered text on Custom Choice Menu

#3 Post by Hiddenwall »

isobellesophia wrote: Wed Nov 20, 2019 6:44 am Try this one, and then copy it.

Code: Select all

define gui.choice_button_text_ypos = (any numbers that can fit.) 
Doesn't look like that is doing anything. Tried anchor, and align as well and those didn't change center the text either.

User avatar
papillon
Arbiter of the Internets
Posts: 4107
Joined: Tue Aug 26, 2003 4:37 am
Completed: lots; see website!
Projects: something mysterious involving yuri, usually
Organization: Hanako Games
Tumblr: hanakogames
Contact:

Re: Centered text on Custom Choice Menu

#4 Post by papillon »

Have you tried tinkering with the gui.choice_button_borders settings? Adjusting the borders may allow you to push the contents around a bit.

(Slightly hacky solution, but to do better I'd want to actually have your code and art to tinker with)

Hiddenwall
Regular
Posts: 32
Joined: Sun May 14, 2017 6:57 pm
Contact:

Re: Centered text on Custom Choice Menu

#5 Post by Hiddenwall »

papillon wrote: Thu Nov 21, 2019 3:30 pm Have you tried tinkering with the gui.choice_button_borders settings? Adjusting the borders may allow you to push the contents around a bit.

(Slightly hacky solution, but to do better I'd want to actually have your code and art to tinker with)
Yeah, I've tried it with the borders, it looks like I can get the text centered but only if it's a single line. It's when there is two lines it shifts the entire thing down instead of balancing it in the middle which you can see by how low it is to the bottom of the box. I also can't seem to get the text to fill as much of the entire space before it moves down to the next line. Any attempts to also adjust the border settings causes either nothing to happen or for it to run off the side of the sides of the borders. This below is the best that I can get it but I'm really trying to get it to be an exact replica of the 2nd image below this.

Image

Versus the text being centered here and filling out the entire space.

Image

Here is the art that I've been using, and the code.

Image

Code: Select all

## Choice Buttons ##############################################################
##
## Choice buttons are used in the in-game menus.

define gui.choice_button_width = 678
define gui.choice_button_height = 104
define gui.choice_button_tile = False
## -13 instead of -12 causes the image to spill off the left side.
define gui.choice_button_borders = Borders(-12, 25, 0, 0)
define gui.choice_button_text_font = gui.text_font
define gui.choice_button_text_size = gui.text_size
define gui.choice_button_text_xalign = 0.5
#define gui.choice_button_text_yalign = 1.5
define gui.choice_button_text_idle_color = "#faf9ff"
define gui.choice_button_text_hover_color = "#faf9ff"
define gui.choice_button_text_insensitive_color = "#444444"

Hiddenwall
Regular
Posts: 32
Joined: Sun May 14, 2017 6:57 pm
Contact:

Re: Centered text on Custom Choice Menu

#6 Post by Hiddenwall »

I'm still trying to find an answer for this if anyone has any or willing to look into this. I've searched everywhere and there doesn't seem to be a useful hack that I can use or a question like this answered already. The only other thing I could think of is to have the text all as images and then just show them up on the screen but that's incredibly inefficient when there are already over 50 choice menus I have with more being added.

rayminator
Miko-Class Veteran
Posts: 793
Joined: Fri Feb 09, 2018 12:05 am
Location: Canada
Contact:

Re: Centered text on Custom Choice Menu

#7 Post by rayminator »

you can try playing around with this

Code: Select all

define gui.choice_button_width = 678 <-- don't need to play with this not if you chose to make it smaller
define gui.choice_button_height = 104 <-- you might have to adjust this as well
define gui.choice_button_tile = False <-- don't need to play with this 
## -13 instead of -12 causes the image to spill off the left side.
define gui.choice_button_borders = Borders(-12, 25, 0, 0) <-- don't need to play with this not if you chose to make it smaller or bigger
define gui.choice_button_text_font = gui.text_font <--- you don't need to use the default
define gui.choice_button_text_size = gui.text_size <--- you don't need to use the default
define gui.choice_button_text_xalign = 0.5 <-- up & down
#define gui.choice_button_text_yalign = 1.5 <-- left & right
My main suggestion in to name choice menu names shorter if you can

Hiddenwall
Regular
Posts: 32
Joined: Sun May 14, 2017 6:57 pm
Contact:

Re: Centered text on Custom Choice Menu

#8 Post by Hiddenwall »

rayminator wrote: Mon Dec 02, 2019 1:18 pm you can try playing around with this

Code: Select all

define gui.choice_button_width = 678 <-- don't need to play with this not if you chose to make it smaller
define gui.choice_button_height = 104 <-- you might have to adjust this as well
define gui.choice_button_tile = False <-- don't need to play with this 
## -13 instead of -12 causes the image to spill off the left side.
define gui.choice_button_borders = Borders(-12, 25, 0, 0) <-- don't need to play with this not if you chose to make it smaller or bigger
define gui.choice_button_text_font = gui.text_font <--- you don't need to use the default
define gui.choice_button_text_size = gui.text_size <--- you don't need to use the default
define gui.choice_button_text_xalign = 0.5 <-- up & down
#define gui.choice_button_text_yalign = 1.5 <-- left & right
My main suggestion in to name choice menu names shorter if you can
So I've already tried messing around with most of those setting before and to no avail. For the button width and height, those are the measurements of the choice button themselves and to mimic the likeness of the vn to the example they need to stay the same size. As for the aligns, I think you might have them switched around? However the xalign does it's purpose of keeping the text in the center which is perfect, but for some reason this doesn't work with the yalign, which is where my dilemma is coming from.
As for shortening what goes into the choice names, that's not much of a fix for this as it's just an ignore the problem. What the MC says and chooses to do is all done through these choices so they are an integral part of the vn. Having the option to put in more detailed choices and narration from the MC like the example above is very important to limiting how often the menu appears when say, the MC's monologues.
While it's usable in its current state, my perfectionist nature wants it to be exact, not just close. But the longer I try to work on this to come up with a solution the more I think this might be a bigger hassle than it's worth though. Personally I thought it might have been an easy fix but so far nothing has worked...

Post Reply

Who is online

Users browsing this forum: Kocker