how to set premultipliedAlpha = true, in pixi.js spine-pxixi
spine-pixi premultipliedAlpha
I'm sorry to hear you are having trouble with PMA textures.
As Misaki said, PMA should be automatically managed.
It's difficult to understand the problem based only on the screenshot you provided.
Can you share a minimal reproduction project of the problem with us? If you want, you can send it privately to contact@esotericsoftware.com.
Davide
import React, { useEffect, useRef } from 'react';
import { observer } from 'mobx-react';
import { Application, Assets } from 'pixi.js';
import {
AtlasAttachmentLoader,
SkeletonBinary,
SkeletonJson,
Spine,
} from '@esotericsoftware/spine-pixi';
import { useMount } from 'ahooks';
const PixiComponent = () => {
const ref = useRef<any | null>(null);
useMount(async () => {
var app = new Application({
width: window.innerWidth,
height: window.innerHeight,
resolution: window.devicePixelRatio || 1,
autoDensity: true,
resizeTo: window,
backgroundColor: 0x2c3e50,
hello: true,
});
document.body.appendChild(app.view);
// Pre-load the skeleton data and atlas. You can also load .json skeleton data.
Assets.add({
alias: 'spineboyData',
src: 'https://funimg.pddpic.com/common/cartoon_activity/fruiter/water_ani_spine/kettle_and_water.skel',
});
Assets.add({
alias: 'spineboyAtlas',
src: 'https://funimg.pddpic.com/common/cartoon_activity/fruiter/water_ani_spine/water_vfx_optimized_export.skel',
});
await Assets.load(['spineboyData', 'spineboyAtlas']);
const atlas = Assets.get('spineboyAtlas');
const attachmentLoader = new AtlasAttachmentLoader(atlas);
const binaryLoader = new SkeletonBinary(attachmentLoader);
const skeletonData = binaryLoader.readSkeletonData(
Assets.get('spineboyData'),
);
const spineboy = new Spine(skeletonData);
spineboy.x = window.innerWidth / 2;
spineboy.y = window.innerHeight / 2;
spineboy.state.setAnimation(0, 'watering_01', true);
app.stage.addChild(spineboy);});
return null
};
export default observer(PixiComponent);
The code looks like this. Could it be a problem with skel and atlas
I don't see anything wrong in particular with this code, apart from the .skel extension for the atlas.
I downloaded the atlas and I don't see any pma:true. If you say that textures are exported premultiplied, there should be that value.
Are you sure you have exported your assets as premultiplied?
The version contains the fixes I was mentioning, so that shouldn't be the problem.
I'm loading the skeleton, atlas and png you are linking with pixi and other runtimes, and I don't see the black artifacts you're showing.
However, it might depend on some other setup in your project. The only way I can debug the problem is with a minimal project that contains the problem. The code you sent me just render the animation correctly on my side.
Any chance you can send us your project or an extract of it containg the problem at contact@esotericsoftware.com?
Davide
<html>
<head>
<meta charset="UTF-8" />
<title>spine-pixi</title>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@7.4.2/dist/pixi.min.js"></script>
<script src="https://unpkg.com/@esotericsoftware/spine-pixi@4.2.*/dist/iife/spine-pixi.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tweakpane@3.1.9/dist/tweakpane.min.js"></script>
</head>
<body>
<script>
(async function () {
var app = new PIXI.Application({
width: window.innerWidth,
height: window.innerHeight,
resolution: window.devicePixelRatio || 1,
autoDensity: true,
resizeTo: window,
backgroundColor: 0x333333,
hello: true,
backgroundAlpha: 0
});
document.body.appendChild(app.view);
// Pre-load the skeleton data and atlas. You can also load .json skeleton data.
PIXI.Assets.add('girlData', 'https://funimg.pddpic.com/common/cartoon_activity/fruiter/water_ani_spine/kettle_and_water.skel');
PIXI.Assets.add('girlAtlas', 'https://funimg.pddpic.com/common/cartoon_activity/fruiter/water_ani_spine/water_vfx_optimized_export.atlas');
await PIXI.Assets.load(['girlData', 'girlAtlas']);
// Create the spine display object
const girl = spine.Spine.from('girlData', 'girlAtlas');
// Center the spine object on screen.
girl.x = window.innerWidth / 2;
girl.y = window.innerHeight / 2;
// Set animation "eyeblink-long" on track 0, looped.
girl.state.setAnimation(0, 'watering_01', true);
// Add the display object to the stage.
app.stage.addChild(girl);
})();
</script></body>
</html>
my email cant upload file。
please save this code as html and open it. if i set backgroundAlpha = 1,The effect seems to be OK, but 0 is not。
Here's the corrected version:
The problem is not related to spine-pixi.
I extracted the poring_B_00033 image from your atlas and reproduced the situation using pixi textures.
This is the code you can use to reproduce the situation:
const texture = await PIXI.Assets.load("assets/poring_B_00033.png");
const water_below = new PIXI.Sprite(texture);
water_below.scale.x = 4;
water_below.scale.y = 4;
water_below.x = 50;
water_below.y = 200;
water_below.blendMode = PIXI.BLEND_MODES.SCREEN;
app.stage.addChild(water_below);
const water_above = new PIXI.Sprite(texture);
water_above.scale.x = 4;
water_above.scale.y = 4;
water_above.x = 55;
water_above.y = 200;
water_above.blendMode = PIXI.BLEND_MODES.MULTIPLY;
app.stage.addChild(water_above);And this is the result having backgroundColor: 0xffffff and backgroundAlpha: 0:
The problem here is the combination of backgroundAlpha: 0 and the multiply blending mode on your second texture.
When you set backgroundAlpha: 0, you are basically instructing pixi to set as background the color 0, 0, 0, 0. So, when the texture overlaps with the one below, the colors of the two textures are multiplied. However, where the texture overlaps with the one below where alpha is not 0, or does not overlap, the multiplication of the colors results in having a black color.
I suppose that in order to avoid those black artifacts, you should bring your background within the pixi canvas or into the spine skeleton.
If you use the multiply blending mode and keep the background transparent, there is no way to avoid those artifacts where your texture overlaps with nothing.
As I told you above, you should bring your background within the pixi canvas or into the spine skeleton.
If you can't, you should not use that blending mode.
However, this problem is not related to spine. You might try to ask the pixi community if they have a solution to the problem of a transparent canvas where a texture having a blending mode multiply set is rendered as black.