javascriptのtiledmaploaderというプラグインについて

こちらのサイトのtiledmaploaderというプラグインを使用したいのですが、記載されているパッケージをダウンロードして指示通りに書き換えてもエラーが出力されます

エラーは以下のものです

TypeError: xml.getElementsByTagName(...)[0] is undefined tiledMapLoader.js:149:28

これはenchant.jsというゲーム制作用のフレームワークに付属しているサンプルコードを使用しております
簡単に解説すると、付属のサンプルコードでは、巨大な配列に元画像のタイルを格納していき作成しているのですが、此方のプラグインを使うことで、配列を使わずに、ペイントソフトのようにマップを作ることができ、そのままそれを読み込むことができます

詳しくはこちらの記事を参考にしていただきたいです

tilelMapLoader.jsというファイルがどのように動いているのか、全く読み解けないので、どなたかご助力いただけないでしょうか
よろしくお願いいたします

<index.html>
ブラウザ上にゲームを表示するファイルです

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no"> 
        <meta name="apple-mobile-web-app-capable" content="yes"> 
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <title>enchant</title>
        <script type="text/javascript" src="enchant.js"></script>
        <script type="text/javascript" src="ui.enchant.js"></script>
        <script type="text/javascript" src="game.js"></script>
<script type="text/javascript" src="tiledMapLoader.js"></script>
<script type="text/javascript">
  //読み込むファイルを指定する
  tiled.files = ['map0.tmx'];
  //複数のファイルの時は
  //tiled.files = ['map0.tmx','map1.tmx','map2.tmx'];
</script>
        <style type="text/css">
            body {
                margin: 0;
            }
        </style>
    </head>
    <body>
    </body>
</html>

コード

<game.js>
ゲームを動かすメインのファイルです

enchant();

window.onload = function() {
    var game = new Game(320, 320);
    game.fps = 15;
    game.preload(tiled[0].image, 'chara0.gif');
    game.onload = function() {
  var map = new Map(tiled[0].map.tileheight, tiled[0].map.tilewidth);
  map.image = game.assets[tiled[0].image];
  map.loadData.apply(map, tiled[0].background);
  map.collisionData = tiled[0].collision;

  var foregroundMap = new Map(tiled[0].map.tileheight, tiled[0].map.tilewidth);
  foregroundMap.image = game.assets[tiled[0].image];
  foregroundMap.loadData.apply(foregroundMap, tiled[0].foreground);
        var player = new Sprite(32, 32);
        player.x = 6 * 16 - 8;
        player.y = 10 * 16;
        var image = new Surface(96, 128);
        image.draw(game.assets['chara0.gif'], 0, 0, 96, 128, 0, 0, 96, 128);
        player.image = image;

        player.isMoving = false;
        player.direction = 0;
        player.walk = 1;
        player.addEventListener('enterframe', function() {
            this.frame = this.direction * 3 + this.walk;
            if (this.isMoving) {
                this.moveBy(this.vx, this.vy);
 
                if (!(game.frame % 3)) {
                    this.walk++;
                    this.walk %= 3;
                }
                if ((this.vx && (this.x-8) % 16 == 0) || (this.vy && this.y % 16 == 0)) {
                    this.isMoving = false;
                    this.walk = 1;
                }
            } else {
                this.vx = this.vy = 0;
                if (game.input.left) {
                    this.direction = 1;
                    this.vx = -4;
                } else if (game.input.right) {
                    this.direction = 2;
                    this.vx = 4;
                } else if (game.input.up) {
                    this.direction = 3;
                    this.vy = -4;
                } else if (game.input.down) {
                    this.direction = 0;
                    this.vy = 4;
                }
                if (this.vx || this.vy) {
                    var x = this.x + (this.vx ? this.vx / Math.abs(this.vx) * 16 : 0) + 16;
                    var y = this.y + (this.vy ? this.vy / Math.abs(this.vy) * 16 : 0) + 16;
                    if (0 <= x && x < map.width && 0 <= y && y < map.height && !map.hitTest(x, y)) {
                        this.isMoving = true;
                        arguments.callee.call(this);
                    }
                }
            }
        });

        var stage = new Group();
        stage.addChild(map);
        stage.addChild(player);
        stage.addChild(foregroundMap);
        game.rootScene.addChild(stage);

        var pad = new Pad();
        pad.x = 0;
        pad.y = 220;
        game.rootScene.addChild(pad);

        game.rootScene.addEventListener('enterframe', function(e) {
            var x = Math.min((game.width  - 16) / 2 - player.x, 0);
            var y = Math.min((game.height - 16) / 2 - player.y, 0);
            x = Math.max(game.width,  x + map.width)  - map.width;
            y = Math.max(game.height, y + map.height) - map.height;
            stage.x = x;
            stage.y = y;
        });
    };
    game.start();
};

map0.tmx
サイズ的に文字数制限に引っかかるためこちらのアップローダに公開しました

tiledMapLoaderも記載しようと思いましたが文字数制限に引っかかってしまうため、記載できませんでした
参考としては、一番上で紹介した記事またはこちらに個別でファイルが上がっています
何かありましたらご要望お願いします
お手数ですがよろしくお願いいたします

masaya_ohashi

2018/01/26 07:59

あなたがtiledmaploaderを使っている箇所のコードを提示してくれないと答えようがありませんよ。

