1.準備工作
前期步驟，比如配置環境，可以參考《Cocos2d-x 3.0 WIN7+VS2012 安卓平臺搭建》，雖然是3.0的，都通用的，至少3.2沒問題，3.3還沒測。
建立一個項目
第一步，調整下分辨率。
在 AppDelegate.cpp 中的函數：
bool AppDelegate::applicationDidFinishLaunching() {
// initialize director
auto director = Director::getInstance();
auto glview = director->getOpenGLView();
if(!glview) {
glview = GLView::create("My Game");
director->setOpenGLView(glview);
glview -> setFrameSize(320,480);
}
glview->setDesignResolutionSize(480, 800, ResolutionPolicy::EXACT_FIT);
// turn on display FPS
director->setDisplayStats(true);
// set FPS. the default value is 1.0/60 if you don't call this
director->setAnimationInterval(1.0 / 60);
// create a scene. it's an autorelease object
auto scene = HelloWorld::createScene();
// run
director->runWithScene(scene);
return true;
}
2.界面的製作
然後，製作開始界面啦~
新建一個類 WelcomeScene
WelcomeScene.h:
#ifndef __WELCOME_SCENE_H__
#define __WELCOME_SCENE_H__
#include "cocos2d.h"
class WelcomeScene : public cocos2d::Layer
{
public:
static cocos2d::Scene* createScene();
virtual bool init();
void menuStartCallback( Ref* pSender );
CREATE_FUNC(WelcomeScene);
};
#endif // __WELCOME_SCENE_H__噢，對了，這中間還有一件事情，先建立一個 GameDefine.h。這個頭文件，用來放一些關於遊戲的宏定義，這次用來放 畫布的寬高，後面還用來放一些 其他定義。
#ifndef _Inkmoo_Elimination_h_
#define _Inkmoo_Elimination_h_
// 定義屏幕寬高，這與所做的圖片有關
#define GAME_SCREEN_WIDTH 480
#define GAME_SCREEN_HEIGHT 800
#endif現在，我們就可以在其他文件用這些放宏定義了。
WelcomeScene.cpp:
#include "WelcomeScene.h"
#include "GameDefine.h"
USING_NS_CC;
Scene* WelcomeScene::createScene() {
auto scene = Scene::create();
auto layer = WelcomeScene::create();
scene->addChild(layer);
return scene;
}
// 歡迎界面 初始化函數
bool WelcomeScene::init() {
// 先初始化父類，不成功返回false
if( !Layer::init() ) {
return false;
}
// 添加背景圖片
auto sprite = Sprite::create("scene_sta.png");
sprite->setPosition(Point(GAME_SCREEN_WIDTH/2,GAME_SCREEN_HEIGHT/2));
this->addChild(sprite);
// 添加開始按鈕
auto startItem = MenuItemImage::create(
"btn_start01.png",
"btn_start02.png",
CC_CALLBACK_1(WelcomeScene::menuStartCallback, this));
startItem->setPosition(Vec2(GAME_SCREEN_WIDTH/2,GAME_SCREEN_HEIGHT/6));
auto menu = Menu::create(startItem, NULL);
menu->setPosition(Vec2::ZERO);
this -> addChild( menu );
return true;
}
void WelcomeScene::menuStartCallback( Ref* pSender )
{
// 跳轉到遊戲界面
}
OK，開始界面做了，連帶開始按鈕都完成了，接下來就是 遊戲界面啦！
GameScene.h:
#ifndef __GAME_SCENE_H__
#define __GAME_SCENE_H__
#include "cocos2d.h"
class GameScene : public cocos2d::Layer
{
public:
static cocos2d::Scene* createScene();
virtual bool init();
// 返回歡迎界面函數
void menuBackCallback( Ref* pSender );
CREATE_FUNC(GameScene);
};
#endif // __GAME_SCENE_H__
然後就是，cpp文件：
#include "GameScene.h"
#include "GameDefine.h"
#include "WelcomeScene.h"
USING_NS_CC;
Scene* GameScene::createScene() {
auto scene = Scene::create();
auto layer = GameScene::create();
scene->addChild(layer);
return scene;
}
// 歡迎界面 初始化函數
bool GameScene::init() {
// 先初始化父類，不成功返回false
if( !Layer::init() ) {
return false;
}
// 添加背景圖片
auto sprite = Sprite::create("scene_bg.png");
sprite->setPosition(Point(GAME_SCREEN_WIDTH/2,GAME_SCREEN_HEIGHT/2));
this->addChild(sprite,-1);
// 添加返回按鈕
auto backItem = MenuItemImage::create(
"btn_back01.png",
"btn_back02.png",
CC_CALLBACK_1(GameScene::menuBackCallback, this));
backItem->setPosition(Vec2(GAME_SCREEN_WIDTH-backItem->getContentSize().width/2,backItem->getContentSize().height/2));
auto menu = Menu::create(backItem, NULL);
menu->setPosition(Vec2::ZERO);
this -> addChild( menu );
return true;
}
// 返回函數，跳轉到歡迎界面
void GameScene::menuBackCallback( Ref* pSender ) {
auto scene = WelcomeScene::createScene();
CCDirector::sharedDirector()->replaceScene(scene);
}
對了，不要忘了之前 歡迎界面的相應函數（開始按鈕函數），也要修改咯：
void WelcomeScene::menuStartCallback( Ref* pSender )
{
// 跳轉到遊戲界面
auto scene = GameScene::createScene();
CCDirector::sharedDirector()->replaceScene(scene);
}OK，現在我們可以運行一下，歡迎界面，點擊 >開始< 進入遊戲界面，在遊戲界面點擊 >返回主菜單< 回到歡迎界面！
3.精靈相關
前面這些都是準備工作，太稀了，一點都不幹啊。
接下來，要做的就是添加相應的精靈了。
這些精靈的材料都存在一張png裏，用TexturePacker壓縮即可。（如果不會用的話，請參考《Cocos2d-x 3.x使用plist和png製作動畫》）
三消遊戲，主要就是精靈的創造-移動-消除。
這些精靈在遊戲界面的存儲，類似於二維表格，向裏面放精靈。
所以 精靈要有一個單獨的類來管理，
SpriteShape.h:
#include "cocos2d.h"
#include "GameDefine.h"
USING_NS_CC;
class SpriteShape : public Sprite
{
public:
static SpriteShape* create( int row , int col );
CC_SYNTHESIZE(int, m_row, Row);
CC_SYNTHESIZE(int, m_col, Col);
CC_SYNTHESIZE(int, m_imgIndex, ImgIndex);
};關於 create函數，這個函數就是根據傳進來的 行列值，在相應位置創建精靈。
下面的 CC_SYNTHESIZE ,就是相當於自動生成兩個函數，就以 CC_SYNTHESIZE(int,m_row,Row)來說，就是 定義一個int類型的保護型變量 m_row,再定義一個 setRow函數 和 getRow函數，可以對m_row操作。
接下來就是 精靈類的CPP：
#include "SpriteShape.h"
SpriteShape *SpriteShape::create(int row, int col)
{
SpriteShape *spr = new SpriteShape();
spr->m_row = row;
spr->m_col = col;
spr->m_imgIndex = rand() % TOTAL_SPRITE;
spr->initWithSpriteFrameName(spriteNormal[spr->m_imgIndex]);
spr->autorelease();
return spr;
}這個函數實現方法，就是先定位這個精靈的位置，通過傳參，然後再獲取一個隨機數，對應相應的圖片，當然隨機數範圍要在種類數內。然後再根據隨機數獲取到圖片。
關於這些精靈種類數和精靈圖片，都存在了GameDefine中了：
// GameDefine.h
// 定義每個精靈大小與邊框大小
#define SPRITE_WIDTH 48
#define BOADER_WIDTH 2
// 遊戲精靈行數和列數
#define ROWS 8
#define COLS 8
// 精靈種類總數
#define TOTAL_SPRITE 6
// 普通的精靈
static const char *spriteNormal[TOTAL_SPRITE] = {
"icon1.png",
"icon2.png",
"icon3.png",
"icon4.png",
"icon5.png",
"icon6.png"
};好了，精靈類創建完了，要在遊戲界面顯示出來了，之前有說過，遊戲界面其實就是一個大二維表格，肯定先要創建這個表格，然後定義一個初始化地圖函數，把表格都初始化，實現起來，也不是很難：
// GameScene.cpp
// 初始化地圖
void GameScene::initMap( ) {
for( int r = 0 ; r < ROWS ; ++r ){
for( int c = 0 ; c < COLS ; ++c ){
createSprite(r,c);
}
}
}
// 創建精靈
void GameScene::createSprite( int row , int col ) {
// 先創建一個壽司
SpriteShape* spr = SpriteShape::create(row, col);
Point endPosition = positionOfItem(row, col);
spr -> setPosition( endPosition );
// 加入到spriteSheet中,等待繪製
spriteSheet -> addChild(spr);
// 數組相應位置，置上壽司對象
map[row][col] = spr;
}
// 根據行列，獲取座標值
Point GameScene::positionOfItem(int row , int col)
{
float x = mapLBX + (SPRITE_WIDTH + BOADER_WIDTH) * col + SPRITE_WIDTH / 2;
float y = mapLBY + (SPRITE_WIDTH + BOADER_WIDTH) * row + SPRITE_WIDTH / 2;
return Point(x, y);
}
現在，運行一下，精靈就出現在遊戲界面啦。
4.再額外加一點改進
現在實現出來的這個樣子有些太平面了，稍微2.1D一下，整個下落動作。
這個動作也很好做，就是在創建精靈的時候，放在原來位置上面的位置一些距離，然後通過一定速度進行下落到原來位置，就是加一個action。
// GameScene.cpp
// 創建精靈
void GameScene::createSprite( int row , int col ) {
// 先創建一個壽司
SpriteShape* spr = SpriteShape::create(row, col);
// 創建下落動畫
Point endPosition = positionOfItem(row, col);
Point startPosition = Point(endPosition.x, endPosition.y + GAME_SCREEN_HEIGHT / 2);
spr->setPosition(startPosition);
float speed = startPosition.y / (1.5 * GAME_SCREEN_HEIGHT );
spr->runAction(MoveTo::create(speed, endPosition));
// 加入到spriteSheet中,等待繪製
spriteSheet -> addChild(spr);
// 數組相應位置，置上壽司對象
map[row][col] = spr;
}Ok，現在可以運行下試一試啦~
本章資源和代碼：點擊下載
感謝本文筆者LT大樹_的分享，Cocos引擎中文官網歡迎更多的開發者分享開發經驗，來稿請發送至[email protected]。