<cocos2dx for wp7>使用cocos2dx制作基于Tile地图的游戏：加入敌人和战斗（三）

本教程基于子龙山人翻译的cocos2d的IPHONE教程，用cocos2d-x for XNA引擎重写，加上我一些加工制作。教程中大多数文字图片都是原作者和翻译作者子龙山人，还有不少是我自己的理解和加工。感谢原作者的教程和子龙山人的翻译。本教程仅供学习交流之用，切勿进行商业传播。

子龙山人翻译的Iphone教程地址：http://www.cnblogs.com/andyque/archive/2011/05/07/2039481.html

Iphone教程原文地址：http://geekanddad.wordpress.com/2010/06/22/enemies-and-combat-how-to-make-a-tile-based-game-with-cocos2d-part-3/

程序截图：

这篇教程是《使用cocos2d-x制作基于Tile地图的游戏》系列教程的后续。如果你还没有看过前面两部分的教程，可以在我的博客上找到另外两篇教程。

　　在第二部分教程中，Ray教大家如何在地图中制作可碰撞的区域，如何使用tile属性，如何制作可以拾取的物品以及如何动态修改地图、如何使用“Heads　up　display”来显示分数。 

　　在这个教程中，我们将加入敌人，这样的话，你的忍者就可以向它们扔飞镖啦，同时还增加了胜利和失败的游戏逻辑。但是，首先，你得下载一些相关的资源文件。 

　　这个zip文件里面包含以下内容：

　　　　１.一个敌人精灵 

　　　　２.一个忍者飞镖

　　　　３.两张按钮的图片，在教程的后面有使用。

　　在继续学习之前，不要忘了把这些资源加入到你的工程中。

增加敌人

　　到第二部分教程结束的时候，游戏已经很酷了，但是它还不是一个完整的游戏。你的忍者可以轻而易举地四处游荡，想吃就吃。但是，什么时候玩家会胜利或者失败呢。我们不妨想象一下，有２个敌人在追杀你的忍者，那么这个游戏会显得更加有趣。

敌人出现的位置点

　　好了，回到Tiled软件，然后打开你的Tile地图（TileMap.tmx）。

　　往对象层中加入一个对象，在player附近就行，但是不要太近，否则敌人一出现玩家就Game　over了。这个位置将成为敌人出现的位置点，把它命名为“EnemySpawn1”。

     对象组（对象层中的所有对象组成一个对象组）中的对象被存储在一个List<Dictionary>中，同时使用对象名字作为value。这意味着每一个位置点必须有一个唯一的名字。尽管我们可以遍历所有的Dictionary是否有value是以“EnemySpawn”开头，但是这样做效率很低下。相反，我们采用的做法是，使用一个属性来表示，每个给定的对象代表一个敌人出现的位置点。

　　给这个对象一个属性“Enemy”，同时赋一个值１.如果你想在这个教程的基础上扩展，并且增加其它的不同类型的敌人，你可以使用这些敌人的属性值来表示不同类型的敌人。

　　现在，制作６-１０个这种敌人出现位置点对象，相应的它们离player的距离也要有一些不同。为每一个对象定义一个“Enemy”属性，并且赋值为１.保存这张地图并且更新到工程中。

　　

　　

开始创建敌人

　　好了，现在我们将把敌人实际显示到地图上来。首先在TileMapLayer类中添加如下方法：

        void addEnemyAtXY(int x, int y)
        {
            CCSprite enemy = CCSprite.spriteWithFile("images/enemy1");
            enemy.position = new CCPoint(x, y);
            this.addChild(enemy);
        }

并且在init里面的添加player的if语句后面添加：

                    if (item.ContainsValue("EnemySpawn1"))
                    {
                        int ex =  Convert.ToInt32(item["x"]);
                        int ey = Convert.ToInt32(item["y"]);
                        this.addEnemyAtXY(ex, ey);
                    }

　　循环遍历对象列表，判断是否是敌人对象，如果是，则获得它的x和y坐标值，然后调用addEnemyAtXY方法把它们加入到合适的地方去。

　　这个addEnemyAtXY方法非常直白，它仅仅是在传入的X，Y坐标值处创建一个敌人精灵。

　　如果你编译并运行，你会看到这些敌人出现在你之前在Tiled工具中设定的位置处，很酷吧！

 

　　但是，这里有一个问题，这些敌人很傻瓜，它们并不会追杀你的忍者。

使它们移动

