使用Unity 2019制作仿微信小游戏飞机大战三：战斗界面UI

零、教程目录

使用Unity 2019制作仿微信小游戏飞机大战教程已完结。
文章目录如下：
《第一篇：开始游戏界面》
《第二篇：搭建基础游戏框架》
《第三篇：战斗界面UI》
《第四篇：主角飞机序列帧动画》
《第五篇：主角飞机的飞行控制》
《第六篇：根据配置随机生成敌机》
《第七篇：主角飞机碰撞与爆炸》
《第八篇：主角飞机开炮》
《第九篇：敌机受击与爆炸》
《第十篇：敌机血量与得分》
《第十一篇：核弹掉落与全屏炸机》
《第十二篇：敌机开炮》
《第十三篇：游戏暂停、结束与重新开始》

一、前言

嗨，大家好，我是新发。相信很多人玩过微信小游戏经典的飞机大战，如下：

想重温或体验微信这款经典的飞机大战的同学可以点这里：https://gamemaker.weixin.qq.com/ide#/

在网上已经有一些人已经出了Unity的制作教程，但是比较陈旧，里面使用了已经弃用的组件和写法，用了很陈旧的NGUI版本，如果使用Unity 2019或以上版本打开会各种报错，对新入门Unity的同学不大友好。

于是，我决定写一个全新的教程：《使用Unity2019制作仿微信小游戏飞机大战》，会使用最新的写法，并且使用尽量简洁的设计与代码来完成。

本教程的工程已上传到Github，感兴趣的同学自行下载学习。
喜欢的同学记得给个星星~
Github地址：https://github.com/linxinfa/UnityAircraftFight

对Unity游戏开发有任何问题的，都欢迎在评论区留言，我都会看到的，并会进行认真解答，希望能帮助到想学Unity开发的同学，共勉。

二、本篇目标

战斗界面UI。
本篇效果如下：

三、导入图片资源

将图片资源导入Unity工程中。

如下：

四、制作战斗界面UI

在Canvas节点下创建一个Panel，重命名为MainGamePanel，将Image的勾选去掉。

使用图片资源，制作UI：一个得分Text，一个暂停按钮，一个炸弹按钮和炸弹数量Text。
最后保存预设到Resources/Panels文件夹中，如下：

五、绑定UI对象

给MainGamePanel预设挂PrefabSlot组建，并绑定UI对象。
scoreText：得分。
BombBtn：炸弹按钮。
BombCntText：炸弹数量。
PauseBtn：暂停按钮。

六、战斗界面脚本：MainGamePanel.cs

同理，战斗界面也是继承BasePanel，简单写一下UI逻辑，如下：

// MainGamePanel.cs

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

/// <summary>
/// 战斗界面
/// </summary>
public class MainGamePanel : BasePanel
{
    public override void Awake()
    {
        base.Awake();
        m_panelResPath = "Panels/MainGamePanel";
    }

    public override void SetUi(PrefabSlot slot)
    {
        base.SetUi(slot);
        slot.SetButton("BombBtn", (btn) =>
        {
            // Todo 炸弹按钮被点击
            
        });
        slot.SetButton("PauseBtn", (btn) =>
        {
            // Todo 暂停按钮被点击

        });
        m_scoreText = slot.Getobj<Text>("scoreText");
        m_bombCntText = slot.Getobj<Text>("BombCntText");
    }

    /// <summary>
    /// 更新得分显示
    /// </summary>
    /// <param name="score"></param>
    private void UpdatescoreText(int score)
    {
        m_scoreText.text = score.ToString();
    }

    /// <summary>
    /// 更新炸弹数量显示
    /// </summary>
    /// <param name="bombCnt"></param>
    private void UpdateBombCntText(int bombCnt)
    {
        m_bombCntText.text = bombCnt.ToString();
    }

    private Text m_scoreText;
    private Text m_bombCntText;
}

七、运行测试

运行Unity，测试效果如下：

八、下篇预告

主角飞机动画序列帧制作。