[4.0.0-rc.6] Mask rendered wrong when camera has viewport set

[leemanhopeter]

Version

• Phaser Version: 4.0.0-rc.6

Description

If a container is masked and the main camera has its viewport set, then the container will be rendered incorrectly

Example Test Code

https://phaser.io/sandbox/o1rzdqof

In the example above, the container is rendered wrong. To see what it should look like, comment out line 16 which sets the mask of the container.

[leemanhopeter]

Problem still there in phaser 4.0.0-rc.6

[FrantisekBlahos]

i have same problem. Filter mask don´t work properly on containers :(

[BenjaminDRichards]

This is a known issue. Unfortunately, it's impractical to resolve, as the camera system in Phaser doesn't sufficiently separate projection from perspective.

That sounds very abstract, so in practical terms: Cameras just can't do some things. You can't rotate a camera. You can rotate its view, but not how it draws to the screen - it will always be an axis-aligned rectangle.

My recommendation is to use one of the new, more powerful techniques in Phaser 4 instead.

• CaptureFrame (https://labs.phaser.io/phaser4-index.html?path=game+objects%2Fcapture+frame) can take a "screenshot" midway through rendering, copying what is currently rendering into a texture. You can then use the texture to place that view anywhere you want, including rotating it, scaling it, filtering it, etc.
• RenderTexture/DynamicTexture in Phaser 4 is much better at rendering a set of game objects through its own camera. Again, this gives you a texture that you can then apply to an Image game object, and freely place it in your scene.

I'll make some worked examples and post them so it's an easy migration. Please wait...

[BenjaminDRichards]

Here's CaptureFrame doing its thing. Note that it captures the entire current frame at the moment it "renders". As its texture is used later in the frame, it is not picked up by the capture. This is best for running effects over the whole scene, but you can use it for cameras if you don't mind the fixed frame size.

class Example extends Phaser.Scene
{
    preload ()
    {
        // this.load.setBaseURL('https://cdn.phaserfiles.com/v385');
        this.load.image('gradient24', "assets/skies/gradient24.png");
        this.load.image('phaser2', 'assets/sprites/phaser2.png');
    }

    create ()
    {
        this.add.image(400, 300, "gradient24");

        this.sprite = this.add.image(400, 400, "phaser2");
        this.sprite.enableFilters();
        this.glow = this.sprite.filters.internal.addGlow();
        this.glow.setPaddingOverride(null); // Add auto-padding.

        this.add.text(400, 100, "Read me in the cameras", {
            fontSize: 64,
            fontFamily: "Sans-serif",
            color: "#7f00ff",
        }).setOrigin(0.5, 0.5);

        // Capture the current render stage.
        this.cameras.main.setForceComposite(true);
        this.add.captureFrame("capture");
        console.log(this);

        // Display the captured scene.
        // Note, the texture will be the same size as the game,
        // so the "screens" are scaled down here.
        // To capture a different size, you can use the renderTexture method.
        this.camera1 = this.add.image(120, 120, "capture").setScale(0.25).setRotation(-0.1);
        this.camera2 = this.add.image(400, 100, "capture").setScale(0.25);
        this.camera3 = this.add.image(680, 120, "capture").setScale(0.25).setRotation(0.1);

        this.camera1.enableFilters().filters.external.addBlocky(16);
        this.camera2.enableFilters().filters.external.addGlow();
        this.camera3.enableFilters().filters.external.addShadow();
    }

    update (time)
    {
        this.sprite.rotation = Math.sin(time / 1000) * 0.1;
        this.glow.scale = 2 + 2 * Math.sin(time / 123);
        this.camera1.rotation = -0.1 + Math.sin(time / 917) * 0.05;
        this.camera3.scale = 0.25 + Math.sin(time / 1111) * 0.1;
    }
}

const config = {
    type: Phaser.WEBGL,
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

[BenjaminDRichards]

And here's RenderTexture using its built-in camera as a camera! Several things to notice:

• Resolution can be set.
• The "camera" can be rotated and otherwise transformed, which is mostly impossible with Camera.
• The "camera" can be filtered; the edges of this camera are soft, which is also impossible the old way.

class Example extends Phaser.Scene
{
    image;
    screen1;

    preload ()
    {
        // this.load.setBaseURL('https://cdn.phaserfiles.com/v385');
        this.load.image('einstein', 'assets/pics/ra-einstein.png');
    }

    create ()
    {
        this.image = this.add.image(400, 300, 'einstein');

        // Create render textures to capture key elements of the scene.
        this.screen1 = this.add.renderTexture(100, 150, 200, 300);
        this.screen2 = this.add.renderTexture(300, 450, 200, 300);
        this.screen3 = this.add.renderTexture(500, 150, 200, 300);
        this.screen4 = this.add.renderTexture(700, 450, 200, 300);

        // Change the view of the render texture cameras.
        // This is half the resolution of the target image.
        this.screen1.camera.setScroll(320, 257);
        this.screen2.camera.setScroll(320, 257);
        this.screen3.camera.setScroll(320, 257);
        this.screen4.camera.setScroll(320, 257);

        // Do things that regular cameras can't do.
        this.screen1.setTint(0xff7f00);
        this.screen2.setRotation(0.1);
        this.screen4.enableFilters();
        const blur = this.screen4.filters.internal.addBlur();
        blur.setPaddingOverride(null);
    }

    update ()
    {
        this.image.rotation += 0.01;

        this.screen3.camera.rotation -= 0.005;

        this.screen1.draw(this.image).render();
        this.screen2.draw(this.image).render();
        this.screen3.draw(this.image).render();
        this.screen4.draw(this.image).render();
    }
}

const config = {
    type: Phaser.WEBGL,
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

[BenjaminDRichards]

Hopefully these can get deployed into the main examples repo soon, but this was the quickest way to get them out there. I hope this helps the adoption of new camera techniques, doing things that simply weren't possible before!