CocosCreator滚动地图功能代码,可复用,可自定义组件,没有代码耦合和入侵。转载自CocosCreator 多块地图无限无缝滚动 组件。用于个人学习和记录,如有侵权请联系删除。
备注:
- 代码使用的
TypeScript
- 个人修改
direction
属性为cc.Enum类型,可以在CocosCreator编译界面直接选择 - 个人添加
moveDistance
属性,用于记录移动的总距离 -
使用方法:将脚本复制到项目中,挂载到某一节点下,将需要滚动轮转的地图节点依次摆好位置,添加到
NodeList
数组属性里,即可实现效果 - 个人建议添加
3
个地图节点,2屏轮转时会有部分黑屏现象。 - 地图节点不用管锚点和图片尺寸是否与屏幕相等,只需要将地图按次序无缝连接好
- 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;
}
}
}
}