Cocos2d实现类似Clash of clans的缩放拖拽效果

最近开始跳入做游戏的坑了，而且想做一款独立游戏，虽然随时有烂尾的危险，但无妨一试~敬请期待~

目前正在准备游戏的原型，由于需要设计像COC的缩放场景，作为cocos2d的菜鸟兼ios开发新手，实在search遍了也没有像样的cocos2d代码，即使有效果也未如人意。stackoverflow上有老外关于pinch缩放手势的例子，但放到cocos2d环境，需要控制一个sprite或者tilemap的边界，就变得有点复杂了。这个问题实在卡了我好久好久，但通过参考了一些pinch示例以及不断调试anchor point和map position等值，最终解决，实在泪牛满面！

这个例子我使用了tilemap作为缩放的对象，当然需要的话也可以用sprite或其他代替。在使用了cocos2d的模版生成文件后，可以在hellolayer中的构造器里先添加本次需要的变量

@implementation HelloWorldLayer{
    CCTMXTiledMap *map;
    CGSize winSize;
    CGFloat mapWidth;
    CGFloat mapHeight;
}

map是我们的tilemap对象，我们用它来初始化tile map；winSize包含了屏幕的大小参数；mapWidth和mapHeight是实际制作的tilemap的高宽值。同时在init方法中添加代码：

