Phaser konnte die Kachelkarte nicht laden und auf dem Bildschirm wurde nur ein schwarzer Bildschirm angezeigt
Ich versuche, eine Kachelkarte zu laden, die im Editor für gekachelte Karten erstellt wurde. Ich habe es als JSON-Datei exportiert und zusammen mit meinem Kachelsatz im Ordner „Assets“ im öffentlichen Ordner abgelegt. Alles, was auf der Leinwand erscheint, ist schwarz. Ich habe versucht, die Position der Kamera zu ändern, um zu sehen, ob das einen Unterschied macht, aber ohne Erfolg. Ich erhalte keine Fehlermeldungen und auf der Registerkarte „Netzwerk“ kann ich sehen, wie die Karte und das Kachelset geladen werden. Ich kann keine Antwort auf dieses Problem finden.
Mein 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() {
// 在这里更新游戏状态
}
Mein 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>
Ich habe das Kachelset und die Karte protokolliert und beide laden die Objekte korrekt. Jede Hilfe wird sehr geschätzt.
EDIT: Ich habe auch ein Repository auf Github geklont, das gut funktionieren sollte, aber ich habe das gleiche Problem in ihrem Code. Ich weiß wirklich nicht, was passiert ist. Dies ist das Repository, das ich von Github überprüft habe: https://github.com/ourcade/phaser3-dungeon-crawler-starter
