cocos2d js 地图无线滚动

最新推荐文章于 2024-04-30 15:22:26 发布

qq_23576009

最新推荐文章于 2024-04-30 15:22:26 发布

阅读量471

点赞数

CC 4.0 BY-SA版权

文章标签： cocos2d javascript

本文链接：https://blog.youkuaiyun.com/qq_23576009/article/details/78781612

本文介绍了在cocos2d-js环境中，如何创建并实现跑酷游戏的无限地图滚动效果。通过使用两张相同的地图图片交替移动，当一张地图移出屏幕时，将其重新定位到屏幕后方，从而达到无缝滚动的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在cocos2d跑酷游戏中的地图背景会无限滚动

地图的滚动能让角色看起来是在奔跑，那么如何实现呢。首先定义两张地图（这里的地图没有变化,所以就用同一张图），

//添加背景
this.BackGround = new cc.Sprite("#back_spring.png");
this.BackGround.setPosition(winSize.width/2,winSize.height/2);
this.addChild(this.BackGround,0);

this.BackGround2 = new cc.Sprite("#back_spring.png");
this.BackGround2.setPosition(winSize.width*1.5,winSize.height/2);
this.addChild(this.BackGround2,0);

然后要写一个方法让他无线滚动主要就是一张跟着一张动

mapUpdate: function(){
if (this.BackGround.getPositionX()<=-this.BackGround.getContentSize().width/2)
{
this.BackGround.setPositionX(this.BackGround.getContentSize().width*1.5);
}
else{
this.BackGround.setPositionX(this.BackGround.getPositionX()-8);
}

if (this.BackGround2.getPositionX()<=-this.BackGround2.getContentSize().width/2)
{
this.BackGround2.setPositionX(this.BackGround2.getContentSize().width*1.5);
}
else{
this.BackGround2.setPositionX(this.BackGround2.getPositionX()-8);
}

},