From c40d2de56bb7daddda3df36695ad8f53ea34de3d Mon Sep 17 00:00:00 2001 From: teatov Date: Mon, 21 Oct 2024 13:35:56 +1000 Subject: [PATCH] add button animations and refactor ui animation functions --- scenes/ui/anthill_info.tscn | 7 +- scenes/ui/buy_ants.tscn | 9 ++- scenes/ui/pause_menu.tscn | 7 +- scripts/ui/closeable_ui.gd | 34 ++++++---- .../ui/components/animated_texture_button.gd | 46 +++++++++++++ .../ui/{ => components}/honeydew_counter.gd | 0 scripts/ui/pause_menu.gd | 67 +++++++++++-------- 7 files changed, 123 insertions(+), 47 deletions(-) create mode 100644 scripts/ui/components/animated_texture_button.gd rename scripts/ui/{ => components}/honeydew_counter.gd (100%) diff --git a/scenes/ui/anthill_info.tscn b/scenes/ui/anthill_info.tscn index 3abacef..a95b6dc 100644 --- a/scenes/ui/anthill_info.tscn +++ b/scenes/ui/anthill_info.tscn @@ -1,11 +1,12 @@ -[gd_scene load_steps=8 format=3 uid="uid://d8ut24fit87x"] +[gd_scene load_steps=9 format=3 uid="uid://d8ut24fit87x"] [ext_resource type="StyleBox" uid="uid://do5c5v5kvgv0s" path="res://resources/styles/panel_small_style.tres" id="1_tod8w"] [ext_resource type="Script" path="res://scripts/ui/anthill_info.gd" id="2_aj5vl"] -[ext_resource type="Script" path="res://scripts/ui/honeydew_counter.gd" id="3_kibtv"] +[ext_resource type="Script" path="res://scripts/ui/components/honeydew_counter.gd" id="3_kibtv"] [ext_resource type="Texture2D" uid="uid://bh01xbmjanku0" path="res://assets/textures/gui/button_bg.png" id="4_b8264"] [ext_resource type="Texture2D" uid="uid://slraulfmk8c0" path="res://assets/textures/gui/pictograms.png" id="4_dw0d6"] [ext_resource type="Texture2D" uid="uid://jv8twhntt6x3" path="res://assets/textures/gui/button_hover_bg.png" id="5_f3si0"] +[ext_resource type="Script" path="res://scripts/ui/components/animated_texture_button.gd" id="6_live5"] [sub_resource type="AtlasTexture" id="AtlasTexture_nwfun"] atlas = ExtResource("4_dw0d6") @@ -60,11 +61,13 @@ offset_left = 241.0 offset_top = 13.0 offset_right = 321.0 offset_bottom = 63.0 +pivot_offset = Vector2(40, 23) texture_normal = ExtResource("4_b8264") texture_pressed = ExtResource("4_b8264") texture_hover = ExtResource("5_f3si0") ignore_texture_size = true stretch_mode = 0 +script = ExtResource("6_live5") [node name="TextureRect" type="TextureRect" parent="AntBuyButton"] layout_mode = 1 diff --git a/scenes/ui/buy_ants.tscn b/scenes/ui/buy_ants.tscn index d57abd2..c432e12 100644 --- a/scenes/ui/buy_ants.tscn +++ b/scenes/ui/buy_ants.tscn @@ -1,11 +1,12 @@ -[gd_scene load_steps=13 format=3 uid="uid://c70rhvk2okkcu"] +[gd_scene load_steps=14 format=3 uid="uid://c70rhvk2okkcu"] [ext_resource type="StyleBox" uid="uid://do5c5v5kvgv0s" path="res://resources/styles/panel_small_style.tres" id="1_wcf51"] [ext_resource type="Script" path="res://scripts/ui/buy_ants.gd" id="2_sf7hb"] [ext_resource type="Texture2D" uid="uid://bh01xbmjanku0" path="res://assets/textures/gui/button_bg.png" id="2_shpjn"] [ext_resource type="Texture2D" uid="uid://jv8twhntt6x3" path="res://assets/textures/gui/button_hover_bg.png" id="3_bwnfl"] [ext_resource type="Texture2D" uid="uid://slraulfmk8c0" path="res://assets/textures/gui/pictograms.png" id="4_s7jbe"] -[ext_resource type="Script" path="res://scripts/ui/honeydew_counter.gd" id="6_k6iup"] +[ext_resource type="Script" path="res://scripts/ui/components/honeydew_counter.gd" id="6_k6iup"] +[ext_resource type="Script" path="res://scripts/ui/components/animated_texture_button.gd" id="6_msnw2"] [sub_resource type="AtlasTexture" id="AtlasTexture_t7i0n"] atlas = ExtResource("4_s7jbe") @@ -63,11 +64,13 @@ offset_left = 13.0 offset_top = 16.0 offset_right = 112.0 offset_bottom = 72.0 +pivot_offset = Vector2(49, 27) texture_normal = ExtResource("2_shpjn") texture_pressed = ExtResource("2_shpjn") texture_hover = ExtResource("3_bwnfl") ignore_texture_size = true stretch_mode = 0 +script = ExtResource("6_msnw2") [node name="ButtonTexture" type="TextureRect" parent="BuyNitwitButton"] layout_mode = 1 @@ -100,11 +103,13 @@ offset_left = 15.0 offset_top = 77.0 offset_right = 114.0 offset_bottom = 133.0 +pivot_offset = Vector2(47, 26) texture_normal = ExtResource("2_shpjn") texture_pressed = ExtResource("2_shpjn") texture_hover = ExtResource("3_bwnfl") ignore_texture_size = true stretch_mode = 0 +script = ExtResource("6_msnw2") [node name="ButtonTexture" type="TextureRect" parent="BuyGathererButton"] layout_mode = 1 diff --git a/scenes/ui/pause_menu.tscn b/scenes/ui/pause_menu.tscn index 9e3849d..007480e 100644 --- a/scenes/ui/pause_menu.tscn +++ b/scenes/ui/pause_menu.tscn @@ -1,4 +1,4 @@ -[gd_scene load_steps=12 format=3 uid="uid://davys5ol18oyo"] +[gd_scene load_steps=13 format=3 uid="uid://davys5ol18oyo"] [ext_resource type="StyleBox" uid="uid://do5c5v5kvgv0s" path="res://resources/styles/panel_small_style.tres" id="1_06xpe"] [ext_resource type="Script" path="res://scripts/ui/pause_menu.gd" id="1_kcif0"] @@ -6,6 +6,7 @@ [ext_resource type="Texture2D" uid="uid://bh01xbmjanku0" path="res://assets/textures/gui/button_bg.png" id="2_e7opb"] [ext_resource type="Texture2D" uid="uid://jv8twhntt6x3" path="res://assets/textures/gui/button_hover_bg.png" id="3_fx7y7"] [ext_resource type="Texture2D" uid="uid://slraulfmk8c0" path="res://assets/textures/gui/pictograms.png" id="4_dmywd"] +[ext_resource type="Script" path="res://scripts/ui/components/animated_texture_button.gd" id="5_r8xs8"] [sub_resource type="StyleBoxFlat" id="StyleBoxFlat_4k086"] bg_color = Color(0, 0, 0, 0.25098) @@ -59,11 +60,13 @@ offset_left = 38.0 offset_top = 24.0 offset_right = 117.0 offset_bottom = 97.0 +pivot_offset = Vector2(39, 37.5) texture_normal = ExtResource("2_e7opb") texture_pressed = ExtResource("2_e7opb") texture_hover = ExtResource("3_fx7y7") ignore_texture_size = true stretch_mode = 0 +script = ExtResource("5_r8xs8") [node name="TextureRect" type="TextureRect" parent="Panel/QuitButton"] layout_mode = 1 @@ -87,11 +90,13 @@ offset_left = 117.0 offset_top = -25.0 offset_right = 182.0 offset_bottom = 35.0 +pivot_offset = Vector2(33, 30.5) texture_normal = ExtResource("2_e7opb") texture_pressed = ExtResource("2_e7opb") texture_hover = ExtResource("3_fx7y7") ignore_texture_size = true stretch_mode = 0 +script = ExtResource("5_r8xs8") [node name="TextureRect" type="TextureRect" parent="Panel/CancelButton"] layout_mode = 1 diff --git a/scripts/ui/closeable_ui.gd b/scripts/ui/closeable_ui.gd index 154b6f4..5fc0b4e 100644 --- a/scripts/ui/closeable_ui.gd +++ b/scripts/ui/closeable_ui.gd @@ -37,27 +37,35 @@ func close() -> void: func _open_animation() -> void: - if _tween: - _tween.stop() - scale = Vector2.ZERO - _tween = create_tween() - await ( - _tween - .tween_property(self, "scale", Vector2.ONE, OPEN_TWEEN_DURATION) - .set_ease(Tween.EASE_OUT) - .set_trans(Tween.TRANS_ELASTIC) - .finished + await _animate( + Vector2.ONE, + OPEN_TWEEN_DURATION, + Tween.EASE_OUT, + Tween.TRANS_ELASTIC, ) func _close_animation() -> void: + await _animate( + Vector2.ZERO, + CLOSE_TWEEN_DURATION, + Tween.EASE_IN, + Tween.TRANS_BACK, + ) + +func _animate( + to_scale: Vector2, + duration: float, + ease_type: Tween.EaseType, + trans_type: Tween.TransitionType, +) -> void: if _tween: _tween.stop() scale = Vector2.ONE _tween = create_tween() await ( _tween - .tween_property(self, "scale", Vector2.ZERO, CLOSE_TWEEN_DURATION) - .set_ease(Tween.EASE_IN) - .set_trans(Tween.TRANS_BACK) + .tween_property(self, "scale", to_scale, duration) + .set_ease(ease_type) + .set_trans(trans_type) .finished ) diff --git a/scripts/ui/components/animated_texture_button.gd b/scripts/ui/components/animated_texture_button.gd new file mode 100644 index 0000000..1f3148d --- /dev/null +++ b/scripts/ui/components/animated_texture_button.gd @@ -0,0 +1,46 @@ +extends TextureButton +class_name AnimatedTextureButton + +const TWEEN_DURATION: float = 0.5 +const HOVER_SCALE: Vector2 = Vector2(0.8, 1.2) +const PRESS_SCALE: Vector2 = Vector2(1.2, 0.8) + +var _tween: Tween + +func _ready() -> void: + button_down.connect(_press_down_animation) + button_up.connect(_press_up_animation) + mouse_entered.connect(_hover_over_animation) + mouse_exited.connect(_hover_off_animation) + + +func _press_down_animation() -> void: + _animate(PRESS_SCALE) + + +func _press_up_animation() -> void: + if is_hovered(): + _animate(HOVER_SCALE) + else: + _animate(Vector2.ONE) + + +func _hover_over_animation() -> void: + _animate(HOVER_SCALE) + + +func _hover_off_animation() -> void: + _animate(Vector2.ONE) + + +func _animate(to_scale: Vector2) -> void: + if _tween: + _tween.stop() + _tween = create_tween() + await ( + _tween + .tween_property(self, "scale", to_scale, TWEEN_DURATION) + .set_ease(Tween.EASE_OUT) + .set_trans(Tween.TRANS_ELASTIC) + .finished + ) diff --git a/scripts/ui/honeydew_counter.gd b/scripts/ui/components/honeydew_counter.gd similarity index 100% rename from scripts/ui/honeydew_counter.gd rename to scripts/ui/components/honeydew_counter.gd diff --git a/scripts/ui/pause_menu.gd b/scripts/ui/pause_menu.gd index 9149aa8..e683b42 100644 --- a/scripts/ui/pause_menu.gd +++ b/scripts/ui/pause_menu.gd @@ -48,32 +48,41 @@ func _on_quit_button_pressed() -> void: func _open_animation() -> void: - if _tween: - _tween.stop() - panel.scale = Vector2.ZERO - controls_info.position = Vector2(_controls_info_pos.x, 1080) - _tween = create_tween() - _tween.set_pause_mode(Tween.TWEEN_PAUSE_PROCESS) - ( - _tween - .tween_property(controls_info, "position", _controls_info_pos, OPEN_TWEEN_DURATION) - .set_ease(Tween.EASE_OUT) - .set_trans(Tween.TRANS_ELASTIC) - ) - await ( - _tween - .parallel() - .tween_property(panel, "scale", Vector2.ONE, OPEN_TWEEN_DURATION) - .set_ease(Tween.EASE_OUT) - .set_trans(Tween.TRANS_ELASTIC) - .finished + await _animate( + Vector2.ZERO, + Vector2(_controls_info_pos.x, 1080), + Vector2.ONE, + _controls_info_pos, + OPEN_TWEEN_DURATION, + Tween.EASE_OUT, + Tween.TRANS_ELASTIC, ) func _close_animation() -> void: + await _animate( + Vector2.ONE, + _controls_info_pos, + Vector2.ZERO, + Vector2(_controls_info_pos.x, 1080), + CLOSE_TWEEN_DURATION, + Tween.EASE_IN, + Tween.TRANS_BACK, + ) + + +func _animate( + panel_scale_init: Vector2, + controls_info_pos_init: Vector2, + panel_scale_new: Vector2, + controls_info_pos_new: Vector2, + duration: float, + ease_type: Tween.EaseType, + trans_type: Tween.TransitionType, +) -> void: if _tween: _tween.stop() - panel.scale = Vector2.ONE - controls_info.position = _controls_info_pos + panel.scale = panel_scale_init + controls_info.position = controls_info_pos_init _tween = create_tween() _tween.set_pause_mode(Tween.TWEEN_PAUSE_PROCESS) ( @@ -81,17 +90,17 @@ func _close_animation() -> void: .tween_property( controls_info, "position", - Vector2(_controls_info_pos.x, 1080), - CLOSE_TWEEN_DURATION, + controls_info_pos_new, + duration, ) - .set_ease(Tween.EASE_IN) - .set_trans(Tween.TRANS_BACK) + .set_ease(ease_type) + .set_trans(trans_type) ) await ( _tween .parallel() - .tween_property(panel, "scale", Vector2.ZERO, CLOSE_TWEEN_DURATION) - .set_ease(Tween.EASE_IN) - .set_trans(Tween.TRANS_BACK) + .tween_property(panel, "scale", panel_scale_new, duration) + .set_ease(ease_type) + .set_trans(trans_type) .finished - ) + ) \ No newline at end of file