我正在尝试加载在Tiled地图编辑器中创建的瓦片地图。我已将其导出为json文件，并将其与我的瓦片集一起放在公共文件夹中的assets文件夹中。在画布上显示的只是黑色。我尝试更改相机的位置以查看是否有所不同，但没有效果。我没有收到任何错误消息，在网络选项卡上可以看到地图和瓦片集正在加载。我无法找到解决此问题的答案。
我的main.js
var config = {
type: Phaser.CANVAS,
width: 800,
height: 600,
scene: {
preload: preload,
create: create,
update: update,
},
render() {
Phaser.Renderer.CANVAS
},
}
var game = new Phaser.Game(config)
function preload() {
console.log('preload')
// 在这里加载资源
this.load.setBaseURL('http://localhost:5500/public/assets/')
this.load.tilemapTiledJSON('map', 'map.json')
this.load.image('tiles', 'Tileset.png')
}
function create() {
// 在这里设置游戏对象和逻辑
const map = this.make.tilemap({ key: 'map' })
const tileset = map.addTilesetImage('RPG_Tileset', 'tiles')
console.log(tileset)
const layer = map.createLayer('Tile Layer 1', tileset, 0, 0)
// 居中图层
const width = layer.widthInPixels
const height = layer.heightInPixels
layer.setPosition(
game.config.width / 2 - width / 2,
game.config.height / 2 - height / 2
)
// 设置相机以显示地图的相关部分
this.cameras.main.setBounds(0, 0, game.config.width, game.config.height)
this.cameras.main.centerOn(map.widthInPixels / 2, map.heightInPixels / 2)
}
function update() {
// 在这里更新游戏状态
}
我的index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My Phaser Game</title>
</head>
<body>
<canvas id="game"></canvas>
<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>
<script src="main.js"></script>
</body>
</html>
我已将tileset和map记录下来，两者都正确加载了对象。非常感谢任何帮助。
编辑：我还克隆了一个在github上应该正常工作的存储库，但我在他们的代码中遇到了同样的问题。真的不知道发生了什么。这是我从github上检查的存储库：https://github.com/ourcade/phaser3-dungeon-crawler-starter
除了我不理解的
config中的render函数外，一切都看起来还好。您可以检查JSON/Tiled中的Layer和Tileset的名称以及您的代码，看它们是否匹配(注意空格和正确的大小写)。这可能导致地图无法绘制。特别是以下语句：const map = this.make.tilemap({ key: 'map' })map键const tileset = map.addTilesetImage('RPG_Tileset', 'tiles')RPG_Tileset和tilesconst layer = map.createLayer('Tile Layer 1', tileset, 0, 0)Tile Layer 1即使缺少一个尾随空格也可能导致创建失败。
顺便说一下：您是否从这里https://github.com/ourcade/phaser3-dungeon-crawler-starter/releases/tag/latest下载了zip文件SourceWithAssets.zip，或者是否像
readme.md中提到的那样使用了git-lfs？如果是这样，它应该可以工作，我刚刚尝试了一下，它可以工作。如果不行，请确保更新您的node和/或npm版本，并按照readme中的说明在主文件夹中执行npm install命令。