From 47234f1bc1a3bb4a1794ed21a1a44ec994fa62e5 Mon Sep 17 00:00:00 2001 From: Fabien Freling Date: Thu, 28 May 2020 19:03:23 +0200 Subject: [PATCH] add DepthButton --- assets/taqin_theme.tres | 21 ++++---- project.godot | 22 +++++++- src/DepthButton.gd | 110 ++++++++++++++++++++++++++++++++++++++++ src/DepthButton.tscn | 34 +++++++++++++ src/Main.gd | 4 +- src/Main.tscn | 40 ++++++++------- src/NewGamePanel.gd | 27 ++++------ src/NewGamePanel.tscn | 82 ++++++++++++++++++++++++------ src/Styles.gd | 26 ++++++++++ 9 files changed, 304 insertions(+), 62 deletions(-) create mode 100644 src/DepthButton.gd create mode 100644 src/DepthButton.tscn create mode 100644 src/Styles.gd diff --git a/assets/taqin_theme.tres b/assets/taqin_theme.tres index e76f89d..e16adfb 100644 --- a/assets/taqin_theme.tres +++ b/assets/taqin_theme.tres @@ -1,4 +1,4 @@ -[gd_resource type="Theme" load_steps=7 format=2] +[gd_resource type="Theme" load_steps=8 format=2] [ext_resource path="res://assets/fonts/Montserrat-ExtraBolt-48.tres" type="DynamicFont" id=1] @@ -9,13 +9,16 @@ bg_color = Color( 0.12549, 0.235294, 0.337255, 1 ) bg_color = Color( 0.12549, 0.235294, 0.337255, 1 ) [sub_resource type="StyleBoxFlat" id=3] -bg_color = Color( 0.0509804, 0.168627, 0.270588, 1 ) +bg_color = Color( 0.12549, 0.235294, 0.337255, 1 ) [sub_resource type="StyleBoxFlat" id=4] -bg_color = Color( 1, 0.831373, 0.639216, 1 ) +bg_color = Color( 0.0509804, 0.168627, 0.270588, 1 ) [sub_resource type="StyleBoxFlat" id=5] bg_color = Color( 1, 0.831373, 0.639216, 1 ) + +[sub_resource type="StyleBoxFlat" id=6] +bg_color = Color( 1, 0.831373, 0.639216, 1 ) border_width_left = 4 border_width_top = 4 border_width_right = 4 @@ -37,9 +40,9 @@ Button/colors/font_color_pressed = Color( 1, 0.92549, 0.839216, 1 ) Button/constants/hseparation = 2 Button/fonts/font = null Button/styles/disabled = null -Button/styles/focus = null -Button/styles/hover = SubResource( 1 ) -Button/styles/normal = SubResource( 2 ) -Button/styles/pressed = SubResource( 3 ) -Panel/styles/panel = SubResource( 4 ) -PopupPanel/styles/panel = SubResource( 5 ) +Button/styles/focus = SubResource( 1 ) +Button/styles/hover = SubResource( 2 ) +Button/styles/normal = SubResource( 3 ) +Button/styles/pressed = SubResource( 4 ) +Panel/styles/panel = SubResource( 5 ) +PopupPanel/styles/panel = SubResource( 6 ) diff --git a/project.godot b/project.godot index 1d576c0..e3db28f 100644 --- a/project.godot +++ b/project.godot @@ -9,6 +9,11 @@ config_version=4 _global_script_classes=[ { +"base": "Control", +"class": "DepthButton", +"language": "GDScript", +"path": "res://src/DepthButton.gd" +}, { "base": "PopupPanel", "class": "NewGamePanel", "language": "GDScript", @@ -25,6 +30,7 @@ _global_script_classes=[ { "path": "res://src/Taquin.gd" } ] _global_script_class_icons={ +"DepthButton": "", "NewGamePanel": "", "Piece": "", "Taquin": "" @@ -37,15 +43,29 @@ run/main_scene="res://src/Main.tscn" config/icon="res://icon.png" run/main_scene.mobile="res://src/MainMobile.tscn" +[autoload] + +Styles="*res://src/Styles.gd" + [display] window/size/resizable=false -window/handheld/orientation.mobile="portrait" +window/dpi/allow_hidpi=true +window/handheld/orientation="portrait" window/size/width.mobile=600 window/size/height.mobile=1200 window/stretch/mode.mobile="2d" window/stretch/aspect.mobile="expand" +[filesystem] + +import/open_asset_import/use_fbx=false + +[gui] + +theme/use_hidpi=true +theme/custom="res://assets/taqin_theme.tres" + [input_devices] pointing/emulate_touch_from_mouse=true diff --git a/src/DepthButton.gd b/src/DepthButton.gd new file mode 100644 index 0000000..0a2787a --- /dev/null +++ b/src/DepthButton.gd @@ -0,0 +1,110 @@ +tool +class_name DepthButton +extends Control + +signal pressed() +signal button_down() +signal button_up() + +export var text := "" +export(Styles.CornerType) var corner_type = Styles.CornerType.SINGLE +export var corner_radius := 10 +export var depth := 10 +export var toggle_mode := false +export var group: ButtonGroup + +var pressed setget set_pressed, is_pressed + +var _pressed_depth := 4 +var _toggled := false +var _toggled_depth := _pressed_depth + 3 + +onready var background := $Background +onready var button: Button = $Button + +func _ready(): + assert(_toggled_depth > _pressed_depth) + + button.text = text + button.margin_bottom = -depth + button.toggle_mode = toggle_mode + button.group = group + button.rect_size.y = rect_size.y - depth + + # + # Styles + # + var background_style := Styles.get_stylebox_flat(background.get_stylebox("panel", "panel"), "button_background", corner_type) + background_style.set_bg_color(Color(1, 1, 1)) + background.set('custom_styles/panel', background_style) + match corner_type: + Styles.CornerType.SINGLE: + background_style.corner_radius_bottom_left = corner_radius + background_style.corner_radius_bottom_right = corner_radius + Styles.CornerType.LEFT: + background_style.corner_radius_bottom_left = corner_radius + background_style.corner_radius_bottom_right = 0 + Styles.CornerType.MIDDLE: + background_style.corner_radius_bottom_left = 0 + background_style.corner_radius_bottom_right = 0 + Styles.CornerType.RIGHT: + background_style.corner_radius_bottom_left = 0 + background_style.corner_radius_bottom_right = corner_radius + + + for style_name in ["normal", "hover", "focus", "pressed"]: + var original_style = button.get_stylebox(style_name) +# print_debug("style for ", style_name, ": ", original_style) + var stylebox := Styles.get_stylebox_flat(original_style, style_name, corner_type) + button.set("custom_styles/%s" % style_name, stylebox) + + match corner_type: + Styles.CornerType.SINGLE: + stylebox.corner_radius_top_left = corner_radius + stylebox.corner_radius_bottom_left = corner_radius + stylebox.corner_radius_top_right = corner_radius + stylebox.corner_radius_bottom_right = corner_radius + Styles.CornerType.LEFT: + stylebox.corner_radius_top_left = corner_radius + stylebox.corner_radius_bottom_left = corner_radius + stylebox.corner_radius_top_right = 0 + stylebox.corner_radius_bottom_right = 0 + Styles.CornerType.MIDDLE: + stylebox.corner_radius_top_left = 0 + stylebox.corner_radius_bottom_left = 0 + stylebox.corner_radius_top_right = 0 + stylebox.corner_radius_bottom_right = 0 + Styles.CornerType.RIGHT: + stylebox.corner_radius_top_left = 0 + stylebox.corner_radius_bottom_left = 0 + stylebox.corner_radius_top_right = corner_radius + stylebox.corner_radius_bottom_right = corner_radius + +func is_pressed() -> bool: + return button.is_pressed() + +func set_pressed(value: bool) -> void: + button.set_pressed(value) + +# +# Signals +# +func _on_Button_button_down(): + button.rect_position.y += depth - _pressed_depth + emit_signal("button_down") + +func _on_Button_button_up(): + button.rect_position.y -= depth - _pressed_depth + emit_signal("button_up") + +func _on_Button_toggled(button_pressed): + var delta = depth - _toggled_depth + if button_pressed: # off -> on + button.rect_position.y += depth - _toggled_depth + else: # on -> off + button.rect_position.y -= depth - _toggled_depth + + _toggled = button_pressed + +func _on_Button_pressed(): + emit_signal("pressed") diff --git a/src/DepthButton.tscn b/src/DepthButton.tscn new file mode 100644 index 0000000..7c31ee7 --- /dev/null +++ b/src/DepthButton.tscn @@ -0,0 +1,34 @@ +[gd_scene load_steps=3 format=2] + +[ext_resource path="res://assets/taqin_theme.tres" type="Theme" id=1] +[ext_resource path="res://src/DepthButton.gd" type="Script" id=2] + +[node name="DepthButton" type="Control"] +anchor_right = 1.0 +anchor_bottom = 1.0 +margin_right = -734.0 +margin_bottom = -464.0 +theme = ExtResource( 1 ) +script = ExtResource( 2 ) +__meta__ = { +"_edit_use_anchors_": false +} +text = "Press Me" + +[node name="Background" type="Panel" parent="."] +anchor_top = 0.5 +anchor_right = 1.0 +anchor_bottom = 1.0 + +[node name="Button" type="Button" parent="."] +anchor_right = 1.0 +anchor_bottom = 1.0 +margin_bottom = -10.0 +text = "Press Me" +__meta__ = { +"_edit_use_anchors_": false +} +[connection signal="button_down" from="Button" to="." method="_on_Button_button_down"] +[connection signal="button_up" from="Button" to="." method="_on_Button_button_up"] +[connection signal="pressed" from="Button" to="." method="_on_Button_pressed"] +[connection signal="toggled" from="Button" to="." method="_on_Button_toggled"] diff --git a/src/Main.gd b/src/Main.gd index 150a3e4..6b252cb 100644 --- a/src/Main.gd +++ b/src/Main.gd @@ -65,7 +65,7 @@ func _on_New_game_pressed(): $NewGamePanel.popup_centered_ratio($NewGamePanel.window_scale_factor) func _on_NewGamePanel_about_to_show(): - $HSplitContainer/Taquin.set_process_input(false) + taquin.set_process_input(false) func _on_NewGamePanel_popup_hide(): - $HSplitContainer/Taquin.set_process_input(true) + taquin.set_process_input(true) diff --git a/src/Main.tscn b/src/Main.tscn index 178ac48..1d5ff86 100644 --- a/src/Main.tscn +++ b/src/Main.tscn @@ -1,8 +1,9 @@ -[gd_scene load_steps=5 format=2] +[gd_scene load_steps=6 format=2] [ext_resource path="res://src/Main.gd" type="Script" id=1] [ext_resource path="res://src/Taquin.tscn" type="PackedScene" id=2] [ext_resource path="res://src/NewGamePanel.tscn" type="PackedScene" id=3] +[ext_resource path="res://src/DepthButton.tscn" type="PackedScene" id=4] [ext_resource path="res://assets/taqin_theme.tres" type="Theme" id=5] [node name="Main" type="Control"] @@ -42,30 +43,35 @@ anchor_bottom = 0.0 margin_right = 540.0 margin_bottom = 560.0 -[node name="VSplitContainer" type="VBoxContainer" parent="HSplitContainer"] -margin_left = 548.0 +[node name="VBoxContainer" type="VBoxContainer" parent="HSplitContainer"] +margin_left = 556.0 margin_right = 984.0 margin_bottom = 560.0 alignment = 1 -[node name="New game" type="Button" parent="HSplitContainer/VSplitContainer"] -margin_top = 233.0 -margin_right = 436.0 -margin_bottom = 278.0 -text = "NEW GAME" +[node name="New Game" parent="HSplitContainer/VBoxContainer" instance=ExtResource( 4 )] +anchor_right = 0.0 +anchor_bottom = 0.0 +margin_top = 206.0 +margin_right = 428.0 +margin_bottom = 276.0 +rect_min_size = Vector2( 0, 70 ) +text = "New Game" -[node name="Hints" type="Button" parent="HSplitContainer/VSplitContainer"] -margin_top = 282.0 -margin_right = 436.0 -margin_bottom = 327.0 -text = "HINTS" +[node name="Hints" parent="HSplitContainer/VBoxContainer" instance=ExtResource( 4 )] +anchor_right = 0.0 +anchor_bottom = 0.0 +margin_top = 284.0 +margin_right = 428.0 +margin_bottom = 354.0 +rect_min_size = Vector2( 0, 70 ) +text = "Hints" [node name="NewGamePanel" parent="." instance=ExtResource( 3 )] -window_scale_factor = 0.9 [connection signal="state_changed" from="HSplitContainer/Taquin" to="." method="_on_Taquin_state_changed"] -[connection signal="pressed" from="HSplitContainer/VSplitContainer/New game" to="." method="_on_New_game_pressed"] -[connection signal="button_down" from="HSplitContainer/VSplitContainer/Hints" to="HSplitContainer/Taquin" method="_on_Hints_button_down"] -[connection signal="button_up" from="HSplitContainer/VSplitContainer/Hints" to="HSplitContainer/Taquin" method="_on_Hints_button_up"] +[connection signal="pressed" from="HSplitContainer/VBoxContainer/New Game" to="." method="_on_New_game_pressed"] +[connection signal="button_down" from="HSplitContainer/VBoxContainer/Hints" to="HSplitContainer/Taquin" method="_on_Hints_button_down"] +[connection signal="button_up" from="HSplitContainer/VBoxContainer/Hints" to="HSplitContainer/Taquin" method="_on_Hints_button_up"] [connection signal="about_to_show" from="NewGamePanel" to="." method="_on_NewGamePanel_about_to_show"] [connection signal="popup_hide" from="NewGamePanel" to="." method="_on_NewGamePanel_popup_hide"] [connection signal="start_triggered" from="NewGamePanel" to="HSplitContainer/Taquin" method="_on_NewGamePanel_start_triggered"] diff --git a/src/NewGamePanel.gd b/src/NewGamePanel.gd index cd25536..52bac88 100644 --- a/src/NewGamePanel.gd +++ b/src/NewGamePanel.gd @@ -15,6 +15,9 @@ var fade_scale_factor = 0.9 onready var popup = $"." onready var panel = $Panel onready var tween = $Tween +onready var easy_button = $Panel/Difficulty/Easy +onready var normal_button = $Panel/Difficulty/Normal +onready var hard_button = $Panel/Difficulty/Hard func _init(): var err = preferences.load(pref_path) @@ -45,11 +48,11 @@ func _on_Cancel_pressed(): fade_out() func _on_Start_pressed(): - if $Panel/HBoxContainer/Easy.pressed: + if easy_button.pressed: preferences.set_value("game", "difficulty", "easy") - if $Panel/HBoxContainer/Normal.pressed: + if normal_button.pressed: preferences.set_value("game", "difficulty", "normal") - if $Panel/HBoxContainer/Hard.pressed: + if hard_button.pressed: preferences.set_value("game", "difficulty", "hard") preferences.save(pref_path) @@ -58,21 +61,10 @@ func _on_Start_pressed(): fade_out() func _on_NewGamePanel_about_to_show(): - $Panel/HBoxContainer/Easy.pressed = false - $Panel/HBoxContainer/Normal.pressed = false - $Panel/HBoxContainer/Hard.pressed = false - var difficulty = preferences.get_value("game", "difficulty", "normal") - match difficulty: - "easy": - $Panel/HBoxContainer/Easy.pressed = true - "normal": - $Panel/HBoxContainer/Normal.pressed = true - "hard": - $Panel/HBoxContainer/Hard.pressed = true - _: - assert("Invalid value") - $Panel/HBoxContainer/Normal.pressed = true + easy_button.pressed = difficulty == "easy" + normal_button.pressed = difficulty == "normal" + hard_button.pressed = difficulty == "hard" $Panel/Start.grab_focus() @@ -83,4 +75,3 @@ func _on_NewGamePanel_about_to_show(): tween.interpolate_property(self, "rect_position", scaled_center_position, original_position, fade_duration, Tween.TRANS_LINEAR, Tween.EASE_IN) tween.interpolate_property(self, "modulate:a", 0.0, 1.0, fade_duration, Tween.TRANS_LINEAR, Tween.EASE_IN) tween.start() - diff --git a/src/NewGamePanel.tscn b/src/NewGamePanel.tscn index 64d731d..08f3b7b 100644 --- a/src/NewGamePanel.tscn +++ b/src/NewGamePanel.tscn @@ -1,8 +1,16 @@ -[gd_scene load_steps=4 format=2] +[gd_scene load_steps=6 format=2] [ext_resource path="res://assets/taqin_theme.tres" type="Theme" id=1] [ext_resource path="res://src/difficulty_buttongroup.tres" type="ButtonGroup" id=2] [ext_resource path="res://src/NewGamePanel.gd" type="Script" id=3] +[ext_resource path="res://src/DepthButton.tscn" type="PackedScene" id=4] + +[sub_resource type="StyleBoxFlat" id=1] +bg_color = Color( 1, 0.831373, 0.639216, 1 ) +corner_radius_top_left = 20 +corner_radius_top_right = 20 +corner_radius_bottom_right = 20 +corner_radius_bottom_left = 20 [node name="NewGamePanel" type="PopupPanel"] anchor_right = 1.0 @@ -21,11 +29,13 @@ margin_left = 4.0 margin_top = 4.0 margin_right = -4.0 margin_bottom = -4.0 +custom_styles/panel = SubResource( 1 ) __meta__ = { "_edit_use_anchors_": false } [node name="HBoxContainer" type="HBoxContainer" parent="Panel"] +visible = false anchor_left = 0.5 anchor_right = 0.5 margin_left = -304.0 @@ -46,8 +56,8 @@ group = ExtResource( 2 ) text = "Easy" [node name="Normal" type="Button" parent="Panel/HBoxContainer"] -margin_left = 204.0 -margin_right = 404.0 +margin_left = 208.0 +margin_right = 408.0 margin_bottom = 70.0 rect_min_size = Vector2( 200, 70 ) toggle_mode = true @@ -55,29 +65,68 @@ group = ExtResource( 2 ) text = "Normal" [node name="Hard" type="Button" parent="Panel/HBoxContainer"] -margin_left = 408.0 -margin_right = 608.0 +margin_left = 416.0 +margin_right = 616.0 margin_bottom = 70.0 rect_min_size = Vector2( 200, 70 ) toggle_mode = true group = ExtResource( 2 ) text = "Hard" -[node name="Start" type="Button" parent="Panel"] -anchor_left = 1.0 -anchor_top = 1.0 +[node name="Difficulty" type="HBoxContainer" parent="Panel"] anchor_right = 1.0 -anchor_bottom = 1.0 -margin_left = -220.0 -margin_top = -90.0 -margin_right = -20.0 -margin_bottom = -20.0 -rect_min_size = Vector2( 200, 70 ) -text = "Start" +margin_top = 20.0 +rect_min_size = Vector2( 0, 70 ) +alignment = 1 __meta__ = { "_edit_use_anchors_": false } +[node name="Easy" parent="Panel/Difficulty" instance=ExtResource( 4 )] +anchor_right = 0.0 +anchor_bottom = 0.0 +margin_left = 200.0 +margin_right = 400.0 +margin_bottom = 80.0 +rect_min_size = Vector2( 200, 80 ) +text = "Easy" +corner_type = 1 +toggle_mode = true +group = ExtResource( 2 ) + +[node name="Normal" parent="Panel/Difficulty" instance=ExtResource( 4 )] +anchor_right = 0.0 +anchor_bottom = 0.0 +margin_left = 408.0 +margin_right = 608.0 +margin_bottom = 80.0 +rect_min_size = Vector2( 200, 80 ) +text = "Normal" +corner_type = 2 +toggle_mode = true +group = ExtResource( 2 ) + +[node name="Hard" parent="Panel/Difficulty" instance=ExtResource( 4 )] +anchor_right = 0.0 +anchor_bottom = 0.0 +margin_left = 616.0 +margin_right = 816.0 +margin_bottom = 80.0 +rect_min_size = Vector2( 200, 80 ) +text = "Hard" +corner_type = 3 +toggle_mode = true +group = ExtResource( 2 ) + +[node name="Start" parent="Panel" instance=ExtResource( 4 )] +anchor_left = 1.0 +anchor_top = 1.0 +margin_left = -235.0 +margin_top = -138.0 +margin_right = -20.0 +margin_bottom = -20.0 +text = "Start" + [node name="Cancel" type="Button" parent="Panel"] anchor_top = 1.0 anchor_bottom = 1.0 @@ -88,6 +137,9 @@ margin_bottom = -20.0 rect_min_size = Vector2( 200, 70 ) text = "Cancel" flat = true +__meta__ = { +"_edit_use_anchors_": false +} [node name="Tween" type="Tween" parent="."] [connection signal="about_to_show" from="." to="." method="_on_NewGamePanel_about_to_show"] diff --git a/src/Styles.gd b/src/Styles.gd new file mode 100644 index 0000000..66a76ee --- /dev/null +++ b/src/Styles.gd @@ -0,0 +1,26 @@ +extends Node + +enum CornerType { + SINGLE, + LEFT, + MIDDLE, + RIGHT +} + +var _rounded_styles = {} + +func _ready(): + pass # Replace with function body. + +func get_key(name: String, corner_type) -> String: + return "%s_%s" % [name, CornerType.keys()[corner_type]] + +func get_stylebox_flat(original: StyleBoxFlat, name: String, corner_type) -> StyleBoxFlat: + var key = get_key(name, corner_type) + if _rounded_styles.has(key): + return _rounded_styles[key] + + if original != null: + return original.duplicate() as StyleBoxFlat + + return StyleBoxFlat.new()