EgretEngine

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


これまで


  1. RPG風マップを実現する Egret公式推奨の方法 (失敗編) getResByUrlの呼び出しで失敗

  2. RPG風マップを実現する Egret公式推奨の方法 (失敗編2) GZIP/ZLIB 圧縮された TMX はサポートされていない


今度は 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

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


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

こうなる!


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ファイルが使われていますが


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">

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


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