如何让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]];
效果为: