使用Unity开发坦克大战游戏（一）

野性酷女 2022-04-02 07:22 296阅读 0赞

【特别鸣谢】参考视频：[https://www.bilibili.com/video/av29751762/?p=7][https_www.bilibili.com_video_av29751762_p_7]

# 导入Unity素材包 #

# 场景的搭建与素材处理 #

### 场景搭建 ###

1.  将摄像头的大小设置为8.5，摄像机离游戏的距离，不能够是负数，摄像头距离可以一点一点调试。数值策划师会预先设置好。
2.  屏幕的背景设置为黑色
3.  游戏显示窗口为5:4，长宽比为5：4，这样能够适配不同的屏幕，减少显示上的问题

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjM3Mjg3OQ_size_16_color_FFFFFF_t_70]

### 素材处理 ###

图片和图集的区别：  
对于素材中的图片，需要将texture type调整为sprite  
对于图片集，需要将sprite mode调整为multiple模式，单一图片为single模式  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjM3Mjg3OQ_size_16_color_FFFFFF_t_70 1]

### 图片切割 ###

选择sprite editor就可以将图片集切割成不同的小图片。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjM3Mjg3OQ_size_16_color_FFFFFF_t_70 2]

# 预制体与2D动画制作 #

### 调整物体大小 ###

与cube进行比较。调整缩放，直到与cube大小差不多，cube是1m x 1m的。  
![在这里插入图片描述][20181225160233426.png]  
![在这里插入图片描述][20181225160249163.png]

### 创建预制体 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjM3Mjg3OQ_size_16_color_FFFFFF_t_70 3]

### 使用相同的渲染模式 ###

首先command + d，然后将map\_0拖到sprite，然后重新命名为wall  
可以看到，墙要比物体大一点  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjM3Mjg3OQ_size_16_color_FFFFFF_t_70 4]  
将预先制作好的预制体拖入到Prefabs文件夹中。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjM3Mjg3OQ_size_16_color_FFFFFF_t_70 5]

### 动画制作 ###

出生动画制作，将born\_0到born\_3全部选中，拖到左边，然后修改大小，点击运行就可以看到动画。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjM3Mjg3OQ_size_16_color_FFFFFF_t_70 6]  
可以运行看看动画的效果  
下面图片中，上面是动画，下面是动画控制器，将动画控制器改名为BornController  
![在这里插入图片描述][2018122516564195.png]  
将born动画拖到prefabs文件夹下面，并且新建文件夹，将预制体分类。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjM3Mjg3OQ_size_16_color_FFFFFF_t_70 7]  
使用同样的方法，将其余的动画创建好：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjM3Mjg3OQ_size_16_color_FFFFFF_t_70 8]

# 控制玩家移动 #

using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    
    public class Player : MonoBehaviour
    { 
        public float moveSpeed = 3;
        // Start is called before the first frame update
        void Start()
        { 
            
        }
    
        // Update is called once per frame
        void Update()
        { 
            float h = Input.GetAxis("Horizontal");
            //输入乘以速度乘以时间， 第二个参数是以什么坐标轴来移动
            transform.Translate(Vector3.right * h * moveSpeed * Time.deltaTime, Space.World);//right是x轴，up是y轴，forward是z轴
            float v = Input.GetAxis("Vertical");
            transform.Translate(Vector3.up * v * moveSpeed * Time.deltaTime, Space.World);
        }
    }

代码解释：  
首先在google搜了一下vector3的用法  
x轴为right  
y轴为up  
z轴为forward  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjM3Mjg3OQ_size_16_color_FFFFFF_t_70 9]  
如果不设置速度和时间的话，会按照帧来移动，这样速度是无法控制的。  
time.deltaTime为单位秒，然后再乘以速度，如果不设置速度，默认的速度为1，会比较慢。

**这样就能够做到移动，但是太僵硬了，因为需要在移动的时候，调整坦克的方向**

# 控制图片的移动切换 #

有两种方法做到图片的移动切换

### 方法1 更改图片的渲染和显示 ###

看player1里面的图片是有上下左右的区别的。  
原理就是改变图片渲染器：sprite renderer的值来渲染不同的图片，因此拿到组件的引用，然后更改sprite的值就行了

private SpriteRenderer sr; //声明sr的类型
    
        private void Awake()  //在awake里面就拿到引用
        { 
            sr = GetComponent<SpriteRenderer>(); //使用GetComponent方法，在awake里面拿到SpriteRender的引用
        }

首先是需要更改SpriteRender这个component的值，因此首先需要拿到引用。  
首先声明sr，然后sr拿到SpriteRender的引用。

同样的道理，需要拿到sprite的引用，因为需要更改sprite  
首先申明精灵数组

public Sprite[] tankSprite; //声明精灵(sprite)数组

声明完毕之后，就可以看到脚本里面有一个tank Sprite了，这个与代码是一致对应的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjM3Mjg3OQ_size_16_color_FFFFFF_t_70 10]  
将图片的四个方向拖到数组的下面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjM3Mjg3OQ_size_16_color_FFFFFF_t_70 11]

