From e004d2564e4136b98320614aabf422cc8648ec6b Mon Sep 17 00:00:00 2001 From: "Mr.K GameDev" Date: Fri, 6 Nov 2020 04:23:50 +0300 Subject: [PATCH] 2D Platformer UI Update Co-authored-by: Aaron Franke --- .../assets/theme/user_interface.tres | 3 +- 2d/platformer/src/Actors/Player.gd | 3 + 2d/platformer/src/Objects/Coin.gd | 1 + 2d/platformer/src/Objects/Coin.tscn | 1 + .../src/UserInterface/CoinsCounter.gd | 25 ++++++ .../src/UserInterface/CoinsCounter.tscn | 63 ++++++++++++++ 2d/platformer/src/UserInterface/PauseMenu.gd | 47 ++++++++-- .../src/UserInterface/PauseMenu.tscn | 87 +++++++++++++------ 8 files changed, 193 insertions(+), 37 deletions(-) create mode 100644 2d/platformer/src/UserInterface/CoinsCounter.gd create mode 100644 2d/platformer/src/UserInterface/CoinsCounter.tscn diff --git a/2d/platformer/assets/theme/user_interface.tres b/2d/platformer/assets/theme/user_interface.tres index 0cefc060..502b933e 100644 --- a/2d/platformer/assets/theme/user_interface.tres +++ b/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 diff --git a/2d/platformer/src/Actors/Player.gd b/2d/platformer/src/Actors/Player.gd index 436a3be5..05653d9d 100644 --- a/2d/platformer/src/Actors/Player.gd +++ b/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 = "" diff --git a/2d/platformer/src/Objects/Coin.gd b/2d/platformer/src/Objects/Coin.gd index 10575c36..e6cef82b 100644 --- a/2d/platformer/src/Objects/Coin.gd +++ b/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") diff --git a/2d/platformer/src/Objects/Coin.tscn b/2d/platformer/src/Objects/Coin.tscn index f2b9a340..e9a091a8 100644 --- a/2d/platformer/src/Objects/Coin.tscn +++ b/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 ) diff --git a/2d/platformer/src/UserInterface/CoinsCounter.gd b/2d/platformer/src/UserInterface/CoinsCounter.gd new file mode 100644 index 00000000..cff9fc47 --- /dev/null +++ b/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)) diff --git a/2d/platformer/src/UserInterface/CoinsCounter.tscn b/2d/platformer/src/UserInterface/CoinsCounter.tscn new file mode 100644 index 00000000..bcad874b --- /dev/null +++ b/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" diff --git a/2d/platformer/src/UserInterface/PauseMenu.gd b/2d/platformer/src/UserInterface/PauseMenu.gd index 7b2f4c2d..587b8da9 100644 --- a/2d/platformer/src/UserInterface/PauseMenu.gd +++ b/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() diff --git a/2d/platformer/src/UserInterface/PauseMenu.tscn b/2d/platformer/src/UserInterface/PauseMenu.tscn index 5db54b7e..884fda41 100644 --- a/2d/platformer/src/UserInterface/PauseMenu.tscn +++ b/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"]