Phaser.js 实现 Minecraft 照明

Question

所以，我正在考虑制作《我的世界》/泰拉瑞亚方块照明

（就像有些瓷砖是深色的）

到目前为止，我看到的高级想法是“将天空块设置为最大光照级别，并为每个块减少x，通过平均光照级别获得光照级别”

所以我的问题主要是，我如何在移相器中实现这个？我需要给每个图块赋予值并计算它吗？

Answer 1

有一个官方示例，涵盖了您问题的答案（如果我理解您的问题正确的话）。

这是该示例的稍微改变的版本：（
这是一个非常粗略的示例，用于展示该想法）

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

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 183,
    scene: {
        preload,
        create
    }
};

var game = new Phaser.Game(config);

function preload (){
    this.load.image('tiles', 'https://labs.phaser.io/assets/tilemaps/tiles/catastrophi_tiles_16.png');
    this.load.tilemapCSV('map', 'https://labs.phaser.io/assets/tilemaps/csv/catastrophi_level2.csv');
}

function create () {
    this.add.text(10, 10, 'Click to change light position')
        .setOrigin(0)
        .setDepth(100)
        .setStyle({fontFamily: 'Arial'});
            
    let map = this.make.tilemap({ key: 'map', tileWidth: 16, tileHeight: 16 });
    let tileset = map.addTilesetImage('tiles');
    map.createLayer(0, tileset, 0, 0);

    let lightSource = {x: 0, y: 0};
    
    updateMap(map, lightSource);
    
    this.input.on('pointerdown', (pointer) => updateMap(map, pointer));
    
}

function updateMap (map, lightSource) {
    let fullLightDistanceInTiles = 3; 
    let origin = map.getTileAtWorldXY(lightSource.x, lightSource.y);

    map.forEachTile(function (tile) {
        var dist = Phaser.Math.Distance.Chebyshev(
            origin.x,
            origin.y,
            tile.x,
            tile.y
        ) - fullLightDistanceInTiles;

        tile.setAlpha(1 - 0.1 * dist);
    });
}

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

它基本上只是计算从玩家到图块的距离并设置 alpha 值。您必须对其进行修改，以便从固定的太阳/灯光位置等计算距离。（只有当太阳/灯光位置移动时才需要重新计算）

如果您不想在地图图块上设置 alpha，您可以创建第二层，上面仅包含黑色/灰色图块，并在该层上设置 alpha，但这会使颜色有点混乱。

或者，如果：光线是水平的并且具有相同的水平，您可以简单地覆盖渐变图像等。这会提高性能并减少工作量。

这是使用移相器生成梯度的演示：

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

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 183,
    scene: {
        preload,
        create
    }
};

var game = new Phaser.Game(config);

function preload (){
    this.load.image('tiles', 'https://labs.phaser.io/assets/tilemaps/tiles/catastrophi_tiles_16.png');
    this.load.tilemapCSV('map', 'https://labs.phaser.io/assets/tilemaps/csv/catastrophi_level2.csv');      
}

function create () {
    this.add.text(10, 10, 'fixed horizontal darkness')
        .setOrigin(0)
        .setDepth(100)
        .setStyle({fontFamily: 'Arial'});
            
    let map = this.make.tilemap({ key: 'map', tileWidth: 16, tileHeight: 16 });
    let tileset = map.addTilesetImage('tiles');
    map.createLayer(0, tileset, 0, 0);
    
    var graphicsOverlay = this.add.graphics();

    graphicsOverlay.fillGradientStyle(0x0, 0x0, 0x0, 0x0, 0,0,1,1);
    graphicsOverlay.fillRect(0, config.height/3, config.width,  config.height*2/3);
    
}

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