pixijs/spine

How to enable premultipliedAlpha?

wz36125 opened this issue · 8 comments

wz36125 commented

In spine.js, I can set SkeletonRenderer.premultipliedAlpha = true to enable premultiplied, but I did not search for this configuration item in pixi-spine

pixi-spine - v4.0.4
pixijs v7
PIXI.IRendererOptions.premultipliedAlpha = true

ivanpopelyshev commented

its suposed to be parsed automagically from spine atlas file. In pixi you can set alphaMode of each base texture independently, need to get those textures from atlas somehow...

wz36125 commented

https://www.html5gamedevs.com/topic/48445-question-about-pixi-spine/

thanks for your answer.
but didn't work.
I tried using metadata, also didn't work.
this is my code

const spine = PIXI.spine;
    let app = new PIXI.Application({width: document.body.clientWidth, height: window.innerHeight, hello: true, premultipliedAlpha: true, backgroundAlpha: 0});
    document.body.appendChild(app.view);

    const s1 = new PIXI.Container();
    let arr = ['action', 'angry', 'delight', 'expression_0', 'idle', 'no', 'pain', 'sad', 'surprise', 'talk_end', 'talk_start', 'think', 'worry'];
    console.log(spine)

    PIXI.Assets.add('spineCharacter', 'spine/c907_00.skel');
    PIXI.Assets.load("spineCharacter").then(res => {
      console.log(res)
      // PIXI.ALPHA_MODES.PMA is 2
      res.spineAtlas.pages[0].baseTexture.alphaMode = 2;
      let spine1 = new spine.Spine(res.spineData);
      console.log(spine1);
      spine1.scale.set(0.4);

      spine1.state.setAnimation(0, 'idle', true);
      s1.addChild(spine1);
      s1.x = app.screen.width / 2;
      s1.y = app.screen.height / 1.1;
      app.stage.addChild(s1);
    });

The final rendered effect in pixi-spine is like this
img1
skeletonviewer is right
img2
atlas.json
img3

Is there something I didn't do right?

wz36125 commented

img1
img2
img3

ivanpopelyshev commented

If you have the source, just generate not-premultiplied texture nad it should be fine.

If you are trying to achieve ADD effect manually thorugh texture (alpha=0, r,b,g>0), it sshould work in current settings.

Anyway, I shown you where pixi vars are (baseTexture.alphaMode), where spine vars are (metadata), now you can debug things. Sadly, I dont have time to look at people personal cases this year (

ivanpopelyshev commented

Alternatively, using special plugin https://github.com/pixijs/pixi-heaven#how-to-use-with-spine with BLEND_ADD_UNITY might help you :) I was able to find time to port that plugin, hope it helps!

wz36125 commented

If you have the source, just generate not-premultiplied texture nad it should be fine.

If you are trying to achieve ADD effect manually thorugh texture (alpha=0, r,b,g>0), it sshould work in current settings.

Anyway, I shown you where pixi vars are (baseTexture.alphaMode), where spine vars are (metadata), now you can debug things. Sadly, I dont have time to look at people personal cases this year (

ok，thank you。
but，I use pma in pixijs v6.5.10 and pixi-spine.umd3.1.2 without manually filling in any parameters

const spine = PIXI.spine;
let app = new PIXI.Application({
  backgroundAlpha: 0,
});
app.resizeTo = window;
document.body.appendChild(app.view);
let container = new PIXI.Container();
app.loader.add("spine1", 'spine/c907_00.skel')
  .load((loader, res) => {
  let spine1 = new spine.Spine(res["spine1"].spineData);
  spine1.scale.set(1);
  container.addChild(spine1);
  spine1.state.setAnimation(0, "action", false);
  spine1.state.addAnimation(0, "idle", true, 0);
});
app.stage.addChild(container);

the above piece of code can use premultiplication normally , Only available on pixiv6.x and pixi-spinev3.x.
I hope this feedback will be helpful for the next version update

wz36125 commented

@ivanpopelyshev
this problem I got resolved here
pixijs/pixijs#9141 (comment)

  • 👍1