如何使用cocos2d制作一个多向滚屏射击游戏-第二部分

如何使用cocos2d 2.0开发类似坦克大战的游戏（且支持ARC）2

 

原文链接：http://www.raywenderlich.com/6888/how-to-make-a-multi-directional-scrolling-shooter-part-2

 

示例项目链接：http://www.raywenderlich.com/downloads/Tanks2.zip

 

文中的代码根据个人习惯稍有修改。

 

在第一部分的内容中，我们创建了一个全新的支持ARC的Cocos2D 2.0项目，将瓦片地图添加到游戏中，并添加了一个坦克，可以使用加速计来进行操控。

 

在这部分（也是最后一部分）的内容中，我们将让坦克可以发射炮弹，同时会添加敌军坦克，添加游戏的赢/输机制，等等。

接下来的内容将从第一部分已完成的项目开始，可以从这里（http://www.raywenderlich.com/downloads/Tanks1.zip）直接下载。

 

准备好了，还是来制作游戏吧。

 

炮火连天

 

现在我们的坦克已经可以四处移动了，但还不能开火！坦克要开火跟女生要买新衣服一样天经地义，所以必须得尽快解决这个问题：）

 

当然，由于之前使用加速计来控制坦克的移动，这里可以直接使用触摸的方式让坦克开火。不过，为了让游戏变得更有趣一点，我们不仅要在玩家触摸的时候发货，还可以让坦克连续开火！

 

在Xcode中切换到Tank.h，在其中做出以下修改：

//在@interface部分添加以下代码：

CGPoint shootVector;

double timeSinceLastShot;

CCSprite *turret;

 

//在@interface之后添加以下代码：

 

@property(assign) BOOL shooting;

 

-(void)shootToward:(CGPoint)position;

-(void)shootNow;

 

在上面的代码中，我们添加了一个实例变量shootVector用于保存射击的方向，变量timeSinceLastShot用于保存从上次射击到现在所经过的时间。还添加了一个turret变量来保存添加到坦克顶部的新精灵对象-坦克的炮塔！

 

切换到Tank.m，并对代码做出以下调整：

在文件的顶部添加：

#import "SimpleAudioEngine.h"

在@implementation之后添加以下代码：

@synthesize shooting;

在initWithLayer:theType:theHp方法中添加以下代码：

 

NSString *turretName = [NSStringstringWithFormat:@"tank%d_turret.png",type];

turret = [CCSpritespriteWithSpriteFrameName:turretName];

turret.anchorPoint = ccp(0.5,0.25);

turret.position = ccp(self.contentSize.width/2,self.contentSize.height/2);

      [selfaddChild:turret];

 

在以上代码中，我们创建了一个新的精灵对象代表坦克炮塔，并将其添加为坦克的子节点。这样当我们移动坦克精灵的时候，炮塔也会随之移动。

 

请注意放置炮塔的方式：

首先将锚点的位置设置在靠近炮塔的基座。为什么这样做呢？因为锚点的位置就是旋转的中心点，而我们想要让炮塔沿着基座旋转，就必须将锚点设置在靠近基座。

接着我们将炮塔精灵对象的位置设置在坦克的中心。由于炮塔精灵是坦克的子节点，其位置是相对坦克的左下角的。这样我们就把锚点（炮塔的基座）连接在坦克的中心点上。

 

接下来在文件的底部添加一个新的方法：

 

-(void)shootToward:(CGPoint)position{

 

CGPoint offset = ccpSub(targetPosition, self.position);

float MIN_OFFSET = 10;

if(ccpLength(offset) < MIN_OFFSET) return;

 

shootVector = ccpNormalize(offset);

}

当玩家触摸屏幕的时候，就会调用该方法。这里需要检查触摸点到目标位置的距离不小于10个点（如果太近，则很难判断射击的方向）。接着我们将向量规范化（也即把向量的长度设置为1），从而得到一个射击的方向向量，并将其保存在shootVector变量中，以便后续使用。

 

接下来添加实际射击的方法如下：

 

