add DepthButton

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/focus = SubResource( 1 )
-Button/styles/hover = SubResource( 1 )
+Button/styles/hover = SubResource( 2 )
-Button/styles/normal = SubResource( 2 )
+Button/styles/normal = SubResource( 3 )
-Button/styles/pressed = SubResource( 3 )
+Button/styles/pressed = SubResource( 4 )
-Panel/styles/panel = SubResource( 4 )
+Panel/styles/panel = SubResource( 5 )
-PopupPanel/styles/panel = SubResource( 5 )
+PopupPanel/styles/panel = SubResource( 6 )

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

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

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

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)

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"]
+[node name="VBoxContainer" type="VBoxContainer" parent="HSplitContainer"]
-margin_left = 548.0
+margin_left = 556.0
 margin_right = 984.0
 margin_bottom = 560.0
 alignment = 1
 
-[node name="New game" type="Button" parent="HSplitContainer/VSplitContainer"]
+[node name="New Game" parent="HSplitContainer/VBoxContainer" instance=ExtResource( 4 )]
-margin_top = 233.0
+anchor_right = 0.0
-margin_right = 436.0
+anchor_bottom = 0.0
-margin_bottom = 278.0
+margin_top = 206.0
-text = "NEW GAME"
+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"]
+[node name="Hints" parent="HSplitContainer/VBoxContainer" instance=ExtResource( 4 )]
-margin_top = 282.0
+anchor_right = 0.0
-margin_right = 436.0
+anchor_bottom = 0.0
-margin_bottom = 327.0
+margin_top = 284.0
-text = "HINTS"
+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="pressed" from="HSplitContainer/VBoxContainer/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_down" from="HSplitContainer/VBoxContainer/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="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"]

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_button.pressed = difficulty == "easy"
-		"easy":
+	normal_button.pressed = difficulty == "normal"
-			$Panel/HBoxContainer/Easy.pressed = true
+	hard_button.pressed = difficulty == "hard"
-		"normal":
-			$Panel/HBoxContainer/Normal.pressed = true
-		"hard":
-			$Panel/HBoxContainer/Hard.pressed = true
-		_:
-			assert("Invalid value")
-			$Panel/HBoxContainer/Normal.pressed = true
 
 	$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()
-

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_left = 208.0
-margin_right = 404.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_left = 416.0
-margin_right = 608.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"]
+[node name="Difficulty" type="HBoxContainer" parent="Panel"]
-anchor_left = 1.0
-anchor_top = 1.0
 anchor_right = 1.0
-anchor_bottom = 1.0
+margin_top = 20.0
-margin_left = -220.0
+rect_min_size = Vector2( 0, 70 )
-margin_top = -90.0
+alignment = 1
-margin_right = -20.0
-margin_bottom = -20.0
-rect_min_size = Vector2( 200, 70 )
-text = "Start"
 __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"]

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