# Unable to load tilesets and maps into my game

**URL:** <https://phaser.discourse.group/t/unable-to-load-tilesets-and-maps-into-my-game/5299>\
**Category:** Phaser 3\
**Created:** [February 23, 2020, 5:29am UTC](https://phaser.discourse.group/t/unable-to-load-tilesets-and-maps-into-my-game/5299 "2020-02-23T05:29:42Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![ShashankAC](https://avatars.discourse-cdn.com/v4/letter/s/54ee81/32.png) [@ShashankAC](https://phaser.discourse.group/u/ShashankAC)\
**Post date:** [February 23, 2020, 5:29am UTC](https://phaser.discourse.group/t/unable-to-load-tilesets-and-maps-into-my-game/5299/1 "2020-02-23T05:29:42Z")

</div>

Hello, I am new to phaser and game development.

I followed the below tutorial.

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

I downloaded and _Tiled_ software and made a simple map with a tileset I got from [OpenGameArt.org](http://OpenGameArt.org). Unfortunately, nothing gets loaded on the browser screen, I just see a black square instead of the map. I find no errors in the console. I am running this using XAMPP in Windows 10.

I will paste all my code here, let me know if you find anything wrong.

```javascript
<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>
```

The is the index.js file

```javascript
const config = {
        type: Phaser.AUTO, // Which renderer to use
        width: 800, // Canvas width in pixels
        height: 600, // 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
      }
```

---

<div class="post-metadata">

**Author:** ![Nemesis](https://avatars.discourse-cdn.com/v4/letter/n/96bed5/32.png) [@Nemesis](https://phaser.discourse.group/u/Nemesis)\
**Post date:** [February 24, 2020, 12:46pm UTC](https://phaser.discourse.group/t/unable-to-load-tilesets-and-maps-into-my-game/5299/2 "2020-02-24T12:46:35Z")

</div>

I’m not sure but you can try adding a div tag with ID “game-container”. Hope that helps 🙂

---

<div class="post-metadata">

**Author:** ![ShashankAC](https://avatars.discourse-cdn.com/v4/letter/s/54ee81/32.png) [@ShashankAC](https://phaser.discourse.group/u/ShashankAC)\
**Post date:** [February 24, 2020, 2:50pm UTC](https://phaser.discourse.group/t/unable-to-load-tilesets-and-maps-into-my-game/5299/3 "2020-02-24T14:50:54Z")

</div>

Thanks for the response, but it didn’t work. I was able to see the canvas being rendered even without the div with ID “game-container” but the canvas is just a black rectangle 800 x 600 pixels.

I had forgotten to add doctype to the html tag, I added it and there still no sign of the map.

There is also a warning in the console which I didn’t mention before.

> phaser.js:43859 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. [Autoplay policy in Chrome - Chrome for Developers](https://goo.gl/7K7WLu)

---

<div class="post-metadata">

**Author:** ![ShashankAC](https://avatars.discourse-cdn.com/v4/letter/s/54ee81/32.png) [@ShashankAC](https://phaser.discourse.group/u/ShashankAC)\
**Post date:** [March 1, 2020, 4:19pm UTC](https://phaser.discourse.group/t/unable-to-load-tilesets-and-maps-into-my-game/5299/4 "2020-03-01T16:19:01Z")

</div>

Actually now I am getting an error in the console.

> phaser.js:74806 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)

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [March 7, 2020, 5:50pm UTC](https://phaser.discourse.group/t/unable-to-load-tilesets-and-maps-into-my-game/5299/5 "2020-03-07T17:50:23Z")

</div>

Please post the assets (map and tileset image).

> [@ShashankAC](#):
>
> phaser.js:74806 Uncaught TypeError: Cannot read property ‘0’ of undefined

What’s on this line?

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [March 7, 2020, 5:57pm UTC](https://phaser.discourse.group/t/unable-to-load-tilesets-and-maps-into-my-game/5299/6 "2020-03-07T17:57:48Z")

</div>

Also you may want to switch to the unminified script, [https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.js](https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.js).

---

<div class="post-metadata">

**Author:** ![ShashankAC](https://avatars.discourse-cdn.com/v4/letter/s/54ee81/32.png) [@ShashankAC](https://phaser.discourse.group/u/ShashankAC)\
**Post date:** [March 7, 2020, 6:24pm UTC](https://phaser.discourse.group/t/unable-to-load-tilesets-and-maps-into-my-game/5299/7 "2020-03-07T18:24:14Z")

</div>

this…

> [@ShashankAC](#):
>
> const belowLayer = map.createStaticLayer(“Tile Layer 1”, tileset, 0, 0);

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [March 7, 2020, 6:32pm UTC](https://phaser.discourse.group/t/unable-to-load-tilesets-and-maps-into-my-game/5299/8 "2020-03-07T18:32:07Z")

</div>

If you click on _phaser.js:74806_ in the console, what does it show you?

Could you upload `GoldBricks.png` and `mario.json`?

---

<div class="post-metadata">

**Author:** ![ShashankAC](https://avatars.discourse-cdn.com/v4/letter/s/54ee81/32.png) [@ShashankAC](https://phaser.discourse.group/u/ShashankAC)\
**Post date:** [March 7, 2020, 6:56pm UTC](https://phaser.discourse.group/t/unable-to-load-tilesets-and-maps-into-my-game/5299/9 "2020-03-07T18:56:15Z")

</div>

[mario.json](https://phaser.discourse.group/uploads/short-url/eoGk09RiomkcXrcI9A5IiFUKXjx.json) (13.9 KB)

 ![GoldBricks](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/0/0385d72942132fa5bde7d611ae77ca90bad4962c.png)

The error is not showing now, anyway, have a look at the uploaded the files.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [March 7, 2020, 7:45pm UTC](https://phaser.discourse.group/t/unable-to-load-tilesets-and-maps-into-my-game/5299/10 "2020-03-07T19:45:42Z")

</div>

So this is a common problem 😉

Your tilemap layer is taller than the game canvas so the visible tiles are out of sight.

```
this.cameras.main.centerOn(800, 1200); 

```

would get you closer. You can add camera controls (cursor keys), see the examples.