[CocosCreator]滚动地图自定义组件

CocosCreator滚动地图功能代码，可复用，可自定义组件，没有代码耦合和入侵。转载自CocosCreator 多块地图无限无缝滚动 组件。用于个人学习和记录，如有侵权请联系删除。

备注：

1. 代码使用的TypeScript
2. 个人修改direction属性为cc.Enum类型，可以在CocosCreator编译界面直接选择
3. 个人添加moveDistance属性，用于记录移动的总距离

4. 使用方法：将脚本复制到项目中，挂载到某一节点下，将需要滚动轮转的地图节点依次摆好位置，添加到NodeList数组属性里，即可实现效果

5. 个人建议添加3个地图节点，2屏轮转时会有部分黑屏现象。
6. 地图节点不用管锚点和图片尺寸是否与屏幕相等，只需要将地图按次序无缝连接好
7. Demo地址（欢迎点赞关注后续更新）：demo

export enum DIRECTION{
    LEFT = 1,
    RIGHT = 2,
    UP = 3,
    DOWN = 4,
};
/**
 * 多块地图滚动组件
 */
const {ccclass, property} = cc._decorator;
@ccclass
export default class ScrollThroughMultipleMaps extends cc.Component {

    @property([cc.Node])
    NodeList: cc.Node[] = [];
    @property(cc.Integer)
    speed: number = 50;
    @property({type: cc.Enum(DIRECTION)})//,tooltip: "1: 表示 LEFT; 2: 表示 RIGHT;3 表示 UP; 4 表示: DOWN"
    direction: DIRECTION = DIRECTION.DOWN;
    headPos: cc.Vec2;
    footPos: cc.Vec2;
    headLimit: number = 0;
    footLimit: number = 0;
    isRun: boolean = false;
    // moveDistance : number = 0;//移动的距离
    start () {
        this.headPos = this.NodeList[0].getPosition();
        this.footPos = this.NodeList[this.NodeList.length -1].getPosition();
        switch(this.direction) {
            case DIRECTION.LEFT: {
                this.headLimit =this.headPos.x - this.NodeList[0].getContentSize().width;
                this.footLimit =this.footPos.x;
                break;
            }
            case DIRECTION.RIGHT: {
                this.headLimit =this.headPos.x + this.NodeList[0].getContentSize().width;
                this.footLimit =this.footPos.x;
                break;
            }
            case DIRECTION.DOWN: {
                this.headLimit = this.headPos.y - this.NodeList[0].getContentSize().height;
                this.footLimit = this.footPos.y;
                break;
            }
            case DIRECTION.UP:  {
                this.headLimit = this.headPos.y + this.NodeList[0].getContentSize().height;
                this.footLimit = this.footPos.y;
            }
        }
        this.isRun = true;
    }   
    checkMoveLeftAllPos() {
        if (this.NodeList[0].x <  this.headLimit) {
            var offset = this.footLimit - this.NodeList[this.NodeList.length -1].x -  this.NodeList[this.NodeList.length -1].width;
            this.NodeList[0].x = this.footLimit - offset;
            this.NodeList.push(this.NodeList.splice(0, 1)[0]);
        }
    }
    checkMoveRightAllPos() {
        if (this.NodeList[0].x >  this.headLimit) {
            var offset = this.NodeList[this.NodeList.length -1].x - this.footLimit -  this.NodeList[this.NodeList.length -1].width;
            this.NodeList[0].x = this.footLimit + offset;
            this.NodeList.push(this.NodeList.splice(0, 1)[0]);
        }
    }
    checkMoveDownAllPos() {
        if (this.NodeList[0].y <  this.headLimit) {
            var offset = this.footLimit - this.NodeList[this.NodeList.length -1].y -  this.NodeList[this.NodeList.length -1].height;
            this.NodeList[0].y = this.footLimit - offset;
            this.NodeList.push(this.NodeList.splice(0, 1)[0]);
        }
    }
    checkMoveUPAllPos() {
        if (this.NodeList[0].y >  this.headLimit) {
            var offset = this.NodeList[this.NodeList.length -1].y - this.footLimit -  this.NodeList[this.NodeList.length -1].height;
            this.NodeList[0].y = this.footLimit + offset;
            this.NodeList.push(this.NodeList.splice(0, 1)[0]);
        }
    }
    update (dt) {
        if (!this.isRun) return;
        // this.moveDistance += dt* this.speed;
        switch(this.direction) {
            case DIRECTION.LEFT: {
                for (let i = this.NodeList.length -1; i >= 0; i--) {
                    this.NodeList[i].x -= dt* this.speed;
                }
                this.checkMoveLeftAllPos();
                break;
            }
            case DIRECTION.RIGHT: {
                for (let i = this.NodeList.length -1; i >= 0; i--) {
                    this.NodeList[i].x += dt* this.speed;
                }
                this.checkMoveRightAllPos();
                break;
            }
            case DIRECTION.DOWN: {
                for (let i = this.NodeList.length -1; i >= 0; i--) {
                    this.NodeList[i].y -= dt* this.speed;
                }
                this.checkMoveDownAllPos();
                break;
            }
            case DIRECTION.UP: {
                for (let i = this.NodeList.length -1; i >= 0; i--) {
                    this.NodeList[i].y += dt* this.speed;
                }
                this.checkMoveUPAllPos();
                break;
            }
        }
    }
}