以下是我的代码: demo.json 文件(从平铺导出的地图):
{
"compressionlevel":-1,
"height":16,
"infinite":false,
"layers":[
{
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"height":16,
"id":1,
"name":"layer",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":16,
"x":0,
"y":0
}],
"nextlayerid":2,
"nextobjectid":1,
"orientation":"isometric",
"renderorder":"right-down",
"tiledversion":"1.11.0",
"tileheight":64,
"tilesets":[
{
"columns":1,
"firstgid":1,
"grid":
{
"height":64,
"orientation":"isometric",
"width":128
},
"image":"assets/tilesets/emp_1.png",
"imageheight":64,
"imagewidth":128,
"margin":0,
"name":"emp_1",
"spacing":0,
"tilecount":1,
"tileheight":64,
"tilewidth":128
}],
"tilewidth":128,
"type":"map",
"version":"1.10",
"width":16
}
index.html 文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Phaser Tilemap</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>
</head>
<body>
<button id="startButton">Start Game</button>
<script>
class TilemapScene extends Phaser.Scene {
preload() {
this.load.image('tiles', 'assets/tilesets/emp_1.png');
this.load.tilemapTiledJSON('tilemap', 'assets/maps/demo.json');
}
create() {
const map = this.make.tilemap({ key: 'tilemap' });
const tileset = map.addTilesetImage('emp_1', 'tiles');
const layer = map.createLayer('layer', tileset, 0, 0);
layer.setVisible(true);
}
}
const config = {
type: Phaser.AUTO,
width: 128*16,
height: 64*16,
backgroundColor: '#87CEEB',
scene: TilemapScene,
};
document.getElementById('startButton').addEventListener('click', () => {
document.getElementById('startButton').style.display = 'none';
const game = new Phaser.Game(config);
});
</script>
</body>
</html>
我的控制台没有给出任何错误,网络为所有请求提供 200 状态。我不知道为什么我看不到加载的地图(其中有一个图块,尝试使用多个图块和图层会导致同样的问题,所以我决定慢慢开始并找出错误)。我只能看到蓝色背景。请帮忙,已经搞了太久了。
我们的代码可以正常工作,问题与您平铺的
json
文件有关。data
文件的 json
属性的第一个值更改为“1”,您可以看到这一点,如下所示:
"data":[1, 1,
你应该看到一些东西。我假设(来自您的代码)您想要16x16图块,但
tiled
的定义显示图块大小为128x64。如果你解决这个问题,它应该可以工作。0
是一个空图块,因此您还必须修复它。
作为起点,您可以使用这些更改的
json
-值:{
/*...*/
"layers": [
{
"data": [
1, 1, 1, /* ... */
],
/*...*/
}
],
/* ... */
"tileheight": 16,
"tilesets": [
{
"columns": 1,
"firstgid": 1,
"grid": {
"height": 64,
"orientation": "isometric",
"width": 128
},
/* ... */
"tilecount": 64,
"tileheight": 16,
"tilewidth": 16
}
],
"tilewidth": 16,
/* ... */
}