CodingPirates/godot-demo-projects
1
0
Fork 0
mirror of https://github.com/godotengine/godot-demo-projects.git synced 2025-12-16 13:30:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update and improve GUI Theming Override demo (#817)

Browse Source
This commit is contained in:
Hugo Locurcio
2023-01-17 21:39:28 +01:00
committed by GitHub
parent 55934859e3
commit bf898dc717
9 changed files with 105 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
gui/theming_override/README.md
View File

@@ -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)

29
gui/theming_override/icon.png.import
View File

@@ -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

9
gui/theming_override/project.godot
View File

@@ -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)

0
gui/theming_override/screenshots/.gdignore Normal file
View File

BIN
gui/theming_override/screenshots/theming_override.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.4 KiB

35
gui/theming_override/screenshots/theming_override.png.import
View File

@@ -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

BIN
gui/theming_override/screenshots/theming_override.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

58
gui/theming_override/test.gd
View File

@@ -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")

108
gui/theming_override/test.tscn
View File

@@ -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"]