How to set borders on buttons in gdscript?
Asked Answered
T

1

1

I created buttons (with extend Button). How do I use Stylebox to set the borders particularly?

extends Button


# Declare member variables here. Examples:
# var a = 2
# var b = "text"

func init(num,_x,_y):
    text=str(num)
    connect("pressed", self, "ButtonPressed")
    var new_stylebox_normal = get_stylebox("normal").duplicate()
    var stylebox_flat = new_stylebox_normal as StyleBoxFlat
    stylebox_flat.border_width_left=1

    add_stylebox_override("normal",stylebox_flat)
Thermosiphon answered 7/11, 2021 at 3:16 Comment(0)
R
2

The button will have an StyleBoxTexture not a StyleBoxFlat. As a result, if you run the provided code, stylebox_flat will be null. If you want to set a StyleBoxFlat, you will need to create a new one:

var stylebox_flat := StyleBoxFlat.new()
stylebox_flat.border_width_left = 1
add_stylebox_override("normal", stylebox_flat)

Of course, StyleBoxTexture does not have a border_width_left property. If you really want to modify the button style, you would need to add borders to the StyleBoxTexture.

To have borders with a StyleBoxTexture, they must exist in the texture. The documentation for StyleBoxTexture says:

Texture-based nine-patch StyleBox, in a way similar to NinePatchRect. This stylebox performs a 3×3 scaling of a texture, where only the center cell is fully stretched. This makes it possible to design bordered styles regardless of the stylebox's size.

Have a look at how NinePatchRect works for reference, as you would have to the same for StyleBoxTexture.

It is as follows: you create the texture with the borders drawn, and then configure "margins" on the texture that will be considered borders. Then Godot will cut the texture in nine patches which are expanded independently:

  • The top and bottom borders are expanded horizontally.
  • The left and right borders are expanded vertically.
  • The four corners are not expanded at all.
  • The center is expanded to fill.

The properties for that in StyleBoxTexture are: margin_left, margin_right, margin_top, margin_bottom. Yes there are also properties called expand_margin_* but those aren't the ones you want. It is confusing, I know. I wish it had the same names as in NinePatchRect (patch_margin_*).

You will also configure how expanding works ("axis stretch mode"). It can be by stretching the patch of texture, tiling, or a combination of both that ensures the number of tiles is integer. The properties for that are axis_stretch_horizontal and axis_stretch_vertical.

And since we are talking about modifying the button style, we might also be talking about editing a texture from GDScript. My answer for How can I bake 2D sprites in Godot at runtime? should get you started, let me know if you want me to expand on that.


I found this video demonstrating NinePatchRect: NinePatchRect - Godot Tutorial. And here is one showing how to set the StyleBoxTexture: Godot Expanding TextBox and StyleBoxTexture Resource. You are trying to do that, but from code.

In fact, I don't know why are you trying to do this from code. However, know that you can create a new StyleBoxTexture or StyleBoxFlat resource (e.g. in the FileSystem panel, the secondary clicks bring a contextual menu with the option "New Resource…"), edit its properties in the Inspector panel (or with the visual editor in the TextureRegion panel that should appear in the case of StyleBoxTexture).

You could also set the resource to your custom button in the Inspector panel too (or perhaps you could simply load and set the resource from code).

And I remind you there are Theme resources too.


By the way, did you mean to write _init? Godot will try to call an _init method defined in the script as initialization. With the caveat that the _init for scripts attached to nodes must have no parameters (as there are none passed when instancing the scene, nor there is a way to pass any).

Rickrickard answered 7/11, 2021 at 4:10 Comment(1)
Its init() rather than _init(). Init() has no trouble accepting arguments. I tried it with run() but maybe poor choice of name and it wouldn't recognize the function.Thermosiphon

© 2022 - 2024 — McMap. All rights reserved.