Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Phaserjs – Create sprite layer with layer textures for customize look

I’m trying to make a player with layer appearance so i can customize it from 2 spritesheet. One base spritehseet for the player and the other sheet is eyes that you can change.
My logic is:

  • load game, spritesheet and animation data
  • create initial textures using the renderTexture from my loaded assets
  • save the new texture in the texture manager
  • pass the created texture to create a pyshics arcade sprite and make the animations based on the new textures
  • add this new sprite to the scene link the logic.

I manage to make most of it but it’s not working as expected.
The player loads with correct sprite sheet drawn and correct layers active which, is my blue eyes. But as soon as I move, the animation is done without the layer eyes, as the layer eyes one disappears. Some how the animations is done on the base player layer and omiting the eyes.
I’m not sure how to make the eyes layer of the texture to stuck on the animation or what i’m doing wrong…

Any help would be very appreciated.

Expected result:
Use the new texture in animations and keep the custom layer visible
Actual result:
When animation runs it runs the base sprite animation and the customized layer disappears

Made a sandbox of the code snippets, if someone would like to help:
https://codesandbox.io/p/devbox/heuristic-davinci-hfr5qs

Thanks 🙂

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Fixed. My mistake was in what drwaing frame i was actually drawing when active.

       _drawActive() {
        for (const prop in this.layerList) {
            if (this.layerList[prop].active) {
                this.#renderTexture.draw(
                    this.scene.textures.getFrame(this.layerList[prop].key, "__BASE"), <- this was wrong. my initial rendering was this.layerList[prop].key 
                    0,
                    0
                );
            }
        }
    }

  2. 0

    The issue is that you are loading the eyes as a spritesheet, but you would need to load it as an image, to draw it over the whole texture.

    You just have to replace the lines (in the MainScene.ts LineNumber: ~45 ):

    this.load.spritesheet("EYE_COLOR_BLUE", `assets/EyecolorBlue.png`, {
  frameWidth: 32,
  frameHeight: 32,
});

    with this line

    this.load.image("EYE_COLOR_BLUE", `assets/EyecolorBlue.png`);

    and your could should work.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search