cocos creator | 用摄像机实现残影幻影拖尾效果

张晓衡

发布于 2019-10-08 14:53:10

1.3K0

发布于 2019-10-08 14:53:10

文章被收录于专栏：Creator星球游戏开发社区Creator星球游戏开发社区

超级幻影了解一下？

基本原理

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

创建角色和摄像机

创建一个新的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();
}

设置一个定时器，让画布节点跟随角色节点运动。参考代码：

onLoad() {
    //...
    this.schedule(this.shadowFollow, 0.1, cc.macro.REPEAT_FOREVER);
}
private shadowFollow() {
    this.sp_cameras.forEach((v, i) => {
        const dis = this.node.position.sub(v.node.position).mag();
        if (dis > 0) {
            v.node.stopAllActions();
            v.node.runAction(cc.moveTo(i * 0.05 + 0.02, this.node_icon.x, this.node_icon.y));
        }
    })
}

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2019-09-29，如有侵权请联系 cloudcommunity@tencent.com 删除

node.js

本文分享自 Creator星球游戏开发社区微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

node.js

登录后参与评论

0 条评论

热度