'Tiled' map not showing up in browser

Phaser 3
1

Hello,

I’ve made a terrain for my game in Tiled and trying to import it into my Phaser game. Here is my code:

var WeaponPlugin = require("phaser3-weapon-plugin");
var config = {
  type: Phaser.AUTO,
  width: 1240,
  height: 540,
  parent: "phaser-example",
  pixelArt: true,
  physics: {
    default: "arcade",
    arcade: {
      debug: false,
      gravity: { y: 50 }
    }
  },
  scene: {
    preload: preload,
    create: create,
    update: update
  }
};

new Phaser.Game(config);
var canin, canin2, wepin, cursors, map, tileset;

function preload() {
  this.load.image("backdrop", "/Blis.png");
  this.load.image("cannon", "https://i.ibb.co/FH5ZqwL/Canin.png");
  this.load.image("cannon2", "/caninFlipt.png");
  this.load.image("comet", "https://i.ibb.co/W0rgWwf/Fireball.png");
  this.load.tilemapTiledJSON("map", "/Terrayn.json");
  this.load.image("tiles", "/TS.png");
}

function create() {
  this.plugins.installScenePlugin(
    "WeaponPlugin",
    WeaponPlugin.WeaponPlugin,
    "weapons",
    this
  );
  // this.cameras.main.centerOn(800, 1300);
  map = this.make.tilemap({ key: "map" });
  tileset = map.addTilesetImage("tylSet", "tiles", 64, 64);
  map.createStaticLayer("Tile Layer 1", tileset, 100, 200);
  cursors = this.input.keyboard.createCursorKeys();
  this.add.image(630, 255, "backdrop").setScale(1);
  canin = this.physics.add.sprite(94, 428, "cannon");
  canin.body.setAllowGravity(false);
  canin2 = this.physics.add.sprite(494, 428, "cannon2");
  canin2.body.setAllowGravity(false);
  wepin = this.add.weapon(30, "comet");
  // wepin.bulletGravity = 60;
  wepin.bulletSpeed = 200;
  wepin.trackSprite(canin, 18, -10, true);
  this.input.keyboard.on("keydown_SPACE", function (event) {
    console.log("yo");
    wepin.fire();
  });
  // wepin = this.physics.add.sprite(canin.x, canin.y, "comet");
  // wepin.visible=false;
}

function update() {
  if (cursors.left.isDown) {
    canin.body.angularVelocity = -90;
  } else if (cursors.right.isDown) canin.body.angularVelocity = 90;
  else canin.body.angularVelocity = 0;
  // this.world.wrap(sprite, 16);
}

However, the map does not show up in my browser. What’s happening here?

You can access the game at https://58k28.csb.app

2

“backdrop” image is covering it.

3

oh damn… well, not my proudest moment.

thanks