Cocos Creator | 用摄像机实现残影幻影拖尾效果

编者按

本文来自于“Cocos 荣耀讲师”征稿活动第1期，最先发表于 Cocos 中文社区，作者：白玉无冰。作者拥有多年 Cocos 游戏开发经验的他，十分善于做技术总结，其个人公众号输出了大量的开发经验，感谢白玉无冰 。

超级幻影了解一下？

   基本原理

利用摄像机拍摄角色，然后投影到多个显示画布，给画布节点设置不同的透明度，最后让画布节点跟随角色移动。

   创建角色和摄像机

创建一个新的 typescript 项目。

创建一个角色节点，并添加分组 role。

接着在角色节点里添加一个摄像机，并将摄像机的拍摄分组选为 role。

   创建显示画布

在场景中添加多个 sprite 用于这个摄像机显示的画布。因为用摄像机会上下反转，要修改 scaleY 为 -1。并将它放在角色节点的下一层级，大小调整为角色节点大小，位置和角色节点一样。将画布的透明度设置为不同的数值。

   绑定摄像机到显示画布

修改 Helloworld.ts 里的代码，添加摄像机 camera，角色节点和画布数组 sprite 的声明。绑定camera的targetTexture到显示画布spriteFrame。

参考代码如下:

//Helloworld.ts
const { ccclass, property } = cc._decorator;
@ccclass
export default class Helloworld extends cc.Component {
    @property(cc.Camera)
    camera: cc.Camera = null;
    @property([cc.Sprite])
    sp_cameras: cc.Sprite[] = [];
    @property(cc.Node)
    node_icon: cc.Node = null;
    onLoad() {
        const texture = new cc.RenderTexture();
        texture.initWithSize(this.sp_cameras[0].node.width, this.sp_cameras[0].node.height);
        const spriteFrame = new cc.SpriteFrame();
        spriteFrame.setTexture(texture);
        this.camera.targetTexture = texture;
        this.sp_cameras.forEach((v) => {
            v.spriteFrame = spriteFrame
        })
    }
}

将摄影机，角色节点和画布绑定脚本上:

   显示画布的跟随

可以监听 node 节点 cc.Node.EventType.TOUCH_MOVE 事件控制角色节点移动。

参考代码：

onLoad() {
 //...
 this.node.on(cc.Node.EventType.TOUCH_MOVE, this.onNodeIconTouchMove, this);
}
private onNodeIconTouchMove(evt: cc.Event.EventTouch) {
 this.node_icon.x += evt.getDeltaX();
 this.node_icon.y += evt.getDeltaY();
}

效果预览：

   项目源码：

https://github.com/baiyuwubing/cocos_creator_camera_demo/tree/shadow

以上就是我的分享，如有问题或新的想法欢迎留言！欢迎感兴趣的开发者关注我的个人公众号获取本项目源码，我也会定期分享我的学习心得和开发经验。

如果您在使用 Cocos Creator 2D/3D 的过程中，获得了独到的开发心得、见解或是方法，并且乐于分享出来，帮助更多开发者解决技术问题，加速游戏开发效率，期待您与我们联系！

更

多

精

彩

Cocos Creator v2.2 正式发布

Cocos Creator 3D v1.0 正式发布

Cocos Creator 3D 物理模块介绍

Cocos Creator v2.2 自定义渲染组件及材质介绍

小姐姐，你的发丝高光怎么用 Creator 3D 实现？

极限开发《TheCode》和《Shoot the F》创作笔记

独立游戏 5000 万下载百万 DAU 竟不花一分钱？

Cocos 与腾讯云宣布战略合作，把游戏开发门槛降到极致

Cocos Creator 实现战旗类游戏《火焰纹章》移动范围效果

Cocos Creator 通用框架设计——网络

支付宝小游戏来啦！

我就知道你“在看”▼

文中使用素材均来自网络！版权归原作者所有，如有侵权还请联系！