-(void)shootNow{

 

//1

CGFloat angle = ccpToAngle(shootVector);

turret.rotation = (-1 * CC_RADIANS_TO_DEGREES(angle)) +90;

 

//2

float mapMax = MAX([layer tileMapWidth],[layer tileMapHeight]);

CGPoint actualVector = ccpMult(shootVector, mapMax);

 

//3

float POINTS_PER_SECOND = 300;

float duration = mapMax /POINTS_PER_SECOND;

 

//4

NSString *shootSound = [NSStringstringWithFormat:@"tank%dShoot.wav",type];

  [[SimpleAudioEnginesharedEngine]playEffect:shootSound];

 

//5

NSString *bulletName = [NSStringstringWithFormat:@"tank%d_bullet.png",type];

CCSprite *bullet = [CCSpritespriteWithSpriteFrameName:bulletName];

  bullet.tag = type;

  bullet.position = ccpAdd(self.position, ccpMult(shootVector, turret.contentSize.height));

CCMoveBy *move = [CCMoveByactionWithDuration:duration position:actualVector];

CCCallBlockN *call = [CCCallBlockNactionWithBlock:^(CCNode *node) {

    [node removeFromParentAndCleanup:YES];

  }];

  [bullet runAction:[CCSequenceactions:move,call, nil]];

  [layer.batchNodeaddChild:bullet];

 

}

让我们来解释下其中的代码（按照注释顺序）：

1.首先我们将炮塔选中到面朝射击的方向。这里使用一个简单的辅助函数ccpToAngle，可以将向量转换成以弧度为单位的向量角度。急着将其转换成Cocos2D中使用的角度，然后乘以——1,因为在Cocos2D中使用顺时针旋转。同时需要加上90，因为炮塔的美术素材是朝上的（而不是朝右）。

2.接着我们计算出炮弹要射击的距离。这里我们获得瓦片地图宽度或高度的最大值，并乘以射击的方向向量；

3.再接下来我们需要计算出炮弹要达到指定地点所需的时间。这一点很简单，只需使用向量长度（瓦片地图宽度或高度中更大的数值）除以每秒的运动速度即可

4.添加音效

5.最后我们创建了一个新的炮弹精灵，并让其执行某个动作（在动作完成后消失），并将其添加到层的精灵表单中。

 

 

接下来对Tank.m做出以下修改：

 

添加以下新的方法：

-(BOOL)shouldShoot{

if(!self.shooting) returnNO;

 

double SECS_BETWEEN_SHOTS = 0.25;

if(timeSinceLastShot> SECS_BETWEEN_SHOTS){

 

timeSinceLastShot = 0;

returnYES;

  }else{

returnNO;

  }

}

 

-(void)updateShoot:(ccTime)dt{

 

timeSinceLastShot += dt;

if([selfshouldShoot]){

    [selfshootNow];

  } 

}

然后修改update方法如下：

 

- (void)update:(ccTime)dt {   

  [selfupdateMove:dt]; 

  [selfupdateShoot:dt];

}

 

 

通过以上代码，可以让坦克连续射击。每一次更新我们都会调用updateShoot方法。如果从上次射击到现在的时间超过了0.25秒，则调用shootNow方法。

 

好了，Tank.m已经完成。在Xcode中切换到HelloWorldLayer.m，并使用以下内容替代ccTouchesBegan和ccTouchesMoved：

 

