タイル マップ エディターで作成したタイル マップをロードしようとしています。これを json ファイルとしてエクスポートし、タイル セットとともにパブリック フォルダー内のアセット フォルダーに配置しました。キャンバスに現れるものはすべて黒です。カメラの位置を変えて変化がないか試してみましたが、効果はありませんでした。エラー メッセージは表示されず、[ネットワーク] タブでマップとタイルセットの読み込みが確認できます。この問題に対する答えが見つかりません。
私のmain.js
リーリー私のindex.html:
リーリータイルセットとマップをログに記録し、両方ともオブジェクトを正しく読み込みました。ご協力をよろしくお願いいたします。
編集: 問題なく動作するはずの Github 上のリポジトリのクローンも作成しましたが、コードで同じ問題が発生しています。本当に何が起こったのか分かりません。これは github から確認したリポジトリです: https://github.com/ourcade/phaser3-dungeon-crawler-starter
config
のrender
関数が理解できないことを除いて、すべて問題ないようです。 JSON/タイル内のレイヤーとタイルセットの名前とコードをチェックして、それらが (スペースと大文字小文字の区別に注意してください) と一致するかどうかを確認できます。これにより、マップの描画に失敗する可能性があります。特に次のステートメント:const マップ = this.make.tilemap({ key: 'map' })
マップ
キーconst タイルセット = map.addTilesetImage('RPG_Tileset', 'tiles')
RPG_Tileset
とタイル
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
コマンドを実行してください。リードミー。