如何使用cocos2dx3.0制作基于tilemap的游戏:第二部分

2014.10.25 技术干货 by cocos

引言

程序截图:

这篇教程是《如何使用cocos2dx3.0制作基于tilemap的游戏》的第二部分。在上一个教程中,我们创建了一个简单的基于tiled地图的游戏,里面有一个忍者在沙漠里寻找可口的西瓜!

第一部分教程中,我们介绍了如何基于tiled创建地图,怎样把地图增加到游戏中去,以及如何滚动地图来跟随主角移动、还有如何使用对象层。

在这部分教程中,我们将会介绍如何在地图中制作可以碰撞的区域,如何使用tile属性,如果收集游戏物品并且动态地修改地图、如何确保你的忍者不会吃得太饱!

因此,让我们继续我们上篇教程所学并且让它更像一个真实的游戏吧!

tiled地图和碰撞检测

你可能已经注意到了,目前我们的忍者可以毫无阻拦地穿过墙壁和障碍物。他是一个忍者,但是即使是真正的忍者,他也没这么厉害啊!

因此,我们需要找到一种方法,通过把一些tile标记成“可碰撞的”,这样的话,我们就可以防止玩家穿过那些点的位置。有很多方法可以做得到(包括使用对象层),但是,我想向你们展示一种新的技术。我认为它更高效,并且也是一次好的学习锻炼–使用一个元层(meta layer)和层属性。

让我们开始动手吧!再一次启动Tiled软件,点击“Layer\Add tile Lyaer…”,并且命名为“Meta”,然后选择OK。我们将在这个层里面加入一些假的tile代表一些“特殊tile”。

因此,现在我们需要增加我们的特殊tile。点击“Map\New tileset…”,在你的Resources文件夹下面找到mate_tiles.png,然后选择打开。设置Margin和Spacing都为1并点击OK。

这时,你可以在Tilesets区域看到一个新的标签。打开它,而且你会看到2个tile:一个红色的和一个绿色的。

这些tile并没有什么特殊的东西–我只是制作了一个简单的图片,里面包含了一个红色的和一个绿色的半透明tile。接下来,我们把红色的tile当作是“可碰撞的”(后面我们会用到绿色的),然后,合适地绘制我们的场景。

因此,确保Meta层被选中,选择”Stamp Brush”工具(菜单上面那个像图章一样的工具),选择红色的tile,然后把任何你不想让忍者通过的地图都涂一遍。当你做完的时候,应该看起来像下面的图示一样:

接下来,我们可以设置tile的属性,这样的话,我们在代码中就可以识别这个tile是“可以碰撞的(穿不过去的)”。在Tileset里面的红色tile上在,右击,选择“Properties…“。增加一个新的属性,叫做”Collidable“,并且设置成”Ture“:

保存map,并返回编译器。在HelloWorldScene.h中做如下改动:

// Inside the HelloWorld class declaration
cocos2d::TMXLayer *_meta;

同时修改HelloWorldScene.cpp文件如下:

// In init, right after loading background
_meta = _tileMap->getLayer("Meta");
_meta->setVisible(false);

// Add new method
Point HelloWorld::tileCoordForPosition(Point position)
{
    int x = position.x / _tileMap->getTileSize().width;
    int y = ((_tileMap->getMapSize().height * _tileMap->getTileSize().height) - position.y) / _tileMap->getTileSize().height;
    return Point(x, y);
}

好了,让我们先停一会儿。像之前一样,我会meta层声明了一个成员变量,而且从tile map中加载了一个引用。注意,我们把这个字当作是不可见的,因为我们并不想看见这些对象,它们的存在只是为了说明,那个区域是可以碰撞的。

接下来,我们增加一个新的帮助方法,这个方法可以帮助我们把x,y坐标转换成”tile坐标“。每一个tile都有一个坐标,从左上角的(0,0)开始,到右下角的(49,49)。(本例中,地图的大小是49×49)

上面的截屏是java版本的tiled界面。能否显示tile的坐标,我不确定这个功能在QT版本的tiled中是否存在(编者表示qt版没有,所以上面的直接引用原教程图)。不管怎么说,我们将要使用的一些功能会使用tile坐标,而不是x,y坐标。因此,我们需要一种方式,将x,y坐标转换成tile坐标。这正是那个函数所需要做的。

