Multiply blend mode not working correctly without pma

Ppeterlee · 23일 전

Problem statement

If the image is exported with premultiplied alpha turned off, the multiply blend mode will not work correctly. The following example is a modification of the physics2.html spine-phaser example. The image on the right do not have premultiplied alpha, and you can see the nose and mouth are not rendered correctly.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script>
    <script src="../dist/iife/spine-phaser-v3.js"></script>
    <link rel="stylesheet" href="../../index.css" />
    <title>Spine Phaser Example</title>
  </head>

  <body class="p-4 flex flex-col items-center">
    <h1>Physics example 2 - Drag physics</h1>
  </body>
  <script>
    class BasicExample extends Phaser.Scene {
      preload() {
        this.load.spineBinary("celestial-circus-data", "/assets/celestial-circus-pro.skel");
        this.load.spineAtlas("celestial-circus-atlas", "/assets/celestial-circus-pma.atlas");
        this.load.spineAtlas("celestial-circus-atlas-no-pma", "/assets/celestial-circus.atlas");
      }

      create() {
        this.add.spine(
          200,
          350,
          "celestial-circus-data",
          "celestial-circus-atlas"
        ).setScale(0.3);

        this.add.spine(
          600,
          350,
          "celestial-circus-data",
          "celestial-circus-atlas-no-pma"
        ).setScale(0.3);
      }
    }

    new Phaser.Game({
      type: Phaser.AUTO,
      width: 800,
      height: 600,
      type: Phaser.WEBGL,
      scene: [BasicExample],
      plugins: {
        scene: [
          {
            key: "spine.SpinePlugin",
            plugin: spine.SpinePlugin,
            mapping: "spine",
          },
        ],
      },
    });
  </script>
</html>

Runtime information

Phaser 3.60, 3.80, 3.90, 4.0 all have this issue

Spinebot · 23일 전

The issue you're experiencing with the multiply blend mode not working correctly without premultiplied alpha (PMA) is a common problem. When images are exported without PMA, the blending modes, such as multiply, may not render correctly because the alpha channel is not pre-multiplied with the color channels. This can lead to artifacts or incorrect rendering, as seen with the nose and mouth in your example. To resolve this, ensure that your images are exported with PMA enabled. This will allow the multiply blend mode to function correctly, as PMA ensures that the alpha channel is correctly factored into the blending calculations.

Davide · 23일 전

peterlee

Hello, I can confirm Spinebot answer is correct.
As stated in our documentation:

Multiplies pixel RGB values by the alpha value. Rendering the images at runtime must also use premultiplied alpha. This is recommended for correct blending.

If you use blending modes, it's recommended to export using PMA, if the target runtime does not premultiply textures for you (like spine-pixi per example).