搜尋

首頁  >  問答  >  主體

Phaser載入瓦片地圖失敗，畫面僅顯示黑屏

我正在嘗試載入在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

P粉832490510P粉832490510236 天前657

全部回覆(1)我來回復

  • P粉459578805

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

    除了我不理解的config中的render函數外，一切都看起來還好。您可以檢查JSON/Tiled中的Layer和Tileset的名稱以及您的程式碼，看看它們是否符合(注意空格和正確的大小寫)。這可能導致地圖無法繪製。特別是以下語句：

    1. const map = this.make.tilemap({ key: 'map' })
      • 這裡是map鍵
    2. #const tileset = map.addTilesetImage('RPG_Tileset', 'tiles')
      • 這裡是RPG_Tileset和tiles
    3. const 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命令。

    回覆
    0
  • 取消回覆