2D Platformer UI Update

Co-authored-by: Aaron Franke <arnfranke@yahoo.com>

2d/platformer/assets/theme/user_interface.tres

@@ -63,6 +63,7 @@ border_width_bottom = 1
 border_color = Color( 0.41, 0.61, 0.91, 1 )
 
 [sub_resource type="DynamicFont" id=6]
+size = 30
 font_data = ExtResource( 1 )
 
 [resource]
@@ -70,7 +71,7 @@ default_font = SubResource( 6 )
 Button/colors/font_color = Color( 0.8, 0.8075, 0.8275, 1 )
 Button/colors/font_color_disabled = Color( 1, 1, 1, 0.3 )
 Button/colors/font_color_hover = Color( 0.88, 0.8845, 0.8965, 1 )
-Button/colors/font_color_pressed = Color( 0.41, 0.61, 0.91, 1 )
+Button/colors/font_color_pressed = Color( 0.411765, 0.611765, 0.909804, 1 )
 Button/colors/icon_color_hover = Color( 1.15, 1.15, 1.15, 1 )
 Button/colors/icon_color_pressed = Color( 0.4715, 0.7015, 1.0465, 1 )
 Button/constants/hseparation = 2

2d/platformer/src/Actors/Player.gd

@@ -2,6 +2,9 @@ class_name Player
 extends Actor
 
 
+# warning-ignore:unused_signal
+signal collect_coin()
+
 const FLOOR_DETECT_DISTANCE = 20.0
 
 export(String) var action_suffix = ""

2d/platformer/src/Objects/Coin.gd

@@ -13,3 +13,4 @@ onready var animation_player = $AnimationPlayer
 # Click the AnimationPlayer node to see the animation timeline.
 func _on_body_entered(_body):
 	animation_player.play("picked")
+	_body.emit_signal("collect_coin")

2d/platformer/src/Objects/Coin.tscn

