2. 程式人生 > >如何製作一個橫版格鬥過關遊戲 Cocos2d x 2 0 4

如何製作一個橫版格鬥過關遊戲 Cocos2d x 2 0 4

阿新 • • 發佈：2018-12-19
               

      本文實踐自 Allen Tan 的文章《How To Make A Side-Scrolling Beat ‘Em Up Game Like Scott Pilgrim with Cocos2D – Part 1》，文中使用Cocos2D，我在這裡使用Cocos2D-x 2.0.4進行學習和移植。在這篇文章，將會學習到如何製作一個簡單的橫版格鬥過關遊戲。在這當中，學習如何跟蹤動畫狀態、碰撞盒、新增方向鍵、新增簡單敵人AI和更多其它的。

步驟如下：1.新建Cocos2d-win32工程，工程名為"PompaDroid"，去除"Box2D"選項，勾選"Simple Audio Engine in Cocos Den

shion"選項；2.新增遊戲場景類GameScene，派生自CCScene類。新增GameLayer類和HudLayer類，派生自CCLayer類。刪除HelloWorldScene.h和HelloWorldScene.cpp檔案。3.檔案GameScene.h程式碼如下：

1234567891011121314151617#pragma once#include "cocos2d.h"#include "GameLayer.h"#include "HudLayer.h"class GameScene : public cocos2d::CCScene{public:    GameScene(void
);    ~GameScene(void);    virtual bool init();    CREATE_FUNC(GameScene);    CC_SYNTHESIZE(GameLayer*, _gameLayer, GameLayer);    CC_SYNTHESIZE(HudLayer*, _hudLayer, HudLayer);};

檔案GameScene.cpp程式碼如下：

123456789101112131415161718192021222324252627282930#include "GameScene.h"using namespace cocos2d;GameScene::GameScene(void
){    _gameLayer = NULL;    _hudLayer = NULL;}GameScene::~GameScene(void){}bool GameScene::init(){    bool bRet = false;    do     {         CC_BREAK_IF(!CCScene::init());                  _gameLayer = GameLayer::create();         this->addChild(_gameLayer, 0);         _hudLayer = HudLayer::create();         this->addChild(_hudLayer, 1);                  bRet = true;    } while (0);    return bRet;}

4.HudLayer類增加一個方法：

1CREATE_FUNC(HudLayer);
和GameLayer類增加一個方法：
1CREATE_FUNC(GameLayer);
5.修改AppDelegate.cpp檔案，程式碼如下：
12345678910111213//#include "HelloWorldScene.h"#include "GameScene.h"bool AppDelegate::applicationDidFinishLaunching(){    //...    // create a scene. it's an autorelease object    //CCScene *pScene = HelloWorld::scene();    CCScene *pScene = GameScene::create();    //...}

6.編譯執行，此時只是空空的介面。7.下載本遊戲所需資源，將資源放置"Resources"目錄下；8.用Tiled工具開啟pd_tilemap.tmx，就可以看到遊戲的整個地圖：地圖上有兩個圖層：Wall和Floor，即牆和地板。去掉每個圖層前的打鉤，可以檢視層的組成。你會發現下數第四行是由兩個圖層一起組成的。每個tile都是32x32大小。可行走的地板tile位於下數三行。9.開啟GameLayer.h檔案，新增如下程式碼：

1234bool init();void initTileMap();cocos2d::CCTMXTiledMap *_tileMap;

開啟GameLayer.cpp，在建構函式，新增如下程式碼：

1_tileMap = NULL;
新增如下程式碼：
1234567891011121314151617181920212223242526bool GameLayer::init(){    bool bRet = false;    do     {        CC_BREAK_IF(!CCLayer::init());        this->initTileMap();                bRet = true;    } while (0);    return bRet;}void GameLayer::initTileMap(){    _tileMap = CCTMXTiledMap::create("pd_tilemap.tmx");    CCObject *pObject = NULL;    CCARRAY_FOREACH(_tileMap->getChildren(), pObject)    {        CCTMXLayer *child = (CCTMXLayer*)pObject;        child->getTexture()->setAliasTexParameters();    }    this->addChild(_tileMap, -6);}

