diff --git a/gui/theming_override/README.md b/gui/theming_override/README.md index 5c817431..1ce99bca 100644 --- a/gui/theming_override/README.md +++ b/gui/theming_override/README.md @@ -1,13 +1,13 @@ -# GUI Theming Override Demo +# GUI Theming Override Demonstrates how to override GUI colors and styleboxes at runtime. Language: GDScript -Renderer: GLES 2 +Renderer: Compatibility Check out this demo on the asset library: https://godotengine.org/asset-library/asset/786 ## Screenshots -![Screenshot](screenshots/theming_override.png) +![Screenshot](screenshots/theming_override.webp) diff --git a/gui/theming_override/icon.png.import b/gui/theming_override/icon.png.import index 889af9df..4ec55648 100644 --- a/gui/theming_override/icon.png.import +++ b/gui/theming_override/icon.png.import @@ -1,8 +1,9 @@ [remap] importer="texture" -type="StreamTexture2D" -path="res://.godot/imported/icon.png-487276ed1e3a0c39cad0279d744ee560.stex" +type="CompressedTexture2D" +uid="uid://7wt6l3j3m4hn" +path="res://.godot/imported/icon.png-487276ed1e3a0c39cad0279d744ee560.ctex" metadata={ "vram_texture": false } @@ -10,26 +11,24 @@ metadata={ [deps] source_file="res://icon.png" -dest_files=["res://.godot/imported/icon.png-487276ed1e3a0c39cad0279d744ee560.stex"] +dest_files=["res://.godot/imported/icon.png-487276ed1e3a0c39cad0279d744ee560.ctex"] [params] compress/mode=0 compress/lossy_quality=0.7 -compress/hdr_mode=0 +compress/hdr_compression=1 compress/bptc_ldr=0 compress/normal_map=0 -flags/repeat=0 -flags/filter=true -flags/mipmaps=false -flags/anisotropic=false -flags/srgb=2 +compress/channel_pack=0 +mipmaps/generate=false +mipmaps/limit=-1 +roughness/mode=0 +roughness/src_normal="" process/fix_alpha_border=true process/premult_alpha=false -process/HDR_as_SRGB=false -process/invert_color=false process/normal_map_invert_y=false -stream=false -size_limit=0 -detect_3d=true -svg/scale=1.0 +process/hdr_as_srgb=false +process/hdr_clamp_exposure=false +process/size_limit=0 +detect_3d/compress_to=1 diff --git a/gui/theming_override/project.godot b/gui/theming_override/project.godot index f9d8880e..1574d146 100644 --- a/gui/theming_override/project.godot +++ b/gui/theming_override/project.godot @@ -6,21 +6,26 @@ ; [section] ; section goes between [] ; param=value ; assign values to parameters -config_version=4 +config_version=5 [application] -config/name="GUI Theming Override Demo" +config/name="GUI Theming Override" config/description="Demonstrates how to override GUI colors and styleboxes at runtime." run/main_scene="res://test.tscn" +config/features=PackedStringArray("4.0") +run/low_processor_mode=true config/icon="res://icon.png" [display] window/size/viewport_height=576 +window/vsync/vsync_mode=0 window/stretch/mode="canvas_items" window/stretch/aspect="expand" [rendering] +renderer/rendering_method="gl_compatibility" +renderer/rendering_method.mobile="gl_compatibility" environment/defaults/default_clear_color=Color(0.133333, 0.133333, 0.133333, 1) diff --git a/gui/theming_override/screenshots/.gdignore b/gui/theming_override/screenshots/.gdignore new file mode 100644 index 00000000..e69de29b diff --git a/gui/theming_override/screenshots/theming_override.png b/gui/theming_override/screenshots/theming_override.png deleted file mode 100644 index a081b8c0..00000000 Binary files a/gui/theming_override/screenshots/theming_override.png and /dev/null differ diff --git a/gui/theming_override/screenshots/theming_override.png.import b/gui/theming_override/screenshots/theming_override.png.import deleted file mode 100644 index b82c0998..00000000 --- a/gui/theming_override/screenshots/theming_override.png.import +++ /dev/null @@ -1,35 +0,0 @@ -[remap] - -importer="texture" -type="StreamTexture2D" -path="res://.godot/imported/theming_override.png-fd290b6e357e98ef694c719db436e418.stex" -metadata={ -"vram_texture": false -} - -[deps] - -source_file="res://screenshots/theming_override.png" -dest_files=["res://.godot/imported/theming_override.png-fd290b6e357e98ef694c719db436e418.stex"] - -[params] - -compress/mode=0 -compress/lossy_quality=0.7 -compress/hdr_mode=0 -compress/bptc_ldr=0 -compress/normal_map=0 -flags/repeat=0 -flags/filter=true -flags/mipmaps=false -flags/anisotropic=false -flags/srgb=2 -process/fix_alpha_border=true -process/premult_alpha=false -process/HDR_as_SRGB=false -process/invert_color=false -process/normal_map_invert_y=false -stream=false -size_limit=0 -detect_3d=true -svg/scale=1.0 diff --git a/gui/theming_override/screenshots/theming_override.webp b/gui/theming_override/screenshots/theming_override.webp new file mode 100644 index 00000000..2e483e0f Binary files /dev/null and b/gui/theming_override/screenshots/theming_override.webp differ diff --git a/gui/theming_override/test.gd b/gui/theming_override/test.gd index cc02bda0..f2fa71e4 100644 --- a/gui/theming_override/test.gd +++ b/gui/theming_override/test.gd @@ -2,15 +2,13 @@ extends Control # This script demonstrates how to alter StyleBoxes at runtime. # Custom theme item properties aren't considered Object properties per se. -# This means that you should use `add_stylebox_override("normal", ...)` +# This means that you should use `add_theme_stylebox_override("normal", ...)` # instead of `set("custom_styles/normal", ...)`. -@onready var label = $VBoxContainer/Label -@onready var button = $VBoxContainer/Button -@onready var button2 = $VBoxContainer/Button2 -@onready var reset_all_button = $VBoxContainer/ResetAllButton -# Save the label color so it can be reset. -@onready var default_label_color = label.get_color("font_color") +@onready var label = $Panel/MarginContainer/VBoxContainer/Label +@onready var button = $Panel/MarginContainer/VBoxContainer/Button +@onready var button2 = $Panel/MarginContainer/VBoxContainer/Button2 +@onready var reset_all_button = $Panel/MarginContainer/VBoxContainer/ResetAllButton func _ready(): # Focus the first button automatically for keyboard/controller-friendly navigation. @@ -22,46 +20,42 @@ func _on_button_pressed(): # to get a correct appearance when the button is hovered or pressed. # We can't use a single StyleBox for all of them as these have different # background colors. - var new_stylebox_normal = button.get_stylebox("normal").duplicate() + var new_stylebox_normal = button.get_theme_stylebox("normal").duplicate() new_stylebox_normal.border_color = Color(1, 1, 0) - var new_stylebox_hover = button.get_stylebox("hover").duplicate() + var new_stylebox_hover = button.get_theme_stylebox("hover").duplicate() new_stylebox_hover.border_color = Color(1, 1, 0) - var new_stylebox_pressed = button.get_stylebox("pressed").duplicate() + var new_stylebox_pressed = button.get_theme_stylebox("pressed").duplicate() new_stylebox_pressed.border_color = Color(1, 1, 0) - button.add_stylebox_override("normal", new_stylebox_normal) - button.add_stylebox_override("hover", new_stylebox_hover) - button.add_stylebox_override("pressed", new_stylebox_pressed) + button.add_theme_stylebox_override("normal", new_stylebox_normal) + button.add_theme_stylebox_override("hover", new_stylebox_hover) + button.add_theme_stylebox_override("pressed", new_stylebox_pressed) - label.add_color_override("font_color", Color(1, 1, 0.5)) + label.add_theme_color_override("font_color", Color(1, 1, 0.5)) func _on_button2_pressed(): - var new_stylebox_normal = button2.get_stylebox("normal").duplicate() + var new_stylebox_normal = button2.get_theme_stylebox("normal").duplicate() new_stylebox_normal.border_color = Color(0, 1, 0.5) - var new_stylebox_hover = button2.get_stylebox("hover").duplicate() + var new_stylebox_hover = button2.get_theme_stylebox("hover").duplicate() new_stylebox_hover.border_color = Color(0, 1, 0.5) - var new_stylebox_pressed = button2.get_stylebox("pressed").duplicate() + var new_stylebox_pressed = button2.get_theme_stylebox("pressed").duplicate() new_stylebox_pressed.border_color = Color(0, 1, 0.5) - button2.add_stylebox_override("normal", new_stylebox_normal) - button2.add_stylebox_override("hover", new_stylebox_hover) - button2.add_stylebox_override("pressed", new_stylebox_pressed) + button2.add_theme_stylebox_override("normal", new_stylebox_normal) + button2.add_theme_stylebox_override("hover", new_stylebox_hover) + button2.add_theme_stylebox_override("pressed", new_stylebox_pressed) - label.add_color_override("font_color", Color(0.5, 1, 0.75)) + label.add_theme_color_override("font_color", Color(0.5, 1, 0.75)) func _on_reset_all_button_pressed(): - # Resetting a theme override is done by setting the property to: - # - `null` for fonts, icons, styleboxes, and shaders. - # - `0` for constants. - # - Colors must be reset manually by adding the previous color value as an override. - button.add_stylebox_override("normal", null) - button.add_stylebox_override("hover", null) - button.add_stylebox_override("pressed", null) + button.remove_theme_stylebox_override("normal") + button.remove_theme_stylebox_override("hover") + button.remove_theme_stylebox_override("pressed") - button2.add_stylebox_override("normal", null) - button2.add_stylebox_override("hover", null) - button2.add_stylebox_override("pressed", null) + button2.remove_theme_stylebox_override("normal") + button2.remove_theme_stylebox_override("hover") + button2.remove_theme_stylebox_override("pressed") - label.add_color_override("font_color", default_label_color) + label.remove_theme_color_override("font_color") diff --git a/gui/theming_override/test.tscn b/gui/theming_override/test.tscn index f8aa9903..0381356e 100644 --- a/gui/theming_override/test.tscn +++ b/gui/theming_override/test.tscn @@ -1,11 +1,11 @@ -[gd_scene load_steps=7 format=2] +[gd_scene load_steps=7 format=3 uid="uid://dbk0b4jkfq81v"] -[ext_resource path="res://test.gd" type="Script" id=1] +[ext_resource type="Script" path="res://test.gd" id="1"] -[sub_resource type="StyleBoxFlat" id=1] +[sub_resource type="StyleBoxFlat" id="1"] bg_color = Color(0.16, 0.678, 1, 0.12549) -[sub_resource type="StyleBoxFlat" id=2] +[sub_resource type="StyleBoxFlat" id="2"] bg_color = Color(0.266667, 0.266667, 0.266667, 1) border_width_left = 3 border_width_top = 3 @@ -14,11 +14,7 @@ border_width_bottom = 3 border_color = Color(0.4, 0.4, 0.4, 1) border_blend = true -[sub_resource type="StyleBoxFlat" id=3] -content_offset_left = 20.0 -content_offset_right = 20.0 -content_offset_top = 16.0 -content_offset_bottom = 16.0 +[sub_resource type="StyleBoxFlat" id="3"] bg_color = Color(0.2, 0.2, 0.2, 1) border_width_left = 3 border_width_top = 3 @@ -27,7 +23,7 @@ border_width_bottom = 3 border_color = Color(0.333333, 0.333333, 0.333333, 1) border_blend = true -[sub_resource type="StyleBoxFlat" id=4] +[sub_resource type="StyleBoxFlat" id="4"] bg_color = Color(0.133333, 0.133333, 0.133333, 1) border_width_left = 3 border_width_top = 3 @@ -36,7 +32,7 @@ border_width_bottom = 3 border_color = Color(0.266667, 0.266667, 0.266667, 1) border_blend = true -[sub_resource type="Theme" id=5] +[sub_resource type="Theme" id="5"] Button/colors/font_color = Color(0.88, 0.88, 0.88, 1) Button/colors/font_color_disabled = Color(0.9, 0.9, 0.9, 0.2) Button/colors/font_color_hover = Color(0.94, 0.94, 0.94, 1) @@ -44,63 +40,69 @@ Button/colors/font_color_pressed = Color(1, 1, 1, 1) Button/constants/hseparation = 2 Button/fonts/font = null Button/styles/disabled = null -Button/styles/focus = SubResource( 1 ) -Button/styles/hover = SubResource( 2 ) -Button/styles/normal = SubResource( 3 ) -Button/styles/pressed = SubResource( 4 ) +Button/styles/focus = SubResource("1") +Button/styles/hover = SubResource("2") +Button/styles/normal = SubResource("3") +Button/styles/pressed = SubResource("4") [node name="Control" type="Control"] +layout_mode = 3 +anchors_preset = 15 anchor_right = 1.0 anchor_bottom = 1.0 -theme = SubResource( 5 ) -script = ExtResource( 1 ) -__meta__ = { -"_edit_use_anchors_": false -} +grow_horizontal = 2 +grow_vertical = 2 +theme = SubResource("5") +script = ExtResource("1") -[node name="VBoxContainer" type="VBoxContainer" parent="."] +[node name="Panel" type="PanelContainer" parent="."] +layout_mode = 1 +anchors_preset = 8 anchor_left = 0.5 anchor_top = 0.5 anchor_right = 0.5 anchor_bottom = 0.5 -offset_left = -75.5 -offset_top = -157.0 -offset_right = 75.5 -offset_bottom = 89.0 -custom_constants/separation = 20 -__meta__ = { -"_edit_use_anchors_": false -} +offset_left = -110.0 +offset_top = -127.0 +offset_right = 110.0 +offset_bottom = 127.0 +grow_horizontal = 2 +grow_vertical = 2 -[node name="Label" type="Label" parent="VBoxContainer"] -offset_right = 151.0 -offset_bottom = 48.0 -rect_min_size = Vector2(0, 48) +[node name="MarginContainer" type="MarginContainer" parent="Panel"] +layout_mode = 2 +theme_override_constants/margin_left = 20 +theme_override_constants/margin_top = 20 +theme_override_constants/margin_right = 20 +theme_override_constants/margin_bottom = 20 + +[node name="VBoxContainer" type="VBoxContainer" parent="Panel/MarginContainer"] +layout_mode = 2 +theme_override_constants/separation = 10 + +[node name="Label" type="Label" parent="Panel/MarginContainer/VBoxContainer"] +layout_mode = 2 text = "GUI Theming Overrides" -align = 1 -valign = 1 +horizontal_alignment = 1 -[node name="Button" type="Button" parent="VBoxContainer"] -offset_top = 68.0 -offset_right = 151.0 -offset_bottom = 114.0 +[node name="HSeparator" type="HSeparator" parent="Panel/MarginContainer/VBoxContainer"] +layout_mode = 2 + +[node name="Button" type="Button" parent="Panel/MarginContainer/VBoxContainer"] +custom_minimum_size = Vector2(0, 48) +layout_mode = 2 text = "Click Me" -[node name="Button2" type="Button" parent="VBoxContainer"] -offset_top = 134.0 -offset_right = 151.0 -offset_bottom = 180.0 +[node name="Button2" type="Button" parent="Panel/MarginContainer/VBoxContainer"] +custom_minimum_size = Vector2(0, 48) +layout_mode = 2 text = "Click Me" -[node name="ResetAllButton" type="Button" parent="VBoxContainer"] -offset_top = 200.0 -offset_right = 151.0 -offset_bottom = 246.0 +[node name="ResetAllButton" type="Button" parent="Panel/MarginContainer/VBoxContainer"] +custom_minimum_size = Vector2(0, 48) +layout_mode = 2 text = "Reset All" -__meta__ = { -"_edit_use_anchors_": false -} -[connection signal="pressed" from="VBoxContainer/Button" to="." method="_on_button_pressed"] -[connection signal="pressed" from="VBoxContainer/Button2" to="." method="_on_button2_pressed"] -[connection signal="pressed" from="VBoxContainer/ResetAllButton" to="." method="_on_reset_all_button_pressed"] +[connection signal="pressed" from="Panel/MarginContainer/VBoxContainer/Button" to="." method="_on_button_pressed"] +[connection signal="pressed" from="Panel/MarginContainer/VBoxContainer/Button2" to="." method="_on_button2_pressed"] +[connection signal="pressed" from="Panel/MarginContainer/VBoxContainer/ResetAllButton" to="." method="_on_reset_all_button_pressed"]