How to center text in a textbutton?

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
newbiemate
Regular
Posts: 85
Joined: Tue Dec 19, 2017 1:36 pm
Contact:

How to center text in a textbutton?

#1 Post by newbiemate »

I've created a textbutton inside a frame:

Code: Select all

frame:
    xalign 0.5
    yalign 0.5
    xmaximum 400
    ymaximum 400

    textbutton "Click me":
        xpos 30
        ypos 30
        text_size 30
But the text 'Click Me' is left-aligned, not centered in the textbox. I tried to use xalign/yalign 0.5 on the textbutton, but this shifts the entire textbutton to someplace else.

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

Re: How to center text in a textbutton?

#2 Post by Imperf3kt »

https://www.renpy.org/doc/html/style_pr ... text_align

Code: Select all

frame:
    xalign 0.5
    yalign 0.5
    xmaximum 400
    ymaximum 400

    textbutton "Click me":
        xpos 30
        ypos 30
        text_size 30
        text_align 0.5
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

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

Re: How to center text in a textbutton?

#3 Post by rayminator »

but if you more then one textbutton that you want to align then best to create your own style

this just a example so is might not cause I'm using textbutton as the style pretext you will have to think what name that you are going to use

Code: Select all

style textbutton_text:
    xpos 30
    ypos 30
    text_size 30
    text_align 0.5

Code: Select all

frame:
    style "textbutton"
    xalign 0.5
    yalign 0.5
    xmaximum 400
    ymaximum 400

    textbutton "Click me" action Jump("Upstairs")

newbiemate
Regular
Posts: 85
Joined: Tue Dec 19, 2017 1:36 pm
Contact:

Re: How to center text in a textbutton?

#4 Post by newbiemate »

Thanks, how about when a background is defined? I just tried the following:

Code: Select all

screen test:
    frame:
        xalign 0.5
        yalign 0.5
        xmaximum 400
        ymaximum 400

        textbutton "Click me":
            text_size 30
            background "images/a.png"
            text_align 0.5
            text_color "#000"
            
label start:
    show screen test
    
    "testing"
And the "Click me" text is not aligned to the center. See screenshot, it is aligned top-left:
renpyt.png
screenshot
(5.45 KiB) Not downloaded yet
Last edited by newbiemate on Fri May 29, 2020 8:38 pm, edited 1 time in total.

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

Re: How to center text in a textbutton?

#5 Post by rayminator »

the thing that you have it twice you have to adjust it the way you want it to be but remove the second text_align 0.5

newbiemate
Regular
Posts: 85
Joined: Tue Dec 19, 2017 1:36 pm
Contact:

Re: How to center text in a textbutton?

#6 Post by newbiemate »

@rayminator sorry that was a typo, but the problem still persists. If you run that same code on your end, do you see the same issue?

Also here is the button image, if anyone wants to try it out:
a.png
a.png
a.png (256 Bytes) Viewed 533 times

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

Re: How to center text in a textbutton?

#7 Post by rayminator »

newbiemate wrote: Fri May 29, 2020 8:38 pm @rayminator sorry that was a typo, but the problem still persists. If you run that same code on your end, do you see the same issue?

Also here is the button image, if anyone wants to try it out: a.png
so you don't understand what Imperf3kt and I said then you have start learning python we have told how to do it but you not listening

this part here shows that you have it twice so it will conflict with each other

Code: Select all

textbutton "Click me":
            text_size 30
            background "images/a.png"
            text_align 0.5
            text_color "#000"
but my way will allow you to have it that if you have more than 1 one textbutton inside a frame

we won't help you all the way cause that will not help you to learn how to do things in renpy

even when Imperf3kt tried to help me with gallery even when he tried to help there was something missing that he forgot about this import
$ persistent.Chiegoodending = True thisng is

so figure it out like I have too

newbiemate
Regular
Posts: 85
Joined: Tue Dec 19, 2017 1:36 pm
Contact:

Re: How to center text in a textbutton?

#8 Post by newbiemate »

@rayminator I don't quite understand the hostility here, I tried both ways and I am saying it does not give the right results. Have you tried the code snippet, because your own code gives an error.... Also, I already said the "text_align 0.5" showing up twice was a typo, and fixing that still does not solve the issue I'm having (even the quoted code snippet you posted shows it once).

This is literally the code snippets I have tested and ran, includes yours and @@Imperf3kt's way:

Code: Select all

style textbutton:
    xpos 30
    ypos 30
    text_align 0.5
    
screen test:
    frame:
        textbutton "Click me":
            style "textbutton"
            xalign 0.5
            yalign 0.5
            text_size 30
            background "images/a.png"
            
label start:
    show screen test
    "testing"
And also tried @Imperf3kt way, of just adding the text_align:

Code: Select all

screen test:

    frame:
        xalign 0.5
        yalign 0.5
        xmaximum 200
        ymaximum 50

        textbutton "Click me":
            xpos 30
            ypos 30
            text_size 30
            text_align 0.5
            background "images/a.png"
            
label start:
    show screen test
    "testing"
Which part exactly is incorrect here?

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

Re: How to center text in a textbutton?

#9 Post by rayminator »

the thing is that you don't understand I have used the pretext of the textbutton you have to rename the style to a different name instead of using textbutton just leave the text the way it is I will point you in the right direction but not fully you have to learn how to do thing if I have to do everything foe you then you will never learn how to it's just that you don't understand you are new to python and I will suggest that you learn python it will take awhile but it's the best way to learn what other members telling you to do

it's just that Imperf3kt and I tell you what you need to do that you don't understand what we are saying to you then you need to learn more about python then every it's not easy but if you know anything about php and html or css then you should know a little bit of python

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

Re: How to center text in a textbutton?

#10 Post by Imperf3kt »

In your image, the background image is larger than the button. It isn't aligned top-left, it's just that the image extends beyond the boundaries of the button.

At least, I think.
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

User avatar
MaydohMaydoh
Regular
Posts: 165
Joined: Mon Jul 09, 2018 5:49 am
Projects: Fuwa Fuwa Panic
Tumblr: maydohmaydoh
Location: The Satellite of Love
Contact:

Re: How to center text in a textbutton?

#11 Post by MaydohMaydoh »

Like imperf3kt said, the button size isn't the same size as the image. You need to change the size using xysize property. Also text_align is wrong. Textbutton itself doesn't take text_align property. It also only positions the text within the text displayable not the container. What you want is to give the align property to the text, which in this case, is also text_align.

Code: Select all

textbutton "Click me":
            xpos 30
            ypos 30
            xysize (200, 50)
            text_size 30
            text_align (0.5, 0.5)
            background "images/a.png"

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

Re: How to center text in a textbutton?

#12 Post by Imperf3kt »

MaydohMaydoh wrote: Sat May 30, 2020 1:03 pm Also text_align is wrong. Textbutton itself doesn't take text_align property. It also only positions the text within the text displayable not the container. What you want is to give the align property to the text, which in this case, is also text_align.

Code: Select all

textbutton "Click me":
            xpos 30
            ypos 30
            xysize (200, 50)
            text_size 30
            text_align (0.5, 0.5)
            background "images/a.png"
You shouldn't need to do it like that.

According to https://www.renpy.org/doc/html/screens.html#textbutton it takes
text_-
Other properties prefixed with text have this prefix stripped, and are then passed to the text displayable
. Which has a link to https://www.renpy.org/doc/html/screens.html#text
In which you will find https://www.renpy.org/doc/html/style_pr ... text_align

According to that, text_align is given a single float value, so text_align 0.5 should be just as valid as text_align(0.5, 0.5)
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

strayerror
Regular
Posts: 159
Joined: Fri Jan 04, 2019 3:44 pm
Contact:

Re: How to center text in a textbutton?

#13 Post by strayerror »

How you tackle this hinges on what it is you actually want:
- Do you want a button that's the size of the background image, with the text centred on it?
- Or do you want a button that's the size of your text with the background adjusted to fill it?

If the first, then MaydohMaydoh's solution along with Imperf3kt's note about text_align covers it well, however it does require that the size be hard-coded. Sometimes that's not desirable, so here's an alternative along with a brief note on each part.

Code: Select all

    button:                       # a generic button that just acts as a container for any displayables
        align (.5, .5)            # this aligns the button centrally within the container
        has fixed                 # use an explicit fixed so we can shrinkwrap the children
        fit_first True            # this shrinks the fixed from taking as much space as possible, to only being the size of it's first child
        add 'images/a.png'        # the first child, the background image
        text 'Click me please!':  # the text becomes the second child
            align (.5, .5)        # this aligns the text disp centrally within the fixed
            color '000'
            size 25               # lowered to demonstrate text wrapping
            text_align 0.5        # this ensures the text is aligned centrally within the text displayable itself (i.e. when wrapping)
If the second possibility, then it's necessary to do a bit of preparation of your background image before we get to the button. In order that the background be sized appropriately for the space to be filled we must convert it to a Frame. There are good docs on this which I encourage you to read, however the tl;dr is that it can stretch the middle on an image without distorting the sides, and will then expand to fill whatever rectangular space to which it is applied.

Code: Select all

# The four numerical arguments are pixels from each edge to be preserved, as the example image is a solid color, zero will suffice.
# If using a solid colour in production, then using a Solid displayable would be preferred, this is left as an exercise for the reader.
image bg = Frame('images/a.png', 0, 0, 0, 0)
With the frame image defined, we can now use it with a normal textbutton to achieve the desired effect:

Code: Select all

    textbutton 'Click me!':
        background 'bg'   # the frame we just defined
        align (.5, .5)    # this aligns the textbutton centrally within the container
        text_color '000'
        text_size 30
        text_align 0.5    # this ensures the text is aligned centrally within the text displayable itself (i.e. when wrapping)
How that helps. Bare in mind this is still just scratching the surface and reading the docs will give much better insight as to how far stuff like this can be taken. :)

---

Combined compare/contrast example:

Code: Select all

image bg = Frame('images/a.png', 0, 0, 0, 0)

screen example():
    button:                       # a generic button that just acts as a container for any displayables
        align (.5, .4)            # this aligns the button centrally within the container
        has fixed                 # use an explicit fixed so we can shrinkwrap the children
        fit_first True            # this shrinks the fixed from taking as much space as possible, to only being the size of it's first child
        add 'images/a.png'        # the first child, the background image
        text 'Click me!':         # the text becomes the second child
            align (.5, .5)        # this aligns the text disp centrally within the fixed
            color '000'
            size 30
            text_align 0.5        # this ensures the text is aligned centrally within the text displayable itself (i.e. when wrapping)

    textbutton 'Click me!':
        background 'bg'           # the frame we just defined
        align (.5, .6)            # this aligns the textbutton centrally within the container
        text_color '000'
        text_size 30
        text_align 0.5            # this ensures the text is aligned centrally within the text displayable itself (i.e. when wrapping)

Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot], Google [Bot], Ocelot