Transparent parts of spine animation grey/dark pixi js

Question

When creating a spine animation using the pixi js library, its transparent places darken, gray. How can this be fixed?

With the help of this code, I create and display animation, I don’t understand why the display is wrong

const create = ({
  spineDate,
  animName,
  idCon,
  w = 800,
  h = 800,
  posX = 250,
  posY = 500,
  scale = 0.3,
  animLoop = true,
  gameScene = false,
}) => {
  const app = new Application(w, h); // import class Application for 
  const spine = new Spine(spineDate);
  if (gameScene) {
    spine.stateData.setMix("1", "2", 0.5);
    spine.stateData.setMix("1", "3", 0.5);
    spine.stateData.setMix("1", "4", 0.5);

    spine.stateData.setMix("2", "1", 0.5);
    spine.stateData.setMix("2", "3", 0.5);
    spine.stateData.setMix("2", "4", 0.5);

    spine.stateData.setMix("3", "1", 0.5);
    spine.stateData.setMix("3", "2", 0.5);
    spine.stateData.setMix("3", "4", 0.5);

    spine.stateData.setMix("4", "5", 1);
  }

  spine.state.addListener({
    complete: () => {
      if (spine.state.tracks[0].animation.name == "4") {
        setTimeout(() => {
          spine.state.setAnimation(0, "5", true);
        }, 200);
      }
    },
  });

  spine.position.set(posX, posY);

  spine.scale.set(scale);
  spine.skeleton.setSkinByName("default");
  spine.skeleton.setToSetupPose();
  spine.state.setAnimation(0, animName, animLoop);
  app.stage.addChild(spine);

  let container = document.querySelector(idCon);

  if (container) {
    container.appendChild(app.view);
  } else {
    console.log("nothing");
  }

  apps.push(app);

  return spine;
};

app.js

import { BatchRenderer, extensions as Extensions, Renderer } from "@pixi/core";
import { Container } from "@pixi/display";
Extensions.add(BatchRenderer);

export default class Application {
  
  view = document.createElement("canvas");
  stage = new Container();
  renderer;

  constructor(width = 16, height = width) {
    this.renderer = new Renderer({
      width,
      height,
      view: this.view,
      backgroundAlpha: 0, 
    });
  }

  
  render() {
    this.renderer.render(this.stage);
  }
}

I just need to show spine animation. Everything works, but the transparent parts of the animation become grey/dark

Transparent parts of spine animation grey/dark pixi js

0 Answers0