Unity官方教程《Tanks》学习笔记(三)

本系列文章是根据官方视频教程而写下的学习笔记,原官方视频教程网址:https://unity3d.com/cn/learn/tutorials/s/tanks-tutorial

系列其他笔记传送门
Unity官方教程《Tanks》学习笔记(一)
Unity官方教程《Tanks》学习笔记(二)
Unity官方教程《Tanks》学习笔记(四)
Unity官方教程《Tanks》学习笔记(五)

本小节的目的是制作Tank的生命条,也就是下图的形式,有一圈绿色生命条包围在坦克的周围:


Tank Health

首先,我们确保Scene View是在Pivot状态下的,而不是Center状态:

Pivot

接着,我们在Hierarchy根目录下创建一个Slider(Create——>UI——>Slider),接着会看到生成如下两样东西:
Slider

当创建一个UI元素时,Unity会自动为我们生成一个Canvas和EventSystem,而Slider则成为Canvas的一个子对象。接着,选中EventSystem,把里面的Horizontal Axis改为HorizontalUI和Vertical Axis改为VerticalUI,这样做的意义是不与用户操作坦克移动的输入产生冲突:
EventSystem

接着,我们考虑,由于生命条是围绕在坦克周围的,也就是该Slider是跟随坦克移动的,所以我们需要让该Slider成为Tank的一个子对象,这样他们的position就能同步了,操作很简单,把Canvas(而不是Slider)拖拽到Tank下,成为它的子对象

然后,我们对Canvas的一些属性作出修改:
1、修改Canvas的position值为(0,0.1,0);修改Width和Height为(3.5,3.5);修改Rotation为(90,0,0)。
2、修改Canvas的渲染模式Render Mode为 World Space。
3、修改Canvas Scaler下的Reference Pixels Per Unit为1。
如下图所示:


Canvas配置

展开Canvas,对Slider重命名为HealthSlider,然后展开HealthSlider,有如下几个子元素:Background、Fill Area、HandleSliderArea。我们把HandleSliderArea删除,因为我们不需要用到滑动图标。接着,复选HealthSlider、Background、Fill Area和Fill,点击Anchor Presets,按住ALT选中右下角的选项:


Anchor Presets

选中HealthSlider,作以下改动:
①点击取消Interactable
②Transition选择为None
③Max Value选择为100.


HealthSlider

选中Background,作以下改动:
①在Source Image中,选择图片资源为HealthWheel
②在Color中,把Alpha值改为80


Background

选中Fill(Fill是Fill Area的子对象),作以下改动:
①Source Image,选择图片为HealthWheel
②在Color中,把Alpha值改为150
③ImageType改为 Filled
④Fill Origin选择为Left
⑤取消选择Clockwise


Fill

接着,我们找到/Scripts/UI 文件夹下的UIDirectionControl脚本,把它拖拽到HealthSlider下。我们来看看这个脚本的作用是什么:

using UnityEngine;

public class UIDirectionControl : MonoBehaviour
{
    public bool m_UseRelativeRotation = true;  


    private Quaternion m_RelativeRotation;     


    private void Start()
    {
        m_RelativeRotation = transform.parent.localRotation;    //初始角度
    }


    private void Update()
    {
        if (m_UseRelativeRotation)
            transform.rotation = m_RelativeRotation;    //每一帧的更新都把角度重置为初始角度
                                                        //也就是固定Slider的角度,不让它随着Tank转动
    }
}

既然坦克有生命值,那么当坦克的生命值降为0的时候,会发生什么?答案是会爆炸,那么我们就需要坦克爆炸的效果,素材已经为我们准备好了。在Prefabs文件夹下,找到TankExplosion预制件,把它拖拽到Hierarchy根目录。选中TankExplosion,为它添加AudioSource,AudioClip选择为TankExplosion,取消Play On Awake以及Loop,然后点击右上角的Apply,使得改动在Prefabs的预制件生效,然后删除在Hierarchy下的TankExplosion。

TankExplosion

完成以上改动后,我们接下来要思考一个问题,坦克的生命条UI界面有了,但还需要让它动态地减少,即在坦克受到伤害的时候会扣血,那么该怎么实现呢?答案是我们需要一个脚本,对坦克的生命值进行控制。在/Scripts/Tank文件夹内找到TankHealth.cs文件,把它拖拽到Tank下,然后打开它,我们来编辑一下:

using UnityEngine;
using UnityEngine.UI;

public class TankHealth : MonoBehaviour
{
    public float m_StartingHealth = 100f;          //初始生命值
    public Slider m_Slider;                        //slider,生命条
    public Image m_FillImage;                      //生命条的填充
    public Color m_FullHealthColor = Color.green;  //满血的时候是绿色
    public Color m_ZeroHealthColor = Color.red;    //低血量状态是红色
    public GameObject m_ExplosionPrefab;           //爆炸效果的预制件
    
    
    private AudioSource m_ExplosionAudio;          //Audio
    private ParticleSystem m_ExplosionParticles;   //爆炸的粒子效果
    private float m_CurrentHealth;  
    private bool m_Dead;                           //是否已经死亡


    private void Awake()
    {
        //初始化的时候就准备好爆炸效果的实例
        m_ExplosionParticles = Instantiate(m_ExplosionPrefab).GetComponent<ParticleSystem>();
        m_ExplosionAudio = m_ExplosionParticles.GetComponent<AudioSource>();
        //未激活状态
        m_ExplosionParticles.gameObject.SetActive(false);
    }


    private void OnEnable()
    {
        m_CurrentHealth = m_StartingHealth;
        m_Dead = false;

        SetHealthUI();
    }
    
    /**
     * 外部调用,当坦克受伤的时候调用该函数
     */
    public void TakeDamage(float amount)
    {
        // Adjust the tank's current health, update the UI based on the new health and check whether or not the tank is dead.
        m_CurrentHealth -= amount;

        SetHealthUI();

        //如果坦克的血量低于0并且是存活的,那么判定为死亡
        if(m_CurrentHealth <= 0f && !m_Dead){
            OnDeath();      
        }
    }


    private void SetHealthUI()
    {
        // Adjust the value and colour of the slider.
        m_Slider.value = m_CurrentHealth;

        //对Fill填充物的颜色做出改变
        //Color.Lerp 颜色的线性插值,通过第三个参数在颜色1和2之间插值。
        m_FillImage.color = Color.Lerp(m_ZeroHealthColor,m_FullHealthColor,m_CurrentHealth / m_StartingHealth);
    }


    private void OnDeath()
    {
        // Play the effects for the death of the tank and deactivate it.
        m_Dead = true;
        
        //修改粒子系统的坐标为坦克死亡时候的坐标
        m_ExplosionParticles.transform.position = transform.position;
        m_ExplosionParticles.gameObject.SetActive(true);

        //播放爆炸效果以及爆炸音效
        m_ExplosionParticles.Play();
        m_ExplosionAudio.Play();

        gameObject.SetActive(false);
    }
}

编辑完毕后,我们要对其公有变量进行初始化:


TankHealth变量初始化

最后,点击Tank中右上角的Apply,使其应用到预制件中,保存当前Scene。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,924评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,781评论 2 378
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,813评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,264评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,273评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,383评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,800评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,482评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,673评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,497评论 2 318
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,545评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,240评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,802评论 3 304
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,866评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,101评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,673评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,245评论 2 341

推荐阅读更多精彩内容