Cocos2dx <6> 瓷砖地图(1)

<瓷砖地图的定义>

定义: 由多个正方形和长方形组成的游戏地图。

瓷砖地图按照层级来分,上面的图层会遮蔽下面的图层。并且每块瓷砖都有唯一的标记(GID)。

瓷砖地图的坐标系与Cocos2d-x的坐标系不同,瓷砖地图的坐标系是以左上角为原点；Cocos2dx的坐标系是以左下角为原点。

<使用Tield制作瓷砖地图>

a. 打开地图编辑器Tield,文件--->新建文件。地图方向正常代表的是垂直90°视角，45°代表的是45°瓷砖地图；

Cocos2dx <6> 瓷砖地图(1)

(地图是由一个个小方块组成，所以宽度35块，高度20块。每个方块的尺寸单位是像素)

点击OK,我们创建好了地图；为了方便绘制地图,我们点击视图-->显示网格。

b. 添加图块(地图中的添加新图块或者右边图块中添加)

Cocos2dx <6> 瓷砖地图(1)

注意: 为了以后方便,我们将图片放在Cocos2dx中的Resrous目录下,之后再浏览。

边距和间距就是为了便于观察，与地图大小无关。点击OK,将图片素材添加到Tield中。

c. 创建地图

鼠标选择图块层中的任意单元,然后单击左边的图层就可以编辑地图。

完成好的地图：

Cocos2dx <6> 瓷砖地图(1)

创建地图我们需要注意的地方:

a. 同一个图层，只能用一张纹理图片;

b. 图层中不允许没有任何元素,要么将图层删掉，要么将图层上放置一个透明的图块。

<游戏中使用瓷砖地图>

上面,我们已经做好了瓷砖地图,现在在游戏中使用瓷砖地图。

（使用TMXTiledMap加载tmx文件到游戏中）

a. TMXTiledMap 是Cocos2dx提供用来解析和渲染tmx地图的类；

b. TMXTiledMap加载tmx地图: 创建TMXTiledMap的对象,然后将该对象添加到当前层。

automap=TMXTiledMap::create("map01.tmx");
map->setAnchorPoint(Vec2(0, 0));  map->setTag(1);

if (map == NULL)
{
  MessageBox("瓷砖地图未载入",NULL);
}
this->addChild(map);

加载tmx地图常见错误:

a. 创建tmx地图注意的两点;

b. 将图片素材(png格式)和tmx地图文件放在同一个目录；

c. 制作地图时修改参数: 编辑--->参数--->另存为数据层(Base64(gzip压缩));

d. 用记事本打开tmx文件,查看其中的图片来源,改为这种形式;

 <image source="map.png" width="265"     height="199"/>

e. Cocos2dx默认的资源路径是Resrous。(以后在遇到问题，在总结)

（拖动TMX地图）

原理: 手指或者鼠标在屏幕中移动时,获取移动的大小和方向,然后将tmx文件按照移动的大小和方向重新

//触摸事件:
	listener = EventListenerTouchOneByOne::create();
	listener->onTouchBegan = CC_CALLBACK_2(TieldMap::onTouchB,this);
	listener->onTouchMoved = CC_CALLBACK_2(TieldMap::onMoved, this);
	_eventDispatcher->addEventListenerWithSceneGraphPriority(listener,this);

bool TieldMap::onTouchB(cocos2d::Touch * touch, cocos2d::Event * event)
{
	return true;
}

void TieldMap::onMoved(cocos2d::Touch * touch, cocos2d::Event * event)
{
	//获取移动的大小和方向
	Vec2 pos = touch->getDelta();
	//根据标签获得对象
	auto tmx = this->getChildByTag(1);
	auto currentPos = tmx->getPosition();
	tmx->setPosition(Vec2(currentPos.x + pos.x,currentPos.y));
}

秒客网

Cocos2dx <6> 瓷砖地图(1)

相关文章