首页 > 代码库 > 如何让CCLayer创造的地图,左右滑动不出现黑边

如何让CCLayer创造的地图,左右滑动不出现黑边

在都是scale为1的情况下,效果图如下:

技术分享

绿色的是Screen,它的大小和坐标不变,可以理解为CCScene,下面两个就是用CCLayer的地图,有2个Layer,深颜色的就是和Scrren一样大小的Layer,浅颜色的是一张大地图,或者一张大图片,也可以是一个Layer,里面有个CCTMXTiledMap,都可以,它们的特点是尺寸大于Screen,坐标在Layer中是0,0,所以无论深颜色Layer怎么变化,它们的坐标始终都是0,只是大小可能会改变。代码为:

 CCScene *scene=[CCScene node];        CCLayerColor *layercolor2=[[[CCLayerColor alloc]initWithColor:ccc4(110, 200, 50, 255) width:200 height:100]autorelease];    [scene addChild:layercolor2 z:MaxZorder-1];    layercolor2.position=ccp(500,500);        CCLayerColor *layercolor5=[[[CCLayerColor alloc]initWithColor:ccc4(10, 20, 150, 150) width:200 height:100]autorelease];    [scene addChild:layercolor5 z:MaxZorder-1];    layercolor5.position=ccp(500,400);    //layercolor5.scaleX=0.75;            CCLayerColor *layercolor4=[[[CCLayerColor alloc]initWithColor:ccc4(110, 20, 150, 150) width:500 height:100]autorelease];    [layercolor5 addChild:layercolor4 z:MaxZorder-1];    layercolor4.position=ccp(0,0);    // layercolor4.scaleX=0.75;       // layercolor5.position=ccp(500+layercolor5.contentSize.width/2*(layercolor5.scaleX-1),400);                                    CCLayerColor * layercolor=[[[CCLayerColor alloc]initWithColor:ccc4(10, 20, 150, 150) width:200 height:100]autorelease];    [scene addChild:layercolor z:MaxZorder-1];    layercolor.position=ccp(200,300);     //layercolor.scaleX=0.75;            layercolor4=[[[CCLayerColor alloc]initWithColor:ccc4(110, 20, 150, 150) width:500 height:100]autorelease];    [layercolor addChild:layercolor4 z:MaxZorder-1];    layercolor4.position=ccp(0,0);       [[CCDirector sharedDirector] runWithScene:[CCTransitionFade transitionWithDuration:0.5 scene:scene withColor:ccBLACK]];

 

 

 

现在如果地图支持缩放,比如深颜色Layer比例变为0.75了,那么会如何变化呢,如图所示的变化:

技术分享

代码如下:

CCScene *scene=[CCScene node];        CCLayerColor *layercolor2=[[[CCLayerColor alloc]initWithColor:ccc4(110, 200, 50, 255) width:200 height:100]autorelease];    [scene addChild:layercolor2 z:MaxZorder-1];    layercolor2.position=ccp(500,500);        CCLayerColor *layercolor5=[[[CCLayerColor alloc]initWithColor:ccc4(10, 20, 150, 150) width:200 height:100]autorelease];    [scene addChild:layercolor5 z:MaxZorder-1];    layercolor5.position=ccp(500,400);     layercolor5.scaleX=0.75;            CCLayerColor *layercolor4=[[[CCLayerColor alloc]initWithColor:ccc4(110, 20, 150, 150) width:500 height:100]autorelease];    [layercolor5 addChild:layercolor4 z:MaxZorder-1];    layercolor4.position=ccp(0,0);           // layercolor5.position=ccp(500+layercolor5.contentSize.width/2*(layercolor5.scaleX-1),400);                                    CCLayerColor * layercolor=[[[CCLayerColor alloc]initWithColor:ccc4(10, 20, 150, 150) width:200 height:100]autorelease];    [scene addChild:layercolor z:MaxZorder-1];    layercolor.position=ccp(200,300);     layercolor.scaleX=0.75;            layercolor4=[[[CCLayerColor alloc]initWithColor:ccc4(110, 20, 150, 150) width:500 height:100]autorelease];    [layercolor addChild:layercolor4 z:MaxZorder-1];    layercolor4.position=ccp(0,0);       [[CCDirector sharedDirector] runWithScene:[CCTransitionFade transitionWithDuration:0.5 scene:scene withColor:ccBLACK]];

 

 

