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]。