Aavegotchi Gaame Jaam

When my Aavegotchi is fetched into my game it is transparent. I can not see its graphical representations. In debug mode shows I do indeed have a ‘player’, that can execute all functions (walk , jump, collect coins) I can not see the Aavegotchi, any ideas?

HTML

<html>
  <head>
    <title>AaveGotchi Demo Game</title>

   
    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

  
	  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
    <script src="https://npmcdn.com/[email protected]/dist/moralis.js"></script>
    
    <link rel="stylesheet" href="app.css">
    
  </head>

  <body>
    <nav class="menu navbar navbar-expand-md navbar-light">
      <a class="navbar-brand" href="index.html"><b>Aavegotchi Raiders!</b></a>
      <div class="navbar-collapse collapse justify-content-end">
        <div>
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link">My Explorer</a>
            </li>
            <li class="nav-item">
              <a class="nav-link">Game</a>
            </li>
            <li class="nav-item">
              <a class="nav-link">My Aavegotchi</a>
            </li>
            <li class="nav-item">
              <a class="nav-link">Trade</a>
            </li>
            <li class="nav-item">
              <a class="btn btn-primary"  id="btn-login"  style="margin-right:5px;"aria-disabled="true">connect with Metamask</a>
            </li>
            <li class="nav-item">
              <a class="btn btn-primary"  id="btn-logout"  aria-disabled="true">logout</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="promo">
      <div class="container">
        <div class="banner">
          <h5 class="display-4">Aavegotchi Raiders!<h5></h5>
             <p>How many in-game assets can you get before the Avegotchi get you!</p>
          <br>
          
          <button class="btn btn-primary btn-homepage">Join Discord</button>
        </div>
      </div>
  </div>

    
<br><br>
  
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="main.js"></script>
  </body>


</html>

javaScript

Moralis.initialize("xWWjxNj8ugUJStkeUzqbKa28NVBmn0ef4tsD0FE9");
Moralis.serverURL = "https://dw1mtjavebcw.moralisweb3.com:2053/server";


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
    },
    audio: {
        disableWebAudio: true
    }
};

var game;

var platforms; 
var space = 38;  
var player;
var competitors = {};
var jumpHeight = -350; 
var score = 0;
var scoreText;
var cursors;
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();

//load asset
async function preload ()
{
    that = this;
    this.load.image('background', 'assets/backup.png');
    this.load.image('groundLeft', 'assets/TilesB/Asset285.png');
    this.load.image('groundRight', 'assets/TilesB/Asset 284.png');
    this.load.image('ground', 'assets/TilesB/Asset 361.png');

    this.load.image('coin', 'assets/coin.png');
    this.load.image('bomb', 'assets/bomb.png');
   
//this.load.spritesheet('dude', 
//    'assets/dude.png',
//    { frameWidth: 32, frameHeight: 48 }
//    );

    this.load.audio('theme', [
        'assets/audio/GamePlay_WM_01.mp3'
    ]);

    this.load.audio('jump', [
        'assets/audio/playerJump.mp3'
    ]);

    this.load.audio('collect', [
        'assets/audio/coinCollect.mp3'
    ]);

    //fetch Aavegotchi
    const numericTraits = [1, 5, 99, 29, 1, 1]; // UI to change the traits
    const equippedWearables = [23, 8, 4, 43, 0, 4, 0, 1, 0, 0, 0, 3, 7, 0, 0, 0];

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

    //turn svgText into resourcephaser can use
    const svgBlob = new Blob([rawSVG], { type: "image/svg+xml;charset=utf-8" });
    const url = URL.createObjectURL(svgBlob);
    //load the resource
    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(1).refreshBody();
    player.setBounce(0.3);
    player.setCollideWorldBounds(true);
    that.physics.add.collider(player, platforms);
}

//init setup 
async function create ()
{
    this.add.image(400, 300, 'background').setScale(0.6);

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

    platforms.create(80, 400, 'groundLeft').setScale(0.3).refreshBody();
    platforms.create(80 + space, 400, 'groundRight').setScale(0.3).refreshBody();

    platforms.create(250, 300, 'groundLeft').setScale(0.3).refreshBody();
    platforms.create(250 + space, 300, 'groundRight').setScale(0.3).refreshBody();

    platforms.create(425, 450, 'groundLeft').setScale(0.3).refreshBody();
    platforms.create(425 + space, 450, 'groundRight').setScale(0.3).refreshBody();

    platforms.create(600, 160, 'groundLeft').setScale(0.3).refreshBody();
    platforms.create(600 + space, 160, 'groundRight').setScale(0.3).refreshBody();

    //base ground
    for(let i = 0; i < 100; i++){
        platforms.create(i * 38, 580, 'ground').setScale(0.3).refreshBody();
    }

    //player = this.physics.add.sprite(100, 450, 'dude');
    
   // player.setBounce(0.2);
   // player.setCollideWorldBounds(true);

    var music = this.sound.add('theme');
    music.play();

    //player animation
  /*  this.anims.create({
        key: 'left',
        frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
        frameRate: 10,
        repeat: -1
    });

    this.anims.create({
        key: 'turn',
        frames: [ { key: 'dude', frame: 4 } ],
        frameRate: 20
    });

    this.anims.create({
        key: 'right',
        frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
        frameRate: 10,
        repeat: -1
    });
*/
    cursors = this.input.keyboard.createCursorKeys();
   
    coins = this.physics.add.group({
        key: 'coin',
        repeat: 11,
        setXY: { x: 12, y: 0, stepX: 70 }
       
    });

    coins.children.iterate(function (child) {

        child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));

    });

    bombs = this.physics.add.group();

    scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });

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

    this.physics.add.overlap(player, coins, collectCoin, null, this);
    
    this.physics.add.collider(player, bombs, hitBomb, null, this);

    function collectCoin (player, coin)
{
    var collected = this.sound.add('collect');
    collected.play();

    coin.disableBody(true, true);

    score += 10;
    scoreText.setText('Score: ' + score);

    if (coins.countActive(true) === 0)
    {
        coins.children.iterate(function (child) {

            child.enableBody(true, child.x, 0, true, true);
           

        });

        var x = (player.x < 400) ? Phaser.Math.Between(400, 800) : Phaser.Math.Between(0, 400);

        var bomb = bombs.create(x, 16, 'bomb');
        bomb.setBounce(1);
        bomb.setCollideWorldBounds(true);
        bomb.setVelocity(Phaser.Math.Between(-200, 200), 20);

    }
}
    
/*
    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"), 'player').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"))
      }
    });
  */  
}

function hitBomb (player, bomb)
{
    this.physics.pause();

    player.setTint(0xff0000);

    player.anims.play('turn');

    gameOver = true;
}

// Game loop - 60fps
async function update ()
{
   
    if (cursors.left.isDown)
        {
            player.setVelocityX(-160);

       //     player.anims.play('left', true);
        }
    else if (cursors.right.isDown)
        {
            player.setVelocityX(160);

      //      player.anims.play('right', true);
        }
    else
        {
            player.setVelocityX(0);

      //      player.anims.play('turn');
        }

    if (cursors.up.isDown && player.body.touching.down)
        {
            player.setVelocityY(jumpHeight);
            let jump = this.sound.add('jump');
            jump.play();
        }

    /*
    //2player enable
   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.ser('x', player.x);
       playerPosition.set('y', player.y);

       player.lastX = player.x;
       player.lastY = player.y;

       await playerPosition.save();
   }
    */       

   
}

async function login() {
    let user = Moralis.User.current();
    if (!user) {
      user = await Moralis.Web3.authenticate();
      launch();

      $('#btn-login').hide();
      $('#btn-logout').show();
      }

    console.log("logged in user:", user);
  }

  Moralis.Web3.onAccountsChanged( async ([account]) =>{
      console.log("ACCOUNTS CHANGED");
      console.log(account);

      alert("DO YOU WANT TO MERGE?");

      var user = await Moralis.Web3.link(account);
      console.log(user);
  })
  
async function logOut() {
    await Moralis.User.logOut();
    
    $('#btn-login').show();
    $('#btn-logout').hide();

    location.reload();
  
    console.log("logged out");
  }

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

css

.promo{
    text-align: center;
    padding-top: 150px;
    height: 75vh;
    background: rgb(0,0,0);
    background: linear-gradient(130deg, rgba(0,0,0,1) 0%, rgba(42,43,86,1) 100%);
    color: #fff;
}

.container {
    width: 100%;
    height: 100%;
    margin: 0 auto;
  
  }
  
  #userContent{
      display: none;
  }

  #btn-logout{
      display: none;
  }

  canvas {
    display : block;   
    margin : auto;
    }

visual description

have you uploaded the cloud code?

yes, just a copy and paste then saved, no errors there either.

can you print url to the console?
after you create it with createObjectURL

what does it say?

yes printing to console returns

blob:http://127.0.0.1:5500/45569b76-ee34-4de4-a9fa-76a795c7e8be

and within the browser, the Aavegotchi is displayed.

You can check what it will get displayed by copying that url and pasting it in a browser window.
It could return a valid url even for invalid SVG data, but it will not show something valid on display.

For example this works:

rawSVG = '<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="109" height="109" viewBox="0 0 109 109"> <g id="kvg:StrokePaths_080a1" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;"><path id="kvg:080a1-s1"  d="M20.22,18.74c0.77,0.77,0.79,2.14,0.8,3.05C21.38,62,20.62,75,11.5,89.39"/> </g> </svg>'
svgBlob = new Blob([rawSVG], { type: "image/svg+xml;charset=utf-8" });
url = URL.createObjectURL(svgBlob);
"blob:http://127.0.0.1:81/7cfc2947-77e3-48d8-ac03-58961eb0bb6a"

but this still returns a valid url:

rawSVG = [12, 32, 43]
svgBlob = new Blob([rawSVG], { type: "image/svg+xml;charset=utf-8" });
url = URL.createObjectURL(svgBlob);
"blob:http://127.0.0.1:81/365b9ee1-c783-4c02-9e8c-fdd5eb90e8c1"
1 Like

if I’m understanding you correctly, (please correct me if I am not) I did try to paste it within the browser it only shows an error in the title and the page states

Cannot GET /45569b76-ee34-4de4-a9fa-76a795c7e8be

You have to paste the complete url: blob:http://127.0.0.1:5500/45569b76-ee34-4de4-a9fa-76a795c7e8be

1 Like

I see… thank you, that does indeed produced the svg. What are steps I can take to now display within the game since I we are indeed fetching and getting the aavegotchi?

I don’t know exactly what are the next steps, I am thinking that maybe the player is somehow behind other background and maybe that is why is not visible.
You could try to make a backup for your project and try to remove components until the player is visible in order to find out what is the cause.

1 Like

thank you for your time I will do just that. A user on the discord suggested something with the z index as well. I shall go hunting. Thank you again.

the first component I removed reveals not one but two Aavegotchi lol thank you for your guidance I really appreciate it you have no idea.

2 Likes

Amazing great work!!

1 Like