@@ -140,6 +140,7 @@ tracks/3/keys = {
 radius = 5.0
 
 [node name="Coin" type="Area2D"]
+monitoring = false
 monitorable = false
 collision_layer = 0
 script = ExtResource( 4 )

2d/platformer/src/UserInterface/CoinsCounter.gd

@@ -0,0 +1,25 @@
+extends Panel
+
+var coins_collected = 0
+
+onready var coins_label = $Label
+
+
+func _ready():
+	coins_label.set_text(str(coins_collected))
+	# Static types are necessary here to avoid warnings.
+	var anim_sprite: AnimatedSprite = $AnimatedSprite
+	anim_sprite.play()
+	# Check if the game is in splitscreen mode by checking the scene root name.
+	if get_tree().get_root().get_child(0).name == "Splitscreen":
+		var _level_node = get_node(@"../../../../Black/SplitContainer/ViewportContainer1/Viewport/Level")
+		_level_node.get_node("Player1").connect("collect_coin", self, "_collect_coin")
+		_level_node.get_node("Player2").connect("collect_coin", self, "_collect_coin")
+	else:
+		var _player_path = get_node(@"../../../../Level/Player")
+		_player_path.connect("collect_coin", self, "_collect_coin")
+
+
+func _collect_coin():
+	coins_collected += 1
+	coins_label.set_text(str(coins_collected))

2d/platformer/src/UserInterface/CoinsCounter.tscn

@@ -0,0 +1,63 @@
+[gd_scene load_steps=10 format=2]
+
+[ext_resource path="res://assets/theme/user_interface.tres" type="Theme" id=1]
+[ext_resource path="res://assets/art/coin/coin.png" type="Texture" id=2]
+[ext_resource path="res://src/UserInterface/CoinsCounter.gd" type="Script" id=3]
+
+[sub_resource type="StyleBoxFlat" id=1]
+bg_color = Color( 0, 0, 0, 0.5 )
+
+[sub_resource type="AtlasTexture" id=2]
+atlas = ExtResource( 2 )
+region = Rect2( 0, 0, 8, 8 )
+
+[sub_resource type="AtlasTexture" id=3]
+atlas = ExtResource( 2 )
+region = Rect2( 8, 0, 8, 8 )
+
+[sub_resource type="AtlasTexture" id=4]
+atlas = ExtResource( 2 )
+region = Rect2( 16, 0, 8, 8 )
+
+[sub_resource type="AtlasTexture" id=5]
+atlas = ExtResource( 2 )
+region = Rect2( 24, 0, 8, 8 )
+
+[sub_resource type="SpriteFrames" id=6]
+animations = [ {
+"frames": [ SubResource( 2 ), SubResource( 3 ), SubResource( 4 ), SubResource( 5 ), SubResource( 4 ), SubResource( 3 ) ],
+"loop": true,
+"name": "coin_spinning",
+"speed": 6.5
+} ]
+
+[node name="CoinsCounter" type="Panel"]
+margin_left = 5.0
+margin_top = 5.0
+margin_right = 100.0
+margin_bottom = 45.0
+rect_min_size = Vector2( 100, 45 )
+theme = ExtResource( 1 )
+custom_styles/panel = SubResource( 1 )
+script = ExtResource( 3 )
+__meta__ = {
+"_edit_use_anchors_": false
+}
+
+[node name="Label" type="Label" parent="."]
+anchor_right = 1.0
+anchor_bottom = 1.0
+margin_right = -8.0
+text = "100"
+align = 2
+valign = 1
+autowrap = true
+__meta__ = {
+"_edit_use_anchors_": false
+}
+
+[node name="AnimatedSprite" type="AnimatedSprite" parent="."]
+position = Vector2( 21.5, 22.5 )
+scale = Vector2( 4.375, 4.375 )
+frames = SubResource( 6 )
+animation = "coin_spinning"

2d/platformer/src/UserInterface/PauseMenu.gd

@@ -1,29 +1,58 @@
 extends Control
 
 
-onready var resume_button = $VBoxContainer/ResumeButton
+export(Vector2) var _start_position = Vector2(0, -20)
+export(Vector2) var _end_position = Vector2.ZERO
+export(float) var fade_in_duration = 0.3
+export(float) var fade_out_duration = 0.2
+
+onready var center_cont = $ColorRect/CenterContainer
+onready var resume_button = center_cont.get_node(@"VBoxContainer/ResumeButton")
+
+onready var root = get_tree().get_root()
+onready var scene_root = root.get_child(root.get_child_count() - 1)
+onready var tween = $Tween
 
 
 func _ready():
-	visible = false
+	hide()
 
 
 func close():
-	visible = false
+	get_tree().paused = false
+	# Tween's interpolate_property has these arguments:
+	# (Target object, "Property:OptionalSubProperty", From value, To value,
+	# Tween duration, Transition type, Easing type, Optional delay)
+	tween.interpolate_property(self, "modulate:a", 1.0, 0.0,
+			fade_out_duration, Tween.TRANS_LINEAR, Tween.EASE_IN)
+	tween.interpolate_property(center_cont, "rect_position",
+			_end_position, _start_position, fade_out_duration,
+			Tween.TRANS_CUBIC, Tween.EASE_OUT)
+	tween.start()
 
 
 func open():
-	visible = true
+	show()
 	resume_button.grab_focus()
 
+	tween.interpolate_property(self, "modulate:a", 0.0, 1.0,
+			fade_in_duration, Tween.TRANS_LINEAR, Tween.EASE_IN)
+	tween.interpolate_property(center_cont, "rect_position",
+			_start_position, _end_position, fade_in_duration,
+			Tween.TRANS_CUBIC, Tween.EASE_OUT)
+	tween.start()
+
 
 func _on_ResumeButton_pressed():
-	get_tree().paused = false
-	visible = false
+	if not tween.is_active():
+		close()
 
 
 func _on_QuitButton_pressed():
-	if get_parent().get_parent().name == "Splitscreen":
-		# We need to clean up a little bit first to avoid Viewport errors.
-		$"../../Black/SplitContainer/ViewportContainer1".free()
+	scene_root.notification(NOTIFICATION_WM_QUIT_REQUEST)
 	get_tree().quit()
+
+
+func _on_Tween_all_completed():
+	if modulate.a < 0.5:
+		hide()

2d/platformer/src/UserInterface/PauseMenu.tscn

@@ -1,7 +1,13 @@
-[gd_scene load_steps=3 format=2]
+[gd_scene load_steps=6 format=2]
 
 [ext_resource path="res://assets/theme/user_interface.tres" type="Theme" id=1]
 [ext_resource path="res://src/UserInterface/PauseMenu.gd" type="Script" id=2]
+[ext_resource path="res://assets/theme/fonts/kenney_mini_square.tres" type="DynamicFontData" id=3]
+[ext_resource path="res://src/UserInterface/CoinsCounter.tscn" type="PackedScene" id=4]
+
+[sub_resource type="DynamicFont" id=1]
+size = 44
+font_data = ExtResource( 3 )
 
 [node name="PauseMenu" type="Control"]
 pause_mode = 2
@@ -16,41 +22,68 @@ __meta__ = {
 [node name="ColorRect" type="ColorRect" parent="."]
 anchor_right = 1.0
 anchor_bottom = 1.0
-color = Color( 0, 0, 0, 0.211765 )
+color = Color( 0, 0, 0, 0.294118 )
+__meta__ = {
+"_edit_use_anchors_": false
+}
 
-[node name="VBoxContainer" type="VBoxContainer" parent="."]
-anchor_left = 0.5
-anchor_top = 0.5
-anchor_right = 0.5
-anchor_bottom = 0.5
-margin_left = -87.0
-margin_top = -125.0
-margin_right = 87.0
-margin_bottom = 126.0
+[node name="CenterContainer" type="CenterContainer" parent="ColorRect"]
+anchor_right = 1.0
+anchor_bottom = 1.0
+__meta__ = {
+"_edit_use_anchors_": false
+}
+
+[node name="VBoxContainer" type="VBoxContainer" parent="ColorRect/CenterContainer"]
+margin_left = 250.0
+margin_top = 140.0
+margin_right = 550.0
+margin_bottom = 340.0
+rect_min_size = Vector2( 300, 200 )
+custom_constants/separation = 6
 alignment = 1
 __meta__ = {
 "_edit_use_anchors_": false
 }
 
-[node name="Label" type="Label" parent="VBoxContainer"]
-margin_top = 71.0
-margin_right = 174.0
-margin_bottom = 91.0
+[node name="Label" type="Label" parent="ColorRect/CenterContainer/VBoxContainer"]
+margin_top = 7.0
+margin_right = 300.0
+margin_bottom = 62.0
+custom_fonts/font = SubResource( 1 )
 text = "Game Paused"
 align = 1
+valign = 1
 
-[node name="ResumeButton" type="Button" parent="VBoxContainer"]
-margin_top = 95.0
-margin_right = 174.0
-margin_bottom = 135.0
-rect_min_size = Vector2( 0, 40 )
+[node name="MarginContainer" type="MarginContainer" parent="ColorRect/CenterContainer/VBoxContainer"]
+margin_top = 68.0
+margin_right = 300.0
+margin_bottom = 88.0
+rect_min_size = Vector2( 0, 20 )
+
+[node name="ResumeButton" type="Button" parent="ColorRect/CenterContainer/VBoxContainer"]
+margin_left = 60.0
+margin_top = 94.0
+margin_right = 240.0
+margin_bottom = 140.0
+rect_min_size = Vector2( 180, 40 )
+size_flags_horizontal = 4
 text = "Resume"
 
-[node name="QuitButton" type="Button" parent="VBoxContainer"]
-margin_top = 139.0
-margin_right = 174.0
-margin_bottom = 179.0
-rect_min_size = Vector2( 0, 40 )
+[node name="QuitButton" type="Button" parent="ColorRect/CenterContainer/VBoxContainer"]
+margin_left = 60.0
+margin_top = 146.0
+margin_right = 240.0
+margin_bottom = 192.0
+rect_min_size = Vector2( 180, 40 )
+size_flags_horizontal = 4
 text = "Quit"
-[connection signal="pressed" from="VBoxContainer/ResumeButton" to="." method="_on_ResumeButton_pressed"]
-[connection signal="pressed" from="VBoxContainer/QuitButton" to="." method="_on_QuitButton_pressed"]
+
+[node name="CoinsCounter" parent="ColorRect" instance=ExtResource( 4 )]
+margin_right = 105.0
+margin_bottom = 50.0
+
+[node name="Tween" type="Tween" parent="."]
+[connection signal="pressed" from="ColorRect/CenterContainer/VBoxContainer/ResumeButton" to="." method="_on_ResumeButton_pressed"]
+[connection signal="pressed" from="ColorRect/CenterContainer/VBoxContainer/QuitButton" to="." method="_on_QuitButton_pressed"]
+[connection signal="tween_all_completed" from="Tween" to="." method="_on_Tween_all_completed"]