javascriptgame-developmentphaser-frameworkphaserjs

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


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?

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);

Solution

  • 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>