Material Box

Material Box

WEBデザイン & フリー素材

Godot - Buttonを円形にする

Godot

GDScriptから円形のButtonノードを作成する方法とコード例です。


Buttonノードを円形にするには、デフォルト時、カーソルのホバー時、押された時、フォーカス時、それぞれにadd_theme_stylebox_override()にて各要素に新しくStyleBoxFlatを指定します。
変数に格納したStyleBoxFlatの値は変更が反映されますので、同じ変数を利用せずに個別に作成します。
set_corner_radius_all()を利用する事で角の丸みを調節可能です。
円形にする場合、Buttonのサイズの半分の値をset_corner_radius_all()にて指定します。

# Buttonノードを作成する
var button = Button.new()
add_child(button)
button.set_text("Button")
button.set_size(Vector2(200, 200))

# デフォルト
var normal_style = StyleBoxFlat.new()
normal_style.set_bg_color(Color("#696969", 1))
normal_style.set_corner_radius_all(100)
button.add_theme_stylebox_override("normal", normal_style)

# ホバー時
var hover_style = StyleBoxFlat.new()
hover_style.set_bg_color(Color("#000000", 1))
hover_style.set_corner_radius_all(100)
button.add_theme_stylebox_override("hover", hover_style)

# 押された時
var pressed_style = StyleBoxFlat.new()
pressed_style.set_bg_color(Color("#696969", 1))
pressed_style.set_corner_radius_all(100)
button.add_theme_stylebox_override("pressed", pressed_style)
	
# フォーカス時
var focus_style = StyleBoxFlat.new()
focus_style.set_border_width_all(2)
focus_style.set_border_color(Color("#fff", 1))
focus_style.set_bg_color(Color("#696969", 1))
focus_style.set_corner_radius_all(100)
button.add_theme_stylebox_override("focus", focus_style)

Godot

TitleGodot - Buttonを円形にする

CategoryGodot

Created

Update

AuthorYousuke.U