bmq/xiandie
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

prop hud 右侧展开分栏：被选中项+右侧展开区域，右侧区域可以选中道具

Browse Source
This commit is contained in:
cakipaul 2025-02-04 19:50:48 +08:00
parent 10e4915cbe
commit 6f87db20c6
8 changed files with 268 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
asset/art/ui/hud/select_mark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 405 B

34
asset/art/ui/hud/select_mark.png.import Normal file
View File

@ -0,0 +1,34 @@
[remap]
importer="texture"
type="CompressedTexture2D"
uid="uid://c0gjes4a8ou3b"
path="res://.godot/imported/select_mark.png-3482e4ba252b94def00b26feddc6d4da.ctex"
metadata={
"vram_texture": false
}
[deps]
source_file="res://asset/art/ui/hud/select_mark.png"
dest_files=["res://.godot/imported/select_mark.png-3482e4ba252b94def00b26feddc6d4da.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

BIN
asset/art/ui/hud/selecting_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

34
asset/art/ui/hud/selecting_bg.png.import Normal file
View File

@ -0,0 +1,34 @@
[remap]
importer="texture"
type="CompressedTexture2D"
uid="uid://d4nxjk0127u23"
path="res://.godot/imported/selecting_bg.png-48e69ad77ac410e64ed507fd73f0a091.ctex"
metadata={
"vram_texture": false
}
[deps]
source_file="res://asset/art/ui/hud/selecting_bg.png"
dest_files=["res://.godot/imported/selecting_bg.png-48e69ad77ac410e64ed507fd73f0a091.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

177
scene/prop/prop_hud.gd
View File

@ -14,8 +14,8 @@ signal current_item_changed(prop_key: String)
@export var inventory: PropInventory:
set(value):
inventory = value
if inventory and not inventory.current_item_changed.is_connected(current_item_changed.emit):
inventory.current_item_changed.connect(current_item_changed.emit)
if inventory and not inventory.current_item_changed.is_connected(_emit_changed):
inventory.current_item_changed.connect(_emit_changed)
@export_group("UI-UX")
@export var display_time := 2.5 # 不包含渐入渐出（约 0.6s）的时长
@export var locked := false:
@ -23,18 +23,26 @@ signal current_item_changed(prop_key: String)
locked = value
if value:
selected = false
@export var selected := false:
@export var selected := true:
set(value):
selected = value
if selected != value:
selected = value
_emit_changed()
@onready var sfx_click = %SfxClick as Sfx
@onready var left_btn = %LeftButton as TextureButton
@onready var right_btn = %RightButton as TextureButton
@onready var title_label = %TitleLabel as Label
# hud_rect 为背景， prop_scroll 为滚动区域，prop_hbox 为道具容器
@onready var hud_rect = %HudRect as NinePatchRect
@onready var props_scroll = %PropScrollContainer as ScrollContainer
@onready var props_hbox = %PropsHBox as HBoxContainer
@onready var prop_scroll = %PropScrollContainer as ScrollContainer
@onready var prop_hbox = %PropHBox as HBoxContainer
@onready var display_prop = %DiaplayProp as TextureButton
@onready var selecting_bg = %SelectingBG as TextureRect
# hud_rect 最左侧为 prop_scroll, 最右侧为 props_bag_scroll
@onready var props_bag_scroll = %PropsBagScroll as ScrollContainer
@onready var props_bag = %PropsBag as HBoxContainer
@onready var select_mark = %SelectMark as TextureRect
var prop_containers = [] #CenterContainer
const PROP_CONTAINER_X = 130.0
const PROP_CONTROL_X = 110.0
@ -52,18 +60,29 @@ var display_tween: Tween
var container_tween: Tween
func _emit_changed(prop_key := ""):
if not selected:
current_item_changed.emit("")
else:
current_item_changed.emit(prop_key)
func _ready() -> void:
if Engine.is_editor_hint():
return
# read prop containers，第一个为 head 跳过, 最后一个为 tail 跳过
for id in range(props_hbox.get_child_count() - 2):
var container = props_hbox.get_child(id + 1)
# read prop containers
for id in range(props_bag.get_child_count()):
var container = props_bag.get_child(id)
prop_containers.append(container)
container.get_child(0).get_child(0).pressed.connect(_on_prop_pressed.bind(id))
display_prop.pressed.connect(_on_prop_pressed.bind(-1))
_load_items()
_load_from_archive()
props_scroll.scroll_horizontal = PROP_CONTAINER_X
focus_exited.connect(_on_focus_exited)
selecting_bg.modulate.a = 0.0
prop_scroll.scroll_horizontal = PROP_CONTAINER_X
props_bag_scroll.scroll_horizontal = 0.0
props_bag_scroll.custom_minimum_size.x = 0.0
# focus_exited.connect(_on_focus_exited)
# 存档更新时，从存档加载 prop
ArchiveManager.archive_loaded.connect(_load_from_archive)
# tween timer
@ -83,11 +102,6 @@ func _ready() -> void:
mouse_exited.connect(_on_mouse_exited)
func _on_focus_exited() -> void:
if selected:
selected = false
func _load_items():
var id = item_config_res.titles["PropItems"]
var current_line = item_config_res.lines[id]
@ -154,53 +168,70 @@ func _load_texture_cache() -> void:
func _update_prop_display_with_texture():
if not inventory:
return
var prop = prop_containers[0].get_child(0).get_child(0) as TextureButton
# 在没有道具时，展示空手 placeholder
if inventory.enabled_items.size() == 0:
prop.texture_normal = preload("res://asset/art/ui/hud/placeholder.png")
prop.size = Vector2(PROP_CONTROL_X, PROP_CONTROL_X)
prop.scale = Vector2(1.0, 1.0)
display_prop.texture_normal = preload("res://asset/art/ui/hud/placeholder.png")
display_prop.size = Vector2(PROP_CONTROL_X, PROP_CONTROL_X)
display_prop.scale = Vector2(1.0, 1.0)
title_label.text = tr("prop_空手")
return
else:
var key = inventory.current_item_key()
_display_texture_by_key(display_prop, key)
title_label.text = tr(key)
# 选中标记 select_mark; 如果被 free 掉，则重新创建
if select_mark and is_instance_valid(select_mark):
var parent = select_mark.get_parent()
if parent:
parent.remove_child(select_mark)
else:
select_mark = TextureRect.new()
select_mark.custom_minimum_size = Vector2(PROP_CONTAINER_X, PROP_CONTAINER_X)
select_mark.texture = preload("res://asset/art/ui/hud/select_mark.png")
# bag
for i in range(prop_containers.size()):
var id = wrapi(inventory.current_index + i, 0, inventory.enabled_items.size())
var item = items_dict[inventory.enabled_items[id]]
prop = prop_containers[i].get_child(0).get_child(0) as TextureButton
if i == 0:
title_label.text = tr(item.key)
if item.key in cached_inventory_textures:
prop.texture_normal = cached_inventory_textures[item.key]
var t_size = prop.texture_normal.get_size()
var max_x = max(t_size.x, t_size.y)
var p_scale = min(PROP_CONTROL_X / t_size.x, PROP_CONTROL_X / t_size.y)
prop.scale = Vector2(p_scale, p_scale)
prop.size = Vector2(max_x, max_x)
else:
printerr("PropHUD: Texture not found! key=", item.key)
prop.texture_normal = null
props_scroll.scroll_horizontal = PROP_CONTAINER_X
var id = wrapi(i, 0, inventory.enabled_items.size())
var key = inventory.enabled_items[id]
var button = prop_containers[i].get_child(0).get_child(0) as TextureButton
_display_texture_by_key(button, key)
if id == inventory.current_index:
prop_containers[i].get_child(0).add_child(select_mark)
prop_scroll.scroll_horizontal = PROP_CONTAINER_X
# props_bag_scroll.scroll_horizontal = 0.0
func _display_texture_by_key(button, key) -> void:
if not key:
button.texture_normal = null
return
var item = items_dict[key]
button.texture_normal = cached_inventory_textures[item.key]
var t_size = button.texture_normal.get_size()
var max_x = max(t_size.x, t_size.y)
var p_scale = min(PROP_CONTROL_X / t_size.x, PROP_CONTROL_X / t_size.y)
button.scale = Vector2(p_scale, p_scale)
button.size = Vector2(max_x, max_x)
func on_left_pressed() -> void:
if locked:
return
sfx_click.play()
_mouse_moved_on_listening()
if inventory.index_wrap_add(-1):
selected = false
selected = true
_update_prop_display_with_texture()
_tween_container(true)
_mouse_moved_on_listening()
func on_right_pressed() -> void:
if locked:
return
sfx_click.play()
_mouse_moved_on_listening()
if inventory.index_wrap_add(1):
selected = false
selected = true
_update_prop_display_with_texture()
_tween_container(false)
_mouse_moved_on_listening()
func _tween_container(left_to_right := true) -> void:
@ -208,11 +239,11 @@ func _tween_container(left_to_right := true) -> void:
container_tween.kill()
container_tween = create_tween()
if left_to_right:
props_scroll.scroll_horizontal = 2 * PROP_CONTAINER_X
prop_scroll.scroll_horizontal = 2 * PROP_CONTAINER_X
else:
props_scroll.scroll_horizontal = 0.0
prop_scroll.scroll_horizontal = 0.0
# 通过 Head 与 Tail 占位符，实现滚动效果；否则会导致卡在边界上，无法滚动
container_tween.tween_property(props_scroll, "scroll_horizontal", PROP_CONTAINER_X, 0.2)
container_tween.tween_property(prop_scroll, "scroll_horizontal", PROP_CONTAINER_X, 0.2)
func _on_prop_pressed(id := 0) -> void:
@ -221,33 +252,55 @@ func _on_prop_pressed(id := 0) -> void:
sfx_click.play()
if GlobalConfig.DEBUG:
print("PropHUD Panel pressed.")
if not selected:
focus_mode = FOCUS_ALL
grab_focus()
selected = true
inventory.current_index += id
focus_mode = FOCUS_ALL
grab_focus()
selected = true
if id >= 0:
inventory.current_index = id
_update_prop_display_with_texture()
_mouse_moved_on_listening(true)
var prop_blink: Tween
var tween_scroll: Tween
func _toggle_scroll(fold := true) -> void:
if prop_blink and prop_blink.is_running():
prop_blink.kill()
if tween_scroll and tween_scroll.is_running():
tween_scroll.kill()
# PROP_CONTAINER_X + 10. 为hud的两侧留出的空间
if fold:
# kill blink
select_mark.modulate.a = 1.0
selecting_bg.modulate.a = 0.0
# fold
tween_scroll = create_tween()
tween_scroll.tween_property(props_scroll, "custom_minimum_size:x", PROP_CONTAINER_X, 0.5)
tween_scroll.tween_property(props_bag_scroll, "custom_minimum_size:x", 0.0, 0.5)
tween_scroll.parallel().tween_property(
hud_rect, "custom_minimum_size:x", PROP_CONTAINER_X + 10., 0.5
)
else:
# 保持最小宽度
var x_size = max(1, prop_containers.size()) * PROP_CONTAINER_X
# blink
if prop_containers.size() > 0:
prop_blink = create_tween().set_loops(0)
prop_blink.tween_property(select_mark, "modulate:a", 0.6, 1.).set_ease(
Tween.EASE_IN_OUT
)
prop_blink.parallel().tween_property(selecting_bg, "modulate:a", 0.2, 1.).set_ease(
Tween.EASE_IN_OUT
)
prop_blink.tween_property(select_mark, "modulate:a", 1., 1.).set_ease(Tween.EASE_IN_OUT)
prop_blink.parallel().tween_property(selecting_bg, "modulate:a", .6, 1.).set_ease(
Tween.EASE_IN_OUT
)
# unfold
var bag_x = prop_containers.size() * PROP_CONTAINER_X
var hud_x = bag_x + PROP_CONTAINER_X + 10.
tween_scroll = create_tween()
tween_scroll.tween_property(props_scroll, "custom_minimum_size:x", x_size, 0.5)
tween_scroll.parallel().tween_property(hud_rect, "custom_minimum_size:x", x_size + 10., 0.5)
tween_scroll.tween_property(props_bag_scroll, "custom_minimum_size:x", bag_x, 0.5)
tween_scroll.parallel().tween_property(hud_rect, "custom_minimum_size:x", hud_x, 0.5)
func _on_mouse_entered() -> void:
@ -355,13 +408,13 @@ func _align_container_size() -> void:
# 判断是否需要添加新的 prop container
while inventory.enabled_items.size() > prop_containers.size():
append_prop_container()
# 判断是否需要删除 prop container，最少保留一个
while inventory.enabled_items.size() < prop_containers.size() and prop_containers.size() > 1:
# 判断是否需要删除 prop container，不保留余数
while inventory.enabled_items.size() < prop_containers.size():
remove_prop_container()
if displaying:
_mouse_moved_on_listening()
# 如果正在展示，则更新 scroll 长度
if displaying and props_scroll.custom_minimum_size.x > PROP_CONTAINER_X:
if displaying and props_bag_scroll.custom_minimum_size.x > 0.0:
_toggle_scroll(false)
@ -378,17 +431,15 @@ func append_prop_container() -> void:
prop.stretch_mode = TextureButton.STRETCH_KEEP_ASPECT_CENTERED
control.add_child(prop)
# 添加到 hbox: container -> control -> prop
props_hbox.add_child(container)
# 放在 Tail 占位符 之前
props_hbox.move_child(container, -2)
props_bag.add_child(container)
prop.pressed.connect(_on_prop_pressed.bind(prop_containers.size() - 1))
func remove_prop_container() -> void:
if prop_containers.size() <= 1:
if prop_containers.size() == 0:
return
var container = prop_containers.pop_back()
props_hbox.remove_child(container)
props_bag.remove_child(container)
container.queue_free()

93
scene/prop/prop_hud.tscn
View File

@ -1,4 +1,4 @@
[gd_scene load_steps=12 format=3 uid="uid://dc778gsjfr3ky"]
[gd_scene load_steps=14 format=3 uid="uid://dc778gsjfr3ky"]
[ext_resource type="Script" path="res://scene/prop/prop_hud.gd" id="1_bbv0a"]
[ext_resource type="Texture2D" uid="uid://dok08tovej18w" path="res://asset/art/ui/hud/normal_left.png" id="2_bjc2b"]
@ -6,6 +6,8 @@
[ext_resource type="Texture2D" uid="uid://c45k7ncg6xhpv" path="res://asset/art/ui/hud/pressed_left.png" id="3_fca7p"]
[ext_resource type="Texture2D" uid="uid://c2jq2neda32ix" path="res://asset/art/ui/hud/Prop.png" id="5_6tt77"]
[ext_resource type="Texture2D" uid="uid://0uwun1mo726u" path="res://asset/art/prop/c02/绳子物品.png" id="6_0m706"]
[ext_resource type="Texture2D" uid="uid://d4nxjk0127u23" path="res://asset/art/ui/hud/selecting_bg.png" id="6_5ixbr"]
[ext_resource type="Texture2D" uid="uid://c0gjes4a8ou3b" path="res://asset/art/ui/hud/select_mark.png" id="7_53yeo"]
[ext_resource type="FontFile" uid="uid://dr8bp6p7byb37" path="res://asset/font/字体/方正楷体简体.TTF" id="10_mye4q"]
[ext_resource type="Texture2D" uid="uid://c1ogeaa836kry" path="res://asset/art/ui/hud/normal_right.png" id="10_vkaik"]
[ext_resource type="Script" path="res://scene/prop/test_hbox.gd" id="11_008sv"]
@ -80,7 +82,11 @@ theme_override_constants/margin_top = 5
theme_override_constants/margin_right = 5
theme_override_constants/margin_bottom = 5
[node name="PropScrollContainer" type="ScrollContainer" parent="VBoxContainer/HBoxContainer/HudRect/MarginContainer"]
[node name="HBoxContainer" type="HBoxContainer" parent="VBoxContainer/HBoxContainer/HudRect/MarginContainer"]
layout_mode = 2
theme_override_constants/separation = 0
[node name="PropScrollContainer" type="ScrollContainer" parent="VBoxContainer/HBoxContainer/HudRect/MarginContainer/HBoxContainer"]
unique_name_in_owner = true
custom_minimum_size = Vector2(130, 130)
layout_mode = 2
@ -91,26 +97,45 @@ scroll_horizontal = 130
horizontal_scroll_mode = 3
vertical_scroll_mode = 0
[node name="PropsHBox" type="HBoxContainer" parent="VBoxContainer/HBoxContainer/HudRect/MarginContainer/PropScrollContainer"]
[node name="PropHBox" type="HBoxContainer" parent="VBoxContainer/HBoxContainer/HudRect/MarginContainer/HBoxContainer/PropScrollContainer"]
unique_name_in_owner = true
layout_mode = 2
size_flags_horizontal = 0
theme_override_constants/separation = 0
[node name="Head" type="Control" parent="VBoxContainer/HBoxContainer/HudRect/MarginContainer/PropScrollContainer/PropsHBox"]
[node name="Head" type="Control" parent="VBoxContainer/HBoxContainer/HudRect/MarginContainer/HBoxContainer/PropScrollContainer/PropHBox"]
custom_minimum_size = Vector2(130, 130)
layout_mode = 2
[node name="PropContainer" type="CenterContainer" parent="VBoxContainer/HBoxContainer/HudRect/MarginContainer/PropScrollContainer/PropsHBox"]
[node name="PropContainer" type="CenterContainer" parent="VBoxContainer/HBoxContainer/HudRect/MarginContainer/HBoxContainer/PropScrollContainer/PropHBox"]
custom_minimum_size = Vector2(130, 130)
layout_mode = 2
size_flags_horizontal = 4
[node name="Control" type="Control" parent="VBoxContainer/HBoxContainer/HudRect/MarginContainer/PropScrollContainer/PropsHBox/PropContainer"]
[node name="Control" type="Control" parent="VBoxContainer/HBoxContainer/HudRect/MarginContainer/HBoxContainer/PropScrollContainer/PropHBox/PropContainer"]
custom_minimum_size = Vector2(110, 110)
layout_mode = 2
[node name="Prop" type="TextureButton" parent="VBoxContainer/HBoxContainer/HudRect/MarginContainer/PropScrollContainer/PropsHBox/PropContainer/Control"]
[node name="SelectingBG" type="TextureRect" parent="VBoxContainer/HBoxContainer/HudRect/MarginContainer/HBoxContainer/PropScrollContainer/PropHBox/PropContainer/Control"]
unique_name_in_owner = true
self_modulate = Color(0.837083, 0.510264, 0.465919, 1)
custom_minimum_size = Vector2(120, 120)
layout_mode = 1
anchors_preset = 8
anchor_left = 0.5
anchor_top = 0.5
anchor_right = 0.5
anchor_bottom = 0.5
offset_left = -65.0
offset_top = -65.0
offset_right = 65.0
offset_bottom = 65.0
grow_horizontal = 2
grow_vertical = 2
texture = ExtResource("6_5ixbr")
[node name="DiaplayProp" type="TextureButton" parent="VBoxContainer/HBoxContainer/HudRect/MarginContainer/HBoxContainer/PropScrollContainer/PropHBox/PropContainer/Control"]
unique_name_in_owner = true
layout_mode = 0
offset_right = 146.0
offset_bottom = 146.0
@ -118,10 +143,60 @@ scale = Vector2(0.75, 0.75)
texture_normal = ExtResource("6_0m706")
stretch_mode = 5
[node name="Tail" type="Control" parent="VBoxContainer/HBoxContainer/HudRect/MarginContainer/PropScrollContainer/PropsHBox"]
[node name="Tail" type="Control" parent="VBoxContainer/HBoxContainer/HudRect/MarginContainer/HBoxContainer/PropScrollContainer/PropHBox"]
custom_minimum_size = Vector2(130, 130)
layout_mode = 2
[node name="PropsBagScroll" type="ScrollContainer" parent="VBoxContainer/HBoxContainer/HudRect/MarginContainer/HBoxContainer"]
unique_name_in_owner = true
custom_minimum_size = Vector2(130, 130)
layout_mode = 2
size_flags_horizontal = 0
size_flags_vertical = 4
mouse_filter = 2
horizontal_scroll_mode = 3
vertical_scroll_mode = 0
[node name="PropsBag" type="HBoxContainer" parent="VBoxContainer/HBoxContainer/HudRect/MarginContainer/HBoxContainer/PropsBagScroll"]
unique_name_in_owner = true
layout_mode = 2
size_flags_horizontal = 0
theme_override_constants/separation = 0
[node name="PropContainer" type="CenterContainer" parent="VBoxContainer/HBoxContainer/HudRect/MarginContainer/HBoxContainer/PropsBagScroll/PropsBag"]
custom_minimum_size = Vector2(130, 130)
layout_mode = 2
size_flags_horizontal = 4
[node name="Control" type="Control" parent="VBoxContainer/HBoxContainer/HudRect/MarginContainer/HBoxContainer/PropsBagScroll/PropsBag/PropContainer"]
custom_minimum_size = Vector2(110, 110)
layout_mode = 2
[node name="Prop" type="TextureButton" parent="VBoxContainer/HBoxContainer/HudRect/MarginContainer/HBoxContainer/PropsBagScroll/PropsBag/PropContainer/Control"]
layout_mode = 0
offset_right = 146.0
offset_bottom = 146.0
scale = Vector2(0.75, 0.75)
texture_normal = ExtResource("6_0m706")
stretch_mode = 5
[node name="SelectMark" type="TextureRect" parent="VBoxContainer/HBoxContainer/HudRect/MarginContainer/HBoxContainer/PropsBagScroll/PropsBag/PropContainer/Control"]
unique_name_in_owner = true
custom_minimum_size = Vector2(130, 130)
layout_mode = 1
anchors_preset = 8
anchor_left = 0.5
anchor_top = 0.5
anchor_right = 0.5
anchor_bottom = 0.5
offset_left = -65.0
offset_top = -65.0
offset_right = 65.0
offset_bottom = 65.0
grow_horizontal = 2
grow_vertical = 2
texture = ExtResource("7_53yeo")
[node name="RightMargin" type="MarginContainer" parent="VBoxContainer/HBoxContainer"]
layout_mode = 2
size_flags_horizontal = 0
@ -138,7 +213,7 @@ texture_pressed = ExtResource("11_a512b")
stretch_mode = 5
[node name="MarginContainer2" type="MarginContainer" parent="VBoxContainer"]
custom_minimum_size = Vector2(170, 0)
custom_minimum_size = Vector2(165, 0)
layout_mode = 2
size_flags_horizontal = 0
mouse_filter = 2

3
scene/prop/prop_inventory_resource.gd
View File

@ -2,8 +2,7 @@ class_name PropInventory extends Resource
signal current_item_changed(prop_key: String)
# prop_空手 默认就存在，并且不可删除
@export var enabled_items := ["prop_空手"]
@export var enabled_items := []
@export var current_index := 0:
set(val):
if current_index != val:

2
scene/prop/test_hbox.gd
View File

@ -1,6 +1,6 @@
extends HBoxContainer
var items := ["prop_令牌", "prop_令牌", "prop_信碎片1", "prop_火柴", "prop_绳子", "prop_1012钥匙", "prop_老虎钳"]
var items := ["prop_令牌", "prop_信碎片1", "prop_火柴", "prop_绳子", "prop_令牌", "prop_1012钥匙", "prop_老虎钳"]
var id := 0