[4.0.0-rc.5] Masked Spine Not Rendered #7202
Description
Version
- Phaser Version: 4.0.0-rc.5
Description
Spine in masked container sometimes not rendered
Example Test Code
<!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/[email protected]/dist/phaser.js"></script>
<script src="https://unpkg.com/@esotericsoftware/[email protected].*/dist/iife/spine-phaser-v4.min.js"></script>
<title>Spine Phaser Example</title>
</head>
<body>
</body>
<script>
class BasicExample extends Phaser.Scene {
preload() {
this.load.spineBinary("spineboy-data", "https://esotericsoftware.com/files/examples/4.2/spineboy/export/spineboy-pro.skel");
this.load.spineAtlas("spineboy-atlas", "https://esotericsoftware.com/files/examples/4.2/spineboy/export/spineboy-pma.atlas");
}
create() {
const container = this.add.container();
const mask = this.add.rectangle(100, 100, 300, 300, 0xFFFFFF, 1).setOrigin(0);
container.add(mask);
const spine = this.add.spine(200, 400, 'spineboy-data', 'spineboy-atlas').setScale(0.5);
container.add(spine);
const container2 = new Phaser.GameObjects.Container(this);
container.add(container2);
const spine2 = this.add.spine(300, 500, 'spineboy-data', 'spineboy-atlas').setScale(0.5);
container.add(spine2);
container.enableFilters().filters?.external.addMask(mask);
}
}
new Phaser.Game({
type: Phaser.WEBGL,
width: 800,
height: 600,
scene: [BasicExample],
plugins: {
scene: [
{
key: "spine.SpinePlugin",
plugin: spine.SpinePlugin,
mapping: "spine",
},
],
},
});
</script>
</html>In the example above, you see that only spine2 is rendered while spine1 is not rendered. If you remove the line about adding mask to container, it is rendered correctly. If you remove container2, it is rendered correctly. If you remove spine2, it is also rendered correctly.