Camera Mask/Shape for a round Minimap

Phaser 3
1

Hey :)!

I am trying to build a round minimap. I do not want to duplication rendering of all game objects, so I decided to add a second Camera.
My Issue: Is there any way to get the Camera Object in a round shape?

The game is an endless generated Map getting chunk data from a nodejs server. So the minimap should stay quite flexible. A camera fits my needs but the shape issue still exists.

I would appreciate help a lot !

Unbenannt

EDIT: Found a solution. Enjoy :wink:

import Phaser from 'phaser';
export default new Phaser.Class({

Extends: Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline,

initialize:

    function CustomPipeline (game)
    {
        Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline.call(this, {
            game: game,
            renderer: game.renderer,
            fragShader: `
                precision mediump float;
                uniform sampler2D uMainSampler;
                varying vec2 outTexCoord;
               
    
                void main(void)
                {
                    if (length(outTexCoord.xy - vec2(0.5, 0.5)) > 0.5) {
                        discard;
                    } else {
                        gl_FragColor = texture2D(uMainSampler, outTexCoord);
                    }
                }   
        `});
    }
});

And in the Scene:

this.minimapPipeline = this.game.renderer.addPipeline('Minimap', new  
MinimapPipeline(this.game));

this.minimapCamera = new MinimapCamera({
   scene: this,
    x: 0,
    y: 0,
    width: 400,
    height: 400,
});
this.minimapCamera.setPosition(this.game.scale.width - 240, 40);
this.minimapCamera.setZoom(0.5);
this.minimapCamera.startFollow(this.world.entityManager.get(this.focusEntity));
this.minimapCamera.setRenderToTexture(this.minimapPipeline);

Take care, if you use Zoom, you need to adjust the camera size to it. i.e.:
200x200 target = zoom 0.5 & 400x400 size

image

3 Likes
2

That’s a great question! Cameras don’t inherit from gameobject so they can’t be masked afaik. From the top of my head i would render the second camera to a texture and use that texture in an image, images can be masked.

1 Like
3

Hey @jackfreak, thanks for your reply.
Yea i alread tried this but I am quite lost. I am trying to find a good example to let a camera render on a texture which exists in my scene.

Do you know where I could find some Input?
https://photonstorm.github.io/phaser3-docs/Phaser.Cameras.Scene2D.Camera.html#setRenderToTexture__anchor Is not clear for me^^

4

Honestly I don’t know if the way Phaser cameras render to texture are flexible enough to do what I said.

I haven’t play enough with phaser pipelines to give you a more tangible solution.

5

Found a solution using a costom WebGL Fragment Pipeline. I’ll add it to the Post in case someone needs it as well.

2 Likes
6

Great solution! It will definitely be educational for a lot of us :slight_smile:

Thanks for sharing!