Search code examples
javascripthtmlxamppphaser-framework

Problems with phaser framework, running a server on xampp, getting errors, javascript/html

So I have this code that will run a game being this the base of that game. it uses phaser. I was trying to run it on xampp on htdocs/itw/test.html with the 2 pngs and json file being located on htdocs/itw/assets/

the pngs are tilesets and the json tilemap

but I get this errors on console executing the indext.html

enter image description here

Any Help would be awsome

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js"></script>
</head>
<body>

    <script>
        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("quadrados1", "../assets/outside.png");
            this.load.image("quadrados2", "../assets/outside2.png");            
            this.load.tilemapTiledJSON("mapa", "../assets/fcul_map.json");
          }
          
          function create() {
            // Runs once, after all assets in preload are loaded
            const map = this.make.tilemap({ key: "mapa" });
            const tileset = map.addTilesetImage("outside", "quadrados1");
            const belowLayer = map.createStaticLayer("Below Player", tileset, 0, 0);
            const worldLayer = map.createStaticLayer("World", tileset, 0, 0);
            const aboveLayer = map.createStaticLayer("Above Player", tileset, 0, 0);
          }
          
          function update(time, delta) {
            // Runs once per frame for the duration of the scene
          }
    </script>

</body>
</html>

Solution

  • .. represents parent directory. Try removing them in your load statements

    Ex. ../assets/outside.png to assets/outside.png