RPG風マップを実現する Egret公式推奨の方法 (成功編)

# これまで
1. [RPG風マップを実現する Egret公式推奨の方法 (失敗編) getResByUrlの呼び出しで失敗](https://qiita.com/motoyasu-yamada/items/1f10a0bedb68727852ca)
2. [RPG風マップを実現する Egret公式推奨の方法 (失敗編2) GZIP/ZLIB 圧縮された TMX はサポートされていない](https://qiita.com/motoyasu-yamada/items/e6de342003d8bdbaac8d)

> 今度は Uncaught Error: GZIP/ZLIB compressed TMX Tile Map not supported!という
> TMXファイルの形式がサポートされていない形式だと怒られました

```
tiled.js:3096 Uncaught Error: GZIP/ZLIB compressed TMX Tile Map not supported!
    at Function.Base64.decompress (tiled.js:3096)
    at Function.TMXUtils.decode (tiled.js:3166)
    at new TMXLayer (tiled.js:539)
    at TMXTilemap.parseLayer (tiled.js:1114)
    at TMXTilemap.readMapObjects (tiled.js:1044)
    at TMXTilemap.getLayers (tiled.js:957)
    at TMXTilemap.render (tiled.js:946)
    at Main.onMapComplete (Main.ts:56)
    at WebHttpRequest.EventDispatcher.$notifyListener (egret.js:349)
    at WebHttpRequest.EventDispatcher.dispatchEvent (egret.js:328)
```

# 作業開始

## 「tiled compression off」で検索
> https://gamedev.stackexchange.com/questions/86021/is-there-any-way-to-change-compression-type-of-tmx-file
> You can change it in the map properties. (Map -> Properties...)

## プロパティを確認する

![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/f556a30b-7cde-cf36-5fed-592d0f45ccba.png)

この状態で保存すると下記になる

```xml:desert.tmx
<?xml version="1.0" encoding="UTF-8"?>
<map version="1.2" tiledversion="1.2.2" orientation="orthogonal" renderorder="right-down" width="40" height="40" tilewidth="32" tileheight="32" infinite="0" nextlayerid="2" nextobjectid="1">
 <tileset firstgid="1" source="../../Program Files/Tiled/examples/desert.tsx"/>
 <layer id="1" name="Ground" width="40" height="40">
  <data encoding="base64" compression="zlib">
   eJztm...QDjOLfP
  </data>
 </layer>
</map>
```
## XML形式に変更する
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/edaed3de-2699-c062-1aae-3bc73d1c86bf.png)

こうなる！

```xml:desert.tmx
<?xml version="1.0" encoding="UTF-8"?>
<map version="1.2" tiledversion="1.2.2" orientation="orthogonal" renderorder="right-down" width="48" height="48" tilewidth="32" tileheight="32" infinite="0" nextlayerid="4" nextobjectid="1">
 <tileset firstgid="1" source="../../Program Files/Tiled/examples/desert.tsx"/>
 <layer id="3" name="Ground" width="48" height="48">
  <data>
   <tile gid="30"/>
 :
 :
   <tile/>
  </data>
 </layer>
</map>
```

## リソースを差し替える

前回プロジェクトのresourcesフォルダに配置した`desert.tmx`ファイルを先ほどのものに差し替えます

## 実行する!

あれエラーが出たぞ？！
というところですが前々回の話を思い出しましょう
https://qiita.com/motoyasu-yamada/items/1f10a0bedb68727852ca

```
tiled.js:2549 Uncaught Error: tmx not support tsx file load!!!
    at new TMXTileset (tiled.js:2549)
    at TMXTilemap.readMapObjects (tiled.js:1041)
    at TMXTilemap.getLayers (tiled.js:957)
    at TMXTilemap.render (tiled.js:946)
    at Main.onMapComplete (Main.ts:56)
    at WebHttpRequest.EventDispatcher.$notifyListener (egret.js:349)
    at WebHttpRequest.EventDispatcher.dispatchEvent (egret.js:328)
    at WebHttpRequest.EventDispatcher.dispatchEventWith (egret.js:389)
    at egret.web.js:1756
```

タイルセットはtsxファイルが使われていますが

```xml:desert.tmx
<?xml version="1.0" encoding="UTF-8"?>
<map version="1.2" tiledversion="1.2.2" orientation="orthogonal" renderorder="right-down" width="48" height="48" tilewidth="32" tileheight="32" infinite="0" nextlayerid="4" nextobjectid="1">
 <tileset firstgid="1" source="../../Program Files/Tiled/examples/desert.tsx"/>
 <layer id="3" name="Ground" width="48" height="48">
```

次のようにインラインで記述します

```xml:desert.tmx
<?xml version="1.0" encoding="UTF-8"?>
<map version="1.2" tiledversion="1.2.2" orientation="orthogonal" renderorder="right-down" width="48" height="48" tilewidth="32" tileheight="32" infinite="0" nextlayerid="4" nextobjectid="1">
 <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>
 <layer id="3" name="Ground" width="48" height="48">
```



## 成功！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/cd22623b-5720-a837-8676-15b81aedfba0.png)