【Unity使用UGUI实现王者荣耀UI界面（一）】加载页面（进度条）_王者加载页面制作

最新推荐文章于 2024-05-19 23:31:32 发布

2401_84591984

最新推荐文章于 2024-05-19 23:31:32 发布

阅读量344

点赞数 4

分类专栏： 2024年程序员学习文章标签： python

本文链接：https://blog.csdn.net/2401_84591984/article/details/138234453

版权

2024年程序员学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

请添加图片描述

文章目录

【Unity使用UGUI实现王者荣耀UI界面（一）】加载页面（进度条）
- 1. 素材准备
结语

【Unity使用UGUI实现王者荣耀UI界面（一）】加载页面（进度条）

1. 素材准备

我们先打开王者荣耀，在加载页面截个图，当做我们的素材用

然后使用PS把必要元素抠出来

2. 界面分析

王者荣耀加载页如下图所示：

在这里插入图片描述

可以看到四个元素

左上角的黑框框，上面还有一行字

在这里插入图片描述

下面的进度条，文字，进度

在这里插入图片描述

左上角的静音按钮

在这里插入图片描述

当然还有我们的背景

3. 打开Unity Hub创建项目

【如果没下载的，可以百度一下安装教程，很简单，免费的】

1.打开Unity Hub后，我们点击项目上面的新建按钮，代表新建一个项目

在这里插入图片描述

2.我们选择3D，然后在右边填写项目名字和选择项目路径

在这里插入图片描述

3.等待项目加载，这个过程会有一点长

在这里插入图片描述

4.创建成功

在这里插入图片描述

如果你的默认界面与我的不一样，你可以点击右上角的按钮，选择2 by 3

在这里插入图片描述

4. 开始搭建UI

1. 准备工作

我们先将当前场景另存为【Ctrl shift s】，保存在Scenes文件夹，命名为：Hero GUI。

然后再把原来的默认的删除（不删除也可以）

在这里插入图片描述

然后右键->delete。

2. 背景图片

右键创建一个图片作为项目背景：

在这里插入图片描述

不会发现创建一个多了两个东西，一个是canvas，一个是EventSystem

canvas是UI界面的画布，必不可少，EventSystem也必不可少，没了他，你的按钮就是个摆设了。

然后我们选中Image，在Inspector中。。。等等，我们的素材还没导入

在这里插入图片描述

3. 导入素材

我们先创建一个文件夹保存素材

在这里插入图片描述

命名为：img

然后下载这个

链接：https://pan.baidu.com/s/1-MXSmvYfsL3iumfPNeNotA
提取码：l48m

将他们拖到我们新建的文件夹里面

4. 配置背景图片

【只第一次详细说】

选中全部图片设置为精灵属性（sprite）

在这里插入图片描述

然后选中我们刚刚创建的image图片

有个Source Image

在这里插入图片描述

选择我们的背景图片
然后点击左上角的网格

选择最右下边的填充
然后在scene页面按2，切换成2D编辑模式，滑轮放大缩小到一个你觉得合适的位置

在这里插入图片描述

并且将图片放到与后面的框框相同大小
然后再点击canvas，选择render mode，跟随方式为跟随相机（screen space camera）这样做之后，我们的游戏运行起来后，就是直接显示画布内容了

5. 进度条显示UI搭建

进度条其实也是图片，所以我们还是先创建一个Image

然后把那个蓝色的条状图片当做他的进度条

接着再调一下位置，然后设置锚点为中下

在这里插入图片描述

好，现在基本上就是这个样子了。【图片扣的并不好看，多多担待。。】

接着我们就去写脚本吧

新建一个文件夹存放脚本文件，命名为Scripts

点击Scripts新建一个c#文件

在这里插入图片描述

命名为jindu,cs

然后双击打开，我这边是用的是Rider，当然你用vs也是完全没问题的

在这里插入图片描述

6. 脚本编写

在刚刚的脚本文件中编写如下代码：

using UnityEngine;
using UnityEngine.UI;

public class Jindu : MonoBehaviour
{
    private Image jindubar;
    private Text jindu;
    //控制进度
    float startValue = 0;
    float endValue = 100;
    // Start is called before the first frame update
    void Start()
    {
        jindubar = gameObject.GetComponent<Image>();  // 获取到进度条的图片对象
        jindu = transform.Find("jindu").GetComponent<Text>();  // 获取到进度条的百分比显示
    }

    // Update is called once per frame
    void Update()
    {
        if (startValue < endValue)
        {
            startValue++;
        }
        //实时更新进度百分比的文本显示 
        jindu.text = startValue + "%";
        //实时更新滑动进度图片的fillAmount值 
        jindubar.GetComponent<Image>().fillAmount = startValue / 100f;  // 因为FillAmount的值是从0-1的
        if (startValue == 100)
        {
            // 这里先不写，我们回头写上跳转下一个界面的代码
        }
    }
}

OK，将这个脚本文件拖到进度条图片的add comment上面，然后运行就行了

7. 演示

请添加图片描述

5. 打包

是的，打包让你朋友看看你花了好几分钟做出来的东西

在这里插入图片描述

结语

欢迎喜爱Python，Unity（游戏开发引擎）的爱好者，让我们一步步走向大神，成功离得不远，也就两个字，坚持罢了！！

Unity游戏引擎宣言：

你是否热爱游戏呢？

你是否曾经幻想着有一天自己做出一款属于自己的游戏呢？

不要犹豫了，赶快学习吧！

点击链接查看社区：Python/游戏开发交流社区

【关注下方作者公号，获取更多咨询】

学好 Python 不论是就业还是做副业赚钱都不错，但要学会 Python 还是要有一个学习规划。最后大家分享一份全套的 Python 学习资料，给那些想学习 Python 的小伙伴们一点帮助！

一、Python所有方向的学习路线

Python所有方向路线就是把Python常用的技术点做整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。

二、学习软件

工欲善其事必先利其器。学习Python常用的开发软件都在这里了，给大家节省了很多时间。

三、全套PDF电子书

书籍的好处就在于权威和体系健全，刚开始学习的时候你可以只看视频或者听某个人讲课，但等你学完之后，你觉得你掌握了，这时候建议还是得去看一下书籍，看权威技术书籍也是每个程序员必经之路。

四、入门学习视频

我们在看视频学习的时候，不能光动眼动脑不动手，比较科学的学习方法是在理解之后运用它们，这时候练手项目就很适合了。

五、实战案例

光学理论是没用的，要学会跟着一起敲，要动手实操，才能将自己的所学运用到实际当中去，这时候可以搞点实战案例来学习。

六、面试资料

我们学习Python必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有阿里大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里无偿获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

2401_84591984

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
【Unity使用UGUI实现王者荣耀UI界面（一）】加载页面（进度条）_王者加载页面制作

欢迎喜爱Python，Unity（游戏开发引擎）的爱好者，让我们一步步走向大神，成功离得不远，也就两个字，坚持罢了！！Unity游戏引擎宣言：你是否热爱游戏呢？你是否曾经幻想着有一天自己做出一款属于自己的游戏呢？不要犹豫了，赶快学习吧！Python/游戏开发交流社区【关注下方作者公号，获取更多咨询】学好 Python 不论是就业还是做副业赚钱都不错，但要学会 Python 还是要有一个学习规划。最后大家分享一份全套的 Python 学习资料，给那些想学习 Python 的小伙伴们一点帮助！
复制链接

扫一扫