2013年11月17日 星期日

如何制作一個簡單的遊戲 Cocos2d-x 2.0.4

http://rritw.com/a/bianchengyuyan/C__/20121207/268125.html

    本文實踐自 Ray Wenderlich 的文章《How To Make A Simple iPhone Game with Cocos2D 2.X Tutorial》, 文中使用Cocos2D,我在這裏使用Cocos2D-x 2.0.4進行學習和移植,前者是用Object-C所寫,所以移植到Cocos2D-x會有些差異,比如某些函數、某些功能不能跟原文一样直接實現,需 另轉換方法實現。之前已經對Cocos2D-x的安裝以及簡單使用進行了介紹,這裏不再介紹,直接進入主題。

步驟如下:
1.新建Cocos2d-win32工程,工程名为"SimpleGame",去除"Box2D"選項,勾選"Simple Audio Engine in Cocos Denshion"選項;
2.編譯運行,可以看到如下圖所示:

3.下載本遊戲所需的資源,將資源放置"Resources"目錄下;

4.遊戲需要一個白色的背景,最簡單的方法是使用CCLayerColor,將HelloWorldScene.h文件"HelloWorld"類改为如下:

1
class HelloWorld : public cocos2d::CCLayerColor
首先添加玩家,讓玩家位於左邊屏幕中間,將HelloWorldScene.cpp文件的init函數,改为如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
bool HelloWorld::init()
{
    bool bRet = false;
    do
    {
        CC_BREAK_IF(! CCLayerColor::initWithColor(ccc4(255, 255, 255, 255)));

        CCSize winSize = CCDirector::sharedDirector()->getWinSize();
        CCSprite *player = CCSprite::create("player.png", CCRectMake(0, 0, 27, 40));
        player->setPosition(ccp(player->getContentSize().width / 2, winSize.height / 2));
        this->addChild(player);  

        bRet = true;
    } while (0);

    return bRet;
}
5.編譯運行,可以看到玩家精靈在白色背景上,如下圖所示:

6.接下來添加怪物,並且讓怪物可以移動,我們在屏幕右邊創建怪物,建立動作讓它們向左移動,增加addMonster方法,代碼如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
void HelloWorld::addMonster()
{
    CCSprite *monster = CCSprite::create("monster.png");

    CCSize winSize = CCDirector::sharedDirector()->getWinSize();
    int minY = monster->getContentSize().height / 2;
    int maxY = winSize.height - monster->getContentSize().height / 2;
    int rangeY = maxY - minY;
    int actualY = (rand() % rangeY) + minY;

    monster->setPosition(ccp(winSize.width + monster->getContentSize().width / 2, actualY));
    this->addChild(monster);

    int minDuration = 2.0;
    int maxDuration = 4.0;
    int rangeDuration = maxDuration - minDuration;
    int actualDuration = (rand() % rangeDuration) + minDuration;

    CCMoveTo *actionMove = CCMoveTo::create(actualDuration, ccp(-monster->getContentSize().width / 2, actualY));
    CCCallFuncN *actionMoveDone = CCCallFuncN::create(this, callfuncN_selector(HelloWorld::spriteMoveFinished));
    monster->runAction(CCSequence::create(actionMove, actionMoveDone, NULL));
}
在右邊屏幕以隨機的位置添加怪物精靈,注意計算精靈的位置坐標,默認描點在中心,不要讓怪物截斷了。然後再以2~4秒的隨機總時間,讓怪物從右邊移動到左邊,移動出邊界後,即回調函數spriteMoveFinished,進行刪除精靈對象,增加的spriteMoveFinished方法如下:

1
2
3
4
5
void HelloWorld::spriteMoveFinished(CCNode *sender)
{
    CCSprite *sprite = (CCSprite*)sender;
    this->removeChild(sprite, true);
}
接下去就是定時創建怪物,在init函數返回之前,安裝定時器,每秒執行一次,代碼如下:

1
this->schedule(schedule_selector(HelloWorld::gameLogic), 1.0);
增加gameLogic方法,代碼如下:

1
2
3
4
void HelloWorld::gameLogic( float dt )
{
    this->addMonster();
}
7.編譯運行,可以看到右邊怪物定時增加,並且以不同的速度向左邊移動,如下圖所示:

8.接着讓玩家可以射擊子彈,當用戶在屏幕點擊時,就讓玩家往點擊的方向進行發送子彈,用戶的屏幕點擊點並不是子彈移動的最終地,借用原文的一張圖片來說明:

要讓層可以支持觸摸,需要在init方法,添加如下代碼:

1
this->setTouchEnabled(true);
然後重載ccTouchesEnded方法,代碼如下:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
void HelloWorld::ccTouchesEnded(CCSet *pTouches, CCEvent *pEvent)
{
    CCTouch *touch = (CCTouch*)pTouches->anyObject();
    CCPoint location = this->convertTouchToNodeSpace(touch);

    CCSize winSize = CCDirector::sharedDirector()->getWinSize();
    CCSprite *projectile = CCSprite::create("projectile.png");
    projectile->setPosition(ccp(20, winSize.height / 2));

    CCPoint offset = ccpSub(location, projectile->getPosition());

    if (offset.x <= 0)
    {
        return;
    }

    this->addChild(projectile);

    int realX = winSize.width + projectile->getContentSize().width / 2;
    float ratio = (float)offset.y / (float)offset.x;
    int realY = realX * ratio + projectile->getPosition().y;
    CCPoint realDest = ccp(realX, realY);

    int offRealX = realX - projectile->getPosition().x;
    int offRealY = realY - projectile->getPosition().y;
    float length = sqrtf(offRealX * offRealX + offRealY * offRealY);
    float velocity = 480 / 1;
    float realMoveDuration = length / velocity;

    projectile->runAction(CCSequence::create(CCMoveTo::create(realMoveDuration, realDest),
        CCCallFuncN::create(this, callfuncN_selector(HelloWorld::spriteMoveFinished)), NULL));
}
首先,得到觸摸點,然後創建子彈精靈,算出觸摸點與子彈初始位置之差,若觸摸點在初始位置的前方(即玩家前方),則添加子彈到層上。以同比例方法, 計算出子彈飛向屏幕右邊的最終坐標。然後再用勾股定理計算飛行長度,假定速度为每秒480像素,則計算出飛行總時間。之後就是讓子彈執行给定的飛行動作, 以及之後的刪除自身調用。
9.編譯運行,往屏幕點擊,可以看到子彈發射出去,如下圖所示:

10.當子彈碰到怪物時,怪物被消滅,子彈消失,即碰撞檢測。需要在場景中跟蹤目標和子彈,在HelloWorldScene.h聲明如下:

1
2
cocos2d::CCArray *_monsters;
cocos2d::CCArray *_projectiles;
在構造函數和析構函數,添加如下:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
HelloWorld::HelloWorld()
{
    _monsters = NULL;
    _projectiles = NULL;
}

HelloWorld::~HelloWorld()
{
    if (_monsters)
    {
        _monsters->release();
        _monsters = NULL;
    }
    if (_projectiles)
    {
        _projectiles->release();
        _projectiles = NULL;
    }
}
然後在init函數中初始化這兩個數組:

1
2
3
4
this->_monsters = CCArray::create();
this->_monsters->retain();
this->_projectiles = CCArray::create();
this->_projectiles->retain();
修改addMonster函數,为怪物精靈添加標簽,並加入到數組,代碼如下:

1
2
monster->setTag(1);
_monsters->addObject(monster);
修改ccTouchesEnded函數,为子彈精靈添加標簽,並加入到數組,代碼如下:

1
2
projectile->setTag(2);
_projectiles->addObject(projectile);
然後修改spriteMoveFinished函數,增加如下代碼:

1
2
3
4
5
6
7
8
if (sprite->getTag() == 1)
{
    _monsters->removeObject(sprite);
}
else if (sprite->getTag() == 2)
{
    _projectiles->removeObject(sprite);
}
添加如下方法:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
void HelloWorld::update(float dt)
{
    CCArray *projectilesToDelete = CCArray::create();
   
    CCObject *pObject = NULL;
    CCObject *pObject2 = NULL;
    CCARRAY_FOREACH(_projectiles, pObject)
    {
        CCSprite *projectile = (CCSprite*)pObject;
        CCArray *monstersToDelete = CCArray::create();

        CCARRAY_FOREACH(_monsters, pObject2)
        {
            CCSprite *monster = (CCSprite*)pObject2;
            if (CCRect::CCRectIntersectsRect(projectile->boundingBox(), monster->boundingBox()))
            {
                monstersToDelete->addObject(monster);
            }          
        }

        CCARRAY_FOREACH(monstersToDelete, pObject2)
        {
            CCSprite *monster = (CCSprite*)pObject2;
            _monsters->removeObject(monster);
            this->removeChild(monster, true);
        }

        if (monstersToDelete->count() > 0)
        {
            projectilesToDelete->addObject(projectile);
        }
       
        monstersToDelete->release();
    }

    CCARRAY_FOREACH(projectilesToDelete, pObject)
    {
        CCSprite *projectile = (CCSprite*)pObject;
        _projectiles->removeObject(projectile);
        this->removeChild(projectile, true);
    }
   
    projectilesToDelete->release();
}
遍曆子彈數組,計算每一個子彈所可能遇到的怪物,用它們各自的邊界框進行交叉檢測,檢測到交叉,則將怪物對象放入ToDelete(待刪除)數組, 不能在遍曆的時候刪除一個對象。若是子彈遇到了怪物,也需要放入ToDelete(待刪除)數組。然後從場景和數組中移動掉。同样,也在init函數,安裝定時器,代碼如下:

1
this->schedule(schedule_selector(HelloWorld::update));
11.編譯運行,這時當子彈和怪物碰撞時,它們就會消失;
12.添加音效,在init函數添加背景音樂,代碼如下:

1
CocosDenshion::SimpleAudioEngine::sharedEngine()->playBackgroundMusic("background-music-aac.wav");
ccTouchesEnded函數,添加子彈音效,代碼如下:

1
CocosDenshion::SimpleAudioEngine::sharedEngine()->playEffect("pew-pew-lei.wav");
13.接下來,創建一個新的場景,來指示"You Win"或者"You Lose"。右鍵 工程,"Add"→"Class..."→"C++"→"Add","Base class"为CCLayerColor,"Class name"为GameOverLayer,如下圖所示:

GameOverLayer.h文件代碼为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#pragma once
#include "cocos2d.h"

class GameOverLayer :
    public cocos2d::CCLayerColor
{
public:
    GameOverLayer(void);
    ~GameOverLayer(void);
    bool initWithWon(bool won);

    static cocos2d::CCScene* sceneWithWon(bool won);
    static GameOverLayer* createWithWon(bool won);
    void gameOverDone();
};

GameOverLayer.cpp文件代碼为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
#include "GameOverLayer.h"
#include "HelloWorldScene.h"
using namespace cocos2d;

GameOverLayer::GameOverLayer(void)
{
}

GameOverLayer::~GameOverLayer(void)
{
}

GameOverLayer* GameOverLayer::createWithWon(bool won)
{
    GameOverLayer *pRet = new GameOverLayer();
    if (pRet && pRet->initWithWon(won))
    {
        pRet->autorelease();
        return pRet;
    }
    else
    {
        CC_SAFE_DELETE(pRet);
        return NULL;
    }
}

bool GameOverLayer::initWithWon(bool won)
{
    bool bRet = false;
    do
    {
        CC_BREAK_IF(! CCLayerColor::initWithColor(ccc4(255, 255, 255, 255)));

        char *message;
        if (won)
        {
            message = "You Won!";
        }
        else
        {
            message = "You Lose :[";
        }
       
        CCSize winSize = CCDirector::sharedDirector()->getWinSize();
        CCLabelTTF *label = CCLabelTTF::create(message, "Arial", 32);
        label->setColor(ccc3(0, 0, 0));
        label->setPosition(ccp(winSize.width / 2, winSize.height / 2));
        this->addChild(label);

        this->runAction(CCSequence::create(CCDelayTime::create(3),
            CCCallFunc::create(this, callfunc_selector(GameOverLayer::gameOverDone)),
            NULL));
       
        bRet = true;
    } while (0);

    return bRet;
}

cocos2d::CCScene* GameOverLayer::sceneWithWon(bool won)
{
    CCScene * scene = NULL;
    do
    {
        scene = CCScene::create();
        CC_BREAK_IF(! scene);

        GameOverLayer *layer = GameOverLayer::createWithWon(won);
        CC_BREAK_IF(! layer);

        scene->addChild(layer);
    } while (0);

    return scene;
}

void GameOverLayer::gameOverDone()
{
    CCDirector::sharedDirector()->replaceScene(HelloWorld::scene());
}

遊戲結束時,切換到以上所建的場景,場景上的層顯示一個文本,在3秒之後返回到HelloWorld場景中。
14.最後,为遊戲添加一些遊戲邏輯。記錄玩家消滅怪物的數量,進而决定該玩家輸贏。在HelloWorldScene.h文件中,添加如下:

1
int _monstersDestroyed;
HelloWorldScene.cpp文件,HelloWorld()構造函數,添加如下代碼:

1
_monstersDestroyed = 0;
添加頭文件引用:

1
#include "GameOverLayer.h"
update定時函數中,monstersToDelete循環removeChild(monster, true)的後面添加被消滅怪物的計數,並判斷勝利條件,代碼如下:

1
2
3
4
5
6
_monstersDestroyed++;
if (_monstersDestroyed > 30)
{
    CCScene *gameOverScene = GameOverLayer::sceneWithWon(true);
    CCDirector::sharedDirector()->replaceScene(gameOverScene);
}
最後为玩家添加失敗條件,規定只要有一只怪物跑到左邊屏幕裏,則玩家失敗,在spriteMoveFinished函數裏,sprite->getTag() == 1條件的後面,添加如下:

1
2
CCScene *gameOverScene = GameOverLayer::sceneWithWon(false);
CCDirector::sharedDirector()->replaceScene(gameOverScene);
14.編譯並運行,到此已完成了一個簡單的遊戲,包含音效,並帶有勝利和失敗的結束。遊戲效果如下:



参考資料:
1.How To Make A Simple iPhone Game with Cocos2D 2.X Tutorial http://go.rritw.com/www.raywenderlich.com/25736/how-to-make-a-simple-iphone-game-with-cocos2d-2-x-tutorial
2.如何用Cocos2d來開發簡單的IPhone遊戲教程 http://go.rritw.com/www.cocoachina.com/bbs/read.php?tid-15554.html
3.Cocos2d Classic Tutorial Demo Revisit:(1) http://go.rritw.com/www.zilongshanren.com/cocos2d-classic-tutorial-demo-revisit-1/

非常感謝以上資料,本例子源代碼附加資源下載地址http://go.rritw.com/download.csdn.net/detail/akof1314/4857315
如文章存在錯誤之處,歡迎指出,以便改正。