UGUI 实战一（上篇）：UI全方位开发教程（含原素材以及源码）

Unity黑马王子

已于 2025-03-20 09:12:45 修改

阅读量1.1k

点赞数 27

分类专栏： UGUI 文章标签： ui 游戏引擎 unity

于 2025-03-20 02:00:00 首次发布

本文链接：https://blog.csdn.net/MY_future_/article/details/146369639

版权

UGUI 专栏收录该内容

5 篇文章

订阅专栏

-----------------------内容较多，分两次博客阐述---------------------------

一·前言

Unity 的 UGUI（Unity Graphic User Interface）系统为开发者提供了强大而便捷的 UI 开发工具。本文将详细介绍如何使用 UGUI 开发一个完整的游戏界面，涵盖开始界面、设置按钮、开发者头像面板、血条、技能冷却效果、各种面板以及背包选项卡等功能，让你逐步掌握 UGUI 的使用技巧。

二·最终效果

UI案例

三·详细实现步骤

1.开发开始界面--背景和声音按钮

（1）导入素材，并修改素材参数（全选素材，将图片Text type修改为如图内容）

（2）创建一个image

（3）修改image命名，把背景素材拖入到如图的位置

（4）修改image的锚点位置，保证屏幕与图片始终重合

（5）再创建一个image，把图中素材按照图片上的操作进行操作

（6）再创建一个image，把图中素材按照图片上的操作进行操作

（7）再创建一个image，把图中素材按照图片上的操作进行操作

（8）给按键添加button组件

（9）把image拖入button组件的target Graphic

（10）在audiobutton中创建一个image存放叶子素材

2.开发设置，游戏和开始按钮

（1）复制并移动创建好的audiobutton，并修改为EmailButton

（2）修改图标

（3）创建image，拖入素材，修改适合大小

（4）创建子物体image，拖入素材，修改适合大小，加入button组件

（5）复制（4）的物体，拖动，然后修改素材位置

（6）创建image物体，拖入素材位置，修改位置

（7）创建一个text（带入中文字体）

3.创建开发者头像面板

（1）创建新场景scene，拖入素材，修改参数

（2）创建image，拖入素材

（3) 创建两个Text，分别为角色名字和等级

（4）效果

4.开发血条

（1）创建image，拖入素材，变换移动

（2）创建两个子image作为黑色背景和绿色血条

（3）在image下添加一个slider组件，调整如下参数

（4）修改Greenbar的参数

（5）调整greenbar大小，以至于调整value，可以控制血条

（6）取消交互功能

（7）创建image，拖入素材，完善个性化血条

（8）创建一个text显示血量的值

5.开发技能冷却效果

（1）创建image和button，以及添加button组件，如下

（2）复制（1），修改名字为DialogueButton

（3）创建image，添加素材

（4）创建image，再创一个image，添加素材，形成技能图标

（5）选中技能图标，复制修改暗淡的颜色，形成遮罩，然后按照下图修改参数

（6）增加图标的叶子以及技能释放快捷键显示

（7）创建技能冷却脚本，挂载到技能父物体上

代码内容为：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI; // 添加这一行
public class Skillcold : MonoBehaviour
{
    public float coldTime = 2;
    private float timer = 0;//计时器
    private bool IsColding = false;//冷却期
    private Image coldmask;
    // Start is called before the first frame update
    void Start()
    {
        coldmask=transform.Find("coldmask").GetComponent<Image>();
    }

    // Update is called once per frame
    void Update()
    {
        if (IsColding)
        {
            timer+= Time.deltaTime;//
            coldmask.fillAmount= (coldTime - timer) / coldTime;
            if(timer > coldTime)
            {
                IsColding = false;
                coldmask.fillAmount = 0;
                timer = 0;
            }
        }
    }


    public void OnSkillClick()//点击事件函数 
    {
       
        if(IsColding==false)
        {
            IsColding = true;
            timer = 0;
            coldmask.fillAmount = 1;
        }
    }
}

（8）添加点击事件