平铺地图未在 Phaser 中加载,仅获取背景颜色

问题描述 投票:0回答:1

以下是我的代码: 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 assets phaser-framework tiled phaserjs
1个回答
0
投票

我们的代码可以正常工作,问题与您平铺的

json
文件有关。
如果将
data
文件的
json
属性的第一个值更改为“1”,您可以看到这一点,如下所示:

"data":[1, 1,

你应该看到一些东西。我假设(来自您的代码)您想要16x16图块,但

tiled
的定义显示图块大小为128x64。如果你解决这个问题,它应该可以工作。
并且不要忘记索引
0
是一个空图块,因此您还必须修复它。

作为起点,您可以使用这些更改的

json
-值:
(或者更好地解决 Tiled 中的问题)

{
/*...*/
"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,
/* ... */
}
© www.soinside.com 2019 - 2024. All rights reserved.