获得x坐标非常容易–我们只需要让它除以一个tile的宽度就可以了。为了得到y坐标,我们不得不翻转一些东西,因为,在Cocos2d-x里面(0,0)是在左下角的,而不是在左上角。

接下来,把setPlayerPosition替换成以下内容:

void HelloWorld::setPlayerPosition(Point position)
{
    Point tileCoord = this->tileCoordForPosition(position);
    int tileGid = _meta->getTileGIDAt(tileCoord);
    if (tileGid) {
        auto properties = _tileMap->getPropertiesForGID(tileGid).asValueMap();
        if (!properties.empty()) {
            auto collision = properties["Collidable"].asString();
            if ("True" == collision) {
                return;
            }
        }
    }

    _player->setPosition(position);
}

在这里,我们把玩家的x,y坐标转换成tile坐标。然后,我们使用meta层中的getTileGIDAt方法来获取指定位置点的GID号。

对了,什么是GID呢?GID代表”全球唯一标志符“(我个人意见)。但是,在这个例子中,我认为它只是我们使用的tile的一种标识,它可以是我们想要移动的红色区域。

当我们使用GID来查找指定tile的属性的时候。它返回一个属性字典,因此,我们可以遍历一下,看是否有”可碰撞的“物体被设置成”True“,或者是仅仅就是那样。编译并运行工程,因此还没有设置玩家的位置。

就这么多!编译并运行程序,它将会向你展示,现在你不能够通过那些红色的tile组成的地方了吧:

动态修改Tiled Map

目前为此,我们的忍者已经有一个比较有意思的冒险啦,但是,这个世界有一点点无趣。而且简单无任务事可做!加上,我们的忍者看起来比较贪吃,而且背景将会随着玩家移动而移动。因此,让我们创建一些东西让忍者来玩吧!

为了使之可行,我将不得不创建一个前景层,这样做可以让用户收集东西。那样的话,我们仅仅从前景层中删除不用的tile(当tile被玩角拾取的时候),这个过程中,背景将会随之移动。

因此,打开Tiled,选择”Layer\Add Tile Layer…“,把这个层命名为”Foreground“,然后选择OK。确保前景层被选择,而且增加一对可以拾取的物品在游戏中。我喜欢放置一些向西瓜或者别的什么东西。

现在,我们需要把这些tile标记成可以拾取的,类似的,参照我们是如何把tile标志成可以碰撞的。选择Meta层,转换到Meta_tiles。现在,我们需要使这些tile可以拾取,点击”Layer\Move Layer Up“来确保你的meta层是在最顶层,并且保持绿色可见的。

接下来,我们需要为tile增加属性,这样把它标记成可拾取的。点键点击Tilesets选项卡里的绿色的tile,然后点“Properties…”,再增加一个新的属性,命名为“Collectable”,值设置为“True”。

保存地图,然后返回到编译器。在HelloWorldScene.h中做如下修改:

// Inside the HelloWorld class declaration
cocos2d::TMXLayer *_foreground;

同时,相应地修改HelloWorldScene.cpp:

// In init, right after loading background
_foreground = _tileMap->getLayer("Foreground");

// Add to setPlayerPosition, right after the if clause with the return in it
auto collectable = properties["Collectable"].asString();
if ("True" == collectable) {
    _meta->removeTileAt(tileCoord);
    _foreground->removeTileAt(tileCoord);

    this->_numCollected++;
    this->_hud->numCollectedChanged(_numCollected);
}

这里是一个常用的方法,用来保存前景层的句柄。不同之处在于,我们测试玩家正朝之移动的tile是否含有“Collectable”属性。如果有,我们就使用removeTileAt方法来把tile从mata层和前景层中移除掉。编译并运行工程,现在你的忍者可以尝尝西瓜的滋味啦!

创建一个计分器

我们忍者非常高兴地吃西瓜啦,但是,作为一个游戏玩家,我们想知道自己到底吃了多少个西瓜。你懂的,我们并不想让他吃得太胖。

通常的做法是,我们在层上面添加一个label。但是,等一下:我们在不停地移动这个层,那样的话,label就会看不到了,怎么办?

