update and improve ui

core/main_scene_ui/assets/button_customize.png.import

@@ -0,0 +1,40 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://c31yut8p24t8g"
+path="res://.godot/imported/button_customize.png-2b9ab16ca23c28488847c768be1934d0.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://core/main_scene_ui/assets/button_customize.png"
+dest_files=["res://.godot/imported/button_customize.png-2b9ab16ca23c28488847c768be1934d0.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/uastc_level=0
+compress/rdo_quality_loss=0.0
+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/channel_remap/red=0
+process/channel_remap/green=1
+process/channel_remap/blue=2
+process/channel_remap/alpha=3
+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

core/main_scene_ui/main_scene_ui.gd

@@ -4,7 +4,10 @@ extends Control
 @onready var game_menu: Control = $%GameMenu
 @onready var game_menu_panel: Control = $%GameMenuPanel
 @onready var menu_icon_button: Button = $%MenuIconButton
+@onready var hide_ui_button: Button = $%HideUIButton
+@onready var customize_train_button: Button = $%CustomizeTrainButton
 @onready var photo_icon_button: Button = $%PhotoIconButton
+@onready var choo_choo_button: Button = $%ChooChooButton
 @onready var collectible_icon_button: Button = $%CollectibleIconButton
 @onready var resume_button: Button = $GameMenuPanel/GameMenu/Pages/Page3/OptionMenu/VBoxContainer/ResumeButton
 @onready var weather_row: HBoxContainer = $%WeatherRow
@@ -13,6 +16,8 @@ extends Control
 @onready var photo_mode_texture_mask: TextureRect = $%PhotoModeTextureMask
 @onready var photo_mode_black_screen: ColorRect = $%PhotoModeBlackScreen
 @onready var audio_player: Control = $%AudioPlayer
+@onready var time_label: Label = $%TimeLabel
+@onready var dist_label: Label = $%DistLabel
 
 var _cycle = false
 var _rain = false
@@ -24,29 +29,47 @@ var _photo_mode_alpha_tween: Tween
 var _photo_mode_fold_tween: Tween
 
 func _ready() -> void:
+	set_process_input(false)
 	GameState.on_enable_photo_mode_request.connect(_on_enable_photo_mode)
 	GameState.on_disable_photo_mode_request.connect(_on_disable_photo_mode)
 	GameState.on_photo_taken_started.connect(_on_photo_taken_started)
 	GameState.on_photo_taken_finished.connect(_on_photo_taken_finished)
 	GameState.on_photo_taken_prepare.connect(_on_photo_capture_prepare)
-	menu_icon_button.pressed.connect(_on_menu_icon_button_pressed)
+	hide_ui_button.pressed.connect(_on_hide_ui_button_pressed)
+	customize_train_button.pressed.connect(_open_game_menu_on_page.bind(0))
+	collectible_icon_button.pressed.connect(_open_game_menu_on_page.bind(1))
+	menu_icon_button.pressed.connect(_open_game_menu_on_page.bind(2))
 	photo_icon_button.pressed.connect(_on_photo_icon_button_pressed)
-	collectible_icon_button.pressed.connect(_on_collectible_icon_button_pressed)
+	choo_choo_button.pressed.connect(_on_choo_choo_button_pressed)
 	resume_button.pressed.connect(_on_resume_button_pressed)
 
-func _on_menu_icon_button_pressed() -> void:
-	GameState.pause_game()
-	game_menu_panel.show()
-	game_menu.scale = Vector2(1, 1)
-	game_menu.open()
-	TweenFX.fold_in(game_menu)
+func _process(delta: float) -> void:
+	if time_label and dist_label and GameState.is_loaded:
+		var time = GameState.save_data.total_time_played_seconds
+		var hours = int(time) / 3600
+		var minutes = (int(time) % 3600) / 60
+		var seconds = int(time) % 60
+		time_label.text = "Travel Time: %02d:%02d:%02d" % [hours, minutes, seconds]
+		dist_label.text = "Distance Traveled: %d km" % int(GameState.save_data.total_distance_km)
+
+func _on_hide_ui_button_pressed() -> void:
+	hide_ui()
+	Input.set_mouse_mode(Input.MOUSE_MODE_HIDDEN)
+	await get_tree().create_timer(0.3).timeout
+	set_process_input(true)
+
+func _input(event: InputEvent) -> void:
+	if event is InputEventMouseMotion:
+		set_process_input(false)
+		Input.set_mouse_mode(Input.MOUSE_MODE_VISIBLE)
+		show_ui()
 
 func _on_photo_icon_button_pressed() -> void:
 	GameState.on_enable_photo_mode_request.emit()
 
-func _on_collectible_icon_button_pressed() -> void:
+func _open_game_menu_on_page(tab_index: int) -> void:
 	GameState.pause_game()
-	game_menu.on_tab_pressed(1, true)
+	game_menu.on_tab_pressed(tab_index, true)
 	game_menu_panel.show()
 	game_menu.scale = Vector2(1, 1)
 	TweenFX.fold_in(game_menu)
@@ -101,7 +124,7 @@ func pick_random_weather() -> void:
 		weather_row.on_icon_pressed_changed(random_button)
 
 func _on_enable_photo_mode() -> void:
-	hide_ui_for_photo_mode()
+	hide_ui()
 	photo_mode_texture_mask.scale = Vector2(1,1)
 	photo_mode_texture_mask.modulate.a = 0.0
 	photo_mode_texture_panel.show()
@@ -124,7 +147,7 @@ func _on_enable_photo_mode() -> void:
 	_photo_mode_fold_tween = TweenFX.fold_in(photo_mode_texture_mask)
 
 func _on_disable_photo_mode() -> void:
-	show_ui_for_photo_mode()
+	show_ui()
 	var mat = photo_mode_texture_panel.material as ShaderMaterial
 	if mat:
 		if _photo_mode_mat_tween:
@@ -167,24 +190,31 @@ func _on_photo_taken_finished() -> void:
 	photo_mode_black_screen.hide()
 	GameState.on_photo_mode_black_screen_disappeared.emit()
 
-func hide_ui_for_photo_mode() -> void:
-	TweenFX.fade_out(weather_row, 0.25)
-	TweenFX.fade_out(time_of_day_row, 0.25)
-	TweenFX.fade_out(menu_icon_button, 0.25)
-	TweenFX.fade_out(photo_icon_button, 0.25)
-	TweenFX.fade_out(collectible_icon_button, 0.25)
-	TweenFX.fade_out(audio_player, 0.25)
+func _on_choo_choo_button_pressed() -> void:
+	#play sfx
+	pass
 
-func show_ui_for_photo_mode() -> void:
-	weather_row.show()
-	time_of_day_row.show()
-	menu_icon_button.show()
-	photo_icon_button.show()
-	collectible_icon_button.show()
-	audio_player.show()
-	TweenFX.fade_in(weather_row, 0.25)
-	TweenFX.fade_in(time_of_day_row, 0.25)
-	TweenFX.fade_in(menu_icon_button, 0.25)
-	TweenFX.fade_in(photo_icon_button, 0.25)
-	TweenFX.fade_in(collectible_icon_button, 0.25)
-	TweenFX.fade_in(audio_player, 0.25)
+func _set_buttons_mouse_filter(ignore: bool) -> void:
+	var filter = Control.MOUSE_FILTER_IGNORE if ignore else Control.MOUSE_FILTER_STOP
+	var buttons = [hide_ui_button, customize_train_button, collectible_icon_button, menu_icon_button, photo_icon_button, choo_choo_button]
+	if weather_row and "options_icon_buttons" in weather_row:
+		buttons.append_array(weather_row.options_icon_buttons)
+	if time_of_day_row and "options_icon_buttons" in time_of_day_row:
+		buttons.append_array(time_of_day_row.options_icon_buttons)
+		
+	for btn in buttons:
+		if btn is Control:
+			btn.mouse_filter = filter
+
+func hide_ui() -> void:
+	_set_buttons_mouse_filter(true)
+	var hud_elements = [hide_ui_button, weather_row, time_of_day_row, customize_train_button, collectible_icon_button, menu_icon_button, photo_icon_button, audio_player, choo_choo_button, time_label, dist_label]
+	for element in hud_elements:
+		TweenFX.fade_out(element, 0.25)
+
+func show_ui() -> void:
+	_set_buttons_mouse_filter(false)
+	var hud_elements = [hide_ui_button, weather_row, time_of_day_row, customize_train_button, collectible_icon_button, menu_icon_button, photo_icon_button, audio_player, choo_choo_button, time_label, dist_label]
+	for element in hud_elements:
+		element.show()
+		TweenFX.fade_in(element, 0.25)

core/main_scene_ui/main_scene_ui.tscn

@@ -26,7 +26,9 @@
 [ext_resource type="Texture2D" uid="uid://cq65xyg4wsctm" path="res://core/main_scene_ui/assets/button_weather_nowind.png" id="12_fjfwt"]
 [ext_resource type="Texture2D" uid="uid://tex06svipyg4" path="res://core/main_scene_ui/assets/button_random.png" id="14_gcgq4"]
 [ext_resource type="Texture2D" uid="uid://1n3paucfsovj" path="res://core/main_scene_ui/assets/button_photomode.png" id="15_th1nj"]
+[ext_resource type="Texture2D" uid="uid://c31yut8p24t8g" path="res://core/main_scene_ui/assets/button_customize.png" id="19_vywaj"]
 [ext_resource type="Texture2D" uid="uid://b03si5ir3ypp7" path="res://core/main_scene_ui/assets/button_collection03.png" id="19_yggu7"]
+[ext_resource type="FontFile" uid="uid://bclja5no1qteh" path="res://core/font/Kestila.ttf" id="29_jn6vt"]
 
 [sub_resource type="ShaderMaterial" id="ShaderMaterial_hole"]
 shader = ExtResource("10_shader")
@@ -48,8 +50,10 @@ layout_mode = 1
 anchors_preset = 2
 anchor_top = 1.0
 anchor_bottom = 1.0
-offset_top = -164.0
-offset_right = 80.0
+offset_left = 20.0
+offset_top = -184.0
+offset_right = 100.0
+offset_bottom = -20.0
 grow_vertical = 0
 
 [node name="TimeOfDayRow" parent="Rows" unique_id=1734127019 instance=ExtResource("2_4cc8f")]
@@ -132,40 +136,80 @@ data = "Random"
 image = ExtResource("14_gcgq4")
 apply_texture_on_selection = false
 
-[node name="MenuIconButton" parent="." unique_id=707872474 instance=ExtResource("3_t1xop")]
-unique_name_in_owner = true
+[node name="TopButtons" type="VBoxContainer" parent="." unique_id=1644086668]
 layout_mode = 1
 anchors_preset = 1
 anchor_left = 1.0
 anchor_right = 1.0
-anchor_bottom = 0.0
-offset_left = -80.0
-offset_bottom = 80.0
+offset_left = -100.0
+offset_top = 20.0
+offset_right = -20.0
+offset_bottom = 100.0
 grow_horizontal = 0
+theme_override_constants/separation = 8
+
+[node name="MenuIconButton" parent="TopButtons" unique_id=707872474 instance=ExtResource("3_t1xop")]
+unique_name_in_owner = true
+layout_mode = 2
 image = ExtResource("10_6016m")
 
-[node name="CollectionOptions" type="VBoxContainer" parent="." unique_id=542153805]
+[node name="HideUIButton" parent="TopButtons" unique_id=1621140689 instance=ExtResource("3_t1xop")]
+unique_name_in_owner = true
+layout_mode = 2
+image = ExtResource("10_6016m")
+
+[node name="MiddleButtons" type="VBoxContainer" parent="." unique_id=542153805]
 layout_mode = 1
 anchors_preset = 6
 anchor_left = 1.0
 anchor_top = 0.5
 anchor_right = 1.0
 anchor_bottom = 0.5
-offset_left = -40.0
-offset_top = -20.0
-offset_bottom = 20.0
+offset_left = -100.0
+offset_top = -124.0
+offset_right = -20.0
+offset_bottom = 124.0
 grow_horizontal = 0
 grow_vertical = 2
+theme_override_constants/separation = 8
 
-[node name="PhotoIconButton" parent="CollectionOptions" unique_id=1863476241 instance=ExtResource("3_t1xop")]
+[node name="CustomizeTrainButton" parent="MiddleButtons" unique_id=27430111 instance=ExtResource("3_t1xop")]
+unique_name_in_owner = true
+layout_mode = 2
+image = ExtResource("19_vywaj")
+
+[node name="CollectibleIconButton" parent="MiddleButtons" unique_id=520235552 instance=ExtResource("3_t1xop")]
+unique_name_in_owner = true
+layout_mode = 2
+image = ExtResource("19_yggu7")
+
+[node name="PhotoIconButton" parent="MiddleButtons" unique_id=1863476241 instance=ExtResource("3_t1xop")]
 unique_name_in_owner = true
 layout_mode = 2
 image = ExtResource("15_th1nj")
 
-[node name="CollectibleIconButton" parent="CollectionOptions" unique_id=520235552 instance=ExtResource("3_t1xop")]
+[node name="ChooChooButton" parent="MiddleButtons" unique_id=774819903 instance=ExtResource("3_t1xop")]
 unique_name_in_owner = true
 layout_mode = 2
-image = ExtResource("19_yggu7")
+image = ExtResource("15_th1nj")
+
+[node name="InfoLabels" type="VBoxContainer" parent="." unique_id=234435566]
+custom_minimum_size = Vector2(400, 0)
+layout_mode = 1
+offset_left = 20.0
+offset_top = 20.0
+offset_right = 420.0
+offset_bottom = 220.0
+
+[node name="TimeLabel" type="Label" parent="InfoLabels" unique_id=18932607]
+unique_name_in_owner = true
+layout_mode = 2
+theme_override_fonts/font = ExtResource("29_jn6vt")
+
+[node name="DistLabel" type="Label" parent="InfoLabels" unique_id=1743894966]
+unique_name_in_owner = true
+layout_mode = 2
+theme_override_fonts/font = ExtResource("29_jn6vt")
 
 [node name="AudioPlayer" parent="." unique_id=425192018 node_paths=PackedStringArray("radio") instance=ExtResource("7_lapqe")]
 unique_name_in_owner = true
@@ -174,10 +218,10 @@ anchor_left = 1.0
 anchor_top = 0.99814814
 anchor_right = 1.0
 anchor_bottom = 0.99814814
-offset_left = -146.0
-offset_top = -57.0
-offset_right = -146.0
-offset_bottom = -57.0
+offset_left = -166.0
+offset_top = -74.0
+offset_right = -166.0
+offset_bottom = -74.0
 grow_horizontal = 0
 grow_vertical = 0
 radio = NodePath("../Radio")
@@ -222,18 +266,6 @@ texture = ExtResource("9_4cc8f")
 stretch_mode = 3
 metadata/_edit_use_anchors_ = true
 
-[node name="PhotoModeBlackScreen" type="ColorRect" parent="." unique_id=1928591477]
-unique_name_in_owner = true
-visible = false
-layout_mode = 1
-anchors_preset = 15
-anchor_right = 1.0
-anchor_bottom = 1.0
-grow_horizontal = 2
-grow_vertical = 2
-pivot_offset_ratio = Vector2(0.5, 0.5)
-color = Color(0, 0, 0, 1)
-
 [node name="PhotoTaken" parent="." unique_id=683693112 instance=ExtResource("8_t1xop")]
 visible = false
 layout_mode = 1
@@ -246,6 +278,18 @@ offset_bottom = 0.0
 grow_horizontal = 2
 grow_vertical = 2
 
+[node name="PhotoModeBlackScreen" type="ColorRect" parent="." unique_id=1928591477]
+unique_name_in_owner = true
+visible = false
+layout_mode = 1
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
+grow_horizontal = 2
+grow_vertical = 2
+pivot_offset_ratio = Vector2(0.5, 0.5)
+color = Color(0, 0, 0, 1)
+
 [node name="Radio" parent="." unique_id=1234112225 instance=ExtResource("5_nevjt")]
 playlist = Array[AudioStream]([ExtResource("6_kd244")])
 

core/main_scene_ui/photo_taken.gd

@@ -5,12 +5,13 @@ extends Control
 
 var initial_pos_saved := false
 var initial_pos: Vector2
+var appear_tween: Tween
 var move_tween: Tween
 var is_photo_mode_enable = false
 var current_execution: int = 0
 
 func _ready() -> void:
-	CollectionManager.on_photo_saved.connect(_set_photo_taken)
+	CollectionManager.on_photo_preview_ready.connect(_set_photo_preview)
 	GameState.on_enable_photo_mode_request.connect(_on_enable_photo_mode)
 	GameState.on_disable_photo_mode_request.connect(_on_disable_photo_mode)
 	GameState.on_photo_taken_finished.connect(_show_photo_taken)
@@ -19,8 +20,7 @@ func _ready() -> void:
 func _hide_photo_taken() -> void:
 	hide()
 
-func _set_photo_taken(file_path) -> void:
-	var image = Image.load_from_file(file_path)
+func _set_photo_preview(image: Image) -> void:
 	if image:
 		var texture = ImageTexture.create_from_image(image)
 		photo_texture.texture = texture
@@ -41,12 +41,17 @@ func _show_photo_taken() -> void:
 	rotation_degrees = 0.0
 	show()
 	
-	var explode_tween_duration = 5.5
+	var appear_duration = 0.8
+	var float_duration = 1.5
 	var move_tween_duration = 1.0
+	var shrink_duration = 1
+	var scale_amt = 3.0
 	
-	var explode_tween = TweenFX.explode(self, explode_tween_duration, 3)
+	appear_tween = create_tween()
+	appear_tween.tween_property(self, "scale", Vector2.ONE * scale_amt, appear_duration).set_trans(Tween.TRANS_BACK).set_ease(Tween.EASE_OUT)
+	appear_tween.parallel().tween_property(self, "rotation_degrees", randf_range(-10, 10), appear_duration * 0.8)
 	
-	await get_tree().create_timer(explode_tween_duration / 2).timeout
+	await get_tree().create_timer(appear_duration + float_duration).timeout
 	
 	if my_execution != current_execution:
 		return
@@ -61,10 +66,14 @@ func _show_photo_taken() -> void:
 	
 	move_tween = create_tween()
 	var target_pos = collectible_button.global_position
+	
 	move_tween.tween_property(self, "global_position:x", target_pos.x, move_tween_duration).set_trans(Tween.TRANS_SINE).set_ease(Tween.EASE_IN_OUT)
 	move_tween.parallel().tween_property(self, "global_position:y", target_pos.y, move_tween_duration).set_trans(Tween.TRANS_BACK).set_ease(Tween.EASE_IN)
 	
-	await explode_tween.finished
+	move_tween.parallel().tween_property(self, "scale", Vector2.ONE * 0.1, shrink_duration).set_trans(Tween.TRANS_CUBIC).set_ease(Tween.EASE_IN_OUT)
+	move_tween.parallel().tween_property(self, "modulate:a", 0.0, shrink_duration).set_trans(Tween.TRANS_LINEAR)
+	
+	await move_tween.finished
 	
 	if my_execution != current_execution:
 		return
@@ -90,6 +99,8 @@ func _on_disable_photo_mode() -> void:
 
 func reset() -> void:
 	TweenFX.stop_all(self)
+	if appear_tween:
+		appear_tween.kill()
 	if move_tween:
 		move_tween.kill()
 	hide()

core/main_scene_ui/photo_taken.tscn

@@ -45,4 +45,4 @@ layout_mode = 2
 size_flags_vertical = 3
 mouse_filter = 2
 expand_mode = 1
-stretch_mode = 6
+stretch_mode = 5