- (void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {

 

UITouch * touch = [touches anyObject];

CGPoint mapLocation = [tileMapconvertTouchToNodeSpace:touch];

 

self.tank.shooting = YES;

  [self.tankshootToward:mapLocation];

 

//    self.tank.moving = YES;

//    [self.tank moveToward:mapLocation];

 

 

}

 

- (void)ccTouchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {

 

UITouch * touch = [touches anyObject];

CGPoint mapLocation = [tileMapconvertTouchToNodeSpace:touch];

 

//    self.tank.moving = YES;

//    [self.tank moveToward:mapLocation];

self.tank.shooting = YES;

  [self.tankshootToward:mapLocation];

 

 

}

 

 

通过以上的方法，我们使用触碰来进行射击，而非移动坦克。

 

编译运行游戏，可以触摸屏幕连续射击了！

 

当然，这里采用的射击方式并非是最佳的，因为我们在连续分配炮弹，而在ios中这样是非常耗费内存的。一个更好的方式是预先分配一个炮弹数组，并在需要发射炮弹时重用之前的旧炮弹。

 

添加敌军坦克

 

任何一个坦克对战游戏都需要有敌军坦克，在Xcode中打开HelloWorldLayer.h，然后创建一个数组用于保存敌军坦克：

NSMutableArray *enemyTanks;

 

然后打开HelloWorldLayer.m，并在init方法的地步添加以下代码，以产生一些敌军坦克：

 

enemyTanks = [NSMutableArrayarray];

int NUM_ENEMY_TANKS = 50;

for(int i= 0; i< NUM_ENEMY_TANKS; ++i){

 

Tank *enemy = [[Tankalloc]initWithLayer:selftype:2hp:2];

CGPoint randSpot;

BOOL inWall = YES;

 

while(inWall){

          randSpot.x = CCRANDOM_0_1() *[selftileMapWidth];

          randSpot.y = CCRANDOM_0_1() *[selftileMapHeight];

          inWall = [selfisWallAtPosition:randSpot]; 

        }

        enemy.position = randSpot;

        [batchNodeaddChild:enemy];

        [enemyTanksaddObject:enemy];

      }

 

以上代码不难理解。我们在一些随机点创建了一批坦克（只要不是在水中）。

 

编译运行，可以看到敌军坦克遍布地图！为了方便坦克英雄识别，这里将敌军坦克都标识为红色！

 

 

敌军凶猛！

 

如果这些敌军坦克只是静坐修禅，当然最好不过！不过这样游戏也少了很多乐趣！这里将从Tank类派生一个子类RandomTank，并覆盖其中的一些方法。

 

在Xcode中使用iOS\Cocoa Touch\Objective-C class模板创建一个新的文件，将其命名为RandomTank，并将subclass of设置为Tank。打开RandomTank.h，并使用以下的代码替代其中的内容：

 

#import "Tank.h"

 

@interface RandomTank : Tank{

 

double timeForNextShot;

}

 

@end

 

这里添加了一个实例变量，用于记录到下一次设计前要等候多少秒。

 

切换到RandomTank.m，并使用以下代码替代其中的内容：

 

#import "RandomTank.h"

#import "HelloWorldLayer.h"

 

@implementation RandomTank

 

-(id)initWithLayer:(HelloWorldLayer *)theLayer type:(int)theType hp:(int)theHp{

 

if((self = [superinitWithLayer:theLayer type:theType hp:theHp])){

    [selfschedule:@selector(move:)interval:0.5];

  }

returnself;

}

 

-(BOOL)shouldShoot{

 

if(ccpDistance(self.position, layer.tank.position) >600) returnNO;

 

if(timeSinceLastShot>timeForNextShot){

timeSinceLastShot = 0;

timeForNextShot = (CCRANDOM_0_1() * 3)+1;

    [self shootToward:layer.tank.position];

returnYES;

  }else {

returnNO;

  }

 

}

 

-(void)calcNextMove{

//TODO

}

 

-(void)move:(ccTime)dt{

if(self.moving&&arc4random()% 3 !=0) return;

  [selfcalcNextMove];

}

 

@end

 

 

以上定时了一个移动方法，每半秒调用一次。

当进行射击时，我们会首先确保敌军坦克离坦克英雄足够近，否则如果敌军坦克在很远的地方就开炮，会让游戏难度大大提升。

接下来我们计算出下一次射击的随机时间，大概在1-4秒之间。如果达到该时间，会更新坦克的目标，并继续。

 

在HelloWorldLayer.m中添加以下代码：

#import "RandomTank.h"

 

然后在init方法中修改创建正常坦克的代码，如下：

 

RandomTank *enemy = [[RandomTankalloc]initWithLayer:selftype:2hp:2];

 

编译运行游戏，当坦克英雄距离敌军坦克一定距离的时候，敌军就会开炮了！

 

 

让敌军坦克动起来

 

现在虽然敌军坦克已经开始射击了，但还需要让它们四处动一动。

 

为了让游戏尽可能简化，这里采取的策略是：

1.选择一个临近的随机点

2.确保该路径上没有障碍物，如果是，则让坦克朝该点移动

3.如果不是，则返回第一步

 

这里唯一需要考虑的是第2步！指定起始点和终点的坐标，我们如何走过坦克需要移动的瓦片，并确保不会遇上障碍物？

 

幸运的是，这个问题已被解决了，可参考James McNeil的博客（http://playtechs.blogspot.com/2007/03/raytracing-on-grid.html），这里我们直接使用他给出的方。

 

切换到RandomTank.m，并使用以下代码替代calcNextMove方法：

// From http://playtechs.blogspot.com/2007/03/raytracing-on-grid.html

-(BOOL)clearPathFromTileCoord:(CGPoint)start toTileCoord:(CGPoint)end{

int dx = abs(end.x - start.x);

int dy = abs(end.y - start.y);

int x = start.x;

int y = start.y;

int n = 1 + dx +dy;

int x_inc = (end.x>start.x) ? 1: -1;

int y_inc = (end.y>start.y) ? 1: -1;

int error = dx - dy;

  dx *=2;

  dy *=2;

 

for(;n>0; --n){

if ([layer isWallAtTileCoord:ccp(x,y)]) returnFALSE;

 

if(error >0){

      x += x_inc;

      error -= dy;

    }

else{

      y += y_inc;

      error += dx;

    }

 

  }

returnYES;

 

}

 

-(void)calcNextMove{

 

BOOL moveOK = NO;

CGPoint start = [layer tileCoordForPosition:self.position];

CGPoint end;

 

while (!moveOK){

 

    end = start;

    end.x += CCRANDOM_MINUS1_1() *((arc4random() % 10) +3);

    end.y += CCRANDOM_MINUS1_1() *((arc4random() % 10) +3);

 

    moveOK = [selfclearPathFromTileCoord:start toTileCoord:end];

 

  }

 

 

 

CGPoint moveToward = [layer positionForTileCoord:end];

 

self.moving = YES;

  [selfmoveToward:moveToward];

 

}

不要担心上面第一个方法的工作原理（如果感兴趣可以仔细看看那篇博客），只需要知道它可以检查在起点和终点之间是否存在障碍，如果是则返回FALSE。

 

而在calcNextMove方法中，我们使用了上面的算法。

编译运行，可以看到敌军坦克开始动起来！

 

碰撞，爆炸和出口

 

现在我们有敌人可以打，有炮弹可以发射，还需要的就是刺激的爆炸效果，还有就是让坦克英雄取得胜利的出口！

 

在HelloWorldLayer.h中对代码做出以下修改：

 

在@interface之前添加一个枚举变量：

 

typedefenum {

 

  kEndReasonWin,

  kEndReasonLose

 

}EndReason;

 

在@interface中添加以下几个实例变量；

 

CCParticleSystemQuad  *explosion;

CCParticleSystemQuad *explosion2;

BOOL gameOver;

CCSprite *exit;

 

接下来切换到HelloWorldLayer.m，并在init方法的底部添加以下代码：

 

explosion = [CCParticleSystemQuadparticleWithFile:@"explosion.plist"];

      [explosionstopSystem];

      [tileMapaddChild:explosionz:1];

 

explosion2 = [CCParticleSystemQuadparticleWithFile:@"explosion2.plist"];

      [explosion2stopSystem];

      [tileMapaddChild:explosion2z:1];

 

exit = [CCSpritespriteWithSpriteFrameName:@"exit.png"];

CGPoint exitTileCoord = ccp(98,98);

CGPoint exitTilePos = [selfpositionForTileCoord:exitTileCoord];

exit.position = exitTilePos;

      [batchNodeaddChild:exit];

 

self.scale  = 0.5;

 

在以上代码中，我们使用Cocos2D内置的粒子系统创建了两种不同类型的爆炸效果，并将其添加为瓦片地图的子节点，但首先需要先将其关闭。当需要使用的时候，会把它们移动到需要的地方，并使用resetSystem来启动。

 

接着我们在地图的右下角添加了一个出口。一旦坦克到达这一点，玩家就赢得了战斗！

 

注意到这里把层的比例设置为0.5，因为我们希望可以看到地图的更多内容。

 

现在在update方法的前面添加这些新的方法：

 

-(void)restartTapped:(id)sender{

  [[CCDirectorsharedDirector]replaceScene:[CCTransitionFlipXtransitionWithDuration:0.5scene:[HelloWorldLayerscene]]];

 

}

 

-(void)endScene:(EndReason)endReason{

 

if(gameOver) return;

gameOver = true;

 

CGSize winSize = [CCDirectorsharedDirector].winSize;

 

  NSString *message;

if(endReason == kEndReasonWin){

    message = @"You Win!";

  }elseif(endReason == kEndReasonLose){

    message = @"You Lose!";

  }

 

  CCLabelBMFont *label;

if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad){

 

    label = [CCLabelBMFontlabelWithString:message fntFile:@"TanksFont.fnt"];

  }else{

    label = [CCLabelBMFontlabelWithString:message fntFile:@"TanksFont.fnt"];

  }

 

  label.scale = 0.1;

  label.position = ccp(winSize.width/2,winSize.height *0.7);

  [selfaddChild:label];

 

  CCLabelBMFont *restartLabel;

if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad){

    restartLabel = [CCLabelBMFontlabelWithString:@"Restart"fntFile:@"Tanksfont.fnt"];

 

  }else{

    restartLabel = [CCLabelBMFontlabelWithString:@"Restart"fntFile:@"Tanksfont.fnt"];

  }

 