　　因此，现在我们将添加一些代码，使这些敌人会追着我们的player跑。因为，player肯定会移动，我们必须动态地改变敌人的运动方向。为了实现这个目的，我们让敌人每次移动１０个像素，然后在下一次移动之前，先调整它们的方向。在TileMapLayer类中加入如下代码：

        /// <summary>
        /// callback, starts another iteration of enemy movement
        /// </summary>
        /// <param name="sender"></param>
        void enemyMoveFinished(object sender)
        {
            CCSprite enemy = sender as CCSprite;
            this.animateEnemy(enemy);
        }

        /// <summary>
        /// a method to move enemy 10 pixls toward the player
        /// </summary>
        /// <param name="enemy"></param>
        void animateEnemy(CCSprite enemy)
        { 
            //speed of the enemy
            float acturalDuration = 0.3f;
            var actionMove = CCMoveBy.actionWithDuration(acturalDuration, CCPointExtension.ccpMult(
                CCPointExtension.ccpNormalize(
                CCPointExtension.ccpSub(player.position, enemy.position)), 10));
            var actionMoveDone = CCCallFuncN.actionWithTarget(this, enemyMoveFinished);
            enemy.runAction(CCSequence.actions(actionMove, actionMoveDone));
        }

并且在addEnemyAtXY方法最后添加：

this.animateEnemy(enemy);

　　animateEnemy：方法创建两个action。第一个action使之朝敌人移动１０个像素，时间为０.３秒。你可以改变这个时间使之移动得更快或者更慢。第二个action将会调用enemyMoveFinished：方法。我们使用CCSequence　action来把它们组合起来，这样的话，当敌人停止移动的时候就立马可以执行enemyMoveFinished:方法就可以被调用了。在addEnemyAtX:Y:方法里面，我们调用animateEnemy:方法来使敌人朝着玩家（player）移动。（其实这里是个递归的调用，每次移动10个像素，然后又调用enemyMoveFinished:方法）

很简洁！但是，但是，如果敌人每次移动的时候面部都对着player那样是不是更逼真呢？只需要在animateEnemy:方法中加入下列语句即可：

            //immediately before creating the actions in animateEnemy
            //rotate to face the player 
            CCPoint diff = CCPointExtension.ccpSub(player.position, enemy.position);
            double angleRadians = Math.Atan((double)(diff.y / diff.x));
            float angleDegrees = MathHelper.ToDegrees((float)angleRadians);
            float cocosAngle = -1 * angleDegrees;
            if (diff.x < 0)
            {
                cocosAngle += 180;
            }
            enemy.rotation = cocosAngle;

这个代码计算每次玩家相对于敌人的角度，然后旋转敌人来使之面朝玩家。

满屏的怪物，似乎怪物设置得有点多了。。

忍者飞镖

　　已经很不错了，但是玩家是一个忍者啊！他应该要能够保护他自己！

　　我们将向游戏中添加模式（modes）。模式并不是实现这个功能的最好方式，但是，它比其他的方法要简单，而且这个方法在模拟器下也能运行（因为并不需要多点触摸）。因为这些优点，所以这个教程里面，我们使用这种方法。首先将会建立UI，这样的话玩家可以方便地在“移动模式”和“掷飞镖”模式之间进行切换。我们将增加一个按钮来使用这个功能的转换。（即从移动模式转到掷飞镖模式）。

　　现在，我们将增加一些属性，使两个层之间可以更好的通信。在TileMapHud类里面增加如下代码：

        int _mode = 0;
        public int mode { 
            get {
                return _mode;
            } 
        }
        /// <summary>
        /// callback for the button
        /// mode 0 = moving mode
        /// mode 1 = ninja star throwing mode
        /// </summary>
        /// <param name="sender"></param>
        void projectileButtonTapped(object sender)
        {
            if (_mode == 1)
            {
                _mode = 0;
            }
            else
                _mode = 1;
        }

    //in the init method
         CCMenuItem on = CCMenuItemImage.itemFromNormalImage(@"images/projectile-button-on", @"images/projectile-button-on");
            CCMenuItem off = CCMenuItemImage.itemFromNormalImage(@"images/projectile-button-off", @"images/projectile-button-off");
            CCMenuItemToggle toggleItem = CCMenuItemToggle.itemWithTarget(this, projectileButtonTapped, on, off);
            CCMenu toggleMenu = CCMenu.menuWithItems(toggleItem);
            toggleMenu.position = new CCPoint(100, 32);
            this.addChild(toggleMenu);

上面我们做了什么呢，就是添加了一个变量mode作为判断所用。另外添加一个button。

编译并运行。这时会在左下角出现一个按钮，并且你可以打开或者关闭之。但是这并不会对游戏造成任何影响。我们的下一步就是增加飞镖的发射。

发射飞镖

　　接下来，我们将添加一些代码来检查玩家当前处于哪种模式下面，并且在用户点击屏幕的时候影响不同的事件。如果是移动模式则移动玩家，如果是射击模式，则掷飞镖。在ccTouchEnded方法里面增加下面代码：

if (hud.mode ==0) {
// old contents of ccTouchEnded:withEvent:
} else {
// code to throw ninja stars will go here
}

