【游戏开发实战】使用Unity 2019制作仿微信小游戏飞机大战（一）：开始游戏界面

最新推荐文章于 2024-06-13 15:23:46 发布

林新发

最新推荐文章于 2024-06-13 15:23:46 发布

阅读量5.1k

点赞数 16

分类专栏： Unity3D 文章标签： unity 飞机大战微信经典教程

本文链接：https://blog.csdn.net/linxinfa/article/details/114540983

版权

Unity3D 专栏收录该内容

480 篇文章 2056 订阅

订阅专栏

文章目录

零、教程目录

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

一、前言

嗨，大家好，我是新发。相信很多人玩过微信小游戏经典的飞机大战，如下：
在这里插入图片描述
想重温或体验微信这款经典的飞机大战的同学可以点这里：https://gamemaker.weixin.qq.com/ide#/

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

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

本教程的工程已上传到Github，感兴趣的同学自行下载学习。
喜欢的同学记得给个星星~
Github地址：https://github.com/linxinfa/UnityAircraftFight
在这里插入图片描述
对Unity游戏开发有任何问题的，都欢迎在评论区留言，我都会看到的，并会进行认真解答，希望能帮助到想学Unity开发的同学，共勉。

二、本篇目标

开始游戏界面的制作。
本篇的效果：
在这里插入图片描述

三、创建Unity工程

由于我们要做的飞机大战是一个2D游戏，所以我们创建Unity工程时，选择2D模板。
项目名称叫UnityAircraftFight吧，点击创建。
在这里插入图片描述
创建成功。

四、导入图片资源

为了方便管理图片资源，工程中新建一个文件夹：RawAssets/Textures，
将图片资源导入到Unity中。
请添加图片描述

在这里插入图片描述
如下：

五、循环背景图

循环背景图的简单做法就是在移动背景图的过程中交替复用两张背景图。

不过我觉得更科学的做法是利用UV平移，这里我就讲下UV平移的实现方式吧。

Unity 2018版本推出了ShaderGraph，可以很方便地通过可视化操作创建和制作自己想要的shader效果，感兴趣的同学可以看我之前写的这篇文章：《ShaderGraph使用教程与各种特效案例：Unity2020》，这里我就不用ShaderGraph了，直接用shader代码来实现UV平移。

1、shader平移UV

首先创建一个Shaders文件夹，
在这里插入图片描述
右键点击菜单 Create - Shader - Unlit Shader，创建一个shader脚本。

重命名为MoveUV。

shader代码如下：

Shader "Unlit/MoveUV"
{
    Properties
    {
        _MainTex("MainTex", 2D) = "white" {}    // 纹理    
        _SpeedV("SpeedV",Float) = 0.3   // 滚动速度
    }
    
    SubShader
    {
        Tags{ "RenderType" = "Opaque" "Queue" = "Geometry" }
        LOD 100

        Pass
        {
            Tags{ "LightMode" = "ForwardBase" }
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag


            #include "UnityCG.cginc"

            struct a2v
            {
                float4 vertex : POSITION;
                float2 texcoord : TEXCOORD0;
            };

            struct v2f
            {
                float4 pos : SV_POSITION;
                float2 uv : TEXCOORD0;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST; 
            float _SpeedV; 

            v2f vert(a2v v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv.xy = TRANSFORM_TEX(v.texcoord, _MainTex) + frac(float2 (0.0, _SpeedV) * _Time.y); 
                return o;
            }

            fixed4 frag(v2f i) : SV_Target
            {
                fixed4 c = tex2D(_MainTex, i.uv.xy); 
                return c;
            }
            ENDCG
        }
    }
    FallBack "VertexLit"
}

2、材质球

创建一个材质球，重命名为bg。
在这里插入图片描述
设置shader为我们刚刚创建的MoveUV，并赋值主贴图为背景图。

我们可以调节材质球的SpeedV来调整UV移动的速度。

3、贴图设置为Repeat模式

将背景图的Wrap Mode设置为Repeat。
在这里插入图片描述

4、使用SpriteRenderer显示背景图

在场景中创建一个空物体，重名名为background，并添加SpriteRenderer组件，赋值Sprite为背景图，赋值材质球为bg。
在这里插入图片描述

5、运行测试

运行Unity，可以看到背景图滚动起来了，实现了我们要的无限循环效果。
在这里插入图片描述

六、开始游戏UI

1、UI摄像机

为了方便让UI显示在最顶层，我们专门创建一个UI摄像机。在Hierarchy窗口中右键点击菜单Camera。
在这里插入图片描述
创建出一个摄像机，重命名为UICamera。

设置一下UICamera的参数，如下：
（记得把UICamera的AudioListener组件移除掉，否则会与Main Camera的AudioListener重复）