[4.0.0-rc.6] Spine position incorrect inside a container with .setFiltersForceComposite(true)
Open
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 40.3k
- Forks
- 7.2k
- PR merge metrics
- No merged PRs in 30d
Description
Version
- Phaser Version: 4.0.0-rc.6
Description
If a spine game object is placed inside a container with .setFiltersForceComposite(true), it's position will be rendered wrong
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/phaser@4.0.0-rc.6/dist/phaser.js"></script>
<script src="https://unpkg.com/@esotericsoftware/spine-phaser-v4@4.2.*/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 allContainer = this.add.container(100, 100);
const container = new Phaser.GameObjects.Container(this);
allContainer.add(container);
const container2 = new Phaser.GameObjects.Container(this)
.enableFilters()
.setFiltersForceComposite(true);
allContainer.add(container2);
const spineContainer = new Phaser.GameObjects.Container(this, 300, 400).setScale(0.5);
spineContainer.add(new Phaser.GameObjects.Rectangle(this, 0, -300, 500, 500, 0xFF0000, 0.5));
const spine = this.add.spine(0, 0, `spineboy-data`, `spineboy-atlas`);
spineContainer.add(spine);
container.add(spineContainer);
this.time.delayedCall(2000, () => {
container2.add(spineContainer);
});
}
}
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 code above, if .setFiltersForceComposite(true) is not called on container2, or if allContainer is at position (0,0) then the spine will be rendered correctly
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by running the supplied HTML reproduction with Phaser 4.0.0-rc.6 and the Spine plugin, then compare rendering with and without setFiltersForceComposite(true) and with allContainer at different positions. Trace the container filter-compositing and Spine rendering paths; done means the Spine object keeps the correct position in both nested-container cases.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- computer-graphics, game-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100