CCMenuItemLabel *restartItem = [CCMenuItemLabelitemWithLabel:restartLabel target:selfselector:@selector(restartTapped:)];

  restartItem.scale = 0.1;

  restartItem.position = ccp(winSize.width/2,winSize.height *0.3);

 

CCMenu *menu = [CCMenumenuWithItems:restartItem, nil];

  menu.position = CGPointZero;

  [selfaddChild:menu];

 

  [restartItem runAction:[CCScaleToactionWithDuration:0.5scale:4.0]];

  [label runAction:[CCScaleToactionWithDuration:0.5scale:4.0]];

 

}

 

以上方法我曾在多个原型游戏中使用。如果看过系列的其它博文应该知道，其作用就是重新启动游戏，这里就不再解释这些了。如果觉得看不太明白，可以先从系列的开始看起。

 

接下来在update方法的开始添加以下代码：

 

// 1

if(_gameOver)return;

 

// 2

if(CGRectIntersectsRect(_exit.boundingBox, _tank.boundingBox)){

[self endScene:kEndReasonWin];

}

 

// 3

NSMutableArray* childrenToRemove =[NSMutableArray array];

// 4

for(CCSprite * sprite in self.batchNode.children){

// 5

if(sprite.tag !=0){// bullet    

// 6      

if([self isWallAtPosition:sprite.position]){

[childrenToRemove addObject:sprite];

continue;

}

// 7

if(sprite.tag ==1){// hero bullet

for(int j = _enemyTanks.count -1; j >=0; j--){

                Tank *enemy =[_enemyTanks objectAtIndex:j];

if(CGRectIntersectsRect(sprite.boundingBox, enemy.boundingBox)){

 

[childrenToRemove addObject:sprite];

                    enemy.hp--;

if(enemy.hp <=0){

[[SimpleAudioEngine sharedEngine] playEffect:@"explode3.wav"];

                        _explosion.position = enemy.position;

[_explosion resetSystem];

[_enemyTanks removeObject:enemy];

[childrenToRemove addObject:enemy];

}else{

[[SimpleAudioEngine sharedEngine] playEffect:@"explode2.wav"];

}

}

}

}

// 8

if(sprite.tag ==2){// enemy bullet               

if(CGRectIntersectsRect(sprite.boundingBox, self.tank.boundingBox)){

[childrenToRemove addObject:sprite];

                self.tank.hp--;

 

if(self.tank.hp <=0){

[[SimpleAudioEngine sharedEngine]playEffect:@"explode2.wav"];                       

                    _explosion.position = self.tank.position;

[_explosion resetSystem];

[self endScene:kEndReasonLose];

}else{

                    _explosion2.position = self.tank.position;

[_explosion2 resetSystem];

[[SimpleAudioEngine sharedEngine] playEffect:@"explode1.wav"];                       

}

}

}

}

}

for(CCSprite * child in childrenToRemove){

[child removeFromParentAndCleanup:YES];

}

 

以上就是碰撞检查和游戏机制，这里稍微解释下：

 

1.开始记录游戏的状态，游戏是否结束。如果游戏已结束则无需做任何事。

2.如果坦克碰到出口，则玩家赢得胜利！

3.开始碰撞检测，有时候有的精灵在碰撞后需要从屏幕中删除（例如，当炮弹碰到坦克或障碍的时候，会被删除）。

4.对炮弹精灵设置标记，从而可以轻松将其识别

5.如果在炮弹的位置有障碍，则移除炮弹。

6.如果炮弹是由坦克英雄发射的，则检查它是否击中了敌军坦克，如果是，则将敌军坦克的HP减少（如果HP<=0则将其销毁）。同时还播放一个音效，以及激活一个爆炸的粒子系统。

7.与之类似，如果是敌军坦克发射的炮弹，则检查是否击中了坦克英雄，并进行相应的操作。当玩家的HP达到0时游戏以失败告终。

 

最后一步，在accelerometer:didAccelerate,ccTouchesBegan和ccTouchesMoved方法的前面添加以下代码：

if(gameOver) return;

 

编译运行游戏，现在就可以尽情的坦克大战了！