teatov/tli
teatov/tli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add button animations and refactor ui animation functions

Browse Source
This commit is contained in:
Teatov 2024-10-21 13:35:56 +10:00
parent 852e718a77
commit c40d2de56b
7 changed files with 123 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
scenes/ui/anthill_info.tscn
View File

@ -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

9
scenes/ui/buy_ants.tscn
View File

@ -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

7
scenes/ui/pause_menu.tscn
View File

@ -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

34
scripts/ui/closeable_ui.gd
View File

@ -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
)

46
scripts/ui/components/animated_texture_button.gd Normal file
View File

@ -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
)

0
scripts/ui/honeydew_counter.gd → scripts/ui/components/honeydew_counter.gd
View File

67
scripts/ui/pause_menu.gd
View File

@ -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
)
)