Phaser加载瓦片地图失败，画面仅显示黑屏-PHP中文网问答

我正在尝试加载在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:



  
    
    My Phaser Game

我已将tileset和map记录下来，两者都正确加载了对象。非常感谢任何帮助。

编辑：我还克隆了一个在github上应该正常工作的存储库，但我在他们的代码中遇到了同样的问题。真的不知道发生了什么。这是我从github上检查的存储库：https://github.com/ourcade/phaser3-dungeon-crawler-starter