cocos creator 无缝循环滚动道具 教程 scroll

第一步，先把布局弄好
把要滚动的图片都拖到scroll下

第二步,在scroll节点里添加Mask组件，辨率设为300*500,
这个分辨率你们可以随意改变
在资源管理器里新建一个scroll.js的组件，再把组件挂到scroll节点上

下面是scroll.js的代码部份

cc.Class({
    extends: cc.Component,
 
    properties: {
 
    },
 
    onLoad(){
        this.allItem = []; //道具的列表
        this.lineHeight = 30;//每个道具的间距
        let tH = 0; //当前高度
        this.itemCount = this.node.children.length;//取的scroll下子节点的数量
        this.speed = 0; //当前移动速度
        //遍历所有子节点，并且排好位置
        for(let i=0; i0?"up":"down"; //判断移动方向，上还是下
            this.moveItem(pos); //移动道具列表
        }, this);
 
 	//触屏结束
        this.node.on("touchend", this.touchEnd, this);
        this.node.on("touchcancel", this.touchEnd, this);
    },
 
    touchEnd(e){
        let startPos = e.getStartLocation();//取的触屏开始时的位置
        let curPos = e.getLocation(); //取的触屏结束时的位置
        let y = startPos.y - curPos.y; //计算触屏开始与结束的距离
        if(y == 0) return; //如果没有移动即返回
        let endTime = new Date().getTime(); //取的触屏结束时的时间
        let t = endTime - this.startTime; //计算触屏开始与结束的时间差
        if(t>300) return; //如果时间大于300毫秒，即不向下执行了，
        //这个300毫秒，大家可以按须要去加减，如果觉得太慢，就加大一点，别加太多，会飞一样的速度
        this.speed = y / t; //计算速度
    },
 
 //移动道具
    moveItem(pos){
 	//移动道具
        for(let i=0; isn.height/2){
                sn.y = en.y - en.width/2 - sn.width/2 - this.lineHeight;
                let item = this.allItem.shift(); //删除并返回道具数组中的第一个元素
                this.allItem.push(item);//把该元素插入到数组的最后一位
            }
        }else{
        //向下划屏
            if(en.y<-(this.node.height+en.height/2)){
                en.y = sn.y + sn.height/2 + en.height/2 + this.lineHeight;
                let item = this.allItem.pop(); //取的数部中的最后一个元素，并删除
                this.allItem.unshift(item); //把该元素插入到第一位
            }
 
        }
 
    },
 
    update(dt){
        if(this.speed == 0) return;
        if(this.speed>0){
            this.speed-=dt*3;
            this.speed = this.speed<0?0:this.speed;
        }else{
            this.speed += dt*3;
            this.speed = this.speed>0?0:this.speed;
        }
        //如果觉的快，就把300减少一点
        this.moveItem(cc.v2(0,-(this.speed * dt * 300)));
    },
    /**
     * 
     */
});
 

这是我做的一个动作小游戏demo,如果大家有兴趣的话，可以去看一下教程，整个教程都发到B站上面去了！无耻的求三连
点击查看完整视频

cocos creator制作的动作游戏demo，龙骨动画,可换装和武器