void Update()
        { 
            float h = Input.GetAxis("Horizontal");
            //输入乘以速度乘以时间， 第二个参数是以什么坐标轴来移动
            //transform.Translate(Vector3.right * h, Space.World);
            Debug.Log(h);
            if(h < 0)
            { 
                sr.sprite = tankSprite[3];
            }
            else if(h > 0)
            { 
                sr.sprite = tankSprite[1];
            }
            transform.Translate(Vector3.right * h * moveSpeed * Time.deltaTime, Space.World);//right是x轴，up是y轴，forward是z轴
            float v = Input.GetAxis("Vertical");
            Debug.Log(v);
            if(v < 0)
            { 
                sr.sprite = tankSprite[2];
            }
            else if(v > 0)
            { 
                sr.sprite = tankSprite[0];
            }
            transform.Translate(Vector3.up * v * moveSpeed * Time.deltaTime, Space.World);

**控制方向的时候，为什么不能用if… else 而是只能够使用if … else if…???**  
经过我的研究，因为update需要不停的监听输入，因此是不停循环的，这样，如果只有h，没有v，就会得到v=0的情况，这样就会造成坦克转向错误的情况，总之也就是当h或者v等于0的时候，坦克是不能够转动方向的。

因此完整的代码：

using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    
    public class Player : MonoBehaviour
    { 
        public float moveSpeed = 3;
        // Start is called before the first frame update
        private SpriteRenderer sr; //声明sr的类型
    
        public Sprite[] tankSprite; //声明精灵(sprite)数组 上 右 下 左
    
        private void Awake()  //在awake里面就拿到引用
        { 
            sr = GetComponent<SpriteRenderer>(); //使用GetComponent方法，在awake里面拿到SpriteRender的引用
        }
    
        void Start()
        { 
            
        }
    
        // Update is called once per frame
        void Update()
        { 
            float h = Input.GetAxis("Horizontal");
            //输入乘以速度乘以时间， 第二个参数是以什么坐标轴来移动
            //transform.Translate(Vector3.right * h, Space.World);
            if(h < 0)
            { 
                sr.sprite = tankSprite[3];
            }
            else if(h > 0)
            { 
                sr.sprite = tankSprite[1];
            }
            transform.Translate(Vector3.right * h * moveSpeed * Time.deltaTime, Space.World);//right是x轴，up是y轴，forward是z轴
            float v = Input.GetAxis("Vertical");
            if(v < 0)
            { 
                sr.sprite = tankSprite[2];
            }
            else if(v > 0)
            { 
                sr.sprite = tankSprite[0];
            }
            transform.Translate(Vector3.up * v * moveSpeed * Time.deltaTime, Space.World);
    
        }
    }

### 方法2 让图片沿着z轴旋转 ###

虽然是2d游戏，但是z轴确实是存在的，点击2D就可以切换为3D模式  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjM3Mjg3OQ_size_16_color_FFFFFF_t_70 12]  
第二种方法就是通过欧拉角的旋转来实例化gameobject，在下一篇博客会详细说明。

[https_www.bilibili.com_video_av29751762_p_7]: https://www.bilibili.com/video/av29751762/?p=7
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjM3Mjg3OQ_size_16_color_FFFFFF_t_70]: /images/20220402/50446cacac7542179c4d11b29b82e7da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjM3Mjg3OQ_size_16_color_FFFFFF_t_70 1]: /images/20220402/9a0d7abfd0bb4cbc8f81df5e22a8aa16.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjM3Mjg3OQ_size_16_color_FFFFFF_t_70 2]: /images/20220402/adde9407bb64402eaab0a34289ff6fb2.png
[20181225160233426.png]: /images/20220402/ce140f438f774087aa78059d0f2396c0.png
[20181225160249163.png]: /images/20220402/b0ec4116ea9c4f8ebce93a6cc97ef208.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjM3Mjg3OQ_size_16_color_FFFFFF_t_70 3]: /images/20220402/7adeae06ff4947ddaefa3e841ad301c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjM3Mjg3OQ_size_16_color_FFFFFF_t_70 4]: /images/20220402/34a235f87c6d4e1caa8e79fbca37d50e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjM3Mjg3OQ_size_16_color_FFFFFF_t_70 5]: /images/20220402/d146d5f67b8a493fb2f71328944e3aec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjM3Mjg3OQ_size_16_color_FFFFFF_t_70 6]: /images/20220402/dac4d29d096945778e48dd2e3420c03f.png
[2018122516564195.png]: /images/20220402/1f799c95be434657b51f86591a7615c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjM3Mjg3OQ_size_16_color_FFFFFF_t_70 7]: /images/20220402/967566942ab2418b994ea4f89c4ff5e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjM3Mjg3OQ_size_16_color_FFFFFF_t_70 8]: /images/20220402/09c67b632a864d9bbabe27011bc4e575.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjM3Mjg3OQ_size_16_color_FFFFFF_t_70 9]: /images/20220402/0d54b13b526548d980969026c8fbeee3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjM3Mjg3OQ_size_16_color_FFFFFF_t_70 10]: /images/20220402/c6450f3f022a49c5b23478f02f70fbb4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjM3Mjg3OQ_size_16_color_FFFFFF_t_70 11]: /images/20220402/6eec827eb6c84024b22d7bc0de6e367a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjM3Mjg3OQ_size_16_color_FFFFFF_t_70 12]: /images/20220402/028a344fa78948518070a4da8e0fb37d.png