相位器3中的阴影和方向光？

Question

我在Phaser 3中做了一个自上而下的游戏，想要一个手电筒效果，有没有办法在一个特定的方向上投射一个光，一个圆锥形的形状，也许像这样：

this.flashlightBeam = this.lights.add.directionalLight(x, y, direction, beam width in degrees, brightness, rgb )

我也希望在照明管道中有物体阻挡手电筒光束和阴影。对于我遗漏的Light2D插件或功能有什么建议吗？

Answer 1

据我所知，相位器没有这个功能的盒子，而且没有插件。(顺便说一句:这里是检查相位插件的好地方，，但这里没有列出)

说，你可以用精灵和计算角度来伪造阴影。这应该很好，因为如果精灵在黑暗中，影子是不会被看到的，但是当点亮阴影时，影子就会被看到。

这不是一件好事，一件整洁的工作。

这里是一个演示，，为了清晰起见，我省略了轻的部分，但是它应该很简单。

它使用这个SpriteSheet：

​

​

// basic customObject -- here the shadwo logic should/could go
class ShadowObject extends Phaser.GameObjects.Sprite {

    constructor (scene, x, y, lightSource){
        super(scene, x, y, 'shadow-object1');

        this.setOrigin(.5).setScale(10);
        this.lightSource = lightSource;
    }

    preUpdate(time, delta){
        super.preUpdate(time, delta);
        if(!this.lightSource){
            return;
        }

        let angle = Phaser.Math.RadToDeg(
            Phaser.Math.Angle.Between(
                this.x, 
                this.y,
                this.lightSource.x, 
                this.lightSource.y)
            );
        
        if( angle > 0 ){
            if( angle > 110){
                this.setFrame(2);
            } else if( angle > 80) {
                this.setFrame(1);
            } else {
                this.setFrame(0);
            }
        } else {
            if( angle < -110){
                this.setFrame(5);
            } else if( angle < -80) {
                this.setFrame(4);
            } else {
                this.setFrame(3);
            }
        }
    }
}

// basic customObject plugin
class ShadowObjectPlugin extends Phaser.Plugins.BasePlugin {

    constructor (pluginManager) {
        super(pluginManager);
        pluginManager.registerGameObject('shadowObject', this.createObject);
    }
    createObject (x, y, lightSource) {
        return this.displayList.add(new ShadowObject(this.scene, x, y, lightSource));
    }

}


let config = {
    type: Phaser.AUTO,
    width: 500,
    height: 180,
    pixelArt: true,
    physics: { default: 'arcade' },
    backgroundColor: '#427F4A',
    // Plugin registration
    plugins: {
        global: [
            { key: 'ShadowObjectPlugin', plugin: ShadowObjectPlugin, start: true }
        ]
    },
    scene: {
        create(){
            this.player = this.add.rectangle(50, config.height/2, 20, 20, 0xff0000)
                .setOrigin(.5);

            this.physics.add.existing(this.player);
            this.cursors = this.input.keyboard.createCursorKeys();
            
            // extra event action, to workaround CORS restriction
            this.textures.once('addtexture', function () {
            this.obj1 = this.add.shadowObject(config.width/2, 40, this.player);

            this.obj2 = this.add.shadowObject(config.width/2, config.height - 40, this.player);
          }, this);

          // extra event action, to workaround CORS restriction
          this.textures.addSpriteSheet('shadow-object1', img, {frameHeight: 8, frameWidth:8 } )
        },
        update(){
            if(!this.player || !this.player.body)
                return;

            if (this.cursors.left.isDown){
                this.player.body.setVelocityX(-160);
            } else if (this.cursors.right.isDown) {
                this.player.body.setVelocityX(160);
            } else {
                this.player.body.setVelocityX(0);
            }
        }
    },
    banner: false
};

// extra event action, to workaround CORS restriction
var imageData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAQCAMAAAA7+k+nAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJUExURf9eFICAgAAAAFsertMAAAADdFJOU///ANfKDUEAAAAJcEhZcwAADsIAAA7CARUoSoAAAABJSURBVChTrZBJDgAgDAKL/3+02BLX1IORC8jYNGolUQMmuvgFQAVgBgiwZKObDXhw96kAqyufegPpjo8g3rs5wTjPhN8y9T2jVOoAAnNNNFEPAAAAAElFTkSuQmCC';

let img = new Image();
img.onload = function(){
  new Phaser.Game(config);
};
img.src = imageData;

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

​

(这可以通过更多的精灵/阴影角度和/或使用距离来计算应该使用的阴影帧来优化)。

信息:由于CORS对映像的限制，该示例需要一些额外的代码。

或更通用，基于相位图像创建/多个自定义游戏对象，并根据自定义对象的preUpdate中的角度绘制阴影。