专栏首页白玉无冰cocos creator | 用摄像机实现残影幻影拖尾效果

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

超级幻影了解一下?

基本原理

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

创建角色和摄像机

创建一个新的typescript项目。 创建一个角色节点,并添加分组role

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

创建显示画布

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

绑定摄像机到显示画布

修改Helloworld.ts里的代码,添加摄像机camera,角色节点和画布数组sprite的声明。绑定cameratargetTexture到显示画布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));
            }
        })
    }

效果预览

点击【https://github.com/baiyuwubing/cocos_creator_camera_demo/tree/shadow】获取项目代码

本文分享自微信公众号 - 白玉无冰(lamyoung-com),作者:lamyoung

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-09-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 四叉树与碰撞检测 !Cocos Creator !

    引入脚本 QuadtreeCollision.ts , 新建一个 QuadtreeCollision ,并初始化为世界坐标系下的对齐轴向的包围盒(AABB)。

    白玉无冰
  • 图片/文字 的渐变色实现!

    在 cc.Spirte 或 cc.Label 添加脚本 ColorAssembler2D 。

    白玉无冰
  • python爬虫入门实战(二)!多线程爬虫!

    在 python爬虫入门实战!爬取博客文章标题和链接! 上一篇文章我们已经学会基本用法了。最近我又学到一新技能,让它爬的更快一些。

    白玉无冰
  • cocos creator | 用摄像机实现残影幻影拖尾效果

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

    张晓衡
  • cocos creator基本操作

    var node = cc.find("Canvas/bg");//通过访问路径来获取节点

    Lee坚武
  • Cocos Creator常见问题汇总

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明...

    bering
  • Qps从300到1500的优化过程

    很久没更新公众号,最近压测一项目,遇到的性能问题比较典型,过程记录下来,给大家做定位调优参考;

    cctester
  • 详述 Kafka 基本原理

    Apache Kafka 是分布式发布-订阅消息系统。它最初由 LinkedIn 公司开发,之后成为 Apache 项目的一部分。Kafka 是一种快速、可扩展...

    CG国斌
  • Kafka基本原理

    Apache Kafka是分布式发布-订阅消息系统。它最初由LinkedIn公司开发,之后成为Apache项目的一部分。Kafka是一种快速、可扩展的、分布式的...

    黄泽杰
  • Kafka 基本原理

    来源:cnblogs.com/luxiaoxun/p/5492646.html

    乔戈里

扫码关注云+社区

领取腾讯云代金券