草庐IT

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

布小禅 2024-04-10 原文


文章目录

【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界面(一)】加载页面(进度条)的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri,根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序,它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重,我想提高压缩级别,因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗?是否有另一个允许指定压缩级别的Ruby库? 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法? - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  4. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇,就使用ruby​​onrails自动化单元测试而言,你们正在做什么?您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您?git中的预提交Hook?只是手动调用?我完全理解测试,但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的,并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您? 最佳答案 不确定您到底想听什么,但是有几个级别的自动代码库控制:在处理某项功能时,您可以使用类似autotest的内容获得关于哪些有效,哪些无效的即时反馈。要确保您的提

  5. ruby - 在 Ruby 中使用匿名模块 - 2

    假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外,还有什么方法可以访问C和m中的其他内容?我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)?如何在使用完匿名模块后将其删除,使其定义的常量不再存在? 最佳答案 三个答案:是的,使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于

  6. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

    我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封,在我看来soap请求没有正确的命名空间。任何人都可以建议我

  7. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序,虽然我自己可以处理一大堆yml文件,但我说的语言(非常)有限,最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器,其中一些翻译器不愿意或无法处理存储库中的100多个文件,处理语言数据。谢谢&问候,安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题,我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  8. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声? - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题?更新问题,以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点?我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等),但我确实想创建一个输出文件。

  9. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗?当我运行compasswatch时,它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行?文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们?我自己编译的.sass文件编译成compiled/t

  10. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

随机推荐