feat(chat): 优化聊天UI布局和WebSocket连接

- 更新 WebSocket URL 以支持 Socket.IO 握手参数 (EIO=4)
- 重构聊天面板布局,使用绝对定位和百分比锚点
- 优化输入框样式,添加装饰元素
- 修复输入框焦点释放的事件冲突问题
- 将 ChatUI 集成到主场景中
- 改进主场景容器布局设置
This commit is contained in:
WhaleTown Developer
2026-01-08 23:59:21 +08:00
parent 9c2e3bf15a
commit 25a21f92be
9 changed files with 102 additions and 59 deletions

View File

@@ -63,7 +63,8 @@ signal chat_position_updated(stream: String, topic: String)
# ============================================================================ # ============================================================================
# WebSocket 服务器 URL # WebSocket 服务器 URL
const WEBSOCKET_URL: String = "wss://whaletownend.xinghangee.icu/game" # 添加 Socket.IO 握手参数EIO=4 表示 Engine.IO 版本transport=websocket
const WEBSOCKET_URL: String = "wss://whaletownend.xinghangee.icu/game/socket.io/?EIO=4&transport=websocket"
# 重连配置 # 重连配置
const RECONNECT_MAX_ATTEMPTS: int = 5 const RECONNECT_MAX_ATTEMPTS: int = 5

View File

