From 3131b731e094d4dac12ec0806f16e9f995262f2d Mon Sep 17 00:00:00 2001 From: Nordup Date: Tue, 12 Aug 2025 23:22:51 +0700 Subject: [PATCH] onboarding close button --- app/assets/styles/panel_hover.stylebox | Bin 482 -> 478 bytes app/scenes/components/onboarding/board.tscn | 3 +- .../components/onboarding/onboarding.tscn | 80 ++++++++++++++++-- app/scripts/ui/onboarding/carousel.gd | 13 ++- app/scripts/ui/onboarding/close_button.gd | 34 ++++++++ app/scripts/ui/onboarding/onboarding.gd | 4 +- app/shaders/vignette_blur.tres | 1 + 7 files changed, 126 insertions(+), 9 deletions(-) create mode 100644 app/scripts/ui/onboarding/close_button.gd diff --git a/app/assets/styles/panel_hover.stylebox b/app/assets/styles/panel_hover.stylebox index 2db257c0cffd0da0452230467736d7c959d2f2a2..f06c639ea0d8bbfb69b38a9a205fab34052d9441 100644 GIT binary patch literal 478 zcmV<40U`cUQ$s@n000005C8zM0{{TV0RR9fwJ-f(uma@`00z}aIY6Z<9XCK{7{J~8 zZp2^m8HQn|t#)c8Z%DRZ!%c$ZCi~(y*ak%0Sg;s^Z$Wkl4x*Lpv@ajj8e7WY3k7b$^U}?k^cjK zvU`@Jt(JGZasLzCa#PM;2W|Y1a9d~1o`(IGd{nzDw(#CGX))(&U)~~~k4nwL(QC>b z*F_QWUx1S~Gtj8KP)_({Q^;2&svYunHNx#;EK8)2EAf=DIZ_%NGM6MHw9hiN43Cs2 zHnA?1tz#FU5NM@zS*=tZ6e`s@ojx*_io$Ddeup)71C6&G*7UsF6hxsT!pPB?YBAU;>duWIGaI(uATh#u_C$=@wS& zXTfDN({f+f;NR%Q=hDQL$(NXw?vTM}vvgvszRxZI_Go%dG(50L3>s_r{cxEJZ(1GH z>Rw{3t#<0O9G}1fR5Sd7cFt=;q*bQ;ovA*kIyyYipl~4&e-3}yDWR2|{>rA%int|I UKIm#qz+;jrvgs1w0a8;#LogBNxc~qF literal 482 zcmV<80UiEQQ$s@n000005C8zP0{{TZ0RR9fwJ-f(vjPPU0QQtgI#6eo4$!ihSsAp; zzQ$E%W@hm~+Z;&V`*JgSn*_;C_C-@;vOv)BME1;}auE25ne_i(`t}y8@=vEU05bqP z0F$r(l&|(CvE&nYtB*%das)KnySzyEiR+8HD|M8#Uf8)Qx zA8~VZA!W(81=arxr`vNcw>=8~Kb*4U%VE}k$2IO|OX8hjkyak!p1eOR-HaH0n(Mh8 zRTTi^e?lnIs{xy_z9^rIJ>S;PhZDrQF??CAP$Y1^&}e0Ry%0iCVX2}BA9Zvmoj9B; ztp{Zi$r=U(I-U;Z!ZG0BfhLtgX-uY*rc_#BkwhZ?Um!RN{!K%Oun}--umMnF;Ly1E zh^-8|2sm>f`ZN%;Rn?WGu2t==^#wtwkwp=y8l?rLWwrre0ue-XI})JMe4;VN8YMdE z7FO$L#Kkky881J)UG(DXw4^Jz+;qhqbpw$`*|3}#lJ7lBgBhA|a}5t+`h~^Uy{%Vr1QIjH#8Rrk>xOyk`i&r$x_)0 YJrVaR<{9 diff --git a/app/scenes/components/onboarding/board.tscn b/app/scenes/components/onboarding/board.tscn index 87acfe6..0036389 100644 --- a/app/scenes/components/onboarding/board.tscn +++ b/app/scenes/components/onboarding/board.tscn @@ -36,7 +36,7 @@ grow_vertical = 2 pivot_offset = Vector2(300, 350) script = ExtResource("1_dxxs8") focus_button = NodePath("TextureButton") -unfocus_color = Color(0.9, 0.9, 0.9, 0.509804) +unfocus_color = Color(0.9, 0.9, 0.9, 0.5) unfocus_scale = Vector2(0.8, 0.8) [node name="Panel" type="Panel" parent="."] @@ -49,6 +49,7 @@ grow_vertical = 2 theme_override_styles/panel = SubResource("StyleBoxFlat_r2yvw") [node name="MarginContainer" type="MarginContainer" parent="."] +visible = false layout_mode = 1 anchors_preset = 15 anchor_right = 1.0 diff --git a/app/scenes/components/onboarding/onboarding.tscn b/app/scenes/components/onboarding/onboarding.tscn index 3b3f749..53c2b3b 100644 --- a/app/scenes/components/onboarding/onboarding.tscn +++ b/app/scenes/components/onboarding/onboarding.tscn @@ -1,10 +1,12 @@ -[gd_scene load_steps=9 format=3 uid="uid://b5tbn17l1pfs1"] +[gd_scene load_steps=16 format=3 uid="uid://b5tbn17l1pfs1"] [ext_resource type="Script" path="res://scripts/ui/onboarding/onboarding.gd" id="1_2xh2a"] [ext_resource type="Script" path="res://scripts/ui/onboarding/carousel.gd" id="2_uhwdh"] [ext_resource type="Shader" uid="uid://dd1axtdlit6no" path="res://shaders/vignette_blur.tres" id="2_vhqmk"] [ext_resource type="PackedScene" uid="uid://pbsmrx55rb5g" path="res://scenes/components/onboarding/board.tscn" id="3_04ofy"] [ext_resource type="Resource" uid="uid://crjhix0osmtnf" path="res://resources/ui_events.res" id="3_jta5g"] +[ext_resource type="FontFile" uid="uid://do40418waa8w3" path="res://assets/fonts/Inter-Regular.otf" id="4_bi8o3"] +[ext_resource type="Script" path="res://scripts/ui/onboarding/close_button.gd" id="6_lcfru"] [sub_resource type="StyleBoxFlat" id="StyleBoxFlat_htqsi"] bg_color = Color(0, 0, 0, 0.258824) @@ -17,7 +19,20 @@ shader_parameter/VignetteColor = Color(0, 0, 0, 1) [sub_resource type="StyleBoxFlat" id="StyleBoxFlat_b61hg"] -[node name="Onboarding" type="Control" node_paths=PackedStringArray("root", "skip")] +[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_vy2ch"] + +[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_gh5x7"] + +[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_p4v5c"] + +[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_vsedv"] + +[sub_resource type="LabelSettings" id="LabelSettings_cgaqc"] +font = ExtResource("4_bi8o3") +font_size = 26 +font_color = Color(0.831373, 0.831373, 0.831373, 1) + +[node name="Onboarding" type="Control" node_paths=PackedStringArray("root", "close")] top_level = true z_index = 10 layout_mode = 3 @@ -29,7 +44,7 @@ grow_vertical = 2 mouse_filter = 2 script = ExtResource("1_2xh2a") root = NodePath("Root") -skip = NodePath("Root/Carousel/Line/Board/MarginContainer/VBoxContainer/HBoxContainer/Hide") +close = NodePath("Root/Carousel/Line/Close") [node name="Root" type="Control" parent="."] layout_mode = 1 @@ -61,7 +76,7 @@ grow_vertical = 2 mouse_filter = 2 theme_override_styles/panel = SubResource("StyleBoxFlat_b61hg") -[node name="Carousel" type="Control" parent="Root" node_paths=PackedStringArray("line")] +[node name="Carousel" type="Control" parent="Root" node_paths=PackedStringArray("line", "close")] layout_mode = 1 anchors_preset = 15 anchor_right = 1.0 @@ -71,6 +86,7 @@ grow_vertical = 2 script = ExtResource("2_uhwdh") ui_events = ExtResource("3_jta5g") line = NodePath("Line") +close = NodePath("Line/Close") tween_duration = 0.3 [node name="Line" type="Control" parent="Root/Carousel"] @@ -122,4 +138,58 @@ offset_top = 0.0 offset_right = 1900.0 offset_bottom = 700.0 -[editable path="Root/Carousel/Line/Board"] +[node name="Close" type="Button" parent="Root/Carousel/Line" node_paths=PackedStringArray("content")] +layout_mode = 1 +anchors_preset = 8 +anchor_left = 0.5 +anchor_top = 0.5 +anchor_right = 0.5 +anchor_bottom = 0.5 +offset_left = 950.0 +offset_top = -350.0 +offset_right = 1550.0 +offset_bottom = 350.0 +grow_horizontal = 2 +grow_vertical = 2 +scale = Vector2(0.8, 0.8) +pivot_offset = Vector2(300, 350) +focus_mode = 0 +mouse_default_cursor_shape = 2 +theme_override_styles/focus = SubResource("StyleBoxEmpty_vy2ch") +theme_override_styles/hover = SubResource("StyleBoxEmpty_gh5x7") +theme_override_styles/pressed = SubResource("StyleBoxEmpty_p4v5c") +theme_override_styles/normal = SubResource("StyleBoxEmpty_vsedv") +flat = true +script = ExtResource("6_lcfru") +content = NodePath("Centered") +tween_duration = 0.2 +base_modulate = Color(1, 1, 1, 0.5) +hover_scale = 1.2 + +[node name="Centered" type="Control" parent="Root/Carousel/Line/Close"] +layout_mode = 1 +anchors_preset = 8 +anchor_left = 0.5 +anchor_top = 0.5 +anchor_right = 0.5 +anchor_bottom = 0.5 +grow_horizontal = 2 +grow_vertical = 2 + +[node name="Label" type="Label" parent="Root/Carousel/Line/Close/Centered"] +layout_mode = 1 +anchors_preset = 8 +anchor_left = 0.5 +anchor_top = 0.5 +anchor_right = 0.5 +anchor_bottom = 0.5 +offset_left = -78.0 +offset_top = -12.5 +offset_right = 78.0 +offset_bottom = 12.5 +grow_horizontal = 2 +grow_vertical = 2 +text = "Let's try it out →" +label_settings = SubResource("LabelSettings_cgaqc") +horizontal_alignment = 1 +vertical_alignment = 1 diff --git a/app/scripts/ui/onboarding/carousel.gd b/app/scripts/ui/onboarding/carousel.gd index 18937f4..176cb7f 100644 --- a/app/scripts/ui/onboarding/carousel.gd +++ b/app/scripts/ui/onboarding/carousel.gd @@ -2,6 +2,7 @@ extends Control @export var ui_events: UiEvents @export var line: Control +@export var close: Button @export var tween_duration: float var boards: Array[OnboardingBoard] = [] @@ -19,7 +20,8 @@ func _ready() -> void: func setup_boards() -> void: for child in line.get_children(): - boards.append(child as OnboardingBoard) + if child is not OnboardingBoard: continue + boards.append(child) for i in range(boards.size()): boards[i].request_focus.connect(move_line.bind(i)) @@ -48,3 +50,12 @@ func move_line(board_index: int) -> void: if i == board_index: boards[i].focus(tween_duration) else: boards[i].unfocus(tween_duration) + + await tween.finished + refresh_mouse_position() + + +func refresh_mouse_position() -> void: + var event = InputEventMouseMotion.new() + event.position = get_viewport().get_mouse_position() + Input.parse_input_event(event) diff --git a/app/scripts/ui/onboarding/close_button.gd b/app/scripts/ui/onboarding/close_button.gd new file mode 100644 index 0000000..5e5a7e7 --- /dev/null +++ b/app/scripts/ui/onboarding/close_button.gd @@ -0,0 +1,34 @@ +extends Button + +@export var content: Control +@export var tween_duration: float +@export var base_modulate: Color +@export var hover_scale: float + +var tween: Tween + + +func _ready() -> void: + mouse_entered.connect(on_mouse_entered) + mouse_exited.connect(on_mouse_exited) + on_mouse_exited() + + +func on_mouse_entered() -> void: + if is_instance_valid(tween): tween.stop() + tween = create_tween() + tween.set_parallel(true) + + tween.set_trans(Tween.TRANS_QUAD).set_ease(Tween.EASE_OUT) + tween.tween_property(content, "scale", Vector2.ONE * hover_scale, tween_duration) + tween.tween_property(content, "modulate", Color.WHITE, tween_duration) + + +func on_mouse_exited() -> void: + if is_instance_valid(tween): tween.stop() + tween = create_tween() + tween.set_parallel(true) + + tween.set_trans(Tween.TRANS_QUAD).set_ease(Tween.EASE_OUT) + tween.tween_property(content, "scale", Vector2.ONE, tween_duration) + tween.tween_property(content, "modulate", base_modulate, tween_duration) diff --git a/app/scripts/ui/onboarding/onboarding.gd b/app/scripts/ui/onboarding/onboarding.gd index f08d2cb..d821f93 100644 --- a/app/scripts/ui/onboarding/onboarding.gd +++ b/app/scripts/ui/onboarding/onboarding.gd @@ -5,7 +5,7 @@ const SHOWN = Color(1, 1, 1, 1) const HIDDEN = Color(1, 1, 1, 0) @export var root: Control -@export var skip: Button +@export var close: Button @export var fade_in: float = 0.2 @export var fade_out: float = 0.2 @@ -13,7 +13,7 @@ var tween: Tween func _ready() -> void: - skip.pressed.connect(hide_onboarding) + close.pressed.connect(hide_onboarding) visible = true root.visible = false diff --git a/app/shaders/vignette_blur.tres b/app/shaders/vignette_blur.tres index 7db91fd..d59eb1a 100644 --- a/app/shaders/vignette_blur.tres +++ b/app/shaders/vignette_blur.tres @@ -143,6 +143,7 @@ void fragment() { } " +graph_offset = Vector2(-478.86, -398.352) mode = 1 modes/blend = 5 flags/light_only = false