質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.33%

  • JavaScript

    17586questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • ゲーム開発

    172questions

  • enchant.js

    22questions

    enchant.jsとは、アプリやゲームを簡単に開発できるオープンソースのHTML5+JavaScriptベースのフレームワークです。プログラミング学習にも用いられ、多くの素材やプラグインが用意されています。

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 574

l_h_l_h

score 7

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2018/01/27 09:20

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

    キャンセル

  • l_h_l_h

    2018/01/28 01:47

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

    キャンセル

  • l_h_l_h

    2018/01/28 01:51

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

    キャンセル

回答 2

checkベストアンサー

+3

2つ疑問点があります。

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

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


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

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


となっています。

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

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


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/29 21:38

    回答ありがとうございます
    index.htmlについてはデバッグ途中であげてしまったためそのような形になってしまっておりました
    申し訳ございません
    tmxファイルの構造ですが、ご提示いただいたサンプルの
    <image source...
    の行を追加したところ、質問で提示したエラーは消滅しましたが、Error: failed in Deferred(
    enchant.js:5483:23)というエラーが出現しました
    こちらのエラーは以前enchant.jsを使っている時に画像を大量に読み込んだときに発生したエラーでした
    恐らく読み込む画像の量が多く処理しきれなかったのだと思いますが、今回そのエラーが出るということはまだどこかおかしいのだと思います……

    tmxファイルの仕様がデフォルトで異なっているということは、やはりバージョンの違いという線が濃厚みたいですね(思えば参考にした記事は古いものですがツール自体は新しいものをインストールしていた気がします)
    ただ、tiledmaploaderをjsで記述しているものがこちらしか見つからなかったので、いったん方針を転換した方が良いような気もします……

    キャンセル

+3

直接的な原因は「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 21:23

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

    キャンセル

  • 2018/01/30 09:23

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

    キャンセル

  • 2018/01/30 13:19

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

    キャンセル

  • 2018/01/30 19:57

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.33%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    17586questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • ゲーム開発

    172questions

  • enchant.js

    22questions

    enchant.jsとは、アプリやゲームを簡単に開発できるオープンソースのHTML5+JavaScriptベースのフレームワークです。プログラミング学習にも用いられ、多くの素材やプラグインが用意されています。