Game menu font alignment

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
Fireserpent
Regular
Posts: 57
Joined: Wed May 05, 2010 3:11 pm
Location: Sweden
Contact:

Game menu font alignment

#1 Post by Fireserpent » Tue May 11, 2010 1:35 pm

Got a quick question about some alignment issues with ingame menues. I've searched through the forums, but couldn't find an answer to this particular issue.

In the first image, you can see the size, shape and alignment I've set for the text window..
I want the menues to appear at the bottom, and with with the same intendation at the left as the text window.. Which works fine.
What I can't figure out is the width of the menu windows.. No matter how I try to alter their right padding, nothing seems to change them.. It seems to have a set size.. Is there any way to change this? I want to try out two ideas, one is to have them expand to the right with text, the other is to have them to be as far to the right as the text window is.

The other thing is the font centering in the game menues. If you look in the second screen with the long test text, the third row is centered, which is not what I want. I want all text aligned to the left. Any way to do this?

Image

Image

These are my settings for the text window (In options.rpy)

Code: Select all

    style.window.background = Frame("menu_text.png", 12, 12)
    style.window.left_padding = 55
    style.window.right_padding = 55
    style.window.top_padding = 13
    style.window.bottom_padding = 13
These are my current settings for the menues (In options.rpy)

Code: Select all

    style.menu_choice_button.background = Frame("menu_screen.png",8,8)
    style.menu_choice.size=17
    style.menu_choice.xalign = 0
    style.menu_window.yalign = 1.0
    style.menu_window.xalign = 0.1
    style.menu_window.bottom_padding = 13
    style.menu_window.left_padding = 28
Any help on this would be very much appreciated :)

User avatar
Aleema
Lemma-Class Veteran
Posts: 2677
Joined: Fri May 23, 2008 2:11 pm
Organization: happyB
Tumblr: happybackwards
Contact:

Re: Game menu font alignment

#2 Post by Aleema » Tue May 11, 2010 2:26 pm

It should be fairly easy to edit the position of the Menu buttons, if you have the right style property. Sometimes its a hit-or-miss on choosing which style to edit, to achieve something like what you have, I used this code:

Code: Select all

    style.menu_choice_button.background = Frame("button_choice.png", 14,14)
    style.menu_choice_button.hover_background = Frame("button_choice2.png", 14,14)
    style.menu_choice_button.yminimum=35
    
    style.menu_window.yalign=0.95
    style.menu_window.xalign=0.95
    style.menu_window.xfill = False
    
    style.menu_choice.size = 16
As you can see, "menu_choice" is the text, "menu_choice_button" is the physical button. "menu_window" is the frame that contains all of the buttons. I think. That's just how I've been thinking of them to get stuff to work. :P

"xfill" causes a lot of problems when you try to get some things, like windows, to be smaller than the screen. If you ever find you can't alter the width of something, try saying "xfill = False" and see if it helps. Play around with "xminimum", too.

There's a separate style property for aligning text called "text_align", and you use the 0.0 to 1.0 ratio to select where it aligns to. So aligning to the left would be said "text_align=0.0"

Lastly, check to see if there's any padding going on with your "button" style (or similar button-esque styles), as I think the menu choices are inherent from buttons.

Fireserpent
Regular
Posts: 57
Joined: Wed May 05, 2010 3:11 pm
Location: Sweden
Contact:

Re: Game menu font alignment

#3 Post by Fireserpent » Tue May 11, 2010 3:41 pm

Thanks for the tip! I got the windows to the size I wanted. :) And the text does align to the left now. Thanks a bunch!

Fireserpent
Regular
Posts: 57
Joined: Wed May 05, 2010 3:11 pm
Location: Sweden
Contact:

Re: Game menu font alignment

#4 Post by Fireserpent » Fri May 14, 2010 12:24 pm

Sorry to bring this up again.. It seems that the text still still not comply.. The buttons and their alignment work fine, but nothing I do seems to affect the text.. I scale the buttons so that they are huge, x and y, I move them around.. Nothing changes the text, and I can't figure out what it is I need to do in order to get it to wrap properly

Image

If you look at the image, the text does align to the left, but it wraps way too early.. It should go all the way across the button/window, and when it wraps, the text should start again at the left, not at the center.

I don't know what code I need to post, because nothing I have except "style.menu_choice.size=17" for the font size seems to have any effect.

Can there be something else in my options.rpy overwriting it?

User avatar
Aleema
Lemma-Class Veteran
Posts: 2677
Joined: Fri May 23, 2008 2:11 pm
Organization: happyB
Tumblr: happybackwards
Contact:

Re: Game menu font alignment

#5 Post by Aleema » Fri May 14, 2010 2:33 pm

Well, the menu choice button gets its styling from the Button style, and the text gets its styling from the Text style, unless you specifically code the menu_choice subset styling to something else. Think of it as a parent-child relationship. Did you add right_padding to your text or buttons, or even the "default" style in your options.rpy?

Fireserpent
Regular
Posts: 57
Joined: Wed May 05, 2010 3:11 pm
Location: Sweden
Contact:

Re: Game menu font alignment

#6 Post by Fireserpent » Fri May 14, 2010 2:49 pm

I looked through all the stuff I've got in the options, and the only things that I have about menues and buttons and the text screen is what you can see below. Also, the regular text screen wraps the text just right.. It's something with the buttons/menu windows I can't seem to figure out.

Code: Select all

    style.menu_choice_button.background = Frame("menu_screen.png",8,8)
    style.menu_choice.size=17
    style.menu_choice.xalign = 10
    style.menu_choice.xminimum=721
    style.menu_window.yalign = 1.0
    style.menu_window.xalign = 0.1                                                                                              
    style.menu_window.bottom_padding = 13
    style.menu_window.left_padding = 28
    style.text_align=0.0
    
    style.menu_choice_button.xminimum=721
    #style.menu_choice_button.left_padding = 28

    style.window.background = Frame("menu_text.png", 12, 12)
    style.window.left_padding = 55
    style.window.right_padding = 55
    style.window.top_padding = 13
    style.window.bottom_padding = 13
    
    style.default.drop_shadow = (1, 1)
    style.default.drop_shadow_color = "#000"

User avatar
Aleema
Lemma-Class Veteran
Posts: 2677
Joined: Fri May 23, 2008 2:11 pm
Organization: happyB
Tumblr: happybackwards
Contact:

Re: Game menu font alignment

#7 Post by Aleema » Fri May 14, 2010 3:39 pm

Figured it out! You also need to define the "xmaximum" to overwrite the default value of only 75% of the screen. So say "style.menu_choice_button.xmaximum = 721", too. Also, I noticed you have a line that says "style.text_align=0.0". You still need to put the style you are modifying to get anything to happen: "style.menu_choice.text_align=0.0"

Fireserpent
Regular
Posts: 57
Joined: Wed May 05, 2010 3:11 pm
Location: Sweden
Contact:

Re: Game menu font alignment

#8 Post by Fireserpent » Fri May 14, 2010 3:44 pm

Yay, it works now! My eyes don't get sore any more every time I look at the menues :o)

Thanks a bunch again. :)

Post Reply

Who is online

Users browsing this forum: isobellesophia