pause menu and screen transitions

2d-survivors-course/assets/ui/screen_transition.png.import

@@ -0,0 +1,34 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://niycpu27kpyf"
+path="res://.godot/imported/screen_transition.png-8cc3d004115d162e29e8f61583860294.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://assets/ui/screen_transition.png"
+dest_files=["res://.godot/imported/screen_transition.png-8cc3d004115d162e29e8f61583860294.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/hdr_compression=1
+compress/normal_map=0
+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/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1

2d-survivors-course/project.godot

@@ -19,6 +19,7 @@ config/icon="res://icon.svg"
 
 GameEvents="*res://scenes/autoload/game_events.tscn"
 MusicPlayer="*res://scenes/autoload/music_player.tscn"
+ScreenTransition="*res://scenes/autoload/screen_transition.tscn"
 
 [display]
 
@@ -63,6 +64,12 @@ left_click={
 "events": [Object(InputEventMouseButton,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"button_mask":1,"position":Vector2(75, 13),"global_position":Vector2(79, 54),"factor":1.0,"button_index":1,"canceled":false,"pressed":true,"double_click":false,"script":null)
 ]
 }
+pause={
+"deadzone": 0.5,
+"events": [Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":0,"physical_keycode":4194305,"key_label":0,"unicode":0,"echo":false,"script":null)
+, Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":0,"physical_keycode":80,"key_label":0,"unicode":112,"echo":false,"script":null)
+]
+}
 
 [layer_names]
 

2d-survivors-course/scenes/autoload/screen_transition.gd

@@ -0,0 +1,24 @@
+extends CanvasLayer
+
+signal transitioned_halfway
+
+@onready var animation_player: AnimationPlayer = $AnimationPlayer
+
+var skip_emit = false
+
+
+func transition():
+	animation_player.play("default")
+	print("PLAYING FORWARD")
+	await transitioned_halfway
+	skip_emit = true
+	animation_player.play_backwards("default")
+	print("PLAYING BACKWARD")
+
+func emit_transitioned_halfway():
+	print("TRANSITION HALFWAY EMITTED")
+	print(str("SKIP EMIT: ", skip_emit))
+	if skip_emit:
+		skip_emit = false
+		return
+	transitioned_halfway.emit()

2d-survivors-course/scenes/autoload/screen_transition.gdshader

@@ -0,0 +1,15 @@
+shader_type canvas_item;
+
+uniform vec4 transition_color: source_color;
+uniform sampler2D transition_texture : filter_nearest;
+uniform float percent : hint_range(0.0, 1.0, 0.1);
+
+void fragment() {
+	vec4 transition_texture_color = texture(transition_texture, UV);
+	if (transition_texture_color.r > percent) {
+		COLOR.a = 0.0;
+	} else {
+		COLOR = transition_color;
+	}
+}
+

2d-survivors-course/scenes/autoload/screen_transition.tscn

@@ -0,0 +1,106 @@
+[gd_scene load_steps=8 format=3 uid="uid://bowibps2iwysw"]
+
+[ext_resource type="Shader" path="res://scenes/autoload/screen_transition.gdshader" id="1_3raf5"]
+[ext_resource type="Script" path="res://scenes/autoload/screen_transition.gd" id="1_kcemw"]
+[ext_resource type="Texture2D" uid="uid://niycpu27kpyf" path="res://assets/ui/screen_transition.png" id="2_h15tb"]
+
+[sub_resource type="Animation" id="Animation_yx1y8"]
+length = 0.001
+tracks/0/type = "value"
+tracks/0/imported = false
+tracks/0/enabled = true
+tracks/0/path = NodePath("ColorRect:material:shader_parameter/percent")
+tracks/0/interp = 1
+tracks/0/loop_wrap = true
+tracks/0/keys = {
+"times": PackedFloat32Array(0),
+"transitions": PackedFloat32Array(1),
+"update": 0,
+"values": [0.0]
+}
+tracks/1/type = "value"
+tracks/1/imported = false
+tracks/1/enabled = true
+tracks/1/path = NodePath("ColorRect:visible")
+tracks/1/interp = 1
+tracks/1/loop_wrap = true
+tracks/1/keys = {
+"times": PackedFloat32Array(0),
+"transitions": PackedFloat32Array(1),
+"update": 1,
+"values": [false]
+}
+
+[sub_resource type="Animation" id="Animation_tc2hv"]
+resource_name = "default"
+length = 0.4
+step = 0.01
+tracks/0/type = "value"
+tracks/0/imported = false
+tracks/0/enabled = true
+tracks/0/path = NodePath("ColorRect:material:shader_parameter/percent")
+tracks/0/interp = 1
+tracks/0/loop_wrap = true
+tracks/0/keys = {
+"times": PackedFloat32Array(0, 0.0001, 0.4),
+"transitions": PackedFloat32Array(1, 2.2974, 1),
+"update": 0,
+"values": [1.0, 0.0, 1.0]
+}
+tracks/1/type = "method"
+tracks/1/imported = false
+tracks/1/enabled = true
+tracks/1/path = NodePath(".")
+tracks/1/interp = 1
+tracks/1/loop_wrap = true
+tracks/1/keys = {
+"times": PackedFloat32Array(0.4),
+"transitions": PackedFloat32Array(1),
+"values": [{
+"args": [],
+"method": &"emit_transitioned_halfway"
+}]
+}
+tracks/2/type = "value"
+tracks/2/imported = false
+tracks/2/enabled = true
+tracks/2/path = NodePath("ColorRect:visible")
+tracks/2/interp = 1
+tracks/2/loop_wrap = true
+tracks/2/keys = {
+"times": PackedFloat32Array(0, 0.01),
+"transitions": PackedFloat32Array(1, 1),
+"update": 1,
+"values": [false, true]
+}
+
+[sub_resource type="AnimationLibrary" id="AnimationLibrary_lapr1"]
+_data = {
+"RESET": SubResource("Animation_yx1y8"),
+"default": SubResource("Animation_tc2hv")
+}
+
+[sub_resource type="ShaderMaterial" id="ShaderMaterial_jr2yh"]
+shader = ExtResource("1_3raf5")
+shader_parameter/transition_color = Color(0.247059, 0.14902, 0.192157, 1)
+shader_parameter/percent = 0.0
+shader_parameter/transition_texture = ExtResource("2_h15tb")
+
+[node name="ScreenTransition" type="CanvasLayer"]
+process_mode = 3
+layer = 5
+script = ExtResource("1_kcemw")
+
+[node name="AnimationPlayer" type="AnimationPlayer" parent="."]
+libraries = {
+"": SubResource("AnimationLibrary_lapr1")
+}
+
+[node name="ColorRect" type="ColorRect" parent="."]
+visible = false
+material = SubResource("ShaderMaterial_jr2yh")
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
+grow_horizontal = 2
+grow_vertical = 2

2d-survivors-course/scenes/main/main.gd

@@ -2,10 +2,19 @@ extends Node
 
 @export var end_screen: PackedScene
 
+var pause_menu_scene = preload("res://scenes/ui/pause_menu.tscn")
+
+
 func _ready():
 	%Player._health_component.died.connect(on_player_died)
 
 
+func _unhandled_input(event: InputEvent) -> void:
+	if event.is_action_pressed("pause"):
+		add_child(pause_menu_scene.instantiate())
+		get_tree().root.set_input_as_handled()
+
+
 func on_player_died():
 	var end_screen_instance = end_screen.instantiate()
 	add_child(end_screen_instance)

2d-survivors-course/scenes/ui/end_screen.gd

@@ -33,6 +33,9 @@ func play_jingle(defeat: bool = false):
 		$VictoryStreamPlayer.play()
 
 func on_restart_button_pressed():
+	ScreenTransition.skip_emit = false
+	ScreenTransition.transition()
+	await ScreenTransition.transitioned_halfway
 	get_tree().paused = false	
 	get_tree().change_scene_to_file("res://scenes/main/main.tscn")
 

2d-survivors-course/scenes/ui/main_menu.gd

@@ -10,10 +10,16 @@ func _ready():
 
 
 func on_play_pressed():
+	ScreenTransition.skip_emit = false	
+	ScreenTransition.transition()
+	await ScreenTransition.transitioned_halfway
 	get_tree().change_scene_to_file("res://scenes/main/main.tscn")
 
 
 func on_options_pressed():
+	ScreenTransition.skip_emit = false
+	ScreenTransition.transition()
+	await ScreenTransition.transitioned_halfway
 	var options_instance = options_scene.instantiate()
 	add_child(options_instance)
 	options_instance.back_pressed.connect(on_options_closed.bind(options_instance))

2d-survivors-course/scenes/ui/main_menu.tscn

@@ -60,3 +60,4 @@ layout_mode = 2
 text = "Quit"
 
 [node name="Vignette" parent="." instance=ExtResource("2_27k4i")]
+layer = 2

2d-survivors-course/scenes/ui/options_menu.gd

@@ -51,5 +51,8 @@ func on_audio_slider_changed(value: float, bus_name: String):
 
 
 func on_back_pressed():
+	ScreenTransition.skip_emit = false
+	ScreenTransition.transition()
+	await ScreenTransition.transitioned_halfway
 	back_pressed.emit()
 

2d-survivors-course/scenes/ui/options_menu.tscn

@@ -6,6 +6,7 @@
 [ext_resource type="PackedScene" uid="uid://dtryyvn2r6lfw" path="res://scenes/ui/vignette.tscn" id="4_bwo7j"]
 
 [node name="OptionsMenu" type="CanvasLayer"]
+layer = 2
 script = ExtResource("1_q7v2y")
 
 [node name="TileMap" type="TileMap" parent="."]
@@ -102,4 +103,4 @@ size_flags_horizontal = 0
 text = "Back"
 
 [node name="Vignette" parent="." instance=ExtResource("4_bwo7j")]
-layer = 10
+layer = 3

2d-survivors-course/scenes/ui/pause_menu.gd

@@ -0,0 +1,72 @@
+extends CanvasLayer
+
+@onready var animation_player: AnimationPlayer = $AnimationPlayer
+@onready var panel_container: PanelContainer = %PanelContainer
+@onready var resume_button: Button = %ResumeButton
+@onready var options_button: Button = %OptionsButton
+@onready var quit_button: Button = %QuitButton
+
+var options_menu_scene = preload("res://scenes/ui/options_menu.tscn")
+
+var is_closing
+
+
+func _ready():
+	get_tree().paused = true
+	panel_container.pivot_offset = panel_container.size / 2
+
+	resume_button.pressed.connect(on_resume_pressed)
+	options_button.pressed.connect(on_options_pressed)
+	quit_button.pressed.connect(on_quit_pressed)
+
+	animation_player.play("default")
+
+	var tween = create_tween()
+	tween.tween_property(panel_container, "scale", Vector2.ZERO, 0)
+	tween.tween_property(panel_container, "scale", Vector2.ONE, .3)\
+	.set_ease(Tween.EASE_OUT).set_trans(Tween.TRANS_BACK)
+
+
+func _input(event: InputEvent) -> void:
+	if event.is_action_pressed("pause"):
+		close()
+		get_tree().root.set_input_as_handled()
+
+
+func close():
+	if is_closing:
+		return
+	is_closing = true
+
+	animation_player.play_backwards("default")
+
+	var tween = create_tween()
+	tween.tween_property(panel_container, "scale", Vector2.ONE, 0)
+	tween.tween_property(panel_container, "scale", Vector2.ZERO, .3)\
+	.set_ease(Tween.EASE_IN).set_trans(Tween.TRANS_BACK)
+
+	await tween.finished
+	get_tree().paused = false
+	queue_free()
+
+
+func on_resume_pressed():
+	close()
+
+
+func on_options_pressed():
+	ScreenTransition.skip_emit = false
+	ScreenTransition.transition()
+	await ScreenTransition.transitioned_halfway
+	var options_menu_instance = options_menu_scene.instantiate()
+	add_child(options_menu_instance)
+	options_menu_instance.back_pressed.connect(on_options_back_pressed.bind(options_menu_instance))
+
+
+func on_quit_pressed():
+	get_tree().paused = false
+	get_tree().change_scene_to_file("res://scenes/ui/main_menu.tscn")
+
+
+func on_options_back_pressed(options_menu: Node):
+	options_menu.queue_free()