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 的过程中，获得了独到的开发心得、见解或是方法，并且乐于分享出来，帮助更多开发者解决技术问题，加速游戏开发效率，期待您与我们联系！

更

多

精

彩

我就知道你“在看”▼

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