The Spine animation looks distorted or blurry or pixelated.

mayurlagad

1) I'm using Spine Runtime JS ( Spine Web Player ) with 4.1.* Version script.
2) When i load the spine animations, some animations are seen distorted. In most of the cases the borders are not showcased correctly.
3) The animation is not displayed correctly in the Spine Web Player.

I've some personal Spine animation files. I'm using those and getting the visual error.

Runtime information

Spine Runtimes version - 4.1.2
I've attached an image of the Spine Web Player once the files are loaded, where you can see how the animation is disturbed.

Spinebot

The issue you're experiencing with distorted or blurry animations in the Spine Web Player could be related to the settings used during export or runtime. One common cause of such visual artifacts is a mismatch in the Premultiplied Alpha settings between the Spine editor export and the runtime. Ensure that the Premultiplied Alpha setting is consistent in both the export from the Spine editor and the runtime configuration. You can find more information about this setting here. Additionally, verify that the version of the Spine Web Player matches the version of the exported assets, as mismatches can lead to rendering issues.

mayurlagad

Could you please tell me how to verify the Premultiplied Alpha setting is consistent in both the export from the Spine editor and the runtime configuration ?

Nate

Check Premultiply alpha in the texture packer settings in Spine (Spinebot linked it). At runtime, set premultipliedAlpha to true:
https://esotericsoftware.com/spine-player#Premultiplied-alpha

Please let us know if you still have issues. It may help to link to a web page showing the problematic Spine player.

mayurlagad

Nate thank you for the solution.. I've applied the same wrt the used animations.

The artist has set the PMA to false, so from the code i've also set it to false. Now this resolved the issue which i faced earlier ( the image attached with the original question ).

But somehow, when i use another set of animations, with same settings and same version of Spine, i still see some mismatch in the web player.

With this description, i've attached a snippet of the code and another image where i'm seeing the issue. Please if you could help me with this, i'd be very much thankful to you! Lemme know if you need any more input from me.

Davide

mayurlagad

From your screenshot, it appears that you're using blending modes. Blending modes only work with premultiplied alpha images.

Please ask your artist to export the asset with PMA (premultiplied alpha) enabled. Then, either omit the premultipliedAlpha setting or explicitly set premultipliedAlpha: true (the default value) so that the player treats the asset correctly.

mayurlagad

@Misaki here's the issue that i raised earlier.

Misaki

mayurlagad Please note that it's easier to check the code when it's shared as text rather than as a screenshot.

You’ve attached an image, but unfortunately, we don’t know what the expected result should look like. Because of this, it's difficult to determine what you mean by "mismatch."
Could you please clarify what the expected result is? I assume it’s what you see in the Spine Editor—if that’s the case, please include a screenshot of it.

mayurlagad

Misaki sure..

document.getElementById("uploadForm").addEventListener("submit", async function (e) {
e.preventDefault();

const formData = new FormData(this);

const res = await fetch("/uploads", {
    method: "POST",
    body: formData
});

const data = await res.json();

const jsonFiles = data.files.filter(f => f.originalname.endsWith(".json"));
const atlasFiles = data.files.filter(f => f.originalname.endsWith(".atlas"));
const imageFiles = data.files.filter(f => f.originalname.endsWith(".webp") || f.originalname.endsWith(".png") || f.originalname.endsWith(".jpg"));

if (jsonFiles.length !== 1) {
    alert("Please upload the JSON file.");
    return;
}

if (atlasFiles.length !== 1) {
alert("Please upload the ATLAS file.");
return;
}

if (imageFiles.length < 1) {
    alert("Please upload image files (WEBP, PNG, or JPG).");
    return;
}

const jsonUrl = `/uploads/${jsonFiles[0].originalname}`;
const atlasUrl = `/uploads/${atlasFiles[0].originalname}`;

document.getElementById("player-container").innerHTML = "";

new spine.SpinePlayer("player-container", {
    jsonUrl: jsonUrl,
    atlasUrl: atlasUrl,
    showControls: true,
    backgroundColor: "#eeeeee",
    alpha: false,
    preserveDrawingBuffer: true,
    autoplay: true,
    loop: false,
    scale: 1,
    premultipliedAlpha: false
});

});

here is the actual code i'm using for my project. I'm taking input files from user and playing the spine animations in the Spine Web Player.
But for some specific animations, i'm seeing the blur and distorted animations in the web player.

I've attached the exact part of the previous image that i uploaded, where you can see a white square block which is supposed to be hidden.

mayurlagad

Davide sure !!
i'll definitely try this way too! Thanks..

Misaki

mayurlagad Thank you for sharing the script. However, I still don't know what the expected result should be, so I'm not sure which part you mean by "blurred and distorted." Could you show me what it should look like when it's not blurred and distorted?

The blurring may also be related to the texture packer settings, so it would be helpful if you could show us your texture pack settings.

mayurlagad

Misaki
it looks like the issue is mostly related with the PMA. The assets i'm using or i'll be using, will not always have the PMA enabled and i don't think i can change the premultipliedAlpha dynamically for each time. I'll still try to investigate on my end thru the texture packer settings. And will see if it results in a clean viewing of the Animations.

By the blurred or distorted part, i want to say that some extra elements, probably the borders or some animation effects, are visible on the screen ( the white square box visible in the last added image ).

It is working correctly for some other spines, but some spines are showing unwanted elements on the web player. Will see what i can do from the texture packer settings.

Thank you again for all the support!! I appreciate it!