Need help with tutorial

i need help regarding this tutorial

i have described the issue in this video recording please check:

Here is my code:

<title>PikPak</title>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>

<script src="https://unpkg.com/moralis/dist/moralis.js"></script>

<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>
<button id="btn-login">Metamask Login</button>

<button id="btn-logout">Logout</button>

<script type="text/javascript" src="./main.js"></script>

<script>

/** Phaser */

  var config = {

type: Phaser.AUTO,

width: 800,

height: 600,

physics: {

    default: 'arcade',

    arcade: {

        gravity: { y: 300 },

        debug: true

    }

},

scene: {

    preload: preload,

    create: create,

    update: update

}

};

var game;

var platforms;

var player;

var competitors = {};

var cursor;

var jumpHeight = -300;

var that;

function launch(){

  let user = Moralis.User.current();

    if (!user) {

      console.log("PLEASE LOG IN WITH METAMASK!!")

    }

    else{

      console.log(user.get("ethAddress") + " " + "logged in")

      game = new Phaser.Game(config);

    }

  }

  launch();

async function preload ()

{ this.load.image('background', 'assets/BG.png');

  this.load.image('ground', 'assets/Tiles/2.png');

  this.load.image('player', 'assets/PikPak.png');

  // fetch player SVG

  const numericTraits = [1, 99, 99, 99, 1, 1]; // UI to change the traits

    const equippedWearables = [23,6,2,43,0,4,0,1,0,0,0,0,0,0,0,0];

    const rawSVG = await Moralis.Cloud.run("getSVG",{numericTraits:numericTraits,equippedWearables:equippedWearables})

    const svgBlob = new Blob([rawSVG], {type:"image/svg+xml;charset=utf-8"})

    const url = URL.createObjectURL(svgBlob)

    this.load.image('player',url);

    this.load.on('filecomplete', function(){

      initPlayer()

    }, this);

    this.load.start()

  }

  async function initPlayer(){

    player = that.physics.add.sprite(500, 250, 'player').setScale(0.3).refreshBody();

    player.setBounce(0.3);

    that.physics.add.collider(player, platforms);

  }

async function create ()

{



  this.add.image(400, 300, 'background').setScale(0.90);

  platforms = this.physics.add.staticGroup();

  platforms.create(470, 400, 'ground').setScale(0.5).refreshBody();

  platforms.create(535, 400, 'ground').setScale(0.5).refreshBody();

  platforms.create(600, 400, 'ground').setScale(0.5).refreshBody();

  platforms.create(665, 400, 'ground').setScale(0.5).refreshBody();

  player = this.physics.add.sprite(500, 250, 'player').setScale(0.3).refreshBody();

  player.setBounce(0.3);

  //player.setCollideWorldBounds(true);

  this.physics.add.collider(player, platforms);

  cursors = this.input.keyboard.createCursorKeys();

 

  let user = Moralis.User.current();

    let query = new Moralis.Query('PlayerPosition');

    let subscription = await query.subscribe();

    subscription.on('create', (plocation) => {

      if(plocation.get("player") != user.get("ethAddress")){

        // if first time seeing

        if(competitors[plocation.get("player")] == undefined){

          // create a sprite

          competitors[plocation.get("player")] = this.add.image( plocation.get("x"), plocation.get("y"), 'comptetitor').setScale(0.3);

        }

        else{

          competitors[plocation.get("player")].x = plocation.get("x");

          competitors[plocation.get("player")].y = plocation.get("y");

        }

        console.log("someone moved!")

        console.log(plocation.get("player"))

        console.log("new X ", plocation.get("x"))

        console.log("new Y ", plocation.get("y"))

      }

    });

  }

async function update ()

{

  if(!player)

      return;

     

  if (cursors.left.isDown)

  {

      player.setVelocityX(-160);

  }

  else if (cursors.right.isDown)

  {

      player.setVelocityX(160);

  }

  else

  {

      player.setVelocityX(0);

  }

  if (cursors.up.isDown && player.body.touching.down)

  {

      player.setVelocityY(jumpHeight);

  }

  if(player.lastX!=player.x  || player.lastY!=player.y){

      let user = Moralis.User.current();

      const PlayerPosition = Moralis.Object.extend("PlayerPosition");

      const playerPosition = new PlayerPosition();

      playerPosition.set("player",user.get("ethAddress"));

      playerPosition.set("x",player.x);

      playerPosition.set("y",player.y)

      player.lastX = player.x;

      player.lastY = player.y;

      await playerPosition.save();

    }

}  

</script>

this seems to be a cloud function, did you add that function named getSVG in your Moralis Server cloud code?

yes i had to watch next video https://youtu.be/QoBHweBw2Gs?t=246 where ivan added clound function for svg.
i think it’s due to the contact address mentioned in ivans code, should i change the contact adress and or blockchain mentioned in reference code?
this is the code ivan added:
Moralis.Cloud.define(“getSVG”, async (request) => {

let web3 = Moralis.web3ByChain("0x89"); // matic
const CONTRACT_ADDRESS = "0x86935F11C86623deC8a25696E1C19a8659CbF95d";

let CONTRACT_ABI = [{“inputs”:[{“internalType”:“uint256”,“name”:"_tokenId",“type”:“uint256”}]

const contract = new web3.eth.Contract(CONTRACT_ABI,CONTRACT_ADDRESS);

const hauntId = 2;
const collateralAddress = "0x9719d867a500ef117cc201206b8ab51e794d3f82"; //maUSDC
  

const svgString = await contract.methods.previewAavegotchi(hauntId,
    collateralAddress,
    request.params.numericTraits,

this is the game link BTW: https://8gucwbdx8mek.usemoralis.com/

it looks like you have that function added in cloud code

can you paste the error that you get in your browser console when you try to call that getSVG cloud function?

after adding the ivans code in cloud functions it is not showing the error in console but still it don’t show the image of 2nd player, just show svg block

you can try to do some debugging, to see what is happening, you can try to check what that could function returns for example