unity使用ugui实现王者荣耀ui界面加载页面(进度条)(代码片段)

布小禅 布小禅     2023-01-23     594

关键词:


【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/游戏开发交流社区

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

unity使用ugui实现王者荣耀ui界面加载页面-静音按钮和页面完善(代码片段)

效果展示文章目录【Unity使用UGUI实现王者荣耀UI界面(二)】加载页面-静音按钮和页面完善1.打开项目2.Toggle实现打开关闭音效的功能2.1Toggle组件演示2.2使用Toggle组件实现功能2.3编写脚本2.4挂载脚本2.5设置锚点2.6测试功能3... 查看详情

unity使用ugui实现王者荣耀ui界面加载页面-静音按钮和页面完善(代码片段)

效果展示文章目录【Unity使用UGUI实现王者荣耀UI界面(二)】加载页面-静音按钮和页面完善1.打开项目2.Toggle实现打开关闭音效的功能2.1Toggle组件演示2.2使用Toggle组件实现功能2.3编写脚本2.4挂载脚本2.5设置锚点2.6测试功能3... 查看详情

unity使用ugui实现王者荣耀ui界面登录界面以及加载界面优化(代码片段)

【Unity使用UGUI实现王者荣耀UI界面(三)】登录界面以及加载界面优化【只是用来玩玩的,不要太当真】效果显示:zhans1.加载界面进度100%跳转登录界面这个功能好做,只需要将上次预留的代码补充上,打... 查看详情

unity使用ugui实现王者荣耀ui界面登录界面以及加载界面优化(代码片段)

【Unity使用UGUI实现王者荣耀UI界面(三)】登录界面以及加载界面优化【只是用来玩玩的,不要太当真】效果显示:zhans1.加载界面进度100%跳转登录界面这个功能好做,只需要将上次预留的代码补充上,打... 查看详情

unity使用ugui实现王者荣耀ui界面游戏开始界面(代码片段)

文章目录【Unity使用UGUI实现王者荣耀UI界面(四)】游戏开始界面1.把一些重复的UI添加2.开始游戏按钮3.注销按钮4.完成5.打包6.打包完成内容简介章节介绍适度人群结语【Unity使用UGUI实现王者荣耀UI界面(四)】游... 查看详情

unity使用ugui实现王者荣耀ui界面游戏开始界面(代码片段)

文章目录【Unity使用UGUI实现王者荣耀UI界面(四)】游戏开始界面1.把一些重复的UI添加2.开始游戏按钮3.注销按钮4.完成5.打包6.打包完成内容简介章节介绍适度人群结语【Unity使用UGUI实现王者荣耀UI界面(四)】游... 查看详情

unity利用ugui打包图集,动态加载sprite资源

...动态显示对应的头像。尝试利用UGUI的图集来加载,具体实现如下:1.首先,需要知道SpriteAtlas的功能,可以保存一些关于要打包进去的sprite的设置。(详细参数设置的意义有待进一步研究),其中的ObjectsForPacking可以关联到需要... 查看详情

王者荣耀是怎样炼成的

王者荣耀是怎样炼成的(一)《王者荣耀》用什么开发,游戏入门,unity3D介绍王者荣耀是怎样炼成的(二)《王者荣耀》unity安装及使用的小白零基础入门Unity3d引擎原理详细介绍、Unity3D引擎架构设计 查看详情

unity小地图点击位置映射到地图实体位置(类似王者荣耀的小地图点击功能)

小地图自制功能就不多说了,我的小地图制作参考地址:https://www.youtube.com/watch?v=EeyZ2y2Jpz4建议直接到地址中去看UGUI的小地图的制作,觉得还是讲得比较好的。下面在参考地址的制作前提下做一个小地图点击位置映射到地图实体... 查看详情

编程小白学逻辑-实现王者荣耀轮盘中奖功能(代码片段)

功能介绍实现王者荣耀轮盘中奖功能功能功能:1、窗口2、画背景、画选框3、按键4、按任意键移动框、转弯移动5、状态控制自动移动,按键启停6、移动n次后停止,随机数,随机数转动7、改变执行速度(慢、... 查看详情

从王者荣耀看设计模式(虚拟代理模式)(代码片段)

...,下次调用paintIcon时,代理就委托ImageIcon进行。七.代码实现编写ImageProxy代码packagecom.practice.VirtualProxy;importjava.awt.Component;importjava.awt.Graphics;importjava.net.URL;importjavax.sw 查看详情

王者荣耀是怎样炼成的《王者荣耀》用什么开发,游戏入门,unity3d介绍

在国内,如果你没有听说过《王者荣耀》,那你一定是古董级的人物了。 《王者荣耀》(以下简称“农药”),专注于移动端(Android、IOS)的MOBA游戏。笔者看到这么火爆,就萌生了了解一下这类游戏的开发历程,本... 查看详情

unity贪吃蛇ugui简单的ui设计

UI界面大致的样子 导入素材资源后,使用UGUI进行创作创建画布Canvas,我们使用UGUI,大多数UI功能直接在Canvas下进行将Canvas的渲染模式改为ScreenSpace-Cemare注意密钥把摄像机拖进RenderCamera格子背景冰淇淋的图片贪吃蛇的T... 查看详情

unity头发随动效果

...可以产生随动的效果。类似王者荣耀角色展示界面。准备使用Unity-chan模型来测试,下载地址:https://assetstore.unity.com/packages/3d/characters/unity-chan-model-18705 查看详情

王者荣耀是怎样炼成的《王者荣耀》用什么开发,游戏入门,unity3d介绍

在国内,如果你没有听说过《王者荣耀》,那你一定是古董级的人物了。 《王者荣耀》(以下简称“农药”),专注于移动端(Android、IOS)的MOBA游戏。笔者看到这么火爆,就萌生了了解一下这类... 查看详情

unity3dc#实现类似于王者荣耀技能读条和cd冷却的功能(含源码)(代码片段)

...却时间的倒计时,技能冷却完成后就可以再次释放。实现UI搭建UI的搭建较为简单就是几张图片(Image)配合文本(Text),文本主要用于技能冷却文字的提示和冷却CD倒计时的显示,而图片就包含了技能... 查看详情

关于unity中的ugui优化,你可能遇到这些问题

...GUI里的这个选项,应该是ETC2拆分Alpha通道的意思,但是在使用中并没起作用?请问有没有什么拆分的标准和特别要求呢?Q2:在UI界面中,用Canvas还是用RectTransform做根节点更好?哪种方法效率更高?Q3:UWA性能检测报告中的SharedUI... 查看详情

unity界面ugui遮挡的问题(代码片段)

解决方法:在使用Unity的UGUI时候,重叠的UI控件可能会导致某一个控件点击失败,如下图:在前面的图片挡住了后面的Button,导致后面的Button无法触发点击事件,此时只要把图片的Image组件的RaycastTarget的勾选取消即可解决遮挡的... 查看详情