塔防游戏（一） 挖坑（Auto-batching）

做塔防游戏嘛，地图应该是一大堆格子，相当于种萝卜的坑嘛，防御塔的大小是3*3还是4*4就看以后需要了，嗯，先挖坑，哈哈..

cocos-2d-x 3.0里有一个Auto-batching功能，可以让拥有同种文理的精灵在同一批次中进行渲染，但在使用时有个需要注意的地方

注：默认分辨率设为1280*720，至于原因嘛，我的笔记本是1080P的，720P的游戏加上窗口外框不会超过屏幕范围，调试方便。

代码一：

bool Table::init()//初始化函数
{
	Sprite* sp = NULL;

	for (int i = 0; i < 36; i++)
	{
		for (int j = 0; j < 64; j++)
		{
			position[i][j] = NULL;
			if (i%2 == 0 && j%2 == 0)
			{
				sp = Sprite::create("picture\\RedBlock.png");
			}
			if (i%2 != 0 && j%2 == 0)
			{
				sp = Sprite::create("picture\\YellowBlock.png");
			}
			if (i%2 != 0 && j%2 != 0)
			{
				sp = Sprite::create("picture\\BlueBlock.png");
			}
			if (i%2 == 0 && j%2 != 0)
			{
				sp = Sprite::create("picture\\GreenBlock.png");
			}
			sp->setPosition(j*20+10,i*20+10);
			this->addChild(sp,0);
		}
	}

	return true;
}

运行结果：

GL calls:2305

代码二：

bool Table::init()//初始化函数
{
	Sprite* sp = NULL;
	for (int i = 0; i < 36; i++)
	{
		for (int j = 0; j < 64; j++)
		{
			position[i][j] = NULL;
		}
	}
	for (int i = 0; i < 36; i++)
	{
		for (int j = 0; j < 64; j++)
		{
			if (i%2 == 0 && j%2 == 0)
			{
				sp = Sprite::create("picture\\RedBlock.png");
				sp->setPosition(j*20+10,i*20+10);
				this->addChild(sp,0);
			}
		}
	}
	for (int i = 0; i < 36; i++)
	{
		for (int j = 0; j < 64; j++)
		{
			if (i%2 != 0 && j%2 == 0)
			{
				sp = Sprite::create("picture\\YellowBlock.png");
				sp->setPosition(j*20+10,i*20+10);
				this->addChild(sp,0);
			}
		}
	}
	for (int i = 0; i < 36; i++)
	{
		for (int j = 0; j < 64; j++)
		{
			if (i%2 != 0 && j%2 != 0)
			{
				sp = Sprite::create("picture\\BlueBlock.png");
				sp->setPosition(j*20+10,i*20+10);
				this->addChild(sp,0);
			}
		}
	}
	for (int i = 0; i < 36; i++)
	{
		for (int j = 0; j < 64; j++)
		{
			if (i%2 == 0 && j%2 != 0)
			{
				sp = Sprite::create("picture\\GreenBlock.png");
				sp->setPosition(j*20+10,i*20+10);
				this->addChild(sp,0);			
			}
		}
	}
	return true;
}

运行结果

GL calls:5

两个代码实现的功能一样，都是把红黄蓝绿的格子显示在屏幕上

代码一的代码比较简单只用了一个循环，四种颜色的块交替显示在屏幕上（渲染顺序是：红黄蓝绿、红黄蓝绿、红黄蓝绿......渲染完成）GL calls:2305

代码二的代码长了一些，用了4个循环分别渲染每种颜色（渲染顺序是：红、红、红...黄、黄、黄...蓝、蓝、蓝...绿、绿、绿...渲染完成）GL calls:5

可见想要同批次渲染一堆纹理相同的精灵，需要让他们一起出现！

当精灵数量很多的时候Auto-batching就会很好用了（比如显示一大堆沙子...）