Unity3D RPG 入门项目（八）游戏设置面板、帧率控制、快捷技能药品栏、技能解锁系统

核心知识点：Application.targetFrameRate 帧率限制、实时 FPS 计算器、UGUI 单选组、快捷拖拽栏、物品拖拽克隆区分、重复道具拦截、技能等级遮罩解锁、九宫切图、通用拖拽复用思路

一、游戏设置面板：帧率选择功能

1 概念

制作游戏系统设置弹窗，提供 30/45/60 三档帧率单选切换，通过Application.targetFrameRate限制引擎刷新频率，解决手游高帧发烫、掉帧卡顿问题。

2 特性 / 规则

采用 Toggle ToggleGroup 单选组件，三选项互斥，默认选中 45 帧（手游标准均衡帧率）；
targetFrameRate = -1 代表不限制帧率，跟随设备屏幕刷新率；
帧率越低，CPU 每秒计算量越少，手机发热、耗电大幅降低；
24 帧是人眼流畅最低阈值，低于该数值会明显卡顿。

3 语法 & 代码片段

复制代码

public Toggle t30, t45, t60;
// 统一设置帧率方法
public void SetFrame(int frame){
    Application.targetFrameRate = frame;
}
// 绑定按钮
t30.onClick.Add(()=>SetFrame(30));
t45.onClick.Add(()=>SetFrame(45));
t60.onClick.Add(()=>SetFrame(60));

4 相关知识点对比

不限制帧率 (-1) VS 固定 45 帧

无限制：设备全力渲染，高耗电、发烫，低端手机频繁降频； 45 帧平衡：流畅度足够，硬件负载适中，手游项目默认方案。

5 模块拓展

增加垂直同步开关、画质分级、音量滑动条、分辨率适配。

二、实时 FPS 帧率计算器（GUI 绘制）

1 概念

自主实现帧率统计工具，统计每秒 Update 执行次数，使用 GUI 在屏幕左上角实时打印当前帧率，不依赖引擎内置监控窗口。

2 特性 / 规则

Time.realtimeSinceStartup不受 Time.timeScale 慢放影响，统计精准；
设定刷新间隔，避免每帧刷新文本造成 UI 性能消耗；
帧计数器每帧自增，间隔到达后计算 FPS 并重置计数；
GUI 仅作调试展示，成品游戏替换 UGUI 文本。

3 语法 & 代码片段

复制代码

private int frameCount;
private float lastCalcTime = 0;
private float calcInterval = 0.05f;
private float showFps;
void Update(){
    frameCount++;
    float now = Time.realtimeSinceStartup;
    if(now - lastCalcTime >= calcInterval){
        showFps = frameCount / (now - lastCalcTime);
        frameCount = 0;
        lastCalcTime = now;
    }
}
void OnGUI(){
    GUI.Label(new Rect(10,10,120,30), $"FPS：{showFps:F0}");
}

4 相关知识点对比

引擎状态栏 FPS VS 自主计算 FPS

引擎监控：后台渲染，数值波动大，仅粗略参考；自主统计：独立计算逻辑，数值稳定，可自定义展示位置。

5 模块拓展

增加平均帧率、最低帧率记录、帧率过低弹窗提示。

三、快捷栏 UI 整体布局设计

1 概念

屏幕底部水平快捷栏，6 个固定格子，支持拖拽放入药品 / 技能，绑定数字 1~6 快捷键，实现一键使用、释放。

2 特性 / 规则

每个格子包含：快捷键文本、道具图标、CD 填充遮罩三层结构；
格子数量固定 6 个，程序启动批量实例化预制；
拖拽逻辑复用背包 IBeginDrag/IDrag/IEndDrag 接口；
区分药品、技能两种拖拽逻辑：药品拖拽原格子保留，技能拖拽生成克隆。

3 语法 & 代码片段

复制代码

public Transform content;
public GameObject slotPref;
void Start(){
    // 批量生成6个快捷槽
    for(int i=0;i<6;i++){
        GameObject slot = Instantiate(slotPref, content);
        slot.GetComponent<ShortcutSlot>().SetKeyNum(i+1);
    }
}

4 相关知识点对比

动态生成格子 VS 编辑器手动摆放

动态生成：修改格子数量仅改循环值，统一初始化快捷键文字；手动摆放：增减格子需要手动复制、改数字，易出错。

5 模块拓展

快捷栏物品数量堆叠、技能 CD 遮罩倒计时。

四、快捷栏拖拽区分逻辑（药品 / 技能）

1 概念

背包拖拽道具到快捷栏做差异化处理：药品拖拽后背包仍保留道具；技能拖拽生成克隆图标，原背包格子清空。

2 特性 / 规则

拖拽开始判断物品类型：ItemType.Drug/ ItemType.Equip/ ItemType.Skill；
药品：仅复制数据到快捷栏，背包不扣除数量；
技能：生成克隆图标，原背包移除该技能；
拖拽克隆图标开启射线穿透，防止遮挡下层格子检测。

3 语法 & 代码片段

复制代码

// 拖拽落点判断
if(hit.CompareTag("ShortcutSlot")){
    ShortSlot slot = hit.GetComponent<ShortSlot>();
    if(itemInfo.Type == ItemType.Drug){
        // 药品仅复制，背包不变
        slot.SetItemData(itemInfo, itemId);
    }
    else if(itemInfo.Type == ItemType.Skill){
        // 技能克隆，原格子移除
        slot.SetItemData(itemInfo, itemId);
        BagManager.Instance.RemoveItem(itemId, 1);
    }
}

