unity2D学习（14）血条显示、Canvas中Render Mode的三种模式介绍

最新推荐文章于 2024-04-17 09:49:50 发布

魔法自动机

最新推荐文章于 2024-04-17 09:49:50 发布

阅读量4.6k

点赞数 4

分类专栏： Unity学习

本文链接：https://blog.csdn.net/qq_40306845/article/details/104756768

版权

Unity学习专栏收录该内容

25 篇文章 46 订阅

订阅专栏

1 血条素材处理

分割处理：对上一章画出来的血条图片做分割处理

整理素材格式：

Sprite Mode选择Multiple：因为一张图片包含多个素材。
Pixels Per Unit单位像素为16：与之前游戏的素材统一。
Filter Mode选择为像素：因为素材是像素类型的。

分割素材：点击上图里面的Sprite Editor，选择自动切割素材，再通过拖动切割选区来调整，最后记得Apply。

效果

2 UI显示血条

效果：在敌人的头顶上显示血条。

UI显示血条：

在敌人下面新建一个Canvas画布。

设置Canvas的参数。

位置X Y Z全部设置为0：为了让Canvas中心位置在Crab（敌人）上，方便后面拖动血条到敌人的头上。
Render Mode设置为World Space：选为World Space可以不用对应屏幕，会被作为一个3D物体来处理。（最后会补充RenderMode三种模式的介绍）
Event Camera添加为主摄像机Main Camera。
Sorting Layer选择到Player：渲染层级和游戏角色在同一层。

在Canvas下新建两个Image，分别改名叫WhiteHp、RedHp，用来放两个血条图片。

给WhiteHp和RedHp添加上之前切割好的图片，设置好参数。

Image Type设置为Filled：因为希望通过Fill Amount来控制血条占百分比，以此来控制血条变动显示。
Fill Method设置为Horizontal：百分比控制方向是纵向的。

拖动血条到敌人的头上，并重叠WhiteHp和RedHp，RedHp在WhiteHp的上面。

3 代码控制血条

给在Crab下面新建的Canvas画布添加一个script脚本。

代码思路：通过控制红色血条的Fill Amount控制血条占百分比，来修改血条在UI上的显示。

HP代码：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

using UnityEngine.UI;

public class HpController : MonoBehaviour {

    private Image hpImage;
    private float hpMax=100f;//最大血量
        
	void Start () {
        hpImage = GameObject.Find("RedHp").GetComponent<Image>();//获取ui对于的text
    }
    public void HpChange(float newHp)
    {
        hpImage.fillAmount = newHp / hpMax;
    }
}

然后在敌人受伤时调用HpController里面的HpChange函数就行了。

4 效果

5 补充Canvas中Render Mode的三种模式介绍

三种模式：Screen Space-Overlay、Screen Space-Camera和World Space。

Screen Space-Overlay：Canvas作为2D图像，永远处于屏幕的最前方，即使没有相机也能够看到内容。如果画布发生大小改变，也能够自动改变尺寸来匹配屏幕。
Screen Space-Camera：可以指定摄像机，和Screen Space-Overlay类似，但是有物体比Canvas更加接近摄像机时会显示在前面，反之则会被Canvas遮挡。
World Space：可以指定摄像机，把Canvas视为一个3D物体来处理，可以设置位置和大小。