　　这样可以使得移动模式下，玩家只能移动。下一步就是要添加代码使忍者能够发射飞镖。在else部分增加，在增加之前，先在TileMapLayer类中添加一些清理代码：

        void projectileMoveFinished(object sender)
        {
            CCSprite sprite = sender as CCSprite;
            this.removeChild(sprite, true);
        }

好了，看到上面的else部分的注释了吗：

// code to throw ninja stars will go here

在上面的注释后面添加下面的代码：

//code to throw ninja stars will go here
                //Find where the touch is 
                CCPoint touchLocation = touch.locationInView(touch.view());
                touchLocation = CCDirector.sharedDirector().convertToGL(touchLocation);
                touchLocation = this.convertToNodeSpace(touchLocation);

                //Create a projectile and put it at the player's location
                CCSprite projectile = CCSprite.spriteWithFile(@"images/Projectile");
                projectile.position = new CCPoint(player.position.x, player.position.y);
                this.addChild(projectile);

                //Determine where we wish to shoot the projectile to
                float realX;

                //Are we shooting to left or right?
                CCPoint diff = CCPointExtension.ccpSub(touchLocation, player.position);
                if (diff.x > 0)
                {
                    realX = tileMap.MapSize.width * tileMap.TileSize.width + projectile.contentSize.width / 2;
                }
                else
                    realX = -tileMap.MapSize.width * tileMap.TileSize.width - projectile.contentSize.width / 2;
                float ratio = diff.y / diff.x;
                float realY = (realX - projectile.position.x) * ratio + projectile.position.y;
                CCPoint realDest = new CCPoint(realX, realY);

                //Determine the length of how far we're shooting
                float offRealX = realX - projectile.position.x;
                float offRealY = realY - projectile.position.y;
                double length = Math.Sqrt((double)(offRealX * offRealX + offRealY * offRealY));
                float velocity = 480 / 1;//480pixls/1sec
                float realMoveDuration = (float)length / velocity;

                //Move projectile to actual endpoint
                var actionMoveDone = CCCallFuncN.actionWithTarget(this, projectileMoveFinished);
                projectile.runAction(CCSequence.actions(CCMoveTo.actionWithDuration(realMoveDuration,realDest),actionMoveDone));

　　这段代码会在用户点击屏幕的方向发射飞镖。对于这段代码的完整的细节，可以查看我的另一个文章《用cocos2d-x做一个简单的windows phone 7游戏（一）》。当然，查看原作者的文章后面的注释会更加清楚明白一些。

　　projectileMoveFinished:方法会在飞镖移动到屏幕之外的时候移除。这个方法非常关键。一旦我们开始做碰撞检测的时候，我们将要循环遍历所有的飞镖。如果我们不移除飞出屏幕范围之外的飞镖的话，这个存储飞镖的列表将会越来越大，而且游戏将会越来越慢。编译并运行工程，现在，你的忍者可以向敌人投掷飞镖了。

碰撞检测

　　接下来，就是当飞镖击中敌人的时候，要把敌人销毁。

那么，我们应该怎么做呢。我倒想用BOX2D来做碰撞检测，不过常规的碰撞检测也是可以的。这个就提供两个方案吧。

先添加一个类到classes文件夹。命名为GameOverScene，并且使之继承于CCScene。

修改代码如下；

        public GameOverScene(bool isWin)
        {
            string winMsg;
            if (isWin)
            {
                winMsg = "YOU WIN!";
            }
            else
                winMsg = "YOU LOSE!";
            CCLabelTTF label = CCLabelTTF.labelWithString(winMsg, "Arial", 32);
            label.position = new CCPoint(400, 300);
            this.addChild(label);
            this.runAction(CCSequence.actions(CCDelayTime.actionWithDuration(3.0f), CCCallFunc.actionWithTarget(this, gameOverDone)));
        }

        void gameOverDone()
        {
            TileMapScene pScene = new TileMapScene();
            CCDirector.sharedDirector().replaceScene(pScene);
        }
    }

这样，就完成了GameOverScene了。上面的代码很清楚了。就是添加一个label，并且在延时3秒后跳转到游戏界面。

PART1：BOX2D检测

　　这个部分，我们用BOX2D来做碰撞检测，如果你对BOX2D不了解，可以看我博客里面的<cocos2d-x for wp7>在cocos2d-x里面使用BOX2D和<cocos2d-x for wp7>使用box2d来做碰撞检测（且仅用来做碰撞检测）。

　　具体添加代码方法看<cocos2d-x for wp7>使用box2d来做碰撞检测（且仅用来做碰撞检测）。其实是差不多的。我在这里大概说下我做了什么，后面也会提供一个示例代码。