-(id) init
{
    if( (self=[super init]) ) {
        winSize=[CCDirector sharedDirector].winSize;

        //加载地图
        map=[[CCTMXTiledMap alloc] initWithTMXFile:@"square_tile.tmx"];
        map.anchorPoint=CGPointZero;
        map.position=CGPointZero;
        map.scale=2;
        [self addChild:map];
         
        //除以2是考虑retina，实际中应该对此判断
        mapWidth= map.tileSize.width*map.mapSize.width/2.0f;
        mapHeight= map.tileSize.height*map.mapSize.height/2.0f;
         
        //缩放处理
        UIPinchGestureRecognizer *pinchRecognizer = [[[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(handlePinchFrom:)] autorelease];
        [[[CCDirector sharedDirector] view] addGestureRecognizer:pinchRecognizer];
  
        //滑动
        [[[CCDirector sharedDirector] touchDispatcher] addTargetedDelegate:self priority:0 swallowsTouches:YES];
    }
    return self;
}

这段代码分三步来分解：

1.加载tilemap地图文件，anchor point和position属性值均为CGPointZero，这里为了方便retina显示，初始化scale是2，retina的解决方案暂时不在这里考虑，为了方便，相关的参数是用实际数字代替，实际开发可以对各种参数重构。地图的资源文件在本文最后的demo里找到~

2.pinch手势的缩放，交由本类的handlePinchFrom方法处理

3.最后是滑动处理，由多触点的方法接口实现，下面将引入ccTouchBegan和ccTouchMoved来控制视图的滑动和边界限制等

NOW LET'S KICK OFF!

我们来编写核心功能缩放zoom的处理代码，需要实现的基本需求有：pinch手势（两指滑动）能对当前视图进行相应的放大缩小；缩放的焦点须要为两指初始位置的中点上；同时视图必须以该焦点作为中心

添加handlePinchFrom方法的具体代码：

-(void) handlePinchFrom:(UIPinchGestureRecognizer *)gestureRecognizer
{
    if ([gestureRecognizer state] == UIGestureRecognizerStateBegan){
        
        UIView *piece = gestureRecognizer.view;
        
        CGPoint location = [gestureRecognizer locationInView:piece];
        
        location=[[CCDirector sharedDirector] convertToGL:location];
        
        CGPoint locationInView=[map convertToNodeSpace:location];
        
        //ax-新的anchor point中x的值，ay同理
        CGFloat ax=locationInView.x / mapWidth;
        CGFloat ay=locationInView.y / mapHeight;
        
        CGPoint prevAnchor=map.anchorPoint;
        
        map.anchorPoint = ccp(ax,ay);
        
        //调整后的地图位置
        map.position=ccp(mapWidth*ax*map.scale+map.position.x-map.boundingBox.size.width*prevAnchor.x,mapHeight*ay*map.scale+map.position.y -map.boundingBox.size.height*prevAnchor.y);
        
        
        gestureRecognizer.scale=map.scale;
    }
    
    map.scale=gestureRecognizer.scale;
    
    [self adjustViewBoundingPosition:self.position];
}

实际中调试还必须加入以下方法：

-(void)adjustViewBoundingPosition:(CGPoint)newPos{
}

-(BOOL) ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event
{
	return YES;
}

-(void)ccTouchMoved:(UITouch *)touch withEvent:(UIEvent *)event
{
}

现在可以build后看看效果了！能够看到地图已经能根据两点焦点进行缩放，基本上这就是本例的核心功能！但还不能移动，我们后面再解决，先看下handlePinchFrom的方法：）

CGPoint location = [gestureRecognizer locationInView:piece];

这句是根据获取当前pinch手势的焦点，获取该点后，通过[map convertToNodespace:location]将它转换成地图上相对的坐标位置，然后计算出焦点相对地图x轴和y轴的比例，从而获得了地图新的anchor point，我们的地图将以此新的焦点进行缩放。但设置了anchor point，必然需要对position位置值进行相应移动才能保证地图是平滑放大！所以position的计算值才是最难的一点，为此需要记录缩放前的anchor point(prevAnchor)作为参考值计算

map.position=ccp(mapWidth*ax*map.scale+map.position.x-map.boundingBox.size.width*prevAnchor.x,mapHeight*ay*map.scale+map.position.y -map.boundingBox.size.height*prevAnchor.y);

以上就是地图位置的调整公式，通过反复调试得出，数学好的可以想一下哈哈 
map.scale=gestureRecognizer.scale;

按当前手势的比例设置地图比例，非常简单，就不用多解释了。如果需要优化的话，可以加入最大比例和最小比例的参数来限制缩放的比例。

最后的adjustViewBoundingPosition方法是为了让地图的上下左右边界不超出界限，即不会划出屏幕以外，下面我们来填充剩下的adjustViewBoundingPosition和CCTouchMoved方法来实现移动！

-(void)adjustViewBoundingPosition:(CGPoint)newPos
{
    CGFloat adjustWidth=map.boundingBox.size.width*map.anchorPoint.x-map.position.x;
    CGFloat adjustHeight=map.boundingBox.size.height*map.anchorPoint.y-map.position.y;
    
    newPos.x=  MIN(newPos.x, adjustWidth);
    newPos.x = MAX(newPos.x, winSize.width-[map boundingBox].size.width+adjustWidth);
    newPos.y = MIN(newPos.y,adjustHeight);
    newPos.y = MAX(newPos.y, winSize.height-[map boundingBox].size.height+adjustHeight);
    self.position=newPos;
}

-(BOOL) ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event
{
	return YES;
}

-(void)ccTouchMoved:(UITouch *)touch withEvent:(UIEvent *)event
{
    CGPoint touchLocation = [self convertTouchToNodeSpace:touch];
    
    CGPoint oldTouchLocation = [touch previousLocationInView:touch.view];
    oldTouchLocation = [[CCDirector sharedDirector] convertToGL:oldTouchLocation];
    oldTouchLocation = [self convertToNodeSpace:oldTouchLocation];
    
    CGPoint translation = ccpSub(touchLocation, oldTouchLocation);
    CGPoint newPos= ccpAdd(self.position, translation);
    
    [self adjustViewBoundingPosition:newPos];
}

CCTouchMoved的方法通过获得手势滑动前后的位置差来设置新视图的位置，并使用了adjustViewBoundingPosition来限制移动边界。如果需要做到COC效果滑动时带有惯性，则又必须添加几项控制参数（如是否为拖动状态）同时设置一个schedule来添加惯性的动画，本例没有做这个效果，可以另行添加

adjustViewBoundingPosition和常规的控制边界代码没有什么不同，主要是多了adjustHeight和adjustWidth的值，这两个值是根据当前map的anchor point和position决定的。另外MIN和MAX的相关值与缩放的实际需求相关，譬如本人不需要考虑scale<2即地图小于屏幕的情况，所以MIN和MAX是定死了，可根据是否小于屏幕来对调MIN和MAX的值

以上就是基本的代码，由于只考虑实现，所以实际项目中还是需要按自己需求去调整，譬如添加惯性，控制缩放比例，缩放达到界限后用动画过渡等效果，在本demo中都没有提供，但这些处理并不复杂~so~

本例的代码已经放到github上，需要的时候可以下来看看 ：）

Check this out: https://github.com/yijiancen/pinch-and-scroll-like-clash-of-clans