Spine object has no width and height (Pixi.js: 8.3.4 & Spine-Pixi-v8: 4.2.74)

[kule90]

Hello developers!
I am making my own slot game, and tying to add spine animation but facing this problem last few days.
My Spine animation has 0 width and 0 height.

Spine files are imported, I can see them in network tab.
I have called animation by  name, and animation is visible via Chrome PIXIJS inspector.
No errors in VS Code and  console, but also there is no dimensions...

My Spine files (.json, .atlas, .png) are from 2018/19 - a bit older, not sure if that can cause problem.

These two versions of libraries are used:
    "@esotericsoftware/spine-pixi-v8": "^4.2.74",
    "pixi.js": "^8.3.4"

I am sending 3 screenshots and my code.

Any help is appreciated!

 

async function animateSpineBoy() {
  PIXI.Assets.add({
    alias: "spineboyData",
    src: "/assets/spine/spineboy-pro.json",
  });
  PIXI.Assets.add({
    alias: "spineboyAtlas",
    src: "/assets/spine/spineboy-pro.atlas",
  });
  await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]);

  const spineboy = Spine.from({
    atlas: "spineboyAtlas",
    skeleton: "spineboyData",
    scale: 1,
  });

  spineboy.label = "spineboy";
  spineboy.state.data.defaultMix = 0.2;

  spineboy.state.setAnimation(0, "walk", true);

  window.__MAIN_CONTAINER__.addChild(spineboy);

  spineboy.x = window.innerWidth / 2 - spineboy.width / 2;
  spineboy.y = window.innerHeight / 2 - spineboy.height / 2;
  spineboy.width = 400;
  spineboy.height = 600;

  console.log("size:", spineboy.getSize()); // returns size: {width: 0, height: 0}
  console.log("spineboy: ", spineboy);
}