phaserjs / phaser

Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.
https://phaser.io
MIT License
37.09k stars 7.1k forks source link

SpineContainer delayed masking, or not masking at all, with lower depth spine below #5627

Closed FloodGames closed 1 year ago

FloodGames commented 3 years ago

Phaser Version: 3.54

Description

1 SpineContainer, containing 1 ship spine and 1 mask 1 SpineObject, a wave, with SpineContainer.depth+1 Result: Masking is somehow delayed.

Here is a gif of the bug: MaskingBugSpineContainer

Example Test Code

Please add my example code to labs.phaser.io - Spine. Like: SpineContainer with Mask In this sample, the mask stops working (try commenting out the const coin line!):

var config = {
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    backgroundColor: '#2d2d66',
    scene: {
        preload: preload,
        create: create,
        update: update,
        pack: {
            files: [
                { type: 'scenePlugin', key: 'SpinePlugin', url: 'plugins/3.8.95/SpinePluginDebug.js', sceneKey: 'spine' }
            ]
        }
    }
};

var controls;

var game = new Phaser.Game(config);

function preload ()
{
    this.load.image('logo', 'assets/sprites/phaser.png');

    this.load.setPath('assets/spine/3.8/spineboy');

    this.load.spine('boy', 'spineboy-pro.json', 'spineboy-pro.atlas', true);

    this.load.setPath('assets/spine/3.8/coin');

    this.load.spine('coin', 'coin-pro.json', 'coin-pro.atlas');
}

function create ()
{
    const spineContainer = this.add.spineContainer(200, 400);

    const spineBoy = this.add.spine(0, 50, 'boy', 'walk', true).setScale(0.5);
    spineContainer.add(spineBoy)

    //add mask to spineContainer
    spineContainer.maskShape = this.add.graphics()
    .fillStyle(0x7fff00, 0.2) //for debugging purposes
    .setVisible(true) //set true for debugging purposes
    .setDepth(5)
    .fillRect(
      Math.ceil(100),
      Math.ceil(100),
      Math.ceil(300),
      Math.ceil(300)
    )
    const mask = new Phaser.Display.Masks.GeometryMask(this, spineContainer.maskShape)
    spineContainer.setMask(mask)

    const coin = this.add.spine(200, 300, 'coin', 'rotate', true).setScale(0.3);

    var cursors = this.input.keyboard.createCursorKeys();

    var controlConfig = {
        camera: this.cameras.main,
        left: cursors.left,
        right: cursors.right,
        up: cursors.up,
        down: cursors.down,
        acceleration: 0.06,
        drag: 0.0005,
        maxSpeed: 1.0
    };

    controls = new Phaser.Cameras.Controls.SmoothedKeyControl(controlConfig);
}

function update (time, delta)
{
    controls.update(delta);
}
FloodGames commented 3 years ago

Updated with sample code.

1) please add to labs.phaser.io "SpineContainer with Mask" 2) please fix if possible

FloodGames commented 3 years ago

The example I can "fix" with by not giving a depth to the mask. .setDepth(5)

Still, in the game I have: image

UPDATE If you put the coin first in the create - or with lower depth than the SpineContainer - it will mess up, this: image

to: image

Note that the coin is not related to the SpineContainer and its mask in any way. Somehow it visually destroys everything.

photonstorm commented 1 year ago

Thank you for submitting this issue. We have fixed this and the fix has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.