Aavegotchi Gaame Jaam

Moralis General
#1

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/web3@latest/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

Screenshot 2021-08-30 1.52.34 PM
Screenshot 2021-08-30 1.52.34 PM1366×768 178 KB

#2

have you uploaded the cloud code?

#3

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

#4

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

what does it say?

#5

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.

#6

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
#7

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

#8

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

1 Like
#9

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?

#10

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
#11

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.

#12

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.

Screenshot 2021-08-30 4.46.12 PM
Screenshot 2021-08-30 4.46.12 PM1366×768 127 KB

2 Likes
#13

Amazing great work!!

1 Like