Phaser がタイル マップのロードに失敗し、画面に黒い画面だけが表示されました。

Question

タイル マップ エディターで作成したタイル マップをロードしようとしています。これを json ファイルとしてエクスポートし、タイル セットとともにパブリック フォルダー内のアセット フォルダーに配置しました。キャンバスに現れるものはすべて黒です。カメラの位置を変えて変化がないか試してみましたが、効果はありませんでした。エラー メッセージは表示されず、[ネットワーク] タブでマップとタイルセットの読み込みが確認できます。この問題に対する答えが見つかりません。

私のmain.js

リーリー

私のindex.html:

リーリー

タイルセットとマップをログに記録し、両方ともオブジェクトを正しく読み込みました。ご協力をよろしくお願いいたします。

編集: 問題なく動作するはずの Github 上のリポジトリのクローンも作成しましたが、コードで同じ問題が発生しています。本当に何が起こったのか分かりません。これは github から確認したリポジトリです: https://github.com/ourcade/phaser3-dungeon-crawler-starter

Answer 1

config の render 関数が理解できないことを除いて、すべて問題ないようです。 JSON/タイル内のレイヤーとタイルセットの名前とコードをチェックして、それらが (スペースと大文字小文字の区別に注意してください) と一致するかどうかを確認できます。これにより、マップの描画に失敗する可能性があります。特に次のステートメント:

1. const マップ = this.make.tilemap({ key: 'map' })
   • ここに マップキー
   があります
2. const タイルセット = map.addTilesetImage('RPG_Tileset', 'tiles')
   • こちらは RPG_Tileset と タイル
3. constlayer =map.createLayer('タイルレイヤー1',タイルセット,0,0)
   • ここは タイル レイヤー 1

末尾のスペースが欠落している場合でも、作成が失敗する可能性があります。

ところで: ここから始めますかhttps://github.com/ourcade/phaser3-dungeon-crawler-starter/releases/tag/latest zip ファイル SourceWithAssets.zip をダウンロードしましたか、readme.md に記載されている git-lfs を使用している場合は?そうであれば、うまくいくはずです。試してみたところ、うまくいきました。これが機能しない場合は、必ず node や npm のバージョンを更新し、ホーム フォルダーで npm install コマンドを実行してください。リードミー。