你好 请详细帮我说明一下前后端交互的逻辑 都需要用到哪些函数 并创建一个NPC举例说明
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-04-05 23:17:58 |
👁️ 阅读: 0
你好！前后端交互是游戏开发的核心，我来详细说明一下逻辑和常用函数，并用一个NPC功能举例。
## 一、前后端交互逻辑
前后端交互主要分为两个方向：
### 1. 前端 → 后端（发送请求）
- 使用 `SL:Send` 函数向服务器发送指令
- 格式：`SL:Send("指令类型", 参数1, 参数2, ...)`
- 服务器在QF脚本中接收并处理
### 2. 后端 → 前端（接收数据）
- 使用 `SL:GetMetaValue` 获取服务器传来的数据
- 格式：`SL:GetMetaValue("数据名称", 参数)`
- 或者通过 `SL:OnEvent` 监听服务器事件
## 二、常用交互函数
### 发送请求到服务器
```lua
-- 发送数据到服务器
SL:Send("CMD_NAME", param1, param2, param3)
-- 示例：购买物品
SL:Send("BUY_ITEM", itemID, count, npcName)
```
### 接收服务器数据
```lua
-- 获取玩家当前位置
local posX = SL:GetMetaValue("ACTOR_POSITION_X", playerID)
local posY = SL:GetMetaValue("ACTOR_POSITION_Y", playerID)
-- 获取屏幕高度
local screenH = SL:GetMetaValue("SCREEN_HEIGHT")
-- 获取窗口播放模式
local isWinMode = SL:GetMetaValue("WINPLAYMODE")
```
### 监听服务器事件
```lua
-- 注册事件监听
SL:OnEvent("EVENT_NAME", function(data)
-- 处理服务器推送的数据
SL:print("收到服务器事件:", data)
end)
```
## 三、NPC功能完整示例
下面创建一个NPC商店功能，展示完整的前后端交互：
```lua
-- NPC商店模块
NPCStore = {}
-- 每页商品数量
NPCStore.perPageItemsCount = 8
-- 主函数：创建NPC商店界面
function NPCStore.main()
-- 获取父节点（通常是游戏主界面）
local parent = GUI:Attach_Parent()
-- 根据平台加载不同的UI布局
local layoutFile = SL:GetMetaValue("WINPLAYMODE") and "npc/npc_store_layer_win32" or "npc/npc_store_layer"
GUI:LoadExport(parent, layoutFile)
-- 获取UI代理对象
local ui = GUI:ui_delegate(parent)
-- 根据屏幕高度调整位置
local screenH = SL:GetMetaValue("SCREEN_HEIGHT")
GUI:setPositionY(ui.Panel_1, screenH - 177)
-- 创建商品列表
NPCStore.createItems(ui)
-- 设置按钮事件
NPCStore.setupEvents(ui)
end
-- 创建商品列表
function NPCStore.createItems(ui)
-- 从服务器获取商品数据
local goodsData = SL:GetMetaValue("NPC_GOODS_LIST", npcID)
if goodsData then
for i = 1, math.min(#goodsData, NPCStore.perPageItemsCount) do
local item = goodsData[i]
-- 创建商品项
local itemWidget = GUI:Layout_Create(ui.Panel_items, "item_"..i, 0, 0, 80, 80, true)
GUI:Layout_setBackGroundImage(itemWidget, item.icon)
-- 商品名称
local nameText = GUI:Text_Create(itemWidget, "Text_name", 0, -40, 14, "#ffffff", item.name)
GUI:Text_setFontName(nameText, "fonts/font5.ttf")
-- 价格
local priceText = GUI:Text_Create(itemWidget, "Text_price", 0, -60, 12, "#ffff00", "价格:"..item.price)
-- 购买按钮
local buyBtn = GUI:Button_Create(itemWidget, "btn_buy", 0, -80, "res/public/1900000612.png")
GUI:Button_setTitleText(buyBtn, "购买")
-- 点击购买事件
GUI:addOnClickEvent(buyBtn, function()
-- 发送购买请求到服务器
SL:Send("NPC_BUY_ITEM", item.id, 1, npcID)
SL:print("购买商品:", item.name)
end)
-- 设置商品项位置
local col = (i-1) % 4
local row = math.floor((i-1) / 4)
GUI:setPosition(itemWidget, col * 100 + 50, -row * 120 - 50)
end
end
end
-- 设置界面事件
function NPCStore.setupEvents(ui)
-- 关闭按钮
GUI:addOnClickEvent(ui.Button_close, function()
GUI:removeFromParent(ui.root)
SL:print("关闭NPC商店")
end)
-- 刷新按钮
GUI:addOnClickEvent(ui.Button_refresh, function()
-- 发送刷新请求到服务器
SL:Send("NPC_REFRESH_GOODS", npcID)
SL:print("请求刷新商品列表")
end)
end
-- 服务器消息处理
function NPCStore.onServerMessage(msgType, data)
if msgType == "GOODS_UPDATED" then
-- 商品列表更新
SL:print("商品列表已更新")
NPCStore.refreshItems()
elseif msgType == "BUY_SUCCESS" then
-- 购买成功
SL:print("购买成功，获得:", data.itemName)
elseif msgType == "BUY_FAILED" then
-- 购买失败
SL:print("购买失败:", data.reason)
end
end
-- 注册服务器事件监听
SL:OnEvent("NPC_STORE_MSG", NPCStore.onServerMessage)
-- 初始化NPC商店
function NPCStore.init(npcID)
-- 存储NPC ID
NPCStore.npcID = npcID
-- 向服务器请求商品数据
SL:Send("GET_NPC_GOODS", npcID)
-- 创建界面
NPCStore.main()
end
```
## 四、交互流程说明
### 1. 前端发起流程
```
玩家点击NPC → 发送GET_NPC_GOODS请求 → 服务器返回商品数据 → 前端显示界面
```
### 2. 购买流程
```
玩家点击购买 → 发送NPC_BUY_ITEM请求 → 服务器验证处理 → 返回购买结果 → 前端更新显示
```
### 3. 服务器推送流程
```
服务器主动推送消息 → 前端通过OnEvent接收 → 更新界面状态
```
## 五、关键点总结
1. **发送请求**：使用 `SL:Send` 向服务器发送指令
2. **获取数据**：使用 `SL:GetMetaValue` 获取服务器配置和数据
3. **事件监听**：使用 `SL:OnEvent` 接收服务器主动推送
4. **UI创建**：使用GUI库创建界面元素
5. **数据绑定**：将服务器数据绑定到UI控件
这个NPC商店示例展示了完整的前后端交互链，你可以根据实际需求调整商品显示、购买逻辑等。记得在服务器端（QF脚本）也要有对应的处理函数哦！
有什么不明白的地方可以继续问我，浮生梦老师会耐心解答的！
← 返回问答库