Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[phaser] texture flicker when creating new SpineGameObject #2502

Closed
kpotschi opened this issue Apr 17, 2024 · 1 comment
Closed

[phaser] texture flicker when creating new SpineGameObject #2502

kpotschi opened this issue Apr 17, 2024 · 1 comment
Assignees
@badlogic
Labels
bug

Comments

@kpotschi
Copy link

kpotschi commented Apr 17, 2024 •
edited

When creating a new SpineGameObject, its whole packed texture appears for one frame on the canvas.

export default class Plant extends SpineGameObject {
  constructor(scene: GameScene) {
    super(scene, scene.spine, 0, 0, "plant-data", "plant-atlas");
   }
}

The Object is created in the callback of a 'pointerup' event, but the bug remains when using 'pointerdown'.

"@esotericsoftware/spine-phaser": "^4.2.35",
"phaser": "3.80.0-beta.2",
bug.mov
@badlogic badlogic self-assigned this Apr 30, 2024
@badlogic badlogic added the bug label Apr 30, 2024
@badlogic
Copy link
Collaborator

@kpotschi I can not reproduce this with e.g. this code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="//cdn.jsdelivr.net/npm/phaser@3.80.0-beta.2/dist/phaser.js"></script>
    <script src="../dist/iife/spine-phaser.js"></script>
    <link rel="stylesheet" href="../../index.css" />
    <title>Spine Phaser Example</title>
  </head>

  <body class="p-4 flex flex-col items-center">
    <h1>Basic example</h1>
  </body>
  <script>
    class Boi extends spine.SpineGameObject {
      constructor(scene) {
        super(scene, scene.spine, 0, 0, "spineboy-data", "spineboy-atlas");
      }
    }

    class BasicExample extends Phaser.Scene {
      preload() {
        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
      }

      create() {
        const spineboy = this.add.spine(
          400,
          500,
          "spineboy-data",
          "spineboy-atlas"
        );
        spineboy.setInteractive();
        spineboy.displayWidth = 200;
        spineboy.displayHeight = (spineboy.height / spineboy.width) * 200;
        this.input.enableDebug(spineboy, 0xff00ff);
        spineboy.animationState.setAnimation(0, "walk", true);
        this.input.on('pointerup', (pointer, gameObject) => {
          let x = pointer.x;
          let y = pointer.y;
          let boi = new Boi(this).setPosition(x, y);
          this.add.existing(boi);
        });
      }
    }

    new Phaser.Game({
      type: Phaser.AUTO,
      width: 800,
      height: 600,
      type: Phaser.WEBGL,
      scene: [BasicExample],
      plugins: {
        scene: [
          {
            key: "spine.SpinePlugin",
            plugin: spine.SpinePlugin,
            mapping: "spine",
          },
        ],
      },
    });
  </script>
</html>

Happy to reopen if you can adjust the above example so that it shows the issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@badlogic badlogic

Labels
bug
Milestone
No milestone
Development

No branches or pull requests
2 participants
@badlogic @kpotschi