[Help] Spine Animation - Problem with PMA ?

[palanolho]

Hi eveyone,

I'm trying to use spine to play some animations however, I'm getting a "black edges" problem.

I have investigated a bit and I found this explanation: http://es.esotericsoftware.com/forum/viewtopic.php?f=8&t=3132

 

Based on it, I'm assuming that the animation was exported as Premultiply Alpha but my app is rendering the animation as Straight.

I tried playing a different animation (in this case the Spine bow example provided on the Pixi examples) and it looks good, however, I don't know if that animation was exported as Premultiply Alpha or straight.

I was also trying to see if there was a way to define to render the animation (or app?) using Premultiply Alpha but was not able to find anything in concrete.

 

Is there anyone able to point me in the right direction or give me some information on how to fix this issue and display the animation correctly (without the black edges)?

 

Many thanks in advance

 

 

 

[ivan.popelyshev]

Hello! Pixi-v4 enforces PMA, and pixi-spine does not even read that parameter from the atlas file. How exactly did you manage to enable non-PMA? 

 

[palanolho]

aaaa I didnt do anything lol

This is how I created the application:

// Canvas size
var canvas_width = 540;     //1080;
var canvas_height = 960;    //1920;

// PixiJS canvas application
var app = new PIXI.Application({
    width: canvas_width, 
    height: canvas_height, 
    backgroundColor : 0x33FFC1,
    antialias: true
    //view: document.getElementById("game-canvas")
});
document.body.appendChild(app.view);

And then I created the spine animation (from the loader)

var spineChicken = new PIXI.spine.Spine(PIXI.loader.resources.spineChicken.spineData);
    spineChicken.x = app.screen.width / 2;
    spineChicken.y = app.screen.height /2;
    spineChicken.interactive = true;
    spineChicken.buttonMode = true;
    spineChicken.scale.set(0.75);
    spineChicken.state.setAnimation(0, 'idle', true);
 
app.stage.addChild(spineChicken);

I have no idea if I did something wrong or what I did :S and I'm on PixiJS 4.8.0 - ✰ WebGL ✰

Is there a way to check to be sure? I mean to check if I'm on PMA or no-PMA mode?

 

 

[jonforum]

i have black edges only if i export my work with png-8 + alpha channel

if your work with 24bits  png you will no have thius issue

just be sure your work are in 24bits before export or use the photoshop spine script package.

png-8 use alpha and are little bit less weight but a lot of artefact.

 

you can maybe try png-8 with different parameter, but overlay png-8 alway give me black or white border

[ivan.popelyshev]

^^^ Its probable that you baked wrong alpha value in your file. Whether pixi uses PMA or non-PMA, it will have the same problem.

[palanolho]

I tried to mess up a bit with the assets and its working fine now. Don't really know what I did but ill figure it out

thanks ?