search

Home  >  Q&A  >  body text

Phaser failed to load the tile map, and the screen only displayed a black screen

I'm trying to load a tile map created in the Tiled map editor. I have exported it as a json file and placed it in the assets folder in the public folder along with my tile set. All that appears on the canvas is black. I tried changing the camera's position to see if that made a difference, but to no avail. I don't get any error messages and on the network tab I can see the map and tileset loading. I can't find an answer to this problem.

My 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() {
  // 在这里更新游戏状态
}

My 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>

I have logged the tileset and map and both load the objects correctly. Any help is greatly appreciated.

EDIT: I also cloned a repository on github that should work fine, but I'm having the same issue in their code. Really don't know what happened. This is the repository I checked from github: https://github.com/ourcade/phaser3-dungeon-crawler-starter

P粉832490510P粉832490510266 days ago698

reply all(1)I'll reply

  • P粉459578805

    P粉4595788052024-03-31 11:48:01

    Everything looks fine except for the render function in config that I don't understand. You can check the names of the Layer and Tileset in the JSON/Tiled and your code to see if they match (note the spaces and correct case) . This may cause the map to fail to draw. Especially the following statements:

    1. const map = this.make.tilemap({ key: 'map' })
      • Here is mapkey
    2. const tileset = map.addTilesetImage('RPG_Tileset', 'tiles')
      • Here are RPG_Tileset and tiles
    3. const layer = map.createLayer('Tile Layer 1', tileset, 0, 0)
      • Here is Tile Layer 1

    Even a missing trailing space may cause the creation to fail.

    By the way: Do you start from herehttps://github.com/ourcade/phaser3-dungeon-crawler-starter/releases/tag/latest Downloaded the zip file SourceWithAssets.zip, or if using git-lfs as mentioned in readme.md ? If so it should work, I just tried it and it works. If that doesn't work, make sure to update your version of node and/or npm and execute the npm install command in your home folder as described in the readme.

    reply
    0
  • Cancelreply