　　首先，我添加了和碰撞检测文章中一样的声明，世界的创建等操作，为player，projectile，enemy都添加了tag以便碰撞检测，并且也添加了一样的addBoxBodyForSprite方法。tick方法。在碰撞检测上面做了一样的操作。当player和enemy碰撞的时候跳转到GameOverScene显示YOU LOSE。在setPlayerPosition里面搜集食物处添加检测，如果搜集数为8，就跳转显示YOU WIN。（我数了下我地图上的个数为8）。

　　这样，就完成了。BOX2D做检测还真是方便。示例代码下载：http://dl.dbank.com/c0rr5l1b7p

PART2：普通方式检测

 　　普通方式就是指用精灵的position和contentSize生成一个矩形做检测。

　　那么，先往TileMapLayer类里面添加变量声明：

        List<CCSprite> enemies;
        List<CCSprite> projectiles;

然后在init里面初使化list：

            //init the list
            enemies = new List<CCSprite>();
            projectiles = new List<CCSprite>();

然后在addEnemyAtXY方法的结尾添加如下代码：

enemies.Add(enemy);

接着，在TileMapLayer类中添加如下代码：

        void testCollision(float dt)
        {
            List<CCSprite> projectilesToDelete = new List<CCSprite>();
            List<CCSprite> targetToDelete = new List<CCSprite>();
            //iterate through projectiles
foreach (var projectile in projectiles)
            {
                CCRect projectileRect = new CCRect(
                    projectile.position.x - projectile.contentSize.width / 2,
                    projectile.position.y - projectile.contentSize.height / 2,
                    projectile.contentSize.width,
                    projectile.contentSize.height);
                
                //iterate through enemies,see if any intersect with current projectile
                foreach (var target in enemies)
                {
                    CCRect targetRect = new CCRect(
                        target.position.x - target.contentSize.width / 2,
                        target.position.y - target.contentSize.width / 2,
                        target.contentSize.width,
                        target.contentSize.height);
                    if (CCRect.CCRectIntersetsRect(projectileRect,targetRect))
                    {
                        targetToDelete.Add(target);
                    }
                }

                //delete all hit enemies
                foreach (var target in targetToDelete)
                {
                    enemies.Remove(target);
                    this.removeChild(target,true);
                }
                if (targetToDelete.Count > 0)
                {
                    //add the projectile to the list of ones to remove
                    projectilesToDelete.Add(projectile);
                }
                targetToDelete.Clear();
            }

            //remove all the projectiles that hit
            foreach (var projectile in projectilesToDelete)
            {
                projectiles.Remove(projectile);
                this.removeChild(projectile, true);
            }
            projectilesToDelete.Clear();
        }

然后添加以下代码：

// at the end of the launch projectiles section of ccTouchEnded:withEvent:
projectiles.Add(projectile);

// at the end of projectileMoveFinished:
projectiles.Remove(sprite);

//in the init
this.schedule(testCollision);

　　上面的所有的代码，关于具体是如何工作的，可以在我的博客上查找《用cocos2d-x做一个简单的windows phone 7游戏（一）》教程。当然，原作者的文章注释部分的讨论更加清晰，所以我翻译的教程，也希望大家多讨论啊。代码尽量自己用手敲进去，不要为了省事，alt+c,alt+v，这样不好，真的！

　　好了，现在可以用飞镖打敌人，而且打中之后它们会消失。现在让我们添加一些逻辑，使得游戏可以胜利或者失败吧!

添加一个方法：

        void gameOver(bool isWin)
        {
            GameOverScene gameOverScene = new GameOverScene(isWin);
            CCDirector.sharedDirector().replaceScene(gameOverScene);
        }

 然后在setPlayerPosition里面搜集食物处添加检测，如果搜集数为8，就跳转显示YOU WIN。（我数了下我地图上的个数为8）。

                        if (numCollected == 2)
                        {
                            gameOver(true);
                        }

就这个教程而言，我们的玩家只要有一个敌人碰到他，游戏是结束了。在类的testCollision方法中添加以列循环：

            foreach (var target in enemies)
            {
                CCRect targetRect = new CCRect(
                    target.position.x - target.contentSize.width / 2,
                    target.position.y - target.contentSize.width / 2,
                    target.contentSize.width,
                    target.contentSize.height);
                if (CCRect.CCRectContainsPoint(targetRect, player.position))
                {
                    gameOver(false);
                }
            }

编译并运行，得到预期效果。

　　示例代码：http://dl.dbank.com/c0xy82fc3w

接下来怎么做？

建议：

• 增加多个关卡
• 增加不同类型的敌人
• 在Hud层中显示血条和玩家生命
• 制作更多的道具，比如加血的，武器等等
• 一个菜单系统，可以选择关卡，关闭音效，等等
• 使用更好的用户界面，来使游戏画面更加精美，投掷飞镖更加潇洒。

另外，继续：<cocos2d-x for wp7>使用cocos2d-x制作基于Tile地图的游戏：不一样的战斗（回合制战斗）（四）。