【Ruby 2D】【unity learn】抬头显示血条

简介: 【Ruby 2D】【unity learn】抬头显示血条

说起游戏开发,大家一般会觉得控制角色移动和制作血条哪个难呢?

或许都会觉得血条比较难吧。

是的,正是如此。

那么我们让我们来看看血条该怎么做吧a81f890670dc4597be4276e3afcae9f1.png

这是效果图

受伤后是这样的




image.png


首先是创建一张Canvas画布

这个画布会很大




a0e0f0676d80428cbbcb81aa59e3b849.png

相比之下我们的小地图就显得微不足道了

随后我们创建两个image元素



c546366d720b4ebdbdd3816b8f735634.png


将图片放入source image中就行了


92ce9ef4cfd94d389609d5dcf496c12f.png

我这里图方便就直接把头像作为子元素挂载在这个状态栏上了

注意先后排布好就行

随后

我们要做的是

创建一个image对象 ,然后搜索Mask组件




ab8fab5dde3a43c2a67491459ddc1d7a.png


变为Mask,然后我们创建子对象image这个是血条我们就叫它Health Bar

然后会是这个状态

9bf129f685744634a461b81d0489c9d2.png

注意 蓝色血条里image中的image Type改为Simple,并且我们的锚点要设置在左上角,在Rect Transform中设置

这样血条才不会随着父对象变换位置,也不会随着大小的变化而改变形状

操作如下

247e8802b75b45d5bd724dccd05653ea.png



d9a6f8b455f94391b74db76b759c49c0.png

c882e594980645f494293ec48632ba3b.png


选中最左上角

注意我们的Mask只起遮罩作用,是不显示的

所以我们应该将一个设置关掉,也就是这里

239c1e000ef446dd80ffc06195ebdbed.png


随后就是代码环节了,前面乱七八糟的很杂,但是代码倒不复杂

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class MyUIHealthBar : MonoBehaviour
{
    // Start is called before the first frame update
    public static MyUIHealthBar instance { get; private set; }//static将该变量设为全局变量,所有类都可调用
    public Image mask;//
    float originalSize;
    private void Awake()
    {
        instance = this;//一开始就将instance赋上值
    }
    void Start()
    {
        originalSize = mask.rectTransform.rect.width;//存Mask的宽度
    }
    // Update is called once per frame
    void Update()
    {
    }
    public void SetValue(float value)
    {
        mask.rectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, originalSize * value);//这里是修改值的函数,到Rubycontroller脚本会直接调用
    }
}

3387460973f944e7842b2bb5a9b1f0e7.png



0d71d110daba4c74909d3678fa2ceab3.png


下面是Ruby的代码

 

MyUIHealthBar.instance.SetValue(currentHealth / (float)maxHealth);


就这么一行,是的,就这么一行

因为我们的static已经将instace公开了,人人都可以调用,所以我们只需要附上类名就可以直接调用这个控制遮罩宽度的函数了,通过控制Mask遮罩,太达到一个血条增减的效果。






相关文章
|
4月前
|
C# 图形学
【Unity】2D游戏-愤怒的小鸟教学实战(附源码和实现步骤 超详细)
【Unity】2D游戏-愤怒的小鸟教学实战(附源码和实现步骤 超详细)
162 1
|
10月前
|
存储 图形学 Android开发
【游戏开发】使用unity创建2D游戏
Unity是一种非常强大的游戏引擎,可以帮助你创建各种类型的游戏,包括2D游戏。在本文中,我们将教你如何使用Unity创建2D游戏。首先,你需要确保你已经下载并安装了最新版本的Unity。如果你还没有安装Unity,可以从官方网站下载免费的Unity Hub来管理你的Unity版本。
388 0
|
10月前
|
机器人 图形学 Ruby
【unity learn】【Ruby 2D】角色发射飞弹
【unity learn】【Ruby 2D】角色发射飞弹
|
10月前
|
机器人 图形学 Ruby
【Ruby 2D】【unity learn】控制敌人随机运动以及动画控制
【Ruby 2D】【unity learn】控制敌人随机运动以及动画控制
|
10月前
|
图形学 Ruby
【unity learn】【Ruby2D】控制人物运动的两套模式
【unity learn】【Ruby2D】控制人物运动的两套模式
【unity learn】【Ruby2D】控制人物运动的两套模式
|
机器人 图形学 Ruby
【Unity开发实战】—— 2D项目1 - Ruby‘s Adventure 游戏中动画制作(4-1)
【Unity开发实战】—— 2D项目1 - Ruby‘s Adventure 游戏中动画制作(4-1)
202 0
【Unity开发实战】—— 2D项目1 - Ruby‘s Adventure 游戏中动画制作(4-1)
|
定位技术 API 图形学
【Unity开发实战】—— 2D项目1 - Ruby‘s Adventure 游戏世界中各个对象的交互(3-1)
【Unity开发实战】—— 2D项目1 - Ruby‘s Adventure 游戏世界中各个对象的交互(3-1)
233 0
【Unity开发实战】—— 2D项目1 - Ruby‘s Adventure 游戏世界中各个对象的交互(3-1)
|
存储 定位技术 图形学
【猿创征文|Unity开发实战】—— 2D项目1 - Ruby‘s Adventure 游戏地图绘制(2-1)
【猿创征文|Unity开发实战】—— 2D项目1 - Ruby‘s Adventure 游戏地图绘制(2-1)
224 0
【猿创征文|Unity开发实战】—— 2D项目1 - Ruby‘s Adventure 游戏地图绘制(2-1)
|
4月前
|
C# 图形学
【Unity 3D】元宇宙案例之虚拟地球信息射线实战(附源码、演示视频和步骤 超详细)
【Unity 3D】元宇宙案例之虚拟地球信息射线实战(附源码、演示视频和步骤 超详细)
50 0
|
4月前
|
人工智能 自然语言处理 区块链
【Unity 3D】元宇宙概念、应用前景、价值链等概述
【Unity 3D】元宇宙概念、应用前景、价值链等概述
52 0