LayaIDE2.0，残影拖尾效果制作（js）

最新推荐文章于 2025-01-04 11:00:44 发布

原创最新推荐文章于 2025-01-04 11:00:44 发布 · 2.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#Laya #拖尾 #Laya2.0

Laya2.0 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了在Laya2.0中实现角色拖尾效果的方法。先制作角色预制体，可通过线性运动改变大小、透明度，也可用动画实现。角色移动时，依据每帧不同位置创建预制体对象，还给出了效果图。

一.先看效果图
在这里插入图片描述
二,.实现原理
1.制作角色预制体，使用线性运动改变大小，透明度等（同理动画也可以完成），

onChange(speed){
        let time_line = Laya.TimeLine.to(this.owner,{alpha:0,scaleX:0,scaleY:0},speed);
        time_line.play();
        time_line.on(Laya.Event.COMPLETE,this,function(){
            this.owner.removeSelf();
        })
    }

2.角色移动时根据每帧不同的位置创建预制体对象

onTw(_x,_y){
        var m = Laya.Pool.getItemByCreateFun("cy", this.cy_fb.create, this.cy_fb);
        m.pos(_x,_y);
        m.scaleX = m.scaleY = 1;
        m.alpha = 1;
        m.x = _x;
        m.y = _y;
        this.owner.addChild(m)
        m.getComponent(cy).onChange(500)
    }

onUpdate(){
        let nowX = this.owner.getChildByName('monkey').x;
        let nowY = this.owner.getChildByName('monkey').y
        if(!(this.roleX == nowX && this.roleY ==nowY)){
            this.onTw(this.owner.getChildByName('monkey').x,this.owner.getChildByName('monkey').y);
            this.roleX = nowX
            this.roleY = nowY
        }
   }

 onMouseMove(){
        this.owner.getChildByName('monkey').pos(Laya.stage.mouseX,Laya.stage.mouseY)
  }