【游戏开发实战】2D游戏摄像机镜头跟随，屏幕边缘限制镜头移动（使用Cinemachine组件）

浅浅的花香味﹌ 2022-09-05 04:22 17阅读 0赞

![请添加图片描述][157a435150764e7685a2102c5b33b0d4.gif]

![请添加图片描述][4f02997b491644bcb07f24764590ba3f.gif]

### 文章目录 ###

*   *   *  一、前言
         *  二、场景搭建
         *   *  1、创建工程
             *  2、创建地图
         *  三、主角
         *   *  1、创建主角
             *  2、主角移动控制
             *  3、测试主角移动
         *  四、摄像机跟随
         *  五、屏幕边缘限制镜头移动
         *  六、最终效果
         *  七、工程源码

### 一、前言 ###

嗨，大家好，我是新发。  
有老铁留言问我能不能写一下`2D`镜头跟随以及人物移动到屏幕边缘限制镜头的文章，  
![在这里插入图片描述][3d8760e2d43f4878adf52717aa1f5b77.png]  
这个功能本来我想用代码自己写，但是我想起了很久以前我看过`Unity`官方写的一个`Cinemachine`套件，于是我打算使用它来实现这个功能，话不多说，我们开始吧~

### 二、场景搭建 ###

为了演示，我先快速搭建一个场景。

#### 1、创建工程 ####

我们先创建一个`2D`模板的`Unity`工程，名字叫`2DCameraFollowDemo`吧~  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70]

#### 2、创建地图 ####

使用`Tilemap`和地图生成器生成地图，  
![请添加图片描述][f179c1b95a6b4ac493358c14d7d4e0c9.gif]

### 三、主角 ###

#### 1、创建主角 ####

在阿里图库中找个图标作为主角，[https://www.iconfont.cn/][https_www.iconfont.cn]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 1]  
放到地图中，如下，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 2]

#### 2、主角移动控制 ####

写个主角控制脚本，代码如下：

using UnityEngine;
    
    public class Player : MonoBehaviour
    {
        
    	// 移动速度
        public float speed = 10;
        Rigidbody2D rigidbody2d;
        Vector2 currentInput;
        
        void Start()
        {
        
            rigidbody2d = GetComponent<Rigidbody2D>();
        }
    
        void Update()
        {
        
            float horizontal = Input.GetAxis("Horizontal");
            float vertical = Input.GetAxis("Vertical");
            // 获取键盘输入：A W S D或上下左右键
            currentInput = new Vector2(horizontal, vertical);
        }
    
        private void FixedUpdate()
        {
        
            Vector2 position = rigidbody2d.position;
            position = position + currentInput * speed * Time.deltaTime;
            // 通过刚体来移动，防止碰撞抖动
            rigidbody2d.MovePosition(position);
        }
    }

挂到主角身上，并添加`Rigidbody2D`、  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 3]  
注意`Rigidbody2D`组件的重力缩放设置为`0`，否则主角会受到重力而往下掉，把`Freeze Rotation Z`勾选上，防止主角碰撞时产生`Z`轴旋转，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 4]

#### 3、测试主角移动 ####

此时运行`Unity`，效果如下，可以正常控制主角移动，  
![请添加图片描述][5f2e0841c9594ddf98c924bd24e5a91f.gif]

### 四、摄像机跟随 ###

接下来我们来做摄像机跟随，要用到`Cinemachine`插件，打开`Package Manager`，搜索`Cinemachine`，点击`Install`，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 5]  
插件安装完毕后，在`Hierarchy`窗口中右键菜单`Cinemachine / 2D Camera`，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 6]  
此时会创建一个虚拟摄像机，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 7]  
我们选中它，赋值`Follow`为主角物体，如下，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 8]  
此时运行`Unity`，效果如下，摄像机已经可以跟着主角移动了，  
![请添加图片描述][157a435150764e7685a2102c5b33b0d4.gif]  
![请添加图片描述][90d9a6293a054eb0baadc6d99d7190f7.gif]

### 五、屏幕边缘限制镜头移动 ###

我们可以看到主角移动到地图边缘时，看到了地图外白色的场景，我们想限制镜头的移动范围，让其不超过地图边缘。  
选中虚拟摄像机，然后点击`Add Extension`的`select`下拉框，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 9]  
选择`CinemachineConfiner`，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 10]  
它会帮我们挂上`CinemachineConfiner`组件，可以看到它需要一个形状碰撞体来限定界限，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 11]  
我们创建一个空物体，命名为`edge`，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 12]  
为其添加`PolygonCollider2D`组件，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 13]  
点击这个按钮可以编辑多边形形状，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 14]  
调整多边形的形状使其与地图边缘吻合，  
![请添加图片描述][63d1e8e6535448598f1869417aaf9aa3.gif]  
记得把多变形碰撞体的`Is Trigger`勾选上，否则会与主角发生碰撞，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 15]  
最终给虚拟相机赋值`Bounding Shape 2D`为我们的多边形碰撞体，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 16]

### 六、最终效果 ###

最终运行`Unity`，效果如下，可以看到，主角移动到地图边缘时，摄像机被限制了移动，  
![请添加图片描述][4894f3bda24e447bae3cb4148794e988.gif]  
![请添加图片描述][4f02997b491644bcb07f24764590ba3f.gif]

### 七、工程源码 ###

本文工程源码我已上传到`CODE CHINA`，地址：[https://codechina.csdn.net/linxinfa/2DCameraFollowDemo][https_codechina.csdn.net_linxinfa_2DCameraFollowDemo]  
感兴趣的同学可自行下载学习，注：我使用的`Unity`版本为：`Unity 2021.1.9f1c1 (64-bit)`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 17]  
好了，就写到这里吧。  
我是林新发：[https://blog.csdn.net/linxinfa][https_blog.csdn.net_linxinfa]  
原创不易，若转载请注明出处，感谢大家~  
喜欢我的可以点赞、关注、收藏，如果有什么技术上的疑问，欢迎留言或私信，拜拜~

[157a435150764e7685a2102c5b33b0d4.gif]: /images/20220829/36a30152c3834aa88201d65dafb4a168.png
[4f02997b491644bcb07f24764590ba3f.gif]: /images/20220829/484334e361f94865ab5eeb4018e5d751.png
[3d8760e2d43f4878adf52717aa1f5b77.png]: /images/20220829/c87bbc9b0be440d999db465a0e5438c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70]: /images/20220829/1138910ac3bd4577a44fce8e9551a589.png
[f179c1b95a6b4ac493358c14d7d4e0c9.gif]: /images/20220829/a111a87c50af447489ec06f6e3b3345f.png
[https_www.iconfont.cn]: https://www.iconfont.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 1]: /images/20220829/ed11e2de337845e2b8faa5fcdab61dd6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 2]: /images/20220829/048eb170fc94445fab94706119ce77e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 3]: /images/20220829/484216c28aba40d4b54bad8a36f8a897.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 4]: /images/20220829/61b96f32a9ee4d4cbc37246faacf71f5.png
[5f2e0841c9594ddf98c924bd24e5a91f.gif]: /images/20220829/b5b228e30d064f12bb181a676872658a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 5]: /images/20220829/cd5eb6e1ab1c46beb87182105fba22e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 6]: /images/20220829/7a79a8712d99406ba0ee1f8b82b2c6aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 7]: /images/20220829/aff184aefa7243cc81da41eb6960b318.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 8]: /images/20220829/283c4214749c4bfb8eda602a45e37649.png
[90d9a6293a054eb0baadc6d99d7190f7.gif]: /images/20220829/5d98abeb99ec4491bec3cb4748772f9d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 9]: /images/20220829/9eb7783651de47668a003d4949f0c7d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 10]: /images/20220829/7c42cbba8554446fa54ce488123247a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 11]: /images/20220829/03d863aa23d348888ad0c4d299e45da8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 12]: /images/20220829/7d9a7895f9c342f9b6f960da45763638.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 13]: /images/20220829/140bd166f884425299a53ec882a3dc79.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 14]: /images/20220829/a5d23e31c6c940d09b20927b7e3b448c.png
[63d1e8e6535448598f1869417aaf9aa3.gif]: /images/20220829/8115dd12685b494bbe655330f72a52bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 15]: /images/20220829/79cc1b8d2da645d992cbe8795de67271.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 16]: /images/20220829/b1c63088e9ba4ef4a7ce18be2042b6a5.png
[4894f3bda24e447bae3cb4148794e988.gif]: /images/20220829/5ab0f354d1ca4ca4a1fab5657a22969d.png
[https_codechina.csdn.net_linxinfa_2DCameraFollowDemo]: https://codechina.csdn.net/linxinfa/2DCameraFollowDemo
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 17]: /images/20220829/e3a2f5071bf64cc2b483aae52ca013d7.png
[https_blog.csdn.net_linxinfa]: https://blog.csdn.net/linxinfa