,为啥会这样呢,因为Layer是比较特殊的,她是以左下角为坐标,但是锚点确实在中间,所以缩小的时候是从2头缩小,而坐标保持不变,所以我们看到虽然坐标不变,但是已经偏移了。那么现在我们就讨论,如何在缩放之后,大地图仍然保持原来的位置不变,这样就能保证左右两边不出现黑边。先看左边的,第二个图就是左边的

这里调整下layercolor5的坐标,代码如下

layercolor5.position=ccp(500+layercolor5.contentSize.width/2*(layercolor5.scaleX-1),400);因为缩小之后,左边缩放的大小为
layercolor5.contentSize.width/2*(layercolor5.scaleX-1),所以为了回到以前的位置,x坐标减少相应大小即可。

下面再调整右边的。也就是调整layercolor的坐标,加上这一行

layercolor.position=ccp(layercolor.position.x+(1-layercolor.scaleX)*500-(layercolor.contentSize.width/2)*0.25,layercolor.position.y);

为什么会这样做

layercolor.position.x+(1-layercolor.scaleX)*500,首先layercolor.position.x是未缩放前的坐标,(1-layercolor.scaleX)*500是大地图缩小后减少的部分。

两者相加,layercolor向右移动这些,但是还没完,因为Layer缩小的时候,其实是向两边缩,所以大地图为了保持不变,也相当于向右移动了一些,也就是(layercolor.contentSize.width/2)*0.25,就是说相对坐标不变,但是世界坐标变了,向右移动了,所以要减去向右移动的这块,才是最重layercolor应该移动的距离。

如果感觉这个不好理解,还有一种思路,就是说想让layercolor缩放后,仍然对齐右边,我们不考虑layercolor在缩放后移动多少才能对齐,我们直接算在layercolor缩放后,坐标应该不变,但是图像会向左边缩,也就是x增大,我们先让layercolor变得和layercolor5一样,移动到和左边对齐,也就是使

layercolor.position=   layercolor5.position,此时就是做对齐了,然后要想让右边对齐,现在看图得知,需要移动的距离为

(layercolor4.contentSize.width*layercolor.scaleX-layercolor.contentSize.width),大地图缩放后的长度-screen的长度,就是差值

所以综上layercolor.position=ccp(layercolor5.position.x-(layercolor4.contentSize.width*layercolor.scaleX-layercolor.contentSize.width),300)

 全部的代码为

CCScene *scene=[CCScene node];        CCLayerColor *layercolor2=[[[CCLayerColor alloc]initWithColor:ccc4(110, 200, 50, 255) width:200 height:100]autorelease];    [scene addChild:layercolor2 z:MaxZorder-1];    layercolor2.position=ccp(500,500);                   CCLayerColor *layercolor5=[[[CCLayerColor alloc]initWithColor:ccc4(10, 20, 150, 150) width:200 height:100]autorelease];    [scene addChild:layercolor5 z:MaxZorder-1];    layercolor5.position=ccp(500,400);     layercolor5.scaleX=0.75;            CCLayerColor *layercolor4=[[[CCLayerColor alloc]initWithColor:ccc4(110, 20, 150, 150) width:500 height:100]autorelease];    [layercolor5 addChild:layercolor4 z:MaxZorder-1];    layercolor4.position=ccp(0,0);            layercolor5.position=ccp(layercolor5.position.x+layercolor5.contentSize.width/2*(layercolor5.scaleX-1),400);                                    CCLayerColor * layercolor=[[[CCLayerColor alloc]initWithColor:ccc4(10, 20, 150, 150) width:200 height:100]autorelease];    [scene addChild:layercolor z:MaxZorder-1];    layercolor.position=ccp(500-(500-200),300);     layercolor.scaleX=0.75;                    layercolor4=[[[CCLayerColor alloc]initWithColor:ccc4(110, 20, 150, 150) width:500 height:100]autorelease];    [layercolor addChild:layercolor4 z:MaxZorder-1];    layercolor4.position=ccp(0,0);          //***********************************第一种方法******************************/    //layercolor.position=ccp(layercolor.position.x+(1-layercolor.scaleX)*500-(layercolor.contentSize.width/2)*0.25,layercolor.position.y);            //***********************************第二种方法******************************/        int px=layercolor5.position.x-(layercolor4.contentSize.width*layercolor.scaleX-layercolor.contentSize.width);      layercolor.position=ccp(px,300);            [[CCDirector sharedDirector] runWithScene:[CCTransitionFade transitionWithDuration:0.5 scene:scene withColor:ccBLACK]];

效果为:

技术分享

 

 

 

如何让CCLayer创造的地图,左右滑动不出现黑边