How do I set a border around /background image under the minimap?

Question

I have a minimap on the top right of my screen, and would like to add a border/background under it that way I can see it more clearly! Is there anyway to add an image under the minimap?

Everything I have tried doesn’t stay where it is relative with the window, and just moves with the floor. I have tried using an image, phaser built-in graphics, but nothing has seemed to stay with the minimap. I have also tried locking the scroll to (0, 0) but that just ends up making the object on the center of the main camera.

Code:

    this.cameras.main.startFollow(this.player);
    
    //border image here maybe?
    
    this.minimap = this.cameras.add(config.width-210, 10, 200, 200).setZoom(0.1).setName("minimap");
    this.minimap.scrollY = 250;
    this.minimap.scrollX = Phaser.Math.Clamp(this.player.x-100, 800, 2000);
    this.minimap.setBackgroundColor("#000000");
    this.minimap.startFollow(this.player);

Answer 1

Depending on your usecase you could simple, create a seperat scene that you overlay. In the overlay Scene you just draw the border, over the position where you will display the mini-map, like this creating a border.

Info: You can't really put the border on the same scene, since this will be also drawn in the mini map, so you will need a second scene or draw outside of the for the player visible map(and some how overlay it).

Here Short Demo, showcasing this:

document.body.style = 'margin:0;';

class GameScene extends Phaser.Scene {
    constructor(){
        super('GameScene');
    }
    
    create () {
        this.add.text(10, 10, 'Camera set to follow the player')
            .setScale(1.5)
            .setOrigin(0)
            .setStyle({fontStyle: 'bold', fontFamily: 'Arial'});
            
        this.scene.launch('GameOverlayScene');
        
        this.cursors = this.input.keyboard.createCursorKeys();

        let graphics  = this.make.graphics();
        graphics.fillStyle(0xffffff);
        graphics.fillRect(0, 0, 10, 10);
        graphics.generateTexture('img', 10, 10);
        graphics.fillStyle(0xff0000);
        graphics.fillRect(0, 0, 20, 20);
        graphics.generateTexture('obj', 20, 20);
    
    
        this.player = this.physics.add.image(150, 90, 'img');
        this.player.setCollideWorldBounds(true);
        this.player.setImmovable(true)
    
        let testHouse = this.physics.add.image(200, 90, 'obj');
        testHouse.setVelocity(-150, 0);
    
        this.physics.add.collider(this.player, testHouse);
    
        this.minimap = this.cameras.add(10, 10, 536 * .2, 185 * .2)
            .setZoom(0.2)
            .setName('mini');

        this.cameras.main.startFollow(this.player);
        this.minimap.startFollow(this.player);
    }
    
    update () {
        this.player.body.setVelocity(0);
        let speed = 300;

        if (this.cursors.left.isDown) {
            this.player.body.setVelocityX(-speed);
        } else if (this.cursors.right.isDown) {
            this.player.body.setVelocityX(speed);
        }

        if (this.cursors.up.isDown) {
            this.player.body.setVelocityY(-speed);
        } else if (this.cursors.down.isDown) {
            this.player.body.setVelocityY(speed);
        }
    }
    
}

class GameOverlayScene extends Phaser.Scene {
    constructor(){
        super('GameOverlayScene');
    }
    
    create () {
        this.add.rectangle(10, 10, 536 * .2, 185 * .2)
            .setOrigin(0)
            .setStrokeStyle(5, 0xffffff);
    }
}

var config = {
    width: 536,
    height: 183,
    physics: {
        default: 'arcade',
        arcade: {            
            debug: true
        }
    },
    scene: [GameScene, GameOverlayScene],
}; 


new Phaser.Game(config);

console.clear();

<script src="//cdn.jsdelivr.net/npm/phaser/dist/phaser.min.js"></script>