4 相关知识点对比

全部拖拽扣除 VS 按类型区分逻辑

统一扣除：药品拖拽后消失，不符合游戏常规交互；分类处理：药品可重复使用，技能装备移至快捷栏，符合 RPG 设计。

5 模块拓展

快捷栏道具一键移除、清空格子功能。

五、快捷栏重复道具拦截校验

1 概念

遍历所有快捷格子 ID 集合，拖拽物品时判断是否已存在，重复道具弹出提示禁止重复添加。

2 特性 / 规则

全局 List 存储当前所有快捷栏道具 ID；
拖拽赋值前循环遍历匹配 ID，匹配成功直接返回，不执行赋值；
替换格子时先移除旧 ID，再添加新 ID，保持集合同步。

3 语法 & 代码片段

复制代码

private List<int> shortcutItemIds = new List<int>();
// 判断是否已存在
public bool HasSameItem(int itemId){
    foreach(int id in shortcutItemIds){
        if(id == itemId) return true;
    }
    return false;
}

4 相关知识点对比

无重复判断 VS ID 集合遍历校验

无校验：同一技能 / 药品可放多个格子，交互逻辑错乱；集合校验：全局唯一，界面整洁符合常规游戏设计。

5 模块拓展

支持替换已有快捷道具，直接覆盖旧 ID。

六、技能等级解锁遮罩系统

1 概念

技能面板每个技能增加全屏填充遮罩，读取玩家等级，低于技能解锁等级时遮罩完全遮挡，无法拖拽；等级达标遮罩隐藏，可拖拽至快捷栏。

2 特性 / 规则

遮罩 Image 填充模式 Fill Amount=1 完全遮挡；
每次打开技能面板遍历所有技能，对比 PlayerStatus 玩家等级；
低于解锁等级：遮罩显示、关闭射线点击；
高于等于解锁等级：遮罩隐藏、开启交互。

3 语法 & 代码片段

复制代码

public void RefreshLock(int playerLv){
    SkillInfo data = SkillConfig.Instance.GetById(skillId);
    if(playerLv < data.UnlockLv){
        mask.gameObject.SetActive(true);
        GetComponent<Image>().raycastTarget = false;
    }
    else{
        mask.gameObject.SetActive(false);
        GetComponent<Image>().raycastTarget = true;
    }
}

4 相关知识点对比

打开一次性刷新 VS Update 实时判断

Update 每帧判断：持续消耗性能；界面 Show 时一次性刷新：仅打开执行一次，性能更优。

5 模块拓展

等级不足红色提示文字、升级自动刷新技能面板。

七、九宫切图美术优化

1 概念

UI 图片设置九宫切图分割，缩放时边角不会拉伸变形，按钮、面板、遮罩、快捷框通用美术处理方式。

2 特性 / 规则

图片导入模式改为 Sliced，四边分割线标记边框区域；
Sliced：仅中间区域拉伸，四角保持原图圆角、边框；
Simple 模式整张均匀拉伸，圆角、边框扭曲；

4 相关知识点对比

Simple 普通拉伸 VS Sliced 九宫切图

Simple：放大后圆角、边框拉伸模糊； Sliced：边框固定，仅中间内容拉伸，界面精致。

5 模块拓展

弹窗、背包、商店面板全部统一使用九宫切图素材。

八、通用 UI 开发复用思路

1 概念

背包、商店、装备、技能、快捷栏共用一套 Scroll + 预制 + 拖拽 + 配表架构，仅修改筛选条件、实体字段即可快速开发新界面。

2 特性 / 规则

底层拖拽接口、配表解析、单例数据层完全通用；
差异化仅存在：配置字段、筛选条件（职业 / 等级 / 物品类型）；
先搭建通用模板，后续 UI 开发大幅减少重复代码。

4 相关知识点对比

每个界面从零编写 VS 复用统一模板

从零开发：大量重复布局、拖拽、加载逻辑；模板复用：一套底层，多业务界面快速迭代。

综合拓展

1 完整业务流程

设置面板切换 30/45/60 帧率 → 底部 6 格快捷栏批量生成 → 背包拖拽药品 / 技能区分逻辑 → 重复道具拦截校验 → 技能面板根据玩家等级解锁遮罩 → 数字快捷键一键使用道具；

2 高频 Bug 排查清单

帧率切换无变化：targetFrameRate 赋值代码未绑定 Toggle 点击；

快捷栏可重复添加道具：缺少 ID 集合遍历校验；

低等级技能仍可拖拽：遮罩未关闭 raycast 射线；

拖拽克隆图标遮挡格子：未开启 ICanvasRaycastFilter 穿透；

UI 边框拉伸变形：图片未设置 Sliced 九宫切图；

3 核心考点

targetFrameRate 帧率控制、FPS 自主统计实现、快捷栏拖拽分类逻辑、ID 集合去重、技能等级遮罩解锁、九宫切图作用、UI 通用模板开发思想；

4 进阶拓展学习方向

快捷栏 CD 倒计时遮罩、快捷键按键监听释放、角色升级自动刷新技能、快捷栏批量替换、战斗道具回血逻辑；

5 实战落地要求

帧率设置、FPS 显示、底部快捷栏、技能解锁模块整合进 RPG 完整项目，写入 UI 综合项目。