Невозможно загрузить наборы плиток и карты в мою игру Phaser3 - PullRequest
Новая
       55

Невозможно загрузить наборы плиток и карты в мою игру Phaser3

1 голос
/ 23 февраля 2020

Я новичок в разработке фазеров и игр.

Я следовал приведенному ниже руководству.

https://medium.com/@michaelwesthadley / modular-game-worlds-in-phaser-3-tilemaps -1-958fc7e6bbd6

Я скачал программное обеспечение Tiled и сделал простую карту с набором плиток, который я получил от OpenGameArt.org. К сожалению, на экране браузера ничего не загружается, я просто вижу черный прямоугольник вместо карты. Я не нахожу ошибок в консоли. Я запускаю это с использованием XAMPP в Windows 10.

Я вставлю сюда весь свой код, дайте мне знать, если вы обнаружите что-то не так. 

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js"> 
</script>
</head>
<body>
    <script src="index.js" type="text/javascript"></script>
</body>
</html>

Это индекс. js файл 

const config = {
        type: Phaser.AUTO, // Which renderer to use
        width: 100, // Canvas width in pixels
        height: 100, // Canvas height in pixels
        parent: "game-container", // ID of the DOM element to add the canvas to
        scene: {
          preload: preload,
          create: create,
          update: update
        }
      };
      const game = new Phaser.Game(config);
      function preload() {
        // Runs once, loads up assets like images and audio
        this.load.image("tiles", "assets/tilesets/GoldBricks.png");
        this.load.tilemapTiledJSON("map", "assets/tilemaps/mario.json");
      }
      function create() {
        // Runs once, after all assets in preload are loaded
        const map = this.make.tilemap({ key: "map" });
        const tileset = map.addTilesetImage("GoldBricks", "tiles");
        // Parameters: layer name (or index) from Tiled, tileset, x, y
        const belowLayer = map.createStaticLayer("Tile Layer 1", tileset, 0, 0);
      }

      function update(time, delta) {
        // Runs once per frame for the duration of the scene
      }

РЕДАКТИРОВАТЬ: Ниже json файл 

  { "compressionlevel":-1,
 "height":100,
 "infinite":false,
 "layers":[
        {
         "compression":"",
         "data":"AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABUAAAAWAAAAFwAAABgAAAAZAAAAFQAAABYAAAAXAAAAGAAAABkAAAAaAAAAFQAAABYAAAAXAAAAGAAAABkAAAAaAAAAFQAAABYAAAAXAAAAGAAAABkAAAAaAAAAFQAAABYAAAAXAAAAGAAAABkAAAAVAAAAFgAAABcAAAAYAAAAFQAAABYAAAAXAAAAGAAAABkAAAAaAAAAFQAAABYAAAAXAAAAGAAAABkAAAAaAAAAFQAAABYAAAAXAAAAGAAAABkAAAAaAAAAFQAAABYAAAAXAAAAGAAAABkAAAAaAAAAFQAAABYAAAAXAAAAGAAAABkAAAAaAAAAFQAAABYAAAAXAAAAGAAAABkAAAAaAAAAFQAAABYAAAAXAAAAGAAAABkAAAAaAAAAFQAAABYAAAAXAAAAGAAAABkAAAAaAAAAFQAAABYAAAAXAAAAGAAAABkAAAAaAAAAFQAAABYAAAAXAAAAGAAAABkAAAAaAAAAFQAAABYAAAAXAAAAGAAAABkAAAAaAAAAkQAAAJIAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAAA==",
         "encoding":"base64",
         "height":100,
         "id":1,
         "name":"Tile Layer 1",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":100,
         "x":0,
         "y":0
        }],
 "nextlayerid":2,
 "nextobjectid":1,
 "orientation":"orthogonal",
 "renderorder":"right-down",
 "tiledversion":"1.3.2",
 "tileheight":32,
 "tilesets":[
        {
         "columns":16,
         "firstgid":1,
         "image":"..\/..\/..\/..\/..\/Users\/Shashank A C\/Downloads\/Goldbricksandgrass\/GoldBricks.png",
         "imageheight":512,
         "imagewidth":512,
         "margin":0,
         "name":"GoldBricks",
         "spacing":0,
         "tilecount":256,
         "tileheight":32,
         "tilewidth":32
        }],
 "tilewidth":32,
 "type":"map",
 "version":1.2,
 "width":100
}

Я также вижу и ошибка в консоли сейчас. 

Uncaught TypeError: Cannot read property '0' of undefined
at StaticTilemapLayer.upload (phaser.js:74806)
at StaticTilemapLayerWebGLRenderer [as renderWebGL] (phaser.js:122959)
at WebGLRenderer.render (phaser.js:65133)
at CameraManager.render (phaser.js:114533)
at Systems.render (phaser.js:27184)
at SceneManager.render (phaser.js:46818)
at Game.step (phaser.js:109346)
at TimeStep.step (phaser.js:106091)
at step (phaser.js:66488)

Ответы [ 3 ]

2 голосов
/ 28 февраля 2020

ОБНОВЛЕНИЕ: Проверьте эту файловую структуру - https://next.plnkr.co/edit/OqywHzLC80aZMGeF

======

Необходимо увидеть файл JSON, чтобы полностью понять вопрос, но я просто постараюсь спекулировать. Убедитесь, что в вашем файле JSON ниже указаны правильные настройки: 

"tilesets":[
    {
        "image":"path/to/GoldBricks.png",
        "name":"GoldBricks"
        ...
    }
]

В некоторых случаях Tiled содержит неверный / другой путь к файлу изображения, поэтому обязательно проверьте эту часть. Если путь к изображению отсутствует, вставьте его в Tiled.

Кроме того, значение name должно соответствовать первому параметру map.addTilesetImage(). Надеюсь, это поможет!

0 голосов
/ 08 марта 2020

Хорошо, я спросил на самом форуме сообщества phaser и получил некоторую помощь. Слой тайла карты выше, чем игровой холст, поэтому видимые тайлы находятся вне поля зрения. Решением является добавление приведенного ниже кода в функцию create. 

this.cameras.main.centerOn(800, 1300);
0 голосов
/ 07 марта 2020

У меня была похожая проблема, решение возвращалось к программному обеспечению Tiled и проверялось: «Вставить набор плиток» в каждый набор плиток карты.

...