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

1 血条素材处理

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

• 整理素材格式：

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

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

• 效果

2 UI显示血条

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

UI显示血条：

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

• 设置Canvas的参数。

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

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

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

1. Image Type设置为Filled：因为希望通过Fill Amount来控制血条占百分比，以此来控制血条变动显示。
2. 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();//获取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物体来处理，可以设置位置和大小。