【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遮罩,太达到一个血条增减的效果。






相关文章
|
3月前
|
图形学 C#
超实用!深度解析Unity引擎,手把手教你从零开始构建精美的2D平面冒险游戏,涵盖资源导入、角色控制与动画、碰撞检测等核心技巧,打造沉浸式游戏体验完全指南
【8月更文挑战第31天】本文是 Unity 2D 游戏开发的全面指南,手把手教你从零开始构建精美的平面冒险游戏。首先,通过 Unity Hub 创建 2D 项目并导入游戏资源。接着,编写 `PlayerController` 脚本来实现角色移动,并添加动画以增强视觉效果。最后,通过 Collider 2D 组件实现碰撞检测等游戏机制。每一步均展示 Unity 在 2D 游戏开发中的强大功能。
172 6
|
5月前
|
图形学
【推荐100个unity插件之9】分享几个完全免费的2D角色动画生成器(推荐收藏)
【推荐100个unity插件之9】分享几个完全免费的2D角色动画生成器(推荐收藏)
292 0
|
5月前
|
图形学
【推荐100个unity插件之19】武器拖尾特效插件——Pocket RPG Weapon Trails(2d 3d通用)
【推荐100个unity插件之19】武器拖尾特效插件——Pocket RPG Weapon Trails(2d 3d通用)
99 0
|
5月前
|
定位技术 图形学
【Unity实战】零代码实现物理2d绳子和绳桥效果——Hinge Joint 2D的使用
【Unity实战】零代码实现物理2d绳子和绳桥效果——Hinge Joint 2D的使用
260 0
|
5月前
|
图形学
【用unity实现100个游戏之16】Unity中程序化生成的2D地牢4(附项目源码)
【用unity实现100个游戏之16】Unity中程序化生成的2D地牢4(附项目源码)
41 0
|
5月前
|
算法 图形学
【用unity实现100个游戏之16】Unity程序化生成随机2D地牢游戏3(附项目源码)
【用unity实现100个游戏之16】Unity程序化生成随机2D地牢游戏3(附项目源码)
94 0
|
5月前
|
自然语言处理 图形学
【用unity实现100个游戏之16】Unity程序化生成随机2D地牢游戏2(附项目源码)
【用unity实现100个游戏之16】Unity程序化生成随机2D地牢游戏2(附项目源码)
45 0
|
5月前
|
算法 数据可视化 定位技术
【用unity实现100个游戏之16】Unity程序化生成随机2D地牢游戏1(附项目源码)
【用unity实现100个游戏之16】Unity程序化生成随机2D地牢游戏1(附项目源码)
56 0
|
5月前
|
图形学
【Unity小技巧】Unity中实现带有Sprite Shape的2D水效果(附项目源码)
【Unity小技巧】Unity中实现带有Sprite Shape的2D水效果(附项目源码)
323 0
|
5月前
|
存储 图形学
【unity实战】Unity实现2D人物双击疾跑
【unity实战】Unity实现2D人物双击疾跑
51 0