Trouble getting sprite to move!

Phaser 3
1

I’ve been following the phaser basic tutorial although just using my own static sprite (not a sprite sheet so I’m leaving out the animation for now) and I cannot get it to move whatsoever. I’ve noticed when I press left or right the sprites bouncing stops and freezes … so strange.

I am extremely new and fumbling my way through coding so apologies if this has been answered lots of times.

here is my code…


import "./style.css";

const canvas = document.getElementById("game");

var config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  parent: "game",
  localStorageName: "planet-shh",
  backgroundColor: "#ffffff",
  physics: {
    default: 'arcade',
    arcade: {
        gravity: { y: 300 },
        debug: false
    }
},
  scene: {
    preload: preload,
    create: create,
    update: update,
  },
};

class PlanetShhGame extends Game {
  constructor() {
    super(config);
  }
}

window.game = new PlanetShhGame();

function preload() {
  console.info("preload()");
  this.load.image('backdrop', 'src/assets/backdrop.png');
  this.load.image('player', 'src/assets/player.png');
  this.load.image('trophy', 'src/assets/trophy.png');
  this.load.image('platform', 'src/assets/platform.png');
}

var platforms;
var cursors;



function create() {
  console.info("create()");
  
const sky = this.add.image(400, 300, 'backdrop');
sky.setScale(0.8);

const player = this.physics.add.sprite(30, 450, 'player');
player.setBounce(0.2);
player.setScale(0.08);
player.setCollideWorldBounds(true);

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

platforms.create(400, 580, 'platform').setScale(17,2).refreshBody();
platforms.create(450, 500, 'platform');
platforms.create(600, 440, 'platform');
platforms.create(750, 380, 'platform');

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

const trophy = this.physics.add.sprite(750, 320, 'trophy').setScale(2);
trophy.setBounce(1);
trophy.setCollideWorldBounds(true);

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

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


}

function update() {
  console.info("update()");
  
  if (cursors.left.isDown)
  {
      player.setVelocityX(-160);
  
  }
  else if (cursors.right.isDown)
  {
      player.setVelocityX(160);
  
  }
  if (cursors.up.isDown && player.body.touching.down)
  {
      player.setVelocityY(-330);
  }
}

any help would be very appreciated! <3

2

:wave:

I assume Game is Phaser.Game? But I don’t see how, from the code. In any case, don’t extend it.

window.game = new Phaser.Game(config);

Then look in the browser console (developer tools) for errors.

3

So I changed that and the only error I was then receiving was unable to find player variable, so I declared it outside of the create function and now it is working - sorry for the silly question but why would it not be able to find the variable when it is declared inside the function? Especially since player.setScale etc is working within the function.

4

Probably the error was from update(), not create().