對所有圖層進行setAliasTexParameters設定，該方法是關閉抗鋸齒功能，這樣就能保持畫素風格。10.編譯執行，可以看到地圖顯示在螢幕上，如下圖所示：11.建立英雄。在大多數2D橫版遊戲中，角色有不同的動畫代表不同型別的動作。我們需要知道什麼時候播放哪個動畫。這裡採用狀態機來解決這個問題。狀態機就是某種通過切換狀態來改變行為的東西。單一狀態機在同一時間只能有一個狀態，但可以從一種狀態過渡到另一種狀態。在這個遊戲中，角色共有五種狀態，空閒、行走、出拳、受傷、死亡，如下圖所示：為了有一個完整的狀態流，每個狀態應該有一個必要條件和結果。例如：行走狀態不能突然轉變到死亡狀態，因為你的英雄在死亡前必須先受傷。12.新增ActionSprite類，派生自CCSprite類，ActionSprite.h檔案程式碼如下：

12345678910111213141516171819202122232425262728293031323334353637383940414243#pragma once#include "cocos2d.h"#include "Defines.h"class ActionSprite : public cocos2d::CCSprite{public:    ActionSprite(void);    ~ActionSprite(void);    //action methods    void idle();    void attack();    void hurtWithDamage(float damage);    void knockout();    void walkWithDirection(cocos2d::CCPoint direction);    //scheduled methods    void update(float dt);    //actions    CC_SYNTHESIZE_RETAIN(cocos2d::CCAction*, _idleAction, IdleAction);    CC_SYNTHESIZE_RETAIN(cocos2d::CCAction*, _attackAction, AttackAction);    CC_SYNTHESIZE_RETAIN(cocos2d::CCAction*, _walkAction, WalkAction);    CC_SYNTHESIZE_RETAIN(cocos2d::CCAction*, _hurtAction, HurtAction);    CC_SYNTHESIZE_RETAIN(cocos2d::CCAction*, _knockedOutAction, KnockedOutAction);    //states    CC_SYNTHESIZE(ActionState, _actionState, ActionState);    //attributes    CC_SYNTHESIZE(float, _walkSpeed, WalkSpeed);    CC_SYNTHESIZE(float, _hitPoints, HitPoints);    CC_SYNTHESIZE(float, _damage, Damage);    //movement    CC_SYNTHESIZE(cocos2d::CCPoint, _velocity, Velocity);    CC_SYNTHESIZE(cocos2d::CCPoint, _desiredPosition, DesiredPosition);    //measurements    CC_SYNTHESIZE(float, _centerToSides, CenterToSides);    CC_SYNTHESIZE(float, _centerToBottom, CenterToBottom);};

開啟ActionSprite.cpp檔案，建構函式如下：

12345678ActionSprite::ActionSprite(void){    _idleAction = NULL;    _attackAction = NULL;    _walkAction = NULL;    _hurtAction = NULL;    _knockedOutAction = NULL;}
各個方法實現暫時為空。以上程式碼聲明瞭基本變數和方法，可以分為以下幾類：
  • Actions：這些是每種狀態要執行的動作。這些動作是當角色切換狀態時，執行精靈動畫和其他觸發的事件。States：儲存精靈的當前動作/狀態，使用ActionState型別，這個型別待會我們將會進行定義。Attributes：包含精靈行走速度值，受傷時減少生命點值，攻擊傷害值。Movement：用於計算精靈如何沿著地圖移動。Measurements：儲存對精靈的實際影象有用的測量值。需要這些值，是因為你將要使用的這些精靈畫布大小是遠遠大於內部包含的影象。Action methods：不直接呼叫動作，而是使用這些方法觸發每種狀態。Scheduled methods：任何事需要在一定的時間間隔進行執行，比如精靈位置和速度的更新，等等。

新建一個頭檔案Defines.h，程式碼如下：

123456789101112131415161718192021222324252627282930313233#pragma once#include "cocos2d.h"// 1 - convenience measurements#define SCREEN CCDirector::sharedDirector()->getWinSize()#define CENTER ccp(SCREEN.width / 2, SCREEN.height / 2)#define CURTIME do {                                                        \    timeval time;                                                           \    gettimeofday(&time, NULL);                                              \    unsigned long millisecs = (time.tv_sec * 1000) + (time.tv_usec / 1000); \    return (float)millisecs;                                                \} while (0)// 2 - convenience functions#define random_range(low, high) (rand() % (high - low + 1)) + low#define frandom (float)rand() / UINT64_C(0x100000000)#define frandom_range(low, high) ((high - low) * frandom) + low// 3 - enumerationstypedef enum _ActionState {    kActionStateNone = 0,    kActionStateIdle,    kActionStateAttack,    kActionStateWalk,    kActionStateHurt,    kActionStateKnockedOut} ActionState;// 4 - structurestypedef struct _BoundingBox {    cocos2d::CCRect actual;    cocos2d::CCRect original;} BoundingBox;
簡要說明下：①.定義了一些便利的巨集，如直接使用SCREEN獲取螢幕大小；②.定義了一些便利的函式，隨機返回整型或者浮點型；③.定義ActionState型別，這個是ActionSprite可能處在不同狀態的型別列舉；④.定義BoundingBox結構體，將用於碰撞檢測。開啟GameLayer.h檔案，新增如下程式碼：
1cocos2d::CCSpriteBatchNode *_actors;
開啟GameLayer.cpp檔案，在init函式裡面新增如下程式碼：
1234CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile("pd_sprites.plist");_actors = CCSpriteBatchNode::create("pd_sprites.pvr.ccz");_actors->getTexture()->setAliasTexParameters();this->addChild(_actors, -5);

載入精靈表單，建立一個CCSpriteBatchNode。這個精靈表單包含我們的所有精靈。它的z值高於CCTMXTiledMap物件，這樣才能出現在地圖前。新增Hero類，派生自ActionSprite類，新增如下程式碼：

12CREATE_FUNC(Hero);bool init();
Hero類的init函式的實現如下所示：
1234567891011121314151617181920212223242526272829bool Hero::init(){    bool bRet = false;    do     {        CC_BREAK_IF(!ActionSprite::initWithSpriteFrameName("hero_idle_00.png"));        int i;        //idle animation        CCArray *idleFrames = CCArray::createWithCapacity(6);        for (i = 0; i < 6; i++)        {            CCSpriteFrame *frame = CCSpriteFrameCache::sharedSpriteFrameCache()->spriteFrameByName(CCString::createWithFormat("hero_idle_%02d.png", i)->getCString());            idleFrames->addObject(frame);        }        CCAnimation *idleAnimation = CCAnimation::createWithSpriteFrames(idleFrames, 1.0 / 12.0);        this->setIdleAction(CCRepeatForever::create(CCAnimate::create(idleAnimation)));        this->setCenterToBottom(39.0);        this->setCenterToSides(29.0);        this->setHitPoints(100.0);        this->setDamage(20.0);        this->setWalkSpeed(80.0);                bRet = true;    } while (0);    return bRet;}

我們用初始空閒精靈幀建立了英雄角色，配備了一個CCArray陣列包含所有的屬於空閒動畫的精靈幀，然後建立一個CCAction動作播放來這個動畫。以每秒12幀的速率進行播放。接下去，為英雄設定初始屬性，包括精靈中心到邊到底部的值。如下圖所示：英雄的每個精靈幀都在280x150畫素大小的畫布上建立，但實際上英雄精靈只佔據這個空間的一部分。所以需要兩個測量值，以便更好的設定精靈的位置。需要額外的空間，是因為每個動畫精靈繪製的方式是不同的，而有些就需要更多的空間。開啟GameLayer.h檔案，新增標頭檔案宣告：

1#include "Hero.h"
GameLayer類新增如下程式碼：
1Hero *_hero;
開啟GameLayer.cpp檔案，在建構函式新增如下程式碼：
1_hero = NULL;
在init函式this->addChild(_actors, -5);後面新增如下程式碼：
1this->initHero();
新增initHero方法，程式碼如下：
12345678void GameLayer::initHero(){    _hero = Hero::create();    _actors->addChild(_hero);    _hero->setPosition(ccp(_hero->getCenterToSides(), 80));    _hero->setDesiredPosition(_hero->getPosition());    _hero->idle();}
建立了一個英雄例項，新增到了精靈表單，並設定了設定。呼叫idle方法，讓其處於空閒狀態，執行空閒動畫。返回到ActionSprite.cpp檔案，實現idle方法，程式碼如下：
12345678910void ActionSprite::idle(){    if (_actionState != kActionStateIdle)    {        this->stopAllActions();        this->runAction(_idleAction);        _actionState = kActionStateIdle;        _velocity = CCPointZero;    }}
這個idle方法只有當ActionSprite不處於空閒狀態才能呼叫。當它觸發時，它會執行空閒動作，改變當前狀態到kActionStateIdle，並且把速度置零。13.編譯執行，可以看到英雄處於空閒狀態。如下圖所示：14.出拳動作。開啟Hero.cpp檔案，在init函式idle animation後面，新增如下程式碼：
123456789//attack animationCCArray *attackFrames = CCArray::createWithCapacity(3);for (i = 0; i < 3; i++){    CCSpriteFrame *frame = CCSpriteFrameCache::sharedSpriteFrameCache()->spriteFrameByName(CCString::createWithFormat("hero_attack_00_%02d.png", i)->getCString());    attackFrames->addObject(frame);}CCAnimation *attackAnimation = CCAnimation::createWithSpriteFrames(attackFrames, 1.0 / 24.0);this->setAttackAction(CCSequence::create(CCAnimate::create(attackAnimation), CCCallFunc::create(this, callfunc_selector(Hero::idle)), NULL));
開啟ActionSprite.cpp檔案，實現attack方法，程式碼如下：
123456789void ActionSprite::attack(){    if (_actionState == kActionStateIdle || _actionState == kActionStateAttack || _actionState == kActionStateWalk)    {        this->stopAllActions();        this->runAction(_attackAction);        _actionState = kActionStateAttack;    }}
英雄只有在空閒、攻擊、行走狀態才能進行出拳。確保英雄正在受傷時、或者死亡時不能進行攻擊。為了觸發attack方法，開啟GameLayer.cpp檔案，在init函式新增如下程式碼：
1this->setTouchEnabled(true);
過載ccTouchesBegan方法，程式碼如下：
1234void GameLayer::ccTouchesBegan(CCSet *pTouches, CCEvent *pEvent){    _hero->attack();}
15.編譯執行，點選螢幕進行出拳，如下圖所示：16.建立8個方向的方向鍵。我們需要建立虛擬的8個方向的方向鍵來讓英雄在地圖上進行移動。新增SimpleDPad類，派生自CCSprite類，SimpleDPad.h檔案程式碼如下：
123456789101112131415161718192021222324252627282930313233343536373839#pragma once#include "cocos2d.h"class SimpleDPad;class SimpleDPadDelegate{public:    virtual void didChangeDirectionTo(SimpleDPad *simpleDPad, cocos2d::CCPoint direction) = 0;    virtual void isHoldingDirection(SimpleDPad *simpleDPad, cocos2d::CCPoint direction) = 0;    virtual void simpleDPadTouchEnded(SimpleDPad *simpleDPad) = 0這裡寫圖片描述

相關推薦

如何製作一個橫版格鬥過關遊戲 Cocos2d x 2 0 4

                      本文實踐自 Allen Tan 的文章《How To Make A Side-Scrolling Beat ‘Em Up Game Like Scott Pilgrim with Cocos2D – Part 1》，文中使用Cocos2D，我在這裡使用Cocos2D

如何製作一個橫版格鬥過關遊戲 Cocos2d-x 2 0 4

      本文實踐自 Allen Tan 的文章《How To Make A Side-Scrolling Beat ‘Em Up Game Like Scott Pilgrim with Cocos2D – Part 1》，文中使用Cocos2D，我

如何製作一個橫版格鬥過關遊戲 2 Cocos2d x 2 0 4

                        在第一篇《如何製作一個橫版格鬥過關遊戲》基礎上，增加角色運動、碰撞、敵人、AI和音樂音效，原文《How To Make A Side-Scrolling Beat ‘Em Up Game Like Scott Pilgrim with Cocos2D – Par

如何製作一個類似Tiny Wings的遊戲 Cocos2d-x 2 1 4

                步驟如下：1.使用上一篇的工程；2.新增地形類Terrain，派生自CCNode類。檔案Terrain.h程式碼如下：123456789101112131415161718#pragma once#include "cocos2d.h"#define kMaxHillKeyPo

如何製作一個簡單的遊戲 Cocos2d x 2 0 4

                      本文實踐自 Ray Wenderlich 的文章《How To Make A Simple iPhone Game with Cocos2D 2.X Tutorial》，文中使用Cocos2D，我在這裡使用Cocos2D-x 2.0.4進行學習和移植，前者是用Obj

如何製作一個簡單的遊戲 Cocos2d-x 2 0 4

      本文實踐自 Ray Wenderlich 的文章《 How To Make A Simple iPhone Game with Cocos2D 2.X Tutorial》，文中使用Cocos2D，我在這裡使用Cocos2D-x 2.0.4進

如何製作一個塔防遊戲 Cocos2d-x 2 0 4

      本文實踐自 Pablo Ruiz 的文章《How To Make a Tower Defense Game》，文中使用Cocos2D，我在這裡使用Cocos2D-x 2.0.4進行學習和移植。在這篇文章，將會學習到如何製作一個塔防遊戲。在這當

Cocos2d-x 2.0.4 小心隱藏的retain

Cocos2d-x中的CCObject類及其派生類，使用autorelease()方法，將自身交託於CCPoolManager管理器進行管理，都可以使用retain()方法來使自身的引用計數加一，使用release()方法來使自身的引用計數減一，當引用計數為0的時候，CCPoolManager管理器

Cocos2d-x 2.0 百例精講:如何讓一個精靈跟隨觸點移動

如何讓一個精靈跟隨觸點移動？本節我們以HelloCpp為例來講解一下。 第一步，我們要在場景中建立一個新的精靈。 開啟HelloWorldScene.h。我們為HelloWorld增加一個精靈類成員指標，為了方便程式碼的編寫我們可以去掉cocos2d::作用域的定義而在類定義之前加入USING_NS_CC

cocos2d-x 2.0下怎樣讓BOX2D DEBUG DRAW的方法筆記

name box 否則 方法 con ret 2.0 ng- cto 原文鏈接： 這兩天玩 cocos2d-x 和 box2d，發現 cocos2d-x 2.0 版本號要使用老方法 debug 渲染會出錯。於是找到了新方法來 debug draw： 首先在你的頭文

第一步：cocos2d-x-2.1.4建立專案

準備工具： cocos2d-x-2.1.4 python 將cocos2d-x-2.1.4解壓到D盤或其他盤 安裝python之後，進入tools\project-creator\資料夾 新建一個.txt檔案，輸入 python create_proj

Cocos2d-x 2 0 在Windows平臺下的使用

        Cocos2d-x是一款強大的基於OpenGL ES的跨平臺遊戲開發引擎，易學易用，支援多種智慧移動平臺。官網地址：http://cocos2d-x.org/當前版本：2.0        有很多的學習資料，在這裡我只做為自己的筆記記錄下來，錯誤之處還請指出。在Visual Studio 20

Cocos2d-x 2 0 從HelloWorld入手

       從上一篇《Cocos2d-x 2.0 在Windows平臺下的使用》已經初步瞭解了Cocos2d-x的安裝、編譯，也已經可以執行HelloWorld示例了，執行HelloWorld至少所需的檔案，包括：素材、動態庫，我們把"

Cocos2d-x 2.0 之 Actions “三板斧” 之三

[Cocos2d-x相關教程來源於紅孩兒的遊戲程式設計之路CSDN部落格地址：http://blog.csdn.net/honghaier] 紅孩兒Cocos2d-X學習園地QQ2群：44208467 加群寫：Cocos2d-x 紅孩兒Cocos2d-X學習園地QQ群：

如何使用CCRenderTexture創建動態紋理 Cocos2d-x 2 1 4

world texture load ack 結果 cos cse back () 本文實踐自 Ray Wenderlich、Ali Hafizji 的文章《How To Create Dynamic Textures with CCRenderTextu

【官方教程】使用Quick-Cocos2d-x搭建一個橫版過關遊戲(一)

在前面的章節中我們講解了Quick-Cocos2d-x的環境搭建和目錄結構。接下來是動手自己做個遊戲的時候了。我本人是比較喜歡橫版過關型別的遊戲的，這裡就以搭建橫版過關遊戲來做講解。 1. 建立工程 按照我們前面的文章描述的，用Quick的Player建立一個工程，我們這裡

學習用AG真人介面BBIN介面對接平臺製作一個最簡單的飛機遊戲

第一步AG真人介面BBIN介面對接平臺q-2747044651，控制飛機移動還記得小時候玩的飛機大戰遊戲嗎？按a、s、d、w鍵後控制飛機的上下左右移動。在這裡我們通過按a、s、d、w鍵來改變座標x,y的值，從而控制飛機的移動。下面是程式碼： （小編推薦一個學C語言/C++的學習群：788649720，入群即

Unity 2D橫版通關 小遊戲-當悟空遇上熊本(Unity 5.6)C#

2D橫版通關小遊戲，美術資源原創自合作美工，這是我學unity遊戲開發做的第一個小demo,學到了很多東西。從什麼都不會到自己上手學習Unity軟體的基本操作  _(:з」∠)_  ，給主角加剛體，碰撞器，標籤，實現主角移動，跳躍，幀合成動畫，發射子彈，特效磚塊，頂一

使用Unity3D引擎製作2D橫版跑酷地圖無限迴圈

using UnityEngine; using System.Collections; using System.Collections.Generic; public class MapUnLimited : MonoBehaviour {     // Use th

Cocos2d-x 3.0 打造一個全平臺概念文件夾

android cocos2d www 全平臺 -s http 概念 1-1 style Cocos2d-x 3.0 打造一個全平臺概念文件夾http:// www.eoeandroid.com/thread-328055-1-1.html Cocos2d