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
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Tout semble bien sauf la fonction
config中的renderque je ne comprends pas. Vous pouvez vérifier les noms du Layer et du Tileset dans le JSON/Tiled et votre code pour voir s'ils correspondent (notez les espaces et la casse correcte) . Cela peut empêcher le dessin de la carte. Surtout les phrases suivantes :const map = this.make.tilemap({ key: 'map' })mapcléconst tileset = map.addTilesetImage('RPG_Tileset', 'tiles')RPG_Tileset和tilesconst layer = map.createLayer('Tile Layer 1', tileset, 0, 0)Tile Layer 1Même l'absence d'un espace de fin peut entraîner l'échec de la création.
Au fait : Avez-vous téléchargé le fichier zip SourceWithAssets.zip à partir d'ici https://github.com/ourcade/phaser3-dungeon-crawler-starter/releases/tag/latest, Ou si c'est comme la commande
readme.md中提到的那样使用了git-lfs？如果是这样，它应该可以工作，我刚刚尝试了一下，它可以工作。如果不行，请确保更新您的node和/或npm版本，并按照readme中的说明在主文件夹中执行npm install.