首页 > 代码库 > cocos2d-x 3.2 之 2048 —— 第二篇
cocos2d-x 3.2 之 2048 —— 第二篇
***************************************转载请注明出处：http://blog.csdn.net/lttree******************************************
Ok，大家十一快乐~。~
2048开发第二篇，有点慢了= =。。
恩，这次要讲述的是 游戏界面的 布局及绘制。
之前，我们做了 主界面，做了跳转到主界面的文字按钮，还有退出的图片按钮。
这次，我们要做的就是一件事，
绘制游戏界面的网格
游戏网格原理很简单，
就是两个LayerColor层的堆叠，
先在原来游戏界面添加一个大的LayerColor层，
然后在这个LayerColor层，添加16个小LayerColor层。
在游戏界面的init函数里进行绘制，
绘制的时候，要知道颜色设置：
Color3B 有三个元素，三个元素就是RGB，每个值从0到255
Color4B 有四个元素，前三个和3B一样，最后一个设置的是透明度，同样0到255,0全透明，255不透明
而且，要现在游戏内的宏定义中添加 每个格子大小，和行列数目：
#define GAME_ROWS 4 #define GAME_COLS 4 #define GAME_TILED_WIDTH 64 #define GAME_TILED_HEIGHT 64 #define GAME_TILED_BOARD_WIDTH 4
最后一个，就是格子间的 分界线 的宽度。
然后，我们先在GameScene.h中，添加一个LayerColor指针
LayerColor* colorBack;然后，在init中，添加那个大的LayerColor层：（注意调用GAME_ROWS这些时，要包含GameDefine.h呀~）
// 初始化 游戏网格 colorBack = LayerColor::create ( Color4B(170,170,170,255), GAME_TILED_WIDTH*GAME_COLS+GAME_TILED_BOARD_WIDTH*(GAME_COLS+1), GAME_TILED_HEIGHT*GAME_ROWS+GAME_TILED_BOARD_WIDTH*(GAME_ROWS+1) ); // 这个的锚点在左下角 0,0 点，所以要改锚点到中间 colorBack->ignoreAnchorPointForPosition(false); colorBack->setAnchorPoint(Point(0.5,0.5)); colorBack->setPosition(Point(GAME_SCREEN_WIDTH/2,GAME_SCREEN_HEIGHT/2 )); this->addChild(colorBack);
LayerColor::create 内有三个参数：——颜色（包括透明度），宽，高
为什么宽和高设置成这样呢？
——宽度 是 每个格子宽度*格子数目+分界线宽度*（格子数目+1）
因为两边的分界线也要算上哟，
高度同宽度，也要这么计算。
然后，对于LayerColor层，它的锚点默认是在左下角的，
这个，具体可以看，我之前发表过的一篇文章->http://blog.csdn.net/lttree/article/details/39317329
所以，我们先对锚点进行开锁，然后设置成中央位置。
再进行setPosition
再次运行，我们就可以看到，游戏界面中央，出现了一块灰色的正方形，
（为什么是灰色的？——看RGB去= =。）
接下来，需要加小的layercolor层啦：
// 初始化每一个网格
for( int row = 0 ; row < GAME_ROWS ; ++row )
{
for( int col = 0 ; col < GAME_COLS ; ++col )
{
auto layerTiled = LayerColor::create(
Color4B(70,70,70,80),
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);
}
}恩，两层循环，一个个格子添加，
注意一下，addChild语句，这些小层是添加在 大LayerColor层中，并非是添加在底层中的哟。
再次运行，我们可以清楚看到，这些格子咯：
然后，要在GameScene.h中添加一个二维数组,map
用来保存每个格子的状况哟~
这个map是逻辑中的网格数组，
因为我们虽然画出来网格的样子，可是电脑内部，对每个格子位置，是没有定义的，
所以，我们要借助一个二维数组，可以定位每个格子的位置，以后也可以确定格子的内容哟：
GameScene.h:（注意调用GAME_ROWS这些时，要包含GameDefine.h呀~）
int map[GAME_ROWS][GAME_COLS];当然也要在.cpp进行初始化哟：
// 初始化 逻辑网格数组
for( int i = 0 ; i < GAME_ROWS ; ++i )
{
for( int j = 0 ; j < GAME_COLS ; ++j )
{
map[i][j] = 0;
}
}恩，这次，先到这里。
下篇就要进行，数字块类的建立了~
本篇文章代码下载：http://pan.baidu.com/s/1pJujrDL
***************************************转载请注明出处：http://blog.csdn.net/lttree******************************************
cocos2d-x 3.2 之 2048 —— 第二篇