Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

これまで

  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

motoyasu-yamada
1999年にスパイシーソフト起業、iアプリ等のマーケット「アプリゲット」や、カジゲー「チャリ走・糸通し」等のゲーム配信を手がける。約20年近くたち、新しい事業に取り組むために、2018年より新会社「Liberapp」を立ち上げ。HTML5アプリのプラットフォームを手掛けるスタートアップです。
https://twitter.com/MotoyasuYamada
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away