I am currently writing a class as a derivative to the Button class, creating "Text Buttons" in their stead. However, while I was testing the Button class itself, I seem to be missing something about the Button's surface scaling, rather than scaling both the Text and the Button.

How do I actually make the Button fit to its text?

Relevant codeblock:

        self.button = Button(text = self.textinput,
                             color = color.rgba(0,255,0,255),
                             text_color = color.rgb(self.unhovered[0],
                                                    self.unhovered[1],
                                                    self.unhovered[2]),
                             x = self.position[0],
                             y = self.position[1],
                             on_click = self.click)
        self.button.fit_to_text()

Result:

All related code:

window.fullscreen = True
window.color = rgb(0,0,0)

Text.size = 0.06
Text.default_font = 'font/silver.ttf'
Text.default_resolution = WINDOW_HEIGHT * 2 * Text.size

class TextButton():
    def __init__(self, textinput = str, position = tuple, hovered = tuple, unhovered = tuple, *click):
        self.position = position
        self.textinput = textinput
        self.hovered = hovered
        self.unhovered = unhovered
        self.click = click
        self.button = Button(text = self.textinput,
                             color = color.rgba(0,255,0,255),
                             text_color = color.rgb(self.unhovered[0],
                                                    self.unhovered[1],
                                                    self.unhovered[2]),
                             x = self.position[0],
                             y = self.position[1],
                             on_click = self.click)
        
        self.button.fit_to_text()
        self.button.on_mouse_enter = Func(setattr,
                                        self.button,
                                        'text_color',
                                        color.rgb(self.hovered[0],
                                                  self.hovered[1],
                                                  self.hovered[2]))
        self.button.on_mouse_exit = Func(setattr,
                                        self.button,
                                        'text_color',
                                        color.rgb(self.unhovered[0],
                                                  self.unhovered[1],
                                                  self.unhovered[2]))
        
        self.button.on_click = self.click
        
        
button = TextButton('testbutton',
                    position = (0, 0),
                    hovered = (255, 0, 0),
                    unhovered = (255, 255, 255))

Expected result:

CodePudding user response：

I think Text.size = 0.06 is the culprit here. There's some padding around the text built in when using fit_to_text() and that becomes too large when changing the default text size.

Since you made the text size more than twice as big, the padding will also be more than twice as large, because it takes the Text.size into consideration. I also think you font is kind of small or something, since it looks smaller than the default one. Doing self.button.text_entity.scale *= 2 might do the trick for just making the text larger.

If you just want to increase the size of the button, you could do self.button.scale *= 2 on the next line.

Here's the source code for Button.fit_to_text():

def fit_to_text(self, radius=.1):
        if not self.text_entity.text or self.text_entity.text == '':
            return

        self.text_entity.world_parent = scene
        self.scale = (
            (self.text_entity.width * Text.size * 2)   self.text_entity.height * Text.size * 2,
            self.text_entity.height * Text.size * 2 * 2
            )
        self.model = Quad(aspect=self.scale_x/self.scale_y, radius=radius)
        self.text_entity.world_parent = self

As you can see, it's not very complicated and some of the complexity comes from keeping the round corners and adding padding around the text. If all you want is to add a background to some text, that would be easy to implement like this:

b = Text('some text')
bg = Entity(model='quad', parent=b, origin=b.origin, scale=(b.width, b.height), color=color.black, z=.1)

CodePudding user response：

The Button class in Ursina has a method called scale_to_text() which can be used to scale a button to fit its text.

If the results of fit_to_text() are unexpected, you can try using scale_to_text() instead.