Egret+TiledMap
1.Egret tiled库下载地址
https://github.com/egret-labs/egret-game-library/tree/master/tiled
- 1.将库文件放到工程根目录的libs目录下
- 修改 Egret 工程内根目录下的egretProperties.json，在modules下添加tiled模块
1
2
3
4
{
"name": "tiled",
"path": "./libs/tiled"
}
2.修改TiledMap文件
-
使用tiled自带的exmaple中的地图，如果没有可以去https://github.com/bjorn/tiled下载
-
Egret中只能选择Base64(uncompressed)模式，不支持压缩格式所以要打开修改一下,然后重新导出或直接保存tmx文件
注意： Egret 中还不支持载入tsx文件,用记事本打开desert.tmx文件
1
<tileset firstgid="1" source="desert.tsx"/>
修改为：
1
2
3
<tileset firstgid="1" name="Desert" tilewidth="32" tileheight="32" spacing="1" margin="1" tilecount="48">
<image source="tmw_desert_spacing.png" width="265" height="199"/>
</tileset>
修改完后复制tmw_desert_spacing.png以及desert.tmx到游戏工程中
3.Egret中读取TiledMap文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
class TiledMapTest extends egret.DisplayObjectContainer {
/*设置请求*/
private request: egret.HttpRequest;
/*设置资源加载路径*/
private url: string;
public doTest() {
/*初始化资源加载路径*/
this.url = "resource/assets/tiled/desert.tmx";
/*初始化请求*/
this.request = new egret.HttpRequest();
/*监听资源加载完成事件*/
this.request.once(egret.Event.COMPLETE, this.onMapComplete, this);
/*发送请求*/
this.request.open(this.url, egret.HttpMethod.GET);
this.request.send();
}
/*地图加载完成*/
private onMapComplete(event: egret.Event) {
/*获取到地图数据*/
var data: any = egret.XML.parse(event.currentTarget.response);
/*初始化地图*/
var tmxTileMap: tiled.TMXTilemap = new tiled.TMXTilemap(2000, 2000, data, this.url);
tmxTileMap.render();
/*将地图添加到显示列表*/
this.addChild(tmxTileMap);
}
}
效果如下:
☛兄dei，请我喝杯茶☚