这是一个非常好的机会,如果在一个场景中使用多个层–这正是我们现在面临的难题。我们将保留HelloWorld层,但是,我们会再增加一个HelloWorldHud层来显示我们的label。(Hud意味着Heads up display,大家可以google一下,游戏中常用的技术)

当然,这两个层之间需要一种方式联系起来–Hud层应该知道什么时候忍者吃了一个西瓜。有许许多多的方式可以使2个不同的层相互通信,但是,我只介绍最简单的。我们在HelloWorld层里面保存一个HelloWorldHud层的句柄,这样的话,当忍者吃了一个西瓜就可以调用Hud层的一个方法来进行通知。

因此,在HelloWorldScene.h里面增加下面的代码:

// Before HelloWorld class declaration
class HelloWorldHud : public cocos2d::Layer
{
public:
    void numCollectedChanged(int numCollected);
    virtual bool init();
    CREATE_FUNC(HelloWorldHud);

    cocos2d::LabelTTF *label;
};

// Inside HelloWorld class declaration
int _numCollected;
static HelloWorldHud *_hud;

复制代码

同样的,修改HelloWorldScene.cpp文件:

// At top of file
HelloWorldHud *HelloWorld::_hud = NULL;

// implement some methods of HelloWorldHud
bool HelloWorldHud::init()
{
    if (!Layer::init())
    {
        return false;
    }

    auto visibleSize = Director::getInstance()->getVisibleSize();
    label = LabelTTF::create("0", "fonts/Marker Felt.ttf", 18.0f, Size(50, 20), TextHAlignment::RIGHT);
    label->setColor(Color3B(0, 0, 0));
    int margin = 10;
    label->setPosition(visibleSize.width - (label->getDimensions().width / 2) - margin,
        label->getDimensions().height / 2 + margin);
    this->addChild(label);

    return true;
}

void HelloWorldHud::numCollectedChanged(int numCollected)
{
    char showStr[20];
    sprintf(showStr, "%d", numCollected);
    label->setString(showStr);
}

// Add to the HelloWorld::createScene() method, right before the return
auto hud = HelloWorldHud::create();
_hud = hud;

scene->addChild(hud);

// Add inside setPlayerPosition, in the case where a tile is collectable
this->_numCollected++;
this->_hud->numCollectedChanged(_numCollected);

一切很明了。我们的第二个层从Layer派生,只是在它的右下角加了一个label。我们修改scene把第二个层也添加进去,然后传递一个Hud类的引用给HelloWorld层。然后修改HelloWorldLayer层,当计数器改变的时候,就调用Hud类的方法,这样就可以相应地更新Hud类了。

编译并运行,如果一切ok,你将会在屏幕右下角看到统计忍者吃西瓜的Label。

来点音效和音乐

如果没有很cool的音效和背景音乐的话,这就不能算作是一个完整的游戏教程了。

增加音效和音乐非常简单,只需在HelloWolrdScene.cpp作如下修改:

// At top of file
#include "SimpleAudioEngine.h"
using namespace CocosDenshion;

// At top of init for HelloWorld layer
SimpleAudioEngine::getInstance()->preloadEffect("pickup.mp3");
SimpleAudioEngine::getInstance()->preloadEffect("hit.mp3");
SimpleAudioEngine::getInstance()->preloadEffect("move.mp3");
SimpleAudioEngine::getInstance()->playBackgroundMusic("TileMap.mp3", true);

// In case for collidable tile
SimpleAudioEngine::getInstance()->playEffect("hit.mp3");

// In case of collectable tile
SimpleAudioEngine::getInstance()->playEffect("pickup.mp3");

// Right before setting player position
SimpleAudioEngine::getInstance()->playEffect("move.mp3");

现在,我们的忍者可以开怀大吃了!

何去何从?

通过这个教程的学习,你对cocos2d里面的tiled map的使用,应该有一个非常好的理解了。这里有这个教程的完整源代码。

接下来,是原作者的一个朋友写的,这个系列教程的终结版:《如何使用cocos2dx3.0制作基于tilemap的游戏:第三部分·完》————加入敌人和战斗。

 

程序截图:

这篇教程是Ray Wenderlich的《如何使用cocos2d制作基于tiled地图的游戏》系列教程的后续。如果你还没有看过前面两部分的教程,可以在本站找到另外两篇子龙山人翻译我改编的Ray的教程。

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

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

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

