Cinemachine的应用-第三人称视角

前言

最近开发游戏战斗系统时,需要实现各种运镜和特写功能。调研了一圈,最终选择了用Cinemachine插件作为战斗和剧情相机操作的核心组件,以实现复杂的运镜功能。下面我们一起来探讨一下此插件的使用方式以及核心关键点。

一、插件集成

我们可以直接在Package Manager包管理器中输入Cinemachine搜索安装,如图所示:

安装完毕后,会在GameObject菜单下出现Cinemachine菜单,如下图所示:

至此,我们成功的集成了Cinemachine插件。

二、Cinemachine的基本概念和运行逻辑

要会使用Cinemachine,首先要了解它的基本概念和运行逻辑,不然它提供的各种组件都不知道怎么使用。Cinemachine简单来说可以分为两部分,第一部分为相机大脑,第二部分为虚拟相机。相机大脑只有一个,主要体现在CinemachineBrain组件。虚拟相机可以有一个或多个,例如可以有第三人称视角虚拟相机、第一人称视觉虚拟相机、技能特写相机等。这些虚拟相机在同一时间只有一个被激活,切换虚拟相机的逻辑需要我们自己实现。

三、实现第三人称视角

在角色扮演或探索动作类游戏中,通常都要实现相机第三人称视角跟随玩家角色。如果自己实现,需要写上跟随算法、平滑阻尼、防抖处理、相机切换等功能,虽然难度不大,但真正要做好工作量还是挺大的。庆幸的是,这一切cinemachine都帮我们做好了,我们只要了解如何使用它就行。

我们先在场景中添加一个空的GameObject,然后给它加上相机Camera组件和CinemachineBrain组件,参数也可以按图中如此设置。如图所示:

如上图,解释一下几个关键的属性。CinemachineBrain下的 LiveCamera属性是绑定的虚拟相机组件,表示当前CinemachineBrain正在和绑定的虚拟相机联动。改变这个属性值就可以切换相机,进行视图变换。

Default Blend属性是虚拟相机之间互相切换时的混合过渡曲线,后面的S是混合过渡时间。S设置为0就是没有过渡了,直接硬切。

我们接着在场景中再添加一个GameObject,给它附加上Cinemachine的第三人称自由视角虚拟相机组件CinemachineFreeLook,如图所示:

当添加了CinemahcineFreeLook后,之前添加的相机大脑中的LiveCamera属性就自动关联上了,如下图:

CinemahcineFreeLook其中几个关键属性和参数我们要了解一下。Follow表示相机跟随的游戏对象,Look At表示相机要注视锁定的游戏对象。很好理解,把这两个属性都设置为玩家角色就实现了边跟随边注视玩家角色的功能了。

Binding Mode有几种选项,设置为World Space时,即表示相机是以世界坐标为基准,不会随着玩家角色旋转而旋转。一般第三人称视觉都可以采用这个选项。

TopRig、MiddleRig、BottomRig这三个属性实质就是相对于lookat对象位置的上中下的三个圈,相机在这三个圈中平滑移动。Height是高度,Raidus是半径,三个圈设定一样的值就是一个固定的视角,如我们要实现的第三人称视角。

这个时候我们保存场景,然后在加载这个场景的时候,在代码中给CinemahcineFreeLook的LookAt属性和Follow属性都赋值为玩家角色对象,就实现了第三人称视角跟随了。关键代码如下:

arduino 复制代码
 public void SetLookAt(Transform target)
 {     
     _binder.LookAt = target;
 }

 public void SetFollow(Transform target)
 {          
     _binder.Follow = target;
 }

其中_binder是CinemahcineFreeLook组件

四、运行效果

通过以上的设置和代码的绑定,CinemachineFreeLook的运行时属性如下图所示:

最终第三人称视角效果如下:

至此,我们完成了Cinemachine第三人称跟随视角的实现。

相关推荐
东方小月1 小时前
从零开发一个 Coding Agent(十):实现 CLI 参数解析与静态命令
前端·人工智能·开源
阿黎梨梨1 小时前
Next.js 全栈开发:从 SPA 的痛点到 SSR 的破局之道
前端·后端
沐道PHP1 小时前
CRMEB多店版diy装修位置偏移修复
前端
犀利的毛豆豆1 小时前
useCallback
前端
犀利的毛豆豆1 小时前
React.memo和useCallback组合使用
前端
夏幻灵2 小时前
Vue 2 与 Vue 3 在应用初始化上的设计差异与技术演进
前端·javascript·vue.js
捌年2 小时前
5分钟搞定工作周报!TRAE Work自动梳理零散工作记录实战
前端
悟空瞎说2 小时前
Three.js 架构实践:用 MVC 模式组织你的 3D 应用
前端·javascript
光影少年2 小时前
react navite本地存储:AsyncStorage、MMKV、文件存储
前端·react native·react.js