小言_互联网的博客

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

524人阅读  评论(0)

零、教程目录

使用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,测试效果如下:

八、下篇预告

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


转载:https://blog.csdn.net/linxinfa/article/details/114578272
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场