NFT Game jam - Phaser this.load.image not working

Phaser this.load.image file path in the preload function is not working

<html lang="en" dir="ltr">
  <head>
    <title>Vanilla Boilerplate</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
        <script src="https://npmcdn.com/[email protected]/dist/moralis.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>
  </head>

  <body>

    <button id="btn-login">Moralis Login</button>
    <button id="btn-logout">Logout</button>
    <br><br>
    <script>
      // connect to Moralis server
      Moralis.initialize("TSkdPdyJlRBnllze05tQCQlyuSulR5YnvDwnZfH6");
      Moralis.serverURL = "https://siitjhpb5kkv.bigmoralis.com:2053/server";

      // add from here down
      async function login() {
        let user = Moralis.User.current();
        if (!user) {
          user = await Moralis.Web3.authenticate();
        }
        console.log("logged in user:", user);
      }

      async function logOut() {
        await Moralis.User.logOut();
        console.log("logged out");
      }

      document.getElementById("btn-login").onclick = login;
      document.getElementById("btn-logout").onclick = logOut;

      var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        physics: {
            default: 'arcade', // different games have different physics types
            arcade: { // this game has arcade
                gravity: { y: 300 }, // it has gravity with strength of 300
                debug: true
            }
        },
        scene: {
            preload: preload,
            create: create,
            update: update
        }
    };

        var game = new Phaser.Game(config);
        var platforms;

        // loading assets 
        function preload ()
        {
            // pictures, images, sound, movies
            this.load.image('background', 'public/assets/BG.png');
            this.load.image('ground', 'public/assets/Tiles/Tile (2).png');
        }

        // initial setup 
        function create ()
        {
            // put background, load animations, create animations, put players on map
            this.add.image(400, 300, 'background').setScale(0.55); // middle of the page of 800x600 page size

            platforms = this.physics.add.staticGroup(); // when player hits platform they need to stay on the platform
            platforms.create(600, 400, 'ground');
            platforms.create(50, 250, 'ground');
            platforms.create(750, 220, 'ground'); 
        }

        // game loop - 60 times per second - 60 frames per second
        function update ()
        {
            // logic - what do you wanna do every time this is being called? 
            // do you want to check if the player is hitting a wall or being shot by a bullet? 
            // if yes then decrease health 
        }  

    </script>

  </body>


</html>

I checked the file path and that seems to be fine as well. Not able to upload file structure photo as new users are only allowed to put one photo

        this.load.image('background', 'public/assets/BG.png');
        this.load.image('ground', 'public/assets/Tiles/Tile (2).png');

It looks like the error comes from these lines, you need to have those files in your local directory in that particular folder path.

Did this fix the issue? I ran into a similar problem before, and needed to type the entire URL because the Phaser API did not know the local directory. For instance, you may need to add:

https://siitjhpb5kkv.bigmoralis.com:2053/server/public/assets/BG.png as your file path.

Alternatively, prior to calling this.load.image, you can set your baseURL like the following:

this.load.setBaseURL(‘https://siitjhpb5kkv.bigmoralis.com:2053/server/’);

1 Like