Material Box

Material Box

WEB Design & Material Images

Godot - Skewing a Button with the skew Property

Godot

This code example demonstrates how to skew a Button node using the `skew` property in GDScript.


To skew a Button node, you need to get the style for each state (default, hover, pressed, and focus) using `get_theme_stylebox()`. Then, you can override the `skew` property with `set_skew()` and update the style using `add_theme_stylebox_override()`.

The changes might not be visible if you only apply them to the `normal` state. You may also need to apply them to the `pressed` and `focus` states.

# Create a Button node
var button = Button.new()
add_child(button)
button.set_text("Button")
button.set_size(Vector2(200, 200))

# Default
var normal_style = button.get_theme_stylebox("normal")
normal_style.set_skew(Vector2(0.2, 0))
button.add_theme_stylebox_override("normal", normal_style)

# Hover
var hover_style = button.get_theme_stylebox("hover")
hover_style.set_skew(Vector2(0.2, 0))
button.add_theme_stylebox_override("hover", hover_style)

# Pressed
var pressed_style = button.get_theme_stylebox("pressed")
pressed_style.set_skew(Vector2(0.2, 0))
button.add_theme_stylebox_override("pressed", pressed_style)

# Focus
var focus_style = button.get_theme_stylebox("focus")
focus_style.set_skew(Vector2(0.2, 0))
button.add_theme_stylebox_override("focus", focus_style)

Godot

TitleGodot - Skewing a Button with the skew Property

CategoryGodot

Created

Update

AuthorYousuke.U