Cocos2d-x官方在线视频-Cocos2d-x3.2《2048》手游开发揭秘

时间:2021-03-28 16:12:33

Cocoachina 官方在线视频

http://cn.cocos2d-x.org/tutorial/lists?id=58

一、游戏介绍

2048游戏是一款风靡全球的休闲类游戏,通过控制4X4范围内的数字块的移动,同样数字的块在移动的过程中累加消除,该游戏即考虑了手机触摸屏幕的操作方式,又在游戏过程中不断产生新块以添加游戏难度和耐玩性,游戏执行效果例如以下图:

Cocos2d-x官方在线视频-Cocos2d-x3.2《2048》手游开发揭秘

二、创建项目&游戏逻辑分析

2.1 本项目开发环境:

Mac OS 10.9

XCode 5.0

Android NDK r9

2.2部署Cocos2d-x3.2的执行环境

第一步、到www.cocos2d-x.org下载Cocos2d-x3.2的源码

第二步、解压缩源代码到桌面/Cocos2d-x2014文件夹

第三步、进入终端工具,运行下面命令进入源代码文件夹

cd ~/Desktop/Cocos2d-x2014

第四步、输入./setup.py 运行安装

(Python是Mac OS自带的,不用安装,详细步骤详见视频)

第五步、输入下面命令创建一个空项目

cocosnew Game2048 –d ~/Desktop/game –l cpp –p com.game.test

第六步、使用XCode打开

~/Desktop/game/Game2048/proj.ios_mac/Game2048.xcodeproj

编译执行,将会出现一个HelloWorld的场景

2.3 分析《2048》的游戏逻辑

在屏幕上显示4X4的游戏区域,16个元素

在游戏開始时在随机位置产生一个元素块(数值2)

用户通过触摸屏幕能够移动该块向 上下左右移动

在屏幕上的全部块将按滑动的方向移动,直到顶点或被其它块挡住

在移动的过程中,相邻同样数字的块,相加产生一个新的块,旧块消失

假设有3块数字同样则消除最前方的2个块

假设有4块数字同样的块,则前方2个块相加,后面2个块相加

假设有4块数字两两相邻的同样,则两两相加,产生新的2个块

每移动一次,在屏幕上将会在空白区域产生一个新的块(2或4)

假设屏幕上没有了空白区域

推断4X4范围内是否有相邻的数字同样的块,

不产生新块等待用户移动

假设在4X4范围内没有相邻的数字同样的块,

GAME OVER

三、游戏场景和游戏画布

3.1,首先在项目中加入SplashScene.h和SplashScene.cpp

classSplash:Layer

{

bool init();

public:

CREATE_FUNC(Splash);

static Scene * createScene();

void jumpToGame(float t);

};

3.2 实现3秒钟以后自己主动跳转到游戏场景

bool Splash::init(){

if(!Layer::init())

{

return false;

}

//显示游戏名称

autolabelGame=Label::createWithBMFont("futura-48.fnt", "2048");

labelGame->setPosition(Point(GAME_SCREEN_WIDTH/2,GAME_SCREEN_HEIGHT/2));

this->addChild(labelGame);

labelGame->setScale(1.5);

//显示制作单位

autolabelGameVec=Label::createWithBMFont("futura-48.fnt", "Sea2014.6.25");

labelGameVec->setPosition(Point(GAME_SCREEN_WIDTH/2,GAME_SCREEN_HEIGHT/4));

this->addChild(labelGameVec);

labelGameVec->setScale(0.8);

//计划任务3秒钟之后,自己主动跳转到游戏场景

this->scheduleOnce(schedule_selector(Splash::jumpToGame), 3);

return true;

}

(这里使用了BMFont,详见视频)

3.3 创建GameScene.h和GameScene.cpp实现游戏场景

这里先简单实现,后面再对游戏场景完好功能。

四、能够移动的块的封装

每一个能够移动的块定义例如以下:

class MovedTiled:public Node

{

public:

int m_row; //行

int m_col; //列

int m_number;//数字

void showAt(int r,int c);//在某个位置显示这个块

void moveTo(int r,int c);//移动到r行 c列

void doubleNumber();//X2

CREATE_FUNC(MovedTiled);

bool init();

};

五、元素块的封装

在游戏场景通过一个4X4的数组来定义游戏地图,然后再通过推断数组的上下左右实现元素移动的游戏逻辑。

5.1//初始化逻辑网格和数组

//初始化网格的每个块

for (int row=0; row<GAME_ROWS; row++) {

for (int col=0;col<GAME_COLS; col++) {

auto layerTiled=LayerColor::create(Color4B(70, 70, 70, 255),

GAME_TILED_WIDTH,

GAME_TILED_HEIGHT);

layerTiled->setPosition(

Point(GAME_TILED_WIDTH*col+

GAME_TILED_BOARD_WIDTH*(col+1),

GAME_TILED_HEIGHT*row+

GAME_TILED_BOARD_WIDTH*(row+1)));

colorBack->addChild(layerTiled);

}

}

for(int i=0;i<GAME_ROWS;i++)

{

for(int j=0;j<GAME_COLS;j++)

{

map[i][j]=0; //空白

}

}

5.2 初始化数字块

void Game::newMovedTiled()//产生新块

{

auto tiled=MovedTiled::create();

int freeCount=16-m_allTiled.size();

int num=rand()%freeCount;

int row=0;

int col=0;

int count=0;

bool find=false;

for (; row<GAME_ROWS; row++) {

for(col=0;col<GAME_COLS;col++)

{ if(map[row][col]==0)

{

count++;//记录空白的数量

if(count>=num)

{

find=true;

break;

}

}

}

if (find) {

break;

}

}

colorBack->addChild(tiled);

tiled->showAt(row, col);

m_allTiled.pushBack(tiled);

map[row][col]=m_allTiled.getIndex(tiled)+1;

///

if(freeCount==1)//没有空白区域

{//判定游戏输赢

//跳转场景

return;

}

}

六、可移动块移动和消除的实现(核心)

移动的过程是对数组地图的推断,以向上移动为例,代码例如以下:

void Game::moveUp(){

//向上移动全部的块

for (int col=0; col<GAME_COLS; col++) {

for(introw=GAME_ROWS-1;row>=0;row--)

{

if(map[row][col]>0)

{

for(int row1=row;row1<GAME_ROWS-1;row1++)

{

if(map[row1+1][col]==0)

{

map[row1+1][col]=map[row1][col];

map[row1][col]=0;

m_allTiled.at(map[row1+1][col]-1)->moveTo(row1+1, col);

}

else

{//推断,能否够消除

int numObj=m_allTiled.at(map[row1+1][col]-1)->m_number;

int numNow=m_allTiled.at(map[row1][col]-1)->m_number;

if(numObj==numNow)

{  m_sound_clear=true;

m_score+=numObj*2;

m_allTiled.at(map[row1+1][col]-1)->doubleNumber();

m_allTiled.at(map[row1][col]-1)->removeFromParent();

int index=map[row1][col];

m_allTiled.erase(map[row1][col]-1);

for (int r=0; r<GAME_ROWS; r++)

{

for (int c=0; c<GAME_COLS; c++) {

if(map[r][c]>index)

{map[r][c]--;

}

}

}

map[row1][col]=0;

}

break;

}

}

}

}

}

}

(详细看视频吧,大脑清醒的时候看)

七、游戏中增加声音

这个非常easy了,首先引入 #include "SimpleAudioEngine.h"

然后using namespace CocosDenshion;

之后就能够

SimpleAudioEngine::getInstance()->playEffect("moveClear.wav");

八、添加块的动画和颜色

让不同数字的变化有不同的背景颜色,这个非常easy,只是到PS中看像素须要点时间

void MovedTiled::doubleNumber()

{

this->m_number=this->m_number*2;

auto bk=this->getChildByTag(110);

Label * label=(Label *)bk->getChildByTag(10);

label->setString(StringUtils::format("%d",m_number));

//动画

bk->runAction(

Sequence::create(

ScaleTo::create(0.2, 0.8),

ScaleTo::create(0.2,1.2),

ScaleTo::create(0.2, 1)

, NULL));

switch (this->m_number) {

case 2:

bk->setColor(Color3B(230,220,210));

case 4:

bk->setColor(Color3B(230,210,190));

break;

case 8:

bk->setColor(Color3B(230,150,100));

label->setColor(Color3B(255,255,255));

break;

case 16:

bk->setColor(Color3B(230,120,80));

label->setColor(Color3B(255,255,255));

break;

case 32:

bk->setColor(Color3B(230,100,90));

label->setColor(Color3B(255,255,255));

break;

case 64:

bk->setColor(Color3B(230,70,60));

label->setColor(Color3B(255,255,255));

break;

case 128:

bk->setColor(Color3B(230,190,60));

label->setColor(Color3B(255,255,255));

break;

case 256:

bk->setColor(Color3B(230,190,60));

label->setColor(Color3B(255,255,255));

break;

case 512:

bk->setColor(Color3B(230,190,60));

label->setColor(Color3B(255,255,255));

break;

case 1024:

case 2048:

label->setScale(0.5);

bk->setColor(Color3B(210,180,30));

label->setColor(Color3B(255,255,255));

}

}

九、死亡判定

在产生新块的方法中,判定每个块的上下左右是否有同样数字的,假设没有则GAME OVER

if(freeCount==1)//没有空白区域

{//判定游戏输赢

//上 ,下 左 右 是否还能移动

for(int r=0;r<GAME_ROWS;r++)

{

for(int c=0;c<GAME_COLS;c++)

{  //第r行 第c列的数值

int num=m_allTiled.at(map[r][c]-1)->m_number;

int objNum=0;

//上

if(r+1<GAME_ROWS)

{

objNum=m_allTiled.at(map[r+1][c]-1)->m_number;

if(num==objNum)

{return ;}

}

//下

if(r-1>=0)

{

objNum=m_allTiled.at(map[r-1][c]-1)->m_number;

if(num==objNum)

{return ;}

}

//左

if(c-1>=0)

{

objNum=m_allTiled.at(map[r][c-1]-1)->m_number;

if(num==objNum)

{return ;}

}

//右

if(c+1<GAME_COLS)

{

objNum=m_allTiled.at(map[r][c+1]-1)->m_number;

if(num==objNum)

{return ;}

}

}

}

//跳转场景

auto scene=GameOver::createScene();

Director::getInstance()->replaceScene(TransitionFadeDown::create(0.5,scene));

return;

}

十、将《2048》移植到Android平台

10.1 屏幕适配

我们开发时候是以320X480(比較过时,通常会以960X640和1024X768为基础),可是目标Android设备的分辨率各不同样,为了让屏幕显示过程中适应终端的屏幕尺寸,能够缩放场景,在AppDelegate.cpp中改动例如以下代码

boolAppDelegate::applicationDidFinishLaunching() {

// initialize director

auto director = Director::getInstance();

auto glview = director->getOpenGLView();

if(!glview) {

glview =GLView::create("My Game");

director->setOpenGLView(glview);

}

   glview->setDesignResolutionSize(320, 480,ResolutionPolicy::EXACT_FIT);

director->setDisplayStats(true);

director->setAnimationInterval(1.0 / 60);

auto scene = Splash::createScene();

director->runWithScene(scene);

return true;

}

glview->setDesignResolutionSize的使用方法大家能够參考相关资料。

10.2 改动makefile文件

打开Game2048/proj.android/jni/Android.mk改动例如以下:

LOCAL_PATH := $(call my-dir)

include $(CLEAR_VARS)

$(callimport-add-path,$(LOCAL_PATH)/../../cocos2d)

$(callimport-add-path,$(LOCAL_PATH)/../../cocos2d/external)

$(callimport-add-path,$(LOCAL_PATH)/../../cocos2d/cocos)

LOCAL_MODULE := cocos2dcpp_shared

LOCAL_MODULE_FILENAME := libcocos2dcpp

LOCAL_SRC_FILES:= hellocpp/main.cpp \

                  ../../Classes/AppDelegate.cpp \

                  ../../Classes/SplashScene.cpp \

                  ../../Classes/GameScene.cpp \

                  ../../Classes/MovedTiled.cpp \

                  ../../Classes/GameOver.cpp

LOCAL_C_INCLUDES := $(LOCAL_PATH)/../../Classes

LOCAL_WHOLE_STATIC_LIBRARIES := cocos2dx_static

LOCAL_WHOLE_STATIC_LIBRARIES +=cocosdenshion_static

# LOCAL_WHOLE_STATIC_LIBRARIES += box2d_static

# LOCAL_WHOLE_STATIC_LIBRARIES +=cocosbuilder_static

# LOCAL_WHOLE_STATIC_LIBRARIES += spine_static

# LOCAL_WHOLE_STATIC_LIBRARIES +=cocostudio_static

# LOCAL_WHOLE_STATIC_LIBRARIES +=cocos_network_static

# LOCAL_WHOLE_STATIC_LIBRARIES +=cocos_extension_static

include $(BUILD_SHARED_LIBRARY)

$(call import-module,.)

$(call import-module,audio/android)

# $(call import-module,Box2D)

# $(callimport-module,editor-support/cocosbuilder)

# $(call import-module,editor-support/spine)

# $(callimport-module,editor-support/cocostudio)

# $(call import-module,network)

# $(call import-module,extensions)

(黑色加粗部分为改动内容,假设Classes下有子文件夹,还须要改动 LOCAL_C_INCLUDES:= …)

10.3.NDK编译源代码生成.so文件

打开终端,进入Game2048项目文件夹,输入下面命令:

cocos compile –p android

(好了,開始等吧,假设一切顺利会在Game2048/libs/生成一个.so文件)

10.4.在Eclipse中刷新项目

在Eclipse中选择项目名称然后刷新,这是后就能够直接安装到Android手机了,祝你成功!!!

说再多也没用,仅仅有自己亲自编一遍代码才知道,想成为高手的X-MEN们冲吧!!!