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
除了我不理解的
config中的render函数外，一切都看起来还好。您可以检查JSON/Tiled中的Layer和Tileset的名称以及您的代码，看它们是否匹配(注意空格和正确的大小写)。这可能导致地图无法绘制。特别是以下语句：const map = this.make.tilemap({ key: 'map' })map键const tileset = map.addTilesetImage('RPG_Tileset', 'tiles')RPG_Tileset和tilesconst 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命令。