@@ -62,7 +62,8 @@ enum ConnectionState {
# ============================================================================ # ============================================================================
# WebSocket 服务器 URL # WebSocket 服务器 URL
const WEBSOCKET_URL: String = "wss://whaletownend.xinghangee.icu/game" # 添加 Socket.IO 握手参数EIO=4 表示 Engine.IO 版本transport=websocket
const WEBSOCKET_URL: String = "wss://whaletownend.xinghangee.icu/game/socket.io/?EIO=4&transport=websocket"
# 默认最大重连次数 # 默认最大重连次数
const DEFAULT_MAX_RECONNECT_ATTEMPTS: int = 5 const DEFAULT_MAX_RECONNECT_ATTEMPTS: int = 5

Binary file not shown.

Before

Width:  |  Height:  |  Size: 207 KiB

After

Width:  |  Height:  |  Size: 198 KiB

View File

@@ -2,7 +2,7 @@
importer="texture" importer="texture"
type="CompressedTexture2D" type="CompressedTexture2D"
uid="uid://flepo0gpb55h" uid="uid://cchjgp6qh7u61"
path="res://.godot/imported/缩略框背景.png-1ffcbaafc0bc1c1b17eae2ad5370d0bc.ctex" path="res://.godot/imported/缩略框背景.png-1ffcbaafc0bc1c1b17eae2ad5370d0bc.ctex"
metadata={ metadata={
"vram_texture": false "vram_texture": false

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

View File

@@ -135,4 +135,4 @@ func _input(event):
get_tree().quit() get_tree().quit()
GameState.MAIN_GAME: GameState.MAIN_GAME:
# 在游戏中按ESC可能显示菜单或返回登录 # 在游戏中按ESC可能显示菜单或返回登录
show_auth_scene() show_auth_scene()

View File

@@ -1,6 +1,6 @@
[gd_scene load_steps=3 format=3 uid="uid://cjabtnqbdd2ey"] [gd_scene load_steps=4 format=3 uid="uid://cjabtnqbdd2ey"]
[ext_resource type="Script" path="res://scenes/MainScene.gd" id="1_script"] [ext_resource type="Script" uid="uid://ghehm4srs0ho" path="res://scenes/MainScene.gd" id="1_script"]
[ext_resource type="PackedScene" uid="uid://by7m8snb4xllf" path="res://scenes/ui/AuthScene.tscn" id="2_main"] [ext_resource type="PackedScene" uid="uid://by7m8snb4xllf" path="res://scenes/ui/AuthScene.tscn" id="2_main"]
[ext_resource type="PackedScene" uid="uid://bv7k2nan4xj8q" path="res://scenes/ui/ChatUI.tscn" id="3_chat_ui"] [ext_resource type="PackedScene" uid="uid://bv7k2nan4xj8q" path="res://scenes/ui/ChatUI.tscn" id="3_chat_ui"]
@@ -9,6 +9,8 @@ layout_mode = 3
anchors_preset = 15 anchors_preset = 15
anchor_right = 1.0 anchor_right = 1.0
anchor_bottom = 1.0 anchor_bottom = 1.0
grow_horizontal = 2
grow_vertical = 2
script = ExtResource("1_script") script = ExtResource("1_script")
[node name="AuthScene" parent="." instance=ExtResource("2_main")] [node name="AuthScene" parent="." instance=ExtResource("2_main")]
@@ -20,12 +22,15 @@ layout_mode = 1
anchors_preset = 15 anchors_preset = 15
anchor_right = 1.0 anchor_right = 1.0
anchor_bottom = 1.0 anchor_bottom = 1.0
grow_horizontal = 2
grow_vertical = 2
[node name="TopBar" type="Panel" parent="MainGameUI"] [node name="TopBar" type="Panel" parent="MainGameUI"]
layout_mode = 1 layout_mode = 1
anchors_preset = 10 anchors_preset = 10
anchor_right = 1.0 anchor_right = 1.0
offset_bottom = 60.0 offset_bottom = 60.0
grow_horizontal = 2
[node name="HBoxContainer" type="HBoxContainer" parent="MainGameUI/TopBar"] [node name="HBoxContainer" type="HBoxContainer" parent="MainGameUI/TopBar"]
layout_mode = 1 layout_mode = 1
@@ -36,6 +41,8 @@ offset_left = 20.0
offset_top = 10.0 offset_top = 10.0
offset_right = -20.0 offset_right = -20.0
offset_bottom = -10.0 offset_bottom = -10.0
grow_horizontal = 2
grow_vertical = 2
[node name="UserLabel" type="Label" parent="MainGameUI/TopBar/HBoxContainer"] [node name="UserLabel" type="Label" parent="MainGameUI/TopBar/HBoxContainer"]
layout_mode = 2 layout_mode = 2
@@ -53,19 +60,23 @@ anchors_preset = 15
anchor_right = 1.0 anchor_right = 1.0
anchor_bottom = 1.0 anchor_bottom = 1.0
offset_top = 60.0 offset_top = 60.0
grow_horizontal = 2
grow_vertical = 2
[node name="CenterContainer" type="CenterContainer" parent="MainGameUI/MainContent"] [node name="CenterContainer" type="CenterContainer" parent="MainGameUI/MainContent"]
layout_mode = 1 layout_mode = 1
anchors_preset = 15 anchors_preset = 15
anchor_right = 1.0 anchor_right = 1.0
anchor_bottom = 1.0 anchor_bottom = 1.0
grow_horizontal = 2
grow_vertical = 2
[node name="VBoxContainer" type="VBoxContainer" parent="MainGameUI/MainContent/CenterContainer"] [node name="VBoxContainer" type="VBoxContainer" parent="MainGameUI/MainContent/CenterContainer"]
layout_mode = 2 layout_mode = 2
[node name="StatusPanel" type="Panel" parent="MainGameUI/MainContent/CenterContainer/VBoxContainer"] [node name="StatusPanel" type="Panel" parent="MainGameUI/MainContent/CenterContainer/VBoxContainer"]
layout_mode = 2
custom_minimum_size = Vector2(400, 150) custom_minimum_size = Vector2(400, 150)
layout_mode = 2
[node name="StatusContainer" type="MarginContainer" parent="MainGameUI/MainContent/CenterContainer/VBoxContainer/StatusPanel"] [node name="StatusContainer" type="MarginContainer" parent="MainGameUI/MainContent/CenterContainer/VBoxContainer/StatusPanel"]
layout_mode = 1 layout_mode = 1
@@ -76,6 +87,8 @@ offset_left = 20.0
offset_top = 20.0 offset_top = 20.0
offset_right = -20.0 offset_right = -20.0
offset_bottom = -20.0 offset_bottom = -20.0
grow_horizontal = 2
grow_vertical = 2
[node name="StatusGrid" type="GridContainer" parent="MainGameUI/MainContent/CenterContainer/VBoxContainer/StatusPanel/StatusContainer"] [node name="StatusGrid" type="GridContainer" parent="MainGameUI/MainContent/CenterContainer/VBoxContainer/StatusPanel/StatusContainer"]
layout_mode = 2 layout_mode = 2
@@ -102,21 +115,24 @@ layout_mode = 2
columns = 2 columns = 2
[node name="ExploreButton" type="Button" parent="MainGameUI/MainContent/CenterContainer/VBoxContainer/GameMenuGrid"] [node name="ExploreButton" type="Button" parent="MainGameUI/MainContent/CenterContainer/VBoxContainer/GameMenuGrid"]
layout_mode = 2
custom_minimum_size = Vector2(150, 50) custom_minimum_size = Vector2(150, 50)
layout_mode = 2
text = "🗺️ 探索小镇" text = "🗺️ 探索小镇"
[node name="InventoryButton" type="Button" parent="MainGameUI/MainContent/CenterContainer/VBoxContainer/GameMenuGrid"] [node name="InventoryButton" type="Button" parent="MainGameUI/MainContent/CenterContainer/VBoxContainer/GameMenuGrid"]
layout_mode = 2
custom_minimum_size = Vector2(150, 50) custom_minimum_size = Vector2(150, 50)
layout_mode = 2
text = "🎒 背包" text = "🎒 背包"
[node name="ShopButton" type="Button" parent="MainGameUI/MainContent/CenterContainer/VBoxContainer/GameMenuGrid"] [node name="ShopButton" type="Button" parent="MainGameUI/MainContent/CenterContainer/VBoxContainer/GameMenuGrid"]
layout_mode = 2
custom_minimum_size = Vector2(150, 50) custom_minimum_size = Vector2(150, 50)
layout_mode = 2
text = "🏪 商店" text = "🏪 商店"
[node name="FriendsButton" type="Button" parent="MainGameUI/MainContent/CenterContainer/VBoxContainer/GameMenuGrid"] [node name="FriendsButton" type="Button" parent="MainGameUI/MainContent/CenterContainer/VBoxContainer/GameMenuGrid"]
layout_mode = 2
custom_minimum_size = Vector2(150, 50) custom_minimum_size = Vector2(150, 50)
text = "👥 好友" layout_mode = 2
text = "👥 好友"
[node name="ChatUI" parent="MainGameUI" instance=ExtResource("3_chat_ui")]
layout_mode = 1

View File

@@ -28,7 +28,7 @@ extends Control
# ============================================================================ # ============================================================================
# 聊天面板 # 聊天面板
@onready var chat_panel: Panel = %ChatPanel @onready var chat_panel: Control = %ChatPanel
# 聊天历史容器 # 聊天历史容器
@onready var chat_history: ScrollContainer = %ChatHistory @onready var chat_history: ScrollContainer = %ChatHistory
@@ -134,11 +134,16 @@ func _gui_input(event: InputEvent) -> void:
func _handle_click_outside() -> void: func _handle_click_outside() -> void:
# 检查点击是否在聊天面板外部 # 检查点击是否在聊天面板外部
if not chat_panel.get_global_rect().has_point(get_global_mouse_position()): if not chat_panel.get_global_rect().has_point(get_global_mouse_position()):
# 释放输入框焦点(取消输入状态) # 延迟释放输入框焦点,避免事件冲突
if chat_input.has_focus(): if chat_input.has_focus():
chat_input.release_focus() call_deferred("_release_input_focus")
print("🖱️ 点击外部,取消输入状态") print("🖱️ 点击外部,取消输入状态")
# 延迟释放输入框焦点(由 call_deferred 调用)
func _release_input_focus() -> void:
if chat_input and chat_input.has_focus():
chat_input.release_focus()
# ============================================================================ # ============================================================================
# 显示/隐藏逻辑 # 显示/隐藏逻辑
# ============================================================================ # ============================================================================

View File

@@ -1,11 +1,17 @@
[gd_scene load_steps=6 format=3 uid="uid://bv7k2nan4xj8q"] [gd_scene load_steps=9 format=3 uid="uid://bv7k2nan4xj8q"]
[ext_resource type="Script" uid="uid://pibdlvhb12q8" path="res://scenes/ui/ChatUI.gd" id="1"] [ext_resource type="Script" uid="uid://pibdlvhb12q8" path="res://scenes/ui/ChatUI.gd" id="1"]
[ext_resource type="Texture2D" uid="uid://flepo0gpb55h" path="res://assets/ui/chat/缩略框背景.png" id="2_7dhmv"] [ext_resource type="Texture2D" uid="uid://cchjgp6qh7u61" path="res://assets/ui/chat/缩略框背景.png" id="2_7dhmv"]
[ext_resource type="Texture2D" uid="uid://clmgyxpeh5742" path="res://assets/ui/chat/输入框背景.png" id="3_fbft8"] [ext_resource type="Texture2D" uid="uid://clmgyxpeh5742" path="res://assets/ui/chat/输入框背景.png" id="3_fbft8"]
[ext_resource type="Texture2D" uid="uid://q0ijn5y0tbw3" path="res://assets/ui/chat/装饰2.png" id="4_xo31h"] [ext_resource type="Texture2D" uid="uid://q0ijn5y0tbw3" path="res://assets/ui/chat/装饰2.png" id="4_xo31h"]
[ext_resource type="Texture2D" uid="uid://ct0cl4h2i6ydn" path="res://assets/ui/chat/装饰.png" id="5_xlxdo"] [ext_resource type="Texture2D" uid="uid://ct0cl4h2i6ydn" path="res://assets/ui/chat/装饰.png" id="5_xlxdo"]
[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_xo31h"]
[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_xlxdo"]
[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_1ahvy"]
[node name="ChatUI" type="Control"] [node name="ChatUI" type="Control"]
unique_name_in_owner = true unique_name_in_owner = true
custom_minimum_size = Vector2(10, 20) custom_minimum_size = Vector2(10, 20)
@@ -15,39 +21,40 @@ anchor_right = 1.0
anchor_bottom = 1.0 anchor_bottom = 1.0
grow_horizontal = 2 grow_horizontal = 2
grow_vertical = 2 grow_vertical = 2
mouse_filter = 2
script = ExtResource("1") script = ExtResource("1")
[node name="ChatPanel" type="Panel" parent="."] [node name="ChatPanel" type="Control" parent="."]
unique_name_in_owner = true unique_name_in_owner = true
layout_mode = 1 layout_mode = 1
anchors_preset = 2 anchor_left = 0.007
anchor_top = 1.0 anchor_top = 0.98700005
anchor_bottom = 1.0 anchor_right = 0.007
offset_left = 10.0 anchor_bottom = 0.98700005
offset_top = -410.0 offset_left = 0.36800003
offset_right = 460.0 offset_top = -240.01605
offset_bottom = -10.0 offset_right = 340.368
offset_bottom = -0.016052246
grow_vertical = 0 grow_vertical = 0
theme_override_styles/panel = null
[node name="TextureRect" type="TextureRect" parent="ChatPanel"] [node name="TextureRect" type="TextureRect" parent="ChatPanel"]
layout_mode = 0 layout_mode = 1
offset_right = 450.0 anchors_preset = -1
offset_bottom = 400.0 anchor_top = 1.0
anchor_bottom = 1.0
offset_top = -240.0
offset_right = 340.0
texture = ExtResource("2_7dhmv") texture = ExtResource("2_7dhmv")
expand_mode = 1 expand_mode = 1
modulate = Color(1, 1, 1, 1)
[node name="VBoxContainer" type="VBoxContainer" parent="ChatPanel"] [node name="VBoxContainer" type="VBoxContainer" parent="ChatPanel"]
layout_mode = 1 layout_mode = 1
anchors_preset = 15 anchors_preset = 15
anchor_right = 1.0 anchor_right = 1.0
anchor_bottom = 1.0 anchor_bottom = 1.0
offset_left = 10.0 offset_left = 15.0
offset_top = 10.0 offset_top = 15.0
offset_right = -10.0 offset_right = -15.0
offset_bottom = -10.0 offset_bottom = -55.0
grow_horizontal = 2 grow_horizontal = 2
grow_vertical = 2 grow_vertical = 2
theme_override_constants/separation = 8 theme_override_constants/separation = 8
@@ -64,24 +71,6 @@ size_flags_horizontal = 3
size_flags_vertical = 3 size_flags_vertical = 3
theme_override_constants/separation = 8 theme_override_constants/separation = 8
[node name="InputContainer" type="HBoxContainer" parent="ChatPanel/VBoxContainer"]
layout_mode = 2
theme_override_constants/separation = 8
[node name="ChatInput" type="LineEdit" parent="ChatPanel/VBoxContainer/InputContainer"]
unique_name_in_owner = true
layout_mode = 2
size_flags_horizontal = 3
placeholder_text = "输入消息..."
[node name="TextureRect" type="TextureRect" parent="ChatPanel/VBoxContainer/InputContainer/ChatInput"]
layout_mode = 0
offset_right = 435.0
offset_bottom = 30.0
texture = ExtResource("3_fbft8")
expand_mode = 1
modulate = Color(1, 1, 1, 1)
[node name="TextureRect2" type="TextureRect" parent="ChatPanel"] [node name="TextureRect2" type="TextureRect" parent="ChatPanel"]
layout_mode = 0 layout_mode = 0
offset_left = 10.0 offset_left = 10.0
@@ -90,14 +79,45 @@ offset_right = 20.0
offset_bottom = 20.0 offset_bottom = 20.0
texture = ExtResource("4_xo31h") texture = ExtResource("4_xo31h")
expand_mode = 1 expand_mode = 1
modulate = Color(1, 1, 1, 1)
[node name="TextureRect3" type="TextureRect" parent="ChatPanel"] [node name="TextureRect3" type="TextureRect" parent="ChatPanel"]
layout_mode = 0 layout_mode = 0
offset_left = 430.0 offset_left = 320.0
offset_top = 340.0 offset_top = 180.0
offset_right = 440.0 offset_right = 330.0
offset_bottom = 350.0 offset_bottom = 190.0
texture = ExtResource("5_xlxdo") texture = ExtResource("5_xlxdo")
expand_mode = 1 expand_mode = 1
modulate = Color(1, 1, 1, 1)
[node name="TextureRect4" type="TextureRect" parent="ChatPanel"]
layout_mode = 1
anchors_preset = -1
anchor_top = 1.0
anchor_bottom = 1.0
offset_left = 15.0
offset_top = -40.0
offset_right = 325.0
offset_bottom = -10.0
texture = ExtResource("3_fbft8")
expand_mode = 1
[node name="InputContainer" type="HBoxContainer" parent="ChatPanel"]
self_modulate = Color(1, 1, 1, 0.03529412)
layout_mode = 0
offset_left = 20.0
offset_top = 202.5
offset_right = 320.0
offset_bottom = 227.5
theme_override_constants/separation = 4
[node name="ChatInput" type="LineEdit" parent="ChatPanel/InputContainer"]
unique_name_in_owner = true
layout_mode = 2
size_flags_horizontal = 3
localize_numeral_system = false
theme_override_font_sizes/font_size = 12
theme_override_styles/normal = SubResource("StyleBoxEmpty_xo31h")
theme_override_styles/focus = SubResource("StyleBoxEmpty_xo31h")
theme_override_styles/hover = SubResource("StyleBoxEmpty_xo31h")
theme_override_styles/read_only = SubResource("StyleBoxEmpty_xo31h")
theme_override_styles/focus = SubResource("StyleBoxEmpty_1ahvy")