Extending Phaser.Physics.Arcade.Sprite

Phaser 3
1

hello everyone, i’m new here. hope all having a good day here
i’m trying to extend arcade sprite, like this

interface PlayerProps {
    scene: Phaser.Scene;
    x: number;
    y: number;
    cursors: Phaser.Types.Input.Keyboard.CursorKeys,
}

export class Player extends Phaser.Physics.Arcade.Sprite {
    public cursors: Phaser.Types.Input.Keyboard.CursorKeys;

    constructor(config: PlayerProps) {
        super(config.scene, config.x, config.y, "player");
        this.cursors = config.cursors
        config.scene.physics.add.existing(this, false);
        this.setCollideWorldBounds(true);
    }

    updateMovement() {
        if (this.cursors.left.isDown) {
            this.setVelocityX(-60);
            this.flipX = true;
        } else if (this.cursors.right.isDown) {
            this.setVelocityX(60);
            this.flipX = false;
        } else {
            this.setVelocityX(0);

        }

        //JUMP
        if (this.cursors.up.isDown && this.body.blocked.down) {
            this.setVelocityY(-300);
        }

    }
}

and using it like this in create function

import Phaser, { GameObjects } from "phaser";
import { Player } from "../gameobjects/player";

export default class Demo extends Phaser.Scene {
    private player: Player;
    cursors: Phaser.Types.Input.Keyboard.CursorKeys;
    layer: any;
    
    constructor() {
        super("GameScene");
    }
    
    
    init(): void {}
    
    preload() {
        this.load.image("player", "assets/player/player.png");
        this.load.image("map1", "assets/tiles.png");
        this.load.tilemapTiledJSON("tiles", "assets/map1.json");
    }
    
    create() {
        this.cursors = this.input.keyboard.createCursorKeys();
        this.player = new Player({
            scene: this,
            x: 100,
            y: 0,
            cursors: this.cursors,
        });

        const map = this.make.tilemap({ key: "tiles" });

        const tileset = map.addTilesetImage("tiles", "map1");

        this.layer = map.createLayer("layer1", tileset, 0, 0);
        map.setCollisionBetween(0, 3);
        this.physics.collide(this.player, this.layer);
    }

    update() {
        this.player?.updateMovement();
    }
}

but player cant load the texture, and i don’t know why, for example, if a do this in the player constructor

constructor(config: PlayerProps) {
        super(config.scene, config.x, config.y, "player");
        this.cursors = config.cursors
        let tmpPlayer = config.scene.physics.add.sprite(40, 0, 'player')
        config.scene.physics.add.existing(tmpPlayer, false);
        // this.setCollideWorldBounds(true);
    }

that creates a new sprite with texture

how a can resolve this? :s

2

I think that sprite isn’t on the display list. Add

this.add.existing(this.player);
3

yeah, this resolve the problem !
i dont understand the difference between

this.add.existing(this.player);

and

this..physics.add.existing(this, false);

anyway, if someone has the same problem, in constructor of player I add this:

constructor(config: PlayerProps) {
        super(config.scene, config.x, config.y, "player");
        this.cursors = config.cursors;
        config.scene.add.existing(this); // <--
        config.scene.physics.add.existing(this, false);
        this.setCollideWorldBounds(true);
    }
4

The two existing() methods are unrelated. One adds to the scene display list, the other to the physics simulation.

1 Like