1. 一个敌人精灵
2. 一个忍者飞镖,从Ray的《如何使用cocos2d制作一个简单的iphone游戏》中拿过来的。
3. 两张按钮的图片,在教程的后面有使用。

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

增加敌人

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

敌人出现的位置点

好了,回到Tiled软件,然后打开你的Tile地图(TileMap.tmx)。

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

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

给这个对象一个属性“Enemy”,同时赋一个值1。如果你想在这个教程的基础上扩展,并且增加其它的不同类型的敌人,你可以使用这些敌人的属性值来表示不同类型的敌人。现在,制作6-10个这种敌人出现位置点对象,相应的它们离player的距离也要有一些不同。为每一个对象定义一个“Enemy”属性,并且赋值为1。保存这张地图并且回到编译器。

开始创建敌人

好了,现在我们将把敌人实际显示到地图上来。首先在HelloWorldScene.cpp中添加如下代码:

//in the HelloWorld class
void HelloWorld::addEnemyAtPos(Point pos)
{
    auto enemy = Sprite::create("enemy1.png");
    enemy->setPosition(pos);
    this->addChild(enemy);
}

// in the init method - after creating the player
// iterate through objects, finding all enemy spawn points
// create an enemy for each one
for (auto& eSpawnPoint : objects->getObjects()) {
    ValueMap& dict = eSpawnPoint.asValueMap();
    if (dict["Enemy"].asInt() == 1) {
        x = dict["x"].asInt();
        y = dict["y"].asInt();
        this->addEnemyAtPos(Point(x,y));
    }
}

第一个循环遍历对象列表,判断它是否是一个敌人出现的位置点。如果是,则获得它的x和y坐标值,然后调用addEnemyAtPos方法把它们加入到合适的地方去。

这个addEnemyAtPos方法非常直白,它仅仅是在传入的Point坐标值处创建一个敌人精灵。如果你编译并运行,你会看到这些敌人出现在你之前在Tiled工具中设定的位置处,很酷吧!

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

使它们移动

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

// callback. starts another iteration of enemy movement.
void HelloWorld::enemyMoveFinished(Object *pSender)
{
    Sprite *enemy = (Sprite *)pSender;

    this->animateEnemy(enemy);
}

// a method to move the enemy 10 pixels toward the player
void HelloWorld::animateEnemy(Sprite *enemy)
{
    // speed of the enemy
    float actualDuration = 0.3f;

    // Create the actions
    auto position = (_player->getPosition() - enemy->getPosition()).normalize()*10;
    auto actionMove = MoveBy::create(actualDuration, position);
    auto actionMoveDone = CallFuncN::create(CC_CALLBACK_1(HelloWorld::enemyMoveFinished, this));
    enemy->runAction(Sequence::create(actionMove, actionMoveDone, NULL));
}

// add this at the end of addEnemyAtPos
// Use our animation method and
// start the enemy moving toward the player
this->animateEnemy(enemy);

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

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

//immediately before creating the actions in animateEnemy
//rotate to face the player
auto diff = ccpSub(_player->getPosition(), enemy->getPosition());
float angleRadians = atanf((float)diff.y / (float)diff.x);
float angleDegrees = CC_RADIANS_TO_DEGREES(angleRadians);
float cocosAngle = -1 * angleDegrees;
if (diff.x < 0) {
    cocosAngle += 180;
}
enemy->setRotation(cocosAngle);

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

忍者飞镖

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

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

现在,我们将增加一些属性,使两个层之间可以更好的通信。在HelloWorldScene.h里面增加如下代码:

// at the top of the file add a forward declaration for HelloWorld,
// because our two layers need to reference each other

class HelloWorld;

// inside the HelloWorldHud class declaration
HelloWorld *_gameLayer;

// Inside the HelloWorld class declaration
CC_SYNTHESIZE(int, _mode, Mode);

同时修改HelloWorldScene.cpp文件

// in HelloWorld's init method
_mode =0;

//replace following two lines with CC_SYNTHESIZE
//private:
//  HelloWorld *_gameLayer;
CC_SYNTHESIZE(HelloWorld *, _gameLayer, GameLayer);

// in HelloWorld's createScene method
// after _hud = hud;
_hud->setGameLayer(layer);

在HelloWorldScene.cpp中添加下面的代码,这段代码定义了一个按钮。

