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

简介: 【Unity使用UGUI实现王者荣耀UI界面(一)】加载页面(进度条)


3.gif

文章目录


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


1. 素材准备

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

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


2. 界面分析

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

image.png

可以看到四个元素

  • 左上角的黑框框,上面还有一行字
    image.png
  • 下面的进度条,文字,进度
    image.png
  • 左上角的静音按钮
    image.png
  • 当然还有我们的背景


3. 打开Unity Hub创建项目

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

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

image.png

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

image.png

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

image.png

4.创建成功

image.png

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

image.png


4. 开始搭建UI

1. 准备工作

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

然后再把原来的默认的删除(不删除也可以)

image.png

然后右键->delete。


2. 背景图片

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

image.png

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

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

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

image.png


3. 导入素材

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

image.png

命名为:img

然后下载这个

链接:https://pan.baidu.com/s/1-MXSmvYfsL3iumfPNeNotA

提取码:l48m

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


4. 配置背景图片

【只第一次详细说】

选中全部图片设置为精灵属性(sprite)

image.png

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

  • 有个Source Image
    image.png
  • 选择我们的背景图片
  • 然后点击左上角的网格
    image.png
  • 选择最右下边的填充
  • 然后在scene页面按2,切换成2D编辑模式,滑轮放大缩小到一个你觉得合适的位置
    image.png
  • 并且将图片放到与后面的框框相同大小
  • 然后再点击canvas,选择render mode,跟随方式为跟随相机(screen space camera)这样做之后,我们的游戏运行起来后,就是直接显示画布内容了


5. 进度条显示UI搭建

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

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

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

image.png

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

接着我们就去写脚本吧

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

点击Scripts新建一个c#文件

image.png

命名为jindu,cs

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

image.png


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. 演示

4.gif


5. 打包

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

image.png


结语

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

Unity游戏引擎宣言:

你是否热爱游戏呢?

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

不要犹豫了,赶快学习吧!


目录
相关文章
|
10天前
|
前端开发 图形学
unity UGUI跟随3D物体的坐标转换
在 Unity 中实现 UGUI 元素跟随 3D 物体,关键是将 3D 物体的世界坐标转换为屏幕或画布坐标。通过 Camera.WorldToScreenPoint 方法,可将 3D 物体位置映射到屏幕上,再更新 UGUI 元素的位置。代码示例展示了如何使用该方法,使 UGUI 图像跟随 3D 模型,并提供文字显示、图像和线条的显示/隐藏功能。
|
10天前
|
图形学
Unity 获取鼠标位置下的UGUI或3D物体
本文总结了两种检测方法,分别用于UGUI和3D物体的检测。第一种方法`GetOverUIobj`专门用于检测鼠标悬停的UGUI元素,通过`GraphicRaycaster`实现。第二种方法`GetOverWordGameObject`则同时适用于UI和3D物体检测,利用`PhysicsRaycaster`进行射线检测。两者均返回悬停对象或null。
|
10天前
|
图形学
Unity UGUI拖拽移动
本文介绍了两种UI拖拽实现方式:精准拖拽和克隆拖拽。精准拖拽通过计算鼠标点击点与UI中心的偏移量,使UI跟随鼠标移动,适用于需要精确控制的场景。代码中通过`IBeginDragHandler`、`IDragHandler`和`IEndDragHandler`接口实现拖拽逻辑。克隆拖拽则在拖拽时克隆一个UI对象,使其跟随鼠标移动,适合视觉效果需求较高的场景。代码中同样使用上述接口,并在拖拽结束时销毁克隆对象。具体实现可参考提供的代码示例。
|
11天前
|
图形学
Unity UGUI实现鼠标拖动图片
在 Unity UGUI 中实现鼠标拖动图片功能,主要涉及事件检测、坐标转换和物体位置更新。根据鼠标移动量更新图片位置。代码示例展示了如何通过这些步骤实现拖动效果。
|
11天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
141 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
2月前
|
前端开发 UED
「Mac畅玩鸿蒙与硬件39」UI互动应用篇16 - 倒计时环形进度条
本篇将带你实现一个倒计时环形进度条应用。用户可以设置倒计时的时间,启动倒计时后,应用会动态显示一个随着时间递减的环形进度条,同时伴有数字倒计时显示。这是结合动画效果和时间管理的实用示例。
140 10
|
6月前
|
开发者 图形学 开发工具
Unity编辑器神级扩展攻略:从批量操作到定制Inspector界面,手把手教你编写高效开发工具,解锁编辑器隐藏潜能
【8月更文挑战第31天】Unity是一款强大的游戏开发引擎,支持多平台发布与高度可定制的编辑器环境。通过自定义编辑器工具,开发者能显著提升工作效率。本文介绍如何使用C#脚本扩展Unity编辑器功能,包括批量调整游戏对象位置、创建自定义Inspector界面及项目统计窗口等实用工具,并提供具体示例代码。理解并应用这些技巧,可大幅优化开发流程,提高生产力。
550 1
|
7月前
|
安全 前端开发 数据安全/隐私保护
会员系统03-前台系统UI,利用页面展示大宗农产品价格走势曲线,添加银行卡,前还要进行实名认证,密码密文,隐私安全
会员系统03-前台系统UI,利用页面展示大宗农产品价格走势曲线,添加银行卡,前还要进行实名认证,密码密文,隐私安全
|
2月前
|
移动开发 前端开发 Java
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
JavaFX是Java的下一代图形用户界面工具包。JavaFX是一组图形和媒体API,我们可以用它们来创建和部署富客户端应用程序。 JavaFX允许开发人员快速构建丰富的跨平台应用程序,允许开发人员在单个编程接口中组合图形,动画和UI控件。本文详细介绍了JavaFx的常见用法,相信读完本教程你一定有所收获!
1432 1
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
|
2月前
|
XML 搜索推荐 前端开发
安卓开发中的自定义视图:打造个性化UI组件
在安卓应用开发中,自定义视图是一种强大的工具,它允许开发者创造独一无二的用户界面元素,从而提升应用的外观和用户体验。本文将通过一个简单的自定义视图示例,引导你了解如何在安卓项目中实现自定义组件,并探讨其背后的技术原理。我们将从基础的View类讲起,逐步深入到绘图、事件处理以及性能优化等方面。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的见解和技巧。

热门文章

最新文章