l_h_l_h

2018/01/26 08:57

ありがとうございますコードは一番上のリンクからダウンロードできるパッケージのサンプルを記事の指示通りに書き換えたものそのままです今出先なので帰ったらまたコードも載せさせていただきます

Lhankor_Mhy

2018/01/27 00:20

エラーメッセージを見る限り、xml.getElementsByTagName('image') が返ってきていないようです。map.tmx をご提示いただけますか？

l_h_l_h

2018/01/27 16:47

ありがとうございます　ファイルサイズ的にも字数制限にかかってしまうためアップローダに上げさせていただきました　また、map.tmxはこちらのツールを使って自動生成されます　ご参考にしてください　ttp://d.hatena.ne.jp/tetsuroh/20111120/1323254681

l_h_l_h

2018/01/27 16:51

testmap.tsxというファイルもあったので追加させていただきました　xmlの記述があるのでこのファイルが怪しい気もします　ファイル名がtmxファイルと異なっていますが、色々試していた途中のものなので気にしないでください

行動規範の内容に同意します

回答2件

ベストアンサー

2つ疑問点があります。

1点目はtmxファイルの構造です。
アップロードいただいたmap0.tmxを確認しましたところ、image要素がないためエラーになっているようです。
TiledMapLoaderにあったサンプルコードを見ると

xml
1 <tileset firstgid="1" name="map1" tilewidth="16" tileheight="16">
2  <image source="map1.png" width="320" height="512"/>
3 </tileset>
4 <tileset firstgid="641" name="pad" tilewidth="16" tileheight="16">
5  <image source="pad.png" width="200" height="100"/>
6 </tileset>

となっているところが、質問者のコードでは

xml
1 <tileset firstgid="1" source="map1test.tsx"/>

となっています。

2点目は初期化の部分です。

HTML
1<script type="text/javascript">
2  //読み込むファイルを指定する
3  //tiled.files = ['map0.tmx'];
4  //複数のファイルの時は
5  //tiled.files = ['map0.tmx','map1.tmx','map2.tmx'];
6</script>

ここがコメントアウトしてあるため、ファイルが正しく読めていないのではないでしょうか。

TiledMapLoader
上記を拝見しましたが、最終更新が7年前とずいぶん古いコードです。
一方で、
TMX Changelog — Tiled 1.1.0 documentation
と、tmxの仕様は更新されているようです。
tiledMapLoader.jsが最新のバージョンに対応していないのではないかな、と思います。

投稿2018/01/29 02:21

Lhankor_Mhy

総合スコア36115

l_h_l_h

2018/01/29 12:38

回答ありがとうございます index.htmlについてはデバッグ途中であげてしまったためそのような形になってしまっておりました申し訳ございません tmxファイルの構造ですが、ご提示いただいたサンプルの <image source... の行を追加したところ、質問で提示したエラーは消滅しましたが、Error: failed in Deferred（ enchant.js:5483:23）というエラーが出現しましたこちらのエラーは以前enchant.jsを使っている時に画像を大量に読み込んだときに発生したエラーでした恐らく読み込む画像の量が多く処理しきれなかったのだと思いますが、今回そのエラーが出るということはまだどこかおかしいのだと思います…… tmxファイルの仕様がデフォルトで異なっているということは、やはりバージョンの違いという線が濃厚みたいですね（思えば参考にした記事は古いものですがツール自体は新しいものをインストールしていた気がします）ただ、tiledmaploaderをjsで記述しているものがこちらしか見つからなかったので、いったん方針を転換した方が良いような気もします……

行動規範の内容に同意します

直接的な原因は「TypeError: xml.getElementsByTagName(...)[0] is undefined tiledMapLoader.js:149:28」というエラーメッセージの通りで、tiledMapLoader.jsの149行目で「xmlからimageタグを探し出して、それの0番目からsourceの属性を取り出す、という処理をしているのですが、あなたの提示しているmap0.tmxにはimageというタグが含まれていません。
testmap.tsxというファイルにはimageタグが含まれています。そして、map0.tmxではtilesetタグにmap1test.tsxというファイルが指定されています。なにか関連があるように見えますが、生成ツールのほうの使用方法を詳しく見ていないため、なぜこのようなことになっているかは不明です。なにか直せる心当たりはありますか？

投稿2018/01/29 01:25

masaya_ohashi

総合スコア9206

l_h_l_h

2018/01/29 12:23

回答ありがとうございますファイル名がおかしなことになっていたようだったんのでツールを使いtsx,tmxファイルを作りなおしました指定するファイル名はちゃんとできましたが、エラーメッセージは変化なしでした……

masaya_ohashi

2018/01/30 00:23

更新したファイルを別の場所にアップロードしてください。

masaya_ohashi

2018/01/30 04:19

Lhankor_Mhyさんの回答の方で触れられているように、私もこの現象の原因はバージョンの違い説が濃厚かと思います。

l_h_l_h

2018/01/30 10:57

返信ありがとうございます https://ux.getuploader.com/code2_tera/ こちらのアップローダにファイル一式をあげました今回作り直したものはtest.tmxおよびmap1.tsxですツールの昔のバージョンをダウンロードして試してみようと思ったのですが、どうやら古いものはもう公開されていないようでした……

行動規範の内容に同意します

あなたの回答