// in HelloWorldHud's init method
// define the button
MenuItem *on = MenuItemImage::create("projectile-button-on.png", "projectile-button-on.png");
MenuItem *off = MenuItemImage::create("projectile-button-off.png", "projectile-button-off.png");

auto toggleItem = MenuItemToggle::createWithCallback(CC_CALLBACK_1(HelloWorldHud::projectileButtonTapped, this), off, on, NULL);
auto toggleMenu = Menu::create(toggleItem, NULL);
toggleMenu->setPosition(on->getContentSize().width * 2, on->getContentSize().height / 2);
this->addChild(toggleMenu);

// in HelloWorldHud
//callback for the button
//mode 0 = moving mode
//mode 1 = ninja star throwing mode
void HelloWorldHud::projectileButtonTapped(Object *pSender)
{
    if (_gameLayer->getMode() == 1) {
        _gameLayer->setMode(0);
    }
    else {
        _gameLayer->setMode(1);
    }
}

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

发射飞镖

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

if (_mode ==0) {
// old contents of onTouchEnded
} else {
// code to throw ninja stars will go here
}

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

void HelloWorld::projectileMoveFinished(Object *pSender)
{
    Sprite *sprite = (Sprite *)pSender;
    this->removeChild(sprite);
}

好了,看到上面的else部分的注释了吗:

// code to throw ninja stars will go here

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

这段代码会在用户点击屏幕的方向发射飞镖。对于这段代码的完整的细节,可以查看我改编的另一个文章《如何用Cocos2d-x3.0制作一款简单的游戏:第一部分》。当然,查看原作者的文章后面的注释会更加清楚明白一些。

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

碰撞检测

接下来,就是当飞镖击中敌人的时候,要把敌人销毁。在HelloWorld Class类中增加以下变量(在HelloWorldScene.h文件中):

cocos2d::Vector<cocos2d::Sprite *> _enemies;
cocos2d::Vector<cocos2d::Sprite *> _projectiles;

然后初使化_projectiles数组:

// at the end of the launch projectiles section of onTouchEnded:
_projectiles.pushBack(projectile);

// at the end of projectileMoveFinished:
_projectiles.eraseObject(sprite);

然后在addEnemyAtPos方法的结尾添加如下代码:

_enemies.pushBack(enemy);

接着,在HelloWorld类中添加如下代码:

void HelloWorld::testCollisions(float dt)
{
    Vector<Sprite*> projectilesToDelete;

    // iterate through projectiles
    for (Sprite *projectile : _projectiles) {
        auto projectileRect = Rect(
            projectile->getPositionX() - projectile->getContentSize().width / 2,
            projectile->getPositionY() - projectile->getContentSize().height / 2,
            projectile->getContentSize().width,
            projectile->getContentSize().height);

        Vector<Sprite*> targetsToDelete;

        // iterate through enemies, see if any intersect with current projectile
        for (Sprite *target : _enemies) {
            auto targetRect = Rect(
                target->getPositionX() - target->getContentSize().width / 2,
                target->getPositionY() - target->getContentSize().height / 2,
                target->getContentSize().width,
                target->getContentSize().height);

            if (projectileRect.intersectsRect(targetRect)) {
                targetsToDelete.pushBack(target);
            }
        }

        // delete all hit enemies
        for (Sprite *target : targetsToDelete) {
            _enemies.eraseObject(target);
            this->removeChild(target);
        }

        if (targetsToDelete.size() > 0) {
            // add the projectile to the list of ones to remove
            projectilesToDelete.pushBack(projectile);
        }
        targetsToDelete.clear();
    }

    // remove all the projectiles that hit.
    for (Sprite *projectile : projectilesToDelete) {
        _projectiles.eraseObject(projectile);
        this->removeChild(projectile);
    }
    projectilesToDelete.clear();
}

最后,调度testCollisions:方法,把这些代码加在HelloWorld类的init方法中。

this->schedule(schedule_selector(HelloWorld::testCollisions));

上面的所有的代码,关于具体是如何工作的,可以在本站查找《如何用Cocos2d-x3.0制作一款简单的游戏:第一部分》教程。当然,原作者的文章注释部分的讨论更加清晰。代码尽量自己用手敲进去,不要为了省事,alt+c,alt+v,这样不好,真的!

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

胜利和失败

The Game Over Scene

好了,让我们创建一个新的场景,来作为我们的“You Win”或者“You Lose”指示器吧。在vs里创建GameOverScene类。

然后用下面的代码替换掉模板生成的GameOverScene.h的代码:

#include "cocos2d.h"

class GameOverLayer : public cocos2d::LayerColor
{
public:
    GameOverLayer() :_label(NULL) {};
    virtual ~GameOverLayer();
    bool init();
    CREATE_FUNC(GameOverLayer);

    void gameOverDone();

    CC_SYNTHESIZE_READONLY(cocos2d::LabelTTF*, _label, Label);
};

class GameOverScene : public cocos2d::Scene
{
public:
    GameOverScene() :_layer(NULL) {};
    ~GameOverScene();
    bool init();
    CREATE_FUNC(GameOverScene);

    CC_SYNTHESIZE_READONLY(GameOverLayer*, _layer, Layer);
};

相应地修改GameOverScene.cpp文件:

#include "GameOverScene.h"
#include "HelloWorldScene.h"
USING_NS_CC;


bool GameOverScene::init()
{
    if (Scene::init())
    {
        this->_layer = GameOverLayer::create();
        this->_layer->retain();
        this->addChild(_layer);

        return true;
    }
    else
    {
        return false;
    }
}

GameOverScene::~GameOverScene()
{
    if (_layer)
    {
        _layer->release();
        _layer = NULL;
    }
}

bool GameOverLayer::init()
{
    if (LayerColor::initWithColor(Color4B(255, 255, 255, 255)))
    {
        auto winSize = Director::getInstance()->getWinSize();
        this->_label = LabelTTF::create("", "Artial", 32);
        _label->retain();
        _label->setColor(Color3B(0, 0, 0));
        _label->setPosition(Point(winSize.width / 2, winSize.height / 2));
        this->addChild(_label);

        this->runAction(Sequence::create(
            DelayTime::create(3),
            CallFunc::create(CC_CALLBACK_0(GameOverLayer::gameOverDone, this)),
            NULL));

        return true;
    }
    else
    {
        return false;
    }
}

void GameOverLayer::gameOverDone()
{
    Director::getInstance()->replaceScene(HelloWorld::createScene());
}

GameOverLayer::~GameOverLayer()
{
    if (_label)
    {
        _label->release();
        _label = NULL;
    }
}

GameOverLayer仅仅只是在屏幕中间旋转一个label,然后调度一个transition隔3秒后回到HelloWorld场景中。

胜利场景

现在,让我们添加一些代码,使得玩家吃完所有的西瓜的时候,游戏会结束。在HelloWorld类的setPlayerPositoin:方法中添加以下代码,(位于HelloWorldScene.cpp中,就是_numCollected++后面:)

// put the number of melons on your map in place of the '2'
if (_numCollected == 2) {
    this->win();
}

然后,在HelloWorld类中创建win方法:

void HelloWorld::win()
{
    GameOverScene *gameOverScene = GameOverScene::create();
    gameOverScene->getLayer()->getLabel()->setString("You Win!");
    Director::getInstance()->replaceScene(gameOverScene);
}

不要忘了包含头文件:

#include "GameOverScene.h"

编译并运行,当你吃完所有的西瓜后,就会出现如下画面:

失败场景

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

for (Sprite *target : _enemies) {
    auto targetRect = Rect(
        target->getPosition().x - (target->getContentSize().width / 2),
        target->getPosition().y - (target->getContentSize().height / 2),
        target->getContentSize().width,
        target->getContentSize().height);
    if (targetRect.containsPoint(_player->getPosition())) {
        this->lose();
    }
}

这个循环遍历所有的敌人,只要有一个敌人精灵的图片所在的矩形和玩家接触到了,那么游戏就失败了。接下,再创建lose方法:

void HelloWorld::lose()
{
    GameOverScene *gameOverScene = GameOverScene::create();
    gameOverScene->getLayer()->getLabel()->setString("You Lose!");
    Director::getInstance()->replaceScene(gameOverScene);
}

编译并运行,一旦有一个敌人碰到你,你就会看到下面的场景:

完整源代码

这里有这个教程的完整源代码。谢谢你们有耐心看到这里。

接下来怎么做?

建议:

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