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)