[Unity3D/2D]如何实现制作一款简单的血条

[Unity3D/2D]如何实现制作一款简单的血条

在多数的游戏制作中,都会涉及到血条的制作,不论是在2D游戏中还是3D游戏中都非常常见,如何制作一款简易的血条呢?这里我给结合自己自学过程中用到的血条制作方法给大家分享一下我是如何制作血条的(* ^ _ ^ *)

效果演示
1.2D/3D游戏中效果
[Unity3D/2D]如何实现制作一款简单的血条_第1张图片
2.在3D游戏中的效果

一、血条设计部分

我所用的血条制作的方法是利用Slider(滑块)来制作血条,这种方法较简便,且涉及到的代码量也非常的少,适合小白使用

1.首先我们要在Hierarchy面板下单击右键,选择UI中的slider来创建一个滑块,可以在左边的Scene窗口里面对其拖动,将其摆放至合适的位置上。(在scene窗口里面按住右键可以移动窗口位置,鼠标滚轮可以实现缩放,可以切换至2D角度,这样比较好调,如果切换2D角度后还是找不到合适的角度调slider的位置,可以在Hierarchy面板下双击要调节的UI对象)

2.接着打开slider,对其进行适当的调整[Unity3D/2D]如何实现制作一款简单的血条_第2张图片
Background是背景图,是一个image控件,可以在其组件中设置颜色
Fill也是一个image控件,用其显示要填充的颜色
Handle是圆形的滑块

(1)由于制作血条是不需要圆形的滑块的,所以我们把它去掉,然后调整一下Slider下子物体的顺序,把不需要的东西Delete掉,最终结果如下图
[Unity3D/2D]如何实现制作一款简单的血条_第3张图片
(2)点击Background,在其image组建下可以设置需要填充的颜色
[Unity3D/2D]如何实现制作一款简单的血条_第4张图片
同理,点击Fill可以设置需要填充的颜色
[Unity3D/2D]如何实现制作一款简单的血条_第5张图片
(3)单击Slider,在Slider组件中的找到Slider控件,调节其下的Value值可以实现血条的增加和减少
[Unity3D/2D]如何实现制作一款简单的血条_第6张图片
在这里有的同学可能发现了绿色的填充条它超出了红色的背景,这是因为他们两个的可显示部分的大小不一样
[Unity3D/2D]如何实现制作一款简单的血条_第7张图片
(3)所以我们第三步是调整其大小使它一致,分别单击Fill和Background,在Rect Transform组建下对其进行调整
[Unity3D/2D]如何实现制作一款简单的血条_第8张图片
单击红色圈圈部分[Unity3D/2D]如何实现制作一款简单的血条_第9张图片
按住Alt键选择红色圈圈部分即可实现
[Unity3D/2D]如何实现制作一款简单的血条_第10张图片
如此一来,简易的血条就制作好了,可以看一下效果
[Unity3D/2D]如何实现制作一款简单的血条_第11张图片
可以在Scene窗口对其进行进一步调整,比如位置和大小,这个血条会显示在所有实物的前面,不会在游戏中显示出来,也不能够出现在3D游戏场景中,只存在于画布上,如果想要其出现在3D场景中,只需要在Canvas下找到Canvas组件,并把Render Mode设置为World Space即可,这样血条就会出现在3D场景中
[Unity3D/2D]如何实现制作一款简单的血条_第12张图片
再选择Slider,调整其Scale大小,即可在场景中使用
[Unity3D/2D]如何实现制作一款简单的血条_第13张图片
其效果如下

当然了,游戏中的血条一直是对准玩家的,所以呢我们还需要添加一个脚本,使其一直正对着Main Camera,我会在文章后面的脚本部分给大家详细讲解

有的同学可能会觉得血条比较丑,或者想制作自己风格的血条,下面可以给同学拓展一下

我们单击Background或者Fill,会发现其下面有一个Image组件,其中Source image是可以替换的,没替换就是用的系统默认的,大家可能在替换的时候会发现,自己导入的素材不能够替换,这里我建议大家可以用另一个组件Raw iamge ,他与image几乎没有什么不同,但是他可以接收几乎所有的图片格式,如jpg,gif,png

注意:一定要在移除原有的image组件后才能添加Raw image,两者只能存在一个,同时存在会给出不能添加的提示
[Unity3D/2D]如何实现制作一款简单的血条_第14张图片
下面是我替换的Background背景,添加的图片格式是jpg
[Unity3D/2D]如何实现制作一款简单的血条_第15张图片
同理,Fill也可以添加图片,我随便找了两张图片,效果如下
[Unity3D/2D]如何实现制作一款简单的血条_第16张图片
有的同学的血条有边框,Fill填充可能会把边框挡住,这个时候可以单击Fill后点击红色箭头的方框,在Scene中进行适当调整,其效果也一样
[Unity3D/2D]如何实现制作一款简单的血条_第17张图片
也可以单独创建一个Raw image图层,调整其图层顺序,将其调整到Fill的下面,然其覆盖住Fill,再调整其大小,使其边框掩盖住Slider的边框
[Unity3D/2D]如何实现制作一款简单的血条_第18张图片
二、用代码对血条进行控制
1.首先我们在Assets下单击右键创建一个脚本,我将其命名为HPController,然后进入脚本编写
[Unity3D/2D]如何实现制作一款简单的血条_第19张图片
脚本编写如下,记得引用头文件,控制Slider(血条)变化的显示中最重要的就是Value值,为了方便,本文中是通过按键来实现血量的增减

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;  //Slider的调用需要引用UI源文件

public class HPCtroller : MonoBehaviour
{
     
    public Slider HP;  //实例化一个Slider

    private void Start()
    {
     
        HP.value = 1;  //Value的值介于0-1之间,且为浮点数
    }

    void Update()
    {
     
        if(Input.GetKeyDown(KeyCode.A))  //如果按下A键,血量就会减少
        {
     
            HP.value = HP.value - 0.1f;  
        }
        else if(Input.GetKeyDown(KeyCode.D))  //按下D键,血量就会增加
        {
     
            HP.value = HP.value + 0.1f;
        }
    }
}

Ctrl+S保存代码,在Unity中把脚本挂在Slider上(挂在其它物体上也行),将Slider拖拽给代码中的Slider,这时,代码中的Slider就是你拖拽进来的Slider了
[Unity3D/2D]如何实现制作一款简单的血条_第20张图片
单击Play运行,用AD键可以控制血量的大小
[Unity3D/2D]如何实现制作一款简单的血条_第21张图片
接下来我会更新一个实用的血条教程,这里不详细讲了,主要讲讲如何在3D游戏里面实现血条一直面朝玩家,有需要的同学可以点击我的主页,在里面可以找到

只需要一个很简单的脚本代码即可

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

public class LookAtCamera : MonoBehaviour
{
     
    public GameObject Player; 
    void Update()
    {
     
        transform.LookAt(Player.transform.position);
    }
}

将这个脚本挂在Slider上,将Main Camera拖拽给脚本中的Player即可实现这个功能

接下来我还会更新如何实现给敌人挂在血条和血条为零后敌人摧毁,以及敌人的自动寻路功能,其中部分功能已经更新在我的博客里面了,大家可以点开我的主页进行查看【我的博客文章】

日后还会更新更多的教程,点个关注不迷路,如果觉得有帮助的话,就点个赞支持一下吧,有问题的可以评论,我都会回复

你可能感兴趣的:(Unity3D,血条设计,unity,游戏,游戏开发)