I’m working with Phaser 3 and Node.js and I’m having trouble getting my Player class defined in an external player.js file to work and just show the player sprite on the screen.
I have no problem loading, creating and moving the player sprite when I define the class in the scene file. I want to use an external player.js file instead.
I got what I want to do working on Replit but the same code does not work on Glitch. How do I rule out the Linter which required me to add // global Scene1, Scene2, Scene3 etc.? Is it ‘this’? Is it something else?
The code from a tutorial that I used on Replit (Phaser 3 Tutorial + Template - Replit) did not work until I added some ‘this’ code. However, I finally got it to work on Replit. Now I’m trying to hunt down why the same code in the scene1.js file and the player.js file won’t show the player sprite onscreen in Glitch.
player.js on Replit
export default class Player extends Phaser.GameObjects.Sprite {
constructor(scene, x, y, player) {
super(scene, x, y, player);
scene.add.existing(this);
scene.physics.add.existing(this);
this.body.collideWorldBounds = true;
};
move(up, left, down, right) {
if(up.isDown) this.y--
if(left.isDown) this.x--
if(down.isDown) this.y++
if(right.isDown) this.x++
};
};
Game.js
import Phaser from ‘phaser’;
import { game } from ‘…/main’; // one possibility for the cause of the troubles is getting this path right with Glitch and my scene.js file
import { CONFIG_WIDTH, CONFIG_HEIGHT } from ‘…/constants’;
import AuthorNPC from ‘…/objects/authors.js’;
import Player from ‘…/objects/player.js’;
let logo;
let player;
let author;
let cursors;
let text;
export default class Demo extends Phaser.Scene {
constructor() {
super(‘GameScene’);//super({key:“game”});
} // };
preload() {
this.load.image(‘logo’, ‘assets/images/Replit-logo.png’);
this.load.spritesheet(‘author’, ‘assets/images/rpg_sprite_walk.png’, {frameWidth: 24, frameHeight: 32 });
this.load.spritesheet(‘player’, ‘assets/images/penguin.png’, {frameWidth: 120, frameHeight: 256 });
}
create() {
logo = this.physics.add.sprite(CONFIG_WIDTH / 2, CONFIG_HEIGHT / 2, ‘logo’);
logo.setBounce(0.5);
logo.setCollideWorldBounds(true);
this.player = new Player(this, 200, 50, ‘player’);
this.player.setScale(0.5);
for (var i = 0; i < 10; i++) {
let xx = Phaser.Math.Between(0, CONFIG_WIDTH);
let yy = Phaser.Math.Between(0, CONFIG_HEIGHT);
this.author = new AuthorNPC(this, xx, yy, ‘author’)
this.author.setScale(3);
}
// add name labels from a list
// add name labels from an sqlite database
// add mobile movement for player (pointer or swipe etc.)
// player = this.physics.add.sprite(300, 0, 'player', 0);
// this.player.setScale(3);
// this.player.setBounce(0.5);
// this.player.setCollideWorldBounds(true);// doesn’t work
cursors = this.input.keyboard.createCursorKeys();
… more code about text and updating movement