cocos creator实现图片的循环滚动效果

最新推荐文章于 2024-08-15 17:20:34 发布

_星星之火_

最新推荐文章于 2024-08-15 17:20:34 发布

阅读量1.4w

点赞数 2

分类专栏：前端文章标签： cocos creator

本文链接：https://blog.csdn.net/lck898989/article/details/79580266

版权

前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

首先在一个cocos creator上创建一个节点，比如说是bg1,bg2它们分别代表同样的图片

要实现循环滚动效果，需要做的是两张图片具有相同的移动速度，然后到达临界条件的时候将第一幅图进行重置位置

我在bg1上绑定脚本BackGround1.js

在BackGround1.js中设置相关属性

//将全局变量加载进来
cc.Class({
    extends: cc.Component,

    properties: {
        player : {
            default : null,
            type    : cc.Node,
        },
        //第二张背景图片
        bg2    : {
            default : null,
            type    : cc.Node,
        },
        //第一张背景图片
        bg1    : {
            default : null,
            type    : cc.Node,
        },
        //开始图片加载
        stat   : {
            default : null,
            type    : cc.Node,
        },
        //图片的移动速度
        moveSpeed   : 18,

    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {
        this.up = false;
        this.g = -1200;
        var bird = this.player.getComponent("Player");
        // this.g  = -1000;
        var _this = this;
        //当一张背景图片被点击的时候将up重置为true
        this.node.on('mousedown',function(event){
            //每次点击背景图的时候他的初始速度为800
            bird.BirdUpCastSpeed = 450;
            _this.up = true;
            //隐藏开始图标
            _this.stat.active = false;
        });
        //当第二种图片被点击的时候
        this.bg2.on('mousedown',function(event){
            bird.BirdUpCastSpeed = 450;
            _this.up = true;
            //隐藏开始图标
            _this.stat.active = false;
        });
        
    },

    start () {

    },
    //当鼠标按下的时候会一直加速直达减速为零
    update (dt) {
          //父节点的宽度
          var parentWidth = this.node.parent.width;
          cc.log(parentWidth);
          //背景图移动
          this.node.x -= this.moveSpeed;
          this.bg2.x -= this.moveSpeed;
          if(this.node.x <= -parentWidth){
                var bg2NodeX = this.bg2.x;
                this.node.x = parentWidth + bg2NodeX;
          }
          if(this.bg2.x <= -parentWidth){
              var nodeX = this.node.x;
              this.bg2.x = parentWidth + nodeX;
          }
          
    },
});

背景图重置的条件是，有一个背景图已经移出屏幕，当移出屏幕的一瞬间记录一下第二张图片的节点位置，当第二张图片移出屏幕的时候做相同的处理，这时候重置位置的时候要注意两张图片的距离需要加上一个获取另外节点的x坐标，这样才不会出现漏洞，比如说第一张图片刚刚出屏幕的时候x坐标是-963，出屏幕的条件是-960，那么另外一张图片的位置一定是（-3,0），也就是说屏幕的右边会出现一个黑色的竖条漏洞，这时候就可以利用另外一张图片的x坐标加上刚才获取的x坐标，从而填充漏洞