Material Box

Material Box

WEBデザイン & フリー素材

Godot - Buttonに影を付ける

Godot

GDScriptからButtonノードに影を付ける方法とコード例です。


Buttonノードに影を付けるにはget_theme_stylebox()でデフォルト時、カーソルのホバー時、押された時、フォーカス時、それぞれのスタイルを取得し、set_shadow_color()で色、set_shadow_size()でサイズ、set_shadow_offset()で位置を指定し、add_theme_stylebox_override()でボタンを更新します。

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

# 通常
var normal_style = button.get_theme_stylebox("normal")
normal_style.set_shadow_color(Color("#000", 1))
normal_style.set_shadow_size(1)
normal_style.set_shadow_offset(Vector2(10, 10))
button.add_theme_stylebox_override("normal", normal_style)
	
# ホバー時
var hover_style = button.get_theme_stylebox("hover")
hover_style.set_shadow_color(Color("#000", 1))
hover_style.set_shadow_size(1)
hover_style.set_shadow_offset(Vector2(10, 10))
button.add_theme_stylebox_override("hover", hover_style)
	
# 押された時
var pressed_style = button.get_theme_stylebox("pressed")
pressed_style.set_shadow_color(Color("#000", 1))
pressed_style.set_shadow_size(1)
pressed_style.set_shadow_offset(Vector2(10, 10))
button.add_theme_stylebox_override("pressed", pressed_style)
	
# フォーカス時
var focus_style = button.get_theme_stylebox("focus")
focus_style.set_shadow_color(Color("#000", 1))
focus_style.set_shadow_size(1)
focus_style.set_shadow_offset(Vector2(10, 10))
button.add_theme_stylebox_override("focus", focus_style)

Buttonノードはデフォルトで背景色が透過されています。
透過させない場合は、set_bg_color()で背景色を更新します。

normal_style.set_bg_color(Color("#000", 1))

Godot

TitleGodot - Buttonに影を付ける

CategoryGodot

Created

Update

AuthorYousuke.U