玉兔小姐姐，真的是太抢镜头啦！大赞 Cinestation

Cinestation v1.0.0 在 Cocos Store 正式发布！来看下玉兔布道师怎么说

http://mpvideo.qpic.cn/0bc3vmaboaaaomanxtnmnzqvbk6dc6vqafya.f10002.mp4?dis_k=09c11dd329b190414ce671d43b11dce6&dis_t=1639045871&vid=wxv_2166312937735454721&format_id=10002&support_redirect=0&mmversion=false

Cinestation 是 Cocos Creator 3.3.x 上的首款可视化智能相机系统，目前它具备如下功能：

• 智能追踪
• 优先级控制
• 轨道移动
• 噪声控制
• 时间轴动画

Cinestation 支持配置任意数量的镜头，完成复杂的相机混合和运动效果，而且插件完全免费。

链接：(阅读原文) https://store.cocos.com/app/detail/3422

下面由本插件作者 xuanye 为你分享为什么要为 Cocos Creator 开发这么一套系统。

‍1. 背景‍

起因是11月初的杭州star meeting，我有幸参与了分享。

事后C姐找到我，希望我能写些文章与大家分享（为了给各位开发者谋福利你知道C姐有多努力吗？）

于是呢，我决定将项目中在用的相机系统拿出来与大家分享。

不过，光写写文章貌似不能非常实际的帮助到大家，所以我索性直接做成插件分享给大家好了。

随着时间推移，我相信 Cinestation 会越来越强大，我也会在这里持续记录分享cinestation的开发历程，感兴趣的小伙伴可以持续关注。

2. 开发过程

本来我以为相机系统我们在项目中都用这么久了改成插件不是手到擒来的事。

于是和C姐约定下周三交稿，直到我开始做Cocos插件的时候，我才发现我大意了，我想在插件中检测个节点选中都不会。

不过呢，好在各位大佬的微信我都有，于是我找了@jare、@混凝土空间移动师、@插件小王子、以及我同事@聪明的可达鸭......

为啥找了这么多人，主要是大家的方法都不太一样，我都试了一下，最后我终于找到了一个简单的方法。

2.1. 可视化编辑器

在解决了插件的基本问题后，我又陷入另一个麻烦...

相机和轨道如何在编辑器中可视化，Cocos并没有开放编辑器中的绘制函数，如何实现呢？

这里有两个问题：

1. 如何让编辑器运行你的绘图代码？
2. 相机的视锥体和轨道绘制函数怎么写？

问题一

很好解决Cocos有个叫executeInEditMode的装饰器，装饰下组件就可以运行了。

问题二

画个视锥体能难倒我？原理其实很简单，先定义视锥体的8个裁剪坐标，再与投影矩阵做个逆变换，8个顶点咱们就算好了，最后生成一个model，提交给场景就可以显示了。

2.2 节点对齐(alignWithView)

Cocos编辑器有个功能叫AlignWithView，在Node->AlignWithView下，看下图：

如果你想快速移动节点的位置和方向到你当前视野所处的位置呢，就可以使用这个功能，选中节点Ctrl + Shift + F，非常的Nice。

在创建虚拟相机的时候，我希望虚拟相机的位置能与当前视野对齐，而不用手动调用AlignWithView。

3. 插件收费和下载

然后是大家关心的插件收费的问题，为了能让插件能切实的帮助到更多的人，这也是我做这件事的初衷，所以我宣布本插件完全免费。大家现在就可以去Cocos Store直接下载，以防我反悔。已上架！！！！

4. 结束语

近年来 Cocos 3d 的发展非常迅猛成绩大家也都是看的到的，Cocos的坚持真的让人折服。

相信在不久的将来Cocos不仅会是国产区的第一游戏引擎。

也希望更多人能参与Cocos社区的建设与Cocos一起成长，大家一起加油。