CODEWITHSUNDEEP
javascriptecmascript-6phaser-framework
user14203397
user14203397

Reputation:

About custom classes in phaser 3

How about Internet users? I am new to the forum and I have a very small javascript tour, perhaps my problem was that as soon as I entered javascript a friend was teaching me React.

Sorry for my bad English, I'm Spanish-speaking.

I suppose that many have already touched on this topic but I want you to clarify my doubt that if you can or not, to start with phaser I have more or less a week I did a lot of practices and everything was fine, but when I decided to create a platform project myself Example they have in phaser but in es6 and typescript I wanted to implement the philosophy of react separating the project into pieces in such a way that the code can be reusable, for example, if I need another button, I simply reuse the component that generates the button.

All good so far, my question is the following I want to create a class of "Player", if I am not mistaken more or less this is the code to implement.

class Character extends Phaser.GameObjects.Sprite {
    constructor(config) {
        super(config.scene, config.x, config.y, "character");
        //keep a reference to the scene
        this.scene=config.scene;
        config.scene.add.existing(this);

What I want is to know if I can place the image loads (preload) within that code, and the same movement mechanics (update) because what I have even understood is that for each scene it seems that you have to reload the images and as I said my idea is to reuse the codes creating class, I do not know if this is the correct idea, but I have been trying and I do not achieve anything, I have reviewed the example and I only see that they create the class alone without loading images and mechanics on the outside and they put everything in a file making it tedious, I repeat the attempt to implement the react philosophy and in order not to waste much time I ask them if I can achieve such a thing.

In theory I want to achieve something like this, "WARNINGi" is just an assumption I know the code is wrong. Really thank you for your time I hope you can clarify my doubts and I hope you are well. :)

class Character extends Phaser.GameObjects.Sprite {
    constructor(config) {
        super(config.scene, config.x, config.y, "character");
        //keep a reference to the scene
        this.scene=config.scene;
        config.scene.add.existing(this);
    }

        // load images
    preload ()
    {
        this.load.image('character', 'assets/sprites/character.png');
    }
    update ()
    {
        // player movement mechanics
    }
}
export default Character;

Upvotes: 0

Views: 1747

Answers (1)

James Skemp
James Skemp

Reputation: 8571

Depending upon the complexity of your game, generally you can just preload all of your assets before the game loads. If you only have one scene for your game, you could add the functionality to load the assets in that scene's preload, otherwise if your game consists of multiple scenes (like a splash screen, main menu, main game, game over screen, ...) you may want to create a scene to preload your assets (often this is signified by a loading screen with a progress bar).

Either way, you definitely do not want to preload the assets in your sprite, do it in your scene.

class Preloader extends Phaser.Scene {
    preload() {
        // Sets a default path, making your code a little smaller if you default to using an assets directory.
        this.load.path = "assets/";
        this.load.image("character", "sprites/character.png");
        // ...
    }
}

Once you preload assets they're available until you close out of the game, or programmatically remove the assets.

That means you can keep super(config.scene, config.x, config.y, "character"); in your Character constructor, and drop the preload() entirely.

Upvotes: 0

Related Questions