Phaser n'a pas réussi à charger la carte de tuiles et l'écran n'a affiché qu'un écran noir
J'essaie de charger une carte en mosaïque créée dans l'éditeur de carte en mosaïque. Je l'ai exporté sous forme de fichier json et l'ai placé dans le dossier Assets du dossier public avec mon jeu de tuiles. Tout ce qui apparaît sur la toile est noir. J'ai essayé de changer la position de la caméra pour voir si cela faisait une différence, mais en vain. Je ne reçois aucun message d'erreur et sur l'onglet Réseau, je peux voir le chargement de la carte et du jeu de tuiles. Je ne trouve pas de réponse à ce problème.
Mon 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() {
// 在这里更新游戏状态
}
Mon 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>
J'ai enregistré le jeu de tuiles et la carte et les deux chargent les objets correctement. Toute aide est grandement appréciée.
EDIT : j'ai également cloné un référentiel sur github qui devrait fonctionner correctement, mais j'ai le même problème dans leur code. Je ne sais vraiment pas ce qui s'est passé. Voici le référentiel que j'ai vérifié sur github : https://github.com/ourcade/phaser3-dungeon-crawler-starter
