如何在小地图下设置边框/背景图像？

Question

我的屏幕右上角有一个小地图，想在它下面添加一个边框/背景，这样我可以更清楚地看到它！有没有办法在小地图下添加图像？

我尝试过的所有东西都不会停留在与窗户相对的位置，而只会随着地板移动。我尝试过使用图像、移相器内置图形，但小地图似乎没有任何效果。我也尝试过将滚动锁定到 (0, 0)，但这最终导致对象位于主摄像头的中心。

代码：

    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

根据您的用例，您可以简单地创建一个叠加的单独场景。在叠加场景中，您只需在将显示迷你地图的位置上绘制边框，就像创建边框一样。

这里简短的演示，展示了这个：

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>