Javascript Phaser3 preFX addGlow不支持zoom

发布于02月07日

我正在try 使用Phaser3.目前try 了3.70和3.80测试版，但没有结果. 如果我try 使用someSprite.preFX.addGLow()，它在没有zoom 时工作，如果我使用zoom 的精灵完全消失.

配置不起作用:

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

class BrokenScene extends Phaser.Scene
{
    GAME_WIDTH = 640;
    GAME_HEIGHT = 960;

    sizer;
    player;
    player2;
    platforms;

    constructor () {
        super('GameScene');
    }

    preload() {
        this.load.spritesheet('dude', 'https://labs.phaser.io/assets/sprites/dude.png', { frameWidth: 32, frameHeight: 48 });
        this.load.image('ground', 'https://labs.phaser.io/assets/sprites/platform.png');
    }

    create () {

        const width = this.scale.gameSize.width;
        const height = this.scale.gameSize.height;

        this.parent = new Phaser.Structs.Size(width, height);
        this.sizer = new Phaser.Structs.Size(this.GAME_WIDTH, this.GAME_HEIGHT, Phaser.Structs.Size.FIT, this.parent);

        this.parent.setSize(width, height);
        this.sizer.setSize(width, height);

        this.updateCamera();

        this.scale.on('resize', this.resize, this);

        this.physics.world.setBounds(0, 0, this.GAME_WIDTH, this.GAME_HEIGHT);

        //  The platforms group contains the ground and the 2 ledges we can jump on
        this.platforms = this.physics.add.staticGroup();
        this.platforms.setDepth(10);

        //  Here we create the ground.
        //  Scale it to fit the width of the game (the original sprite is 400x32 in size)
        this.platforms.create(320, 944, 'ground').setDisplaySize(640, 32).setDepth(10).refreshBody();
     

        // -----------------------[ The glow section ]----------------------------- // 
        // This one fails... with preFX
        this.player = this.physics.add.sprite(100, 800, 'dude');

        this.player.preFX.setPadding(32);
        const fx = this.player.preFX.addGlow();

        // This one works with postFX
        this.player2 = this.physics.add.sprite(250, 800, 'dude');

        this.player2.postFX.setPadding(32);
        const fx2 = this.player2.postFX.addGlow();

        //  For PreFX Glow the quality and distance are set in the Game Configuration
        this.tweens.add({
            targets: [fx, fx2],
            outerStrength: 10,
            yoyo: true,
            loop: -1,
            ease: 'sine.inout'
        });

        // -----------------------[ end glow section ]----------------------------- // 


        this.player.setBounce(0.1);
        this.player.setCollideWorldBounds(true);
        this.player.setDepth(1);

        this.physics.add.collider(this.player, this.platforms);
        this.physics.add.collider(this.player2, this.platforms);
    }

    //  Resize related functions
    resize (gameSize) {
        const width = gameSize.width;
        const height = gameSize.height;

        this.parent.setSize(width, height);
        this.sizer.setSize(width, height);

        this.updateCamera();
    }

    updateCamera () {
        const camera = this.cameras.main;

        const x = Math.ceil((this.parent.width - this.sizer.width) * 0.5);
        const y = 0;
        const scaleX = this.sizer.width / this.GAME_WIDTH;
        const scaleY = this.sizer.height / this.GAME_HEIGHT;

        camera.setViewport(x, y, this.sizer.width, this.sizer.height);
        camera.setZoom(Math.max(scaleX, scaleY));
        camera.centerOn(this.GAME_WIDTH / 2, this.GAME_HEIGHT / 2);
    }

    getZoom () {
        return this.cameras.main.zoom;
    }

    update () {}
}

const config = {
        type: Phaser.AUTO,
        backgroundColor: '#000000',
        scale: {
            mode: Phaser.Scale.RESIZE,
            width: 640,
            height: 960,
            min: {
                width: 320,
                height: 480
            },
            max: {
                width: 1400,
                height: 1200
            }
        },
        scene: [ BrokenScene ],
        fx: {
            glow: {
                distance: 32,
                quality: 0.1
            }
        },
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 300 },
                debug: false
            }
        }
    };

    const game = new Phaser.Game(config);

        </script>
    </body>
</html>

有什么建议吗？出什么问题了？如果我使用postFX，它会渲染，但我看到的Phaser示例(没有zoom )建议使用preFX.

setTimeout( () => { this.parent = new Phaser.Structs.Size(width, height); this.sizer = new Phaser.Structs.Size(this.GAME_WIDTH, this.GAME_HEIGHT, Phaser.Structs.Size.FIT, this.parent); this.parent.setSize(width, height); this.sizer.setSize(width, height); this.updateCamera(); }, 10);

Javascript Phaser3 preFX addGlow不支持zoom

推荐答案

Javascript相关问答推荐

Flisk和JS错误：未捕获的Syntax错误：意外的令牌'<'

我不知道为什么setwritten包装promise 不能像我预期的那样工作

docx.js：如何在客户端使用文档修补程序

嵌套异步JavaScript(微任务和macrotask队列)

仅针对RTK查询中的未经授权的错误取消maxRetries

jQuery s data()[storage object]在vanilla JavaScript中？'

我可以使用使用node.js创建的本地主机来存储我网站上提交的所有数据吗？没有SQL或任何数据库.只有HTML语言

更改预请求脚本中重用的JSON主体变量- Postman

JQuery Click事件不适用于动态创建的按钮

有条件重定向到移动子域

在Reaction中的handleSubmit按钮内，useSelector值仍然为空

使用插件构建包含chart.js提供程序的Angular 库？

在JS/TS中将复杂图形转换为数组或其他数据 struct

如何使用抽屉屏幕及其子屏幕/组件的上下文？

用另一个带有类名的div包装元素

为什么我看到的是回复，而不是我的文档？

如果对象中的字段等于某个值，则从数组列表中删除对象

我的NavLink活动类在REACT-ROUTER-V6中出现问题

如何检测当前是否没有按下键盘上的键？

在HTML中使用meta标记来指定定制元数据以用于使用JavaScript进行检索是不是一个坏主意？