About transparent background

Phaser 3
1

Hi @everyone,

I’ve been looking for a way to make background transparent as it was valid for phaser2. I know i have one example working on phaser2 and also i saw that this example on v3 examples. Actually this shows everything except i’m using a Scene Object.

import _Scene from './partials/Scene';

// @DEBUG
import FPSText from './partials/FPSText';


class Page extends _Scene {
    constructor() {
        super({ key: 'Page', active: true  });
    }
    init() {
        super.init();
        // this.cameras.add(0, 0, this.game.config.width, this.game.config.height, true, 'own');
        this.cameras.main.setBackgroundColor('rgba(0, 0, 0, 0)');
        this.fpsText = new FPSText(this);

        var graphics = this.add.graphics();

        graphics.lineStyle(50, 0xffffff);

        graphics.beginPath();
        graphics.arc(this.centerX, this.centerY, 100, Phaser.Math.DegToRad(0), Phaser.Math.DegToRad(360), false, 0.02);
        graphics.strokePath();
        graphics.closePath();

        graphics.beginPath();
        graphics.lineStyle(40, 0xff00ff);
        graphics.arc(this.centerX, this.centerY, 100, Phaser.Math.DegToRad(0), Phaser.Math.DegToRad(360), true, 0.02);
        graphics.strokePath();
        graphics.closePath();
    }

    update() {
        this.fpsText.update();
    }
}

const config = {
    type: Phaser.CANVAS,
    backgroundColor: 0x062830,
    url: App.url,
    transparent: true,
    scale: {
        mode: Phaser.Scale.WIDTH_CONTROLS_HEIGHT,
        autoCenter: true,
        width: 1920,
        height: 1080,
        parent: 'core',
        fullscreenTarget: 'core'
    },
    // banner: {
    //     text: '#ffffff',
    //     background: [
    //         '#fb8cb3',
    //         '#d44a52',
    //         '#871905',
    //         '#581505'
    //     ],
    //     hidePhaser: false
    // },
    scene: [ Page ]
};
const game = new Phaser.Game(config);

And Scene is just this:

export default class Scene extends Phaser.Scene {
    constructor(scene) {
        super(scene);
    }

    init() {
        this.centerX = this.game.config.width / 2;
        this.centerY = this.game.config.height / 2;
        this.sound.pauseOnBlur = false;
    }

}

What could it be the problem ? Any help appreciate Thx!

2

Remove

backgroundColor: 0x062830

and

this.cameras.main.setBackgroundColor('rgba(0, 0, 0, 0)');
3

It’s not in my code i’m guessing and already have

this here :smiley:

edit: I just saw that i have that :smiley: I’ll try it tomorrow and let you know <3

4

Remove both.

1 Like