***************************************转载请注明出处:http://blog.csdn.net/lttree******************************************


Ok,大家十一快乐~。

~

2048开发第二篇,有点慢了= =。


恩,这次要讲述的是  游戏界面的 布局及绘制。


之前,我们做了 主界面,做了跳转到主界面的文字button。还有退出的图片button。

这次。我们要做的就是一件事,

绘制游戏界面的网格


游戏网格原理非常easy,

就是两个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******************************************