How do I combine Phaser 3 with Tiled?

Phaser 3
1

I installed Tiled and i made a map, and now I want to open it with Phaser, I created this directory structure :

project-directory/
│
├── assets/
│   ├── maps/
│   │   └── level1.json
│   └── tilesets/
│       └── tilesheet.png
├── scenes/
│   └── GameScene.js
└── index.html
|------phaser.js

this is my 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 Game</title>
    <!-- Include Phaser folosind un CDN -->
    <script src="phaser.js"></script>
  </head>
  <body>
    <!-- Contentul paginii -->
    <h1>Jocul tău Phaser</h1>
    <div id="game-container"></div>

    <!-- Include fișierul GameScene.js -->
    <script src="scenes/GameScene.js"></script>

    <!-- Script pentru inițializarea și pornirea jocului -->
    <script></script>
  </body>
</html>

this is my GameScene.js :

class GameScene extends Phaser.Scene {
  constructor() {
    super({ key: "GameScene" });
  }

  preload() {
    // Încarcă resursele necesare, cum ar fi tilemap-urile, imagini etc.
    this.load.tilemapTiledJSON("map", "assets/maps/level1.json");
    this.load.image("tiles", "assets/tilesets/tilesheet.png"); // Verifică calea
  }

  create() {
    // Creează harta de joc și alte elemente
    var map = this.make.tilemap({ key: "map" });
    var tileset = map.addTilesetImage("tilesheet", "tiles"); // Numele trebuie să corespundă
    var groundLayer = map.createLayer("Ground", tileset);
    var camera = this.cameras.main;
    camera.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
  }

  update() {
    // Logica de actualizare a jocului
  }
}

// Asigură-te că clasa este disponibilă global
window.GameScene = GameScene;

// Configurarea și inițializarea jocului
var config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: [GameScene],
};

var game = new Phaser.Game(config);

this is my level1.json :

{
  "compressionlevel": -1,
  "height": 20,
  "infinite": false,
  "layers": [
    {
      "data": [
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
        30, 30, 30, 30, 30, 30
      ],
      "height": 20,
      "id": 1,
      "name": "Tile Layer 1",
      "opacity": 1,
      "type": "tilelayer",
      "visible": true,
      "width": 30,
      "x": 0,
      "y": 0
    }
  ],
  "nextlayerid": 2,
  "nextobjectid": 1,
  "orientation": "orthogonal",
  "renderorder": "right-down",
  "tiledversion": "1.11.0",
  "tileheight": 32,
  "tilesets": [
    {
      "firstgid": 1,
      "source": "tilesheet.tsx"
    }
  ],
  "tilewidth": 32,
  "type": "map",
  "version": "1.10",
  "width": 30
}

this is my tilesheet.tsx :

<?xml version="1.0" encoding="UTF-8"?>

<tileset version="1.10" tiledversion="1.11.0" name="tilesheet" tilewidth="32" tileheight="32" tilecount="48" columns="8">

<image source="../tilesets/tilesheet.png" width="265" height="199"/>

</tileset>

and when I run index.html in localhost i get a title followed by a black screen

3

I dont know why when i copy from visual studio code get printed incorectly

4

this is a really good link to learn from. this guy also has a youtube channel.

noobs guide to tiled tilemaps

5

I wonder why your data has so many 30s though, did you only use one tile for the whole tilemap?

6

Open the browser’s developer tools console and look for errors.

My guess is you have to embed the tileset and reexport the map.

7

thanks guys for ur help

8 
create()
{
	// remove this 👇 sanity check from previous section
	// this.add.image(0, 0, 'base_tiles')

	// create the Tilemap
	const map = this.make.tilemap({ key: 'tilemap' })

	// add the tileset image we are using
	const tileset = map.addTilesetImage('standard_tiles', 'base_tiles')
	
	// create the layers we want in the right order
	map.createStaticLayer('Background', tileset)

	// "Ground" layer will be on top of "Background" layer
	map.createStaticLayer('Ground', tileset)

	// the remaining tile layers ...
}

this gives me the error :

GameScene.js:14 Uncaught TypeError: map.createStaticLayer is not a function

9

It’s createLayer() since Phaser v3.50.

10

thanks !!! :slight_smile: