Light 2D black image issue

Phaser 3
1

Version

  • Phaser Version: v3.55.2 (WebGL | Web Audio)
  • Operating system: Windows 10
  • Browser: Chrome 108

Description

Something strange is happening with Light 2D. An image with active Light 2D pipeline becomes black under certain conditions. To reproduce the simplest flow I took a sample code from the official tutorial and changed only one line (:25). So I moved logo image a bit lower and set camera to track it. Firstly it seems like a culling issue but I don’t think so. Does anyone have any ideas what is going on?

Example Test Code

var config = {
    type: Phaser.WEBGL,
    width: 800,
    height: 600,
    parent: 'phaser-example',
    backgroundColor: '#000000',
    scene: {
        preload: preload,
        create: create
    }
};

var game = new Phaser.Game(config);

function preload ()
{
    this.load.image('brick', ['assets/normal-maps/brick.jpg', 'assets/normal-maps/brick_n.png']);
    this.load.image('logo', 'assets/sprites/atari130xe.png');
}

function create ()
{
    this.add.image(400, 300, 'brick').setPipeline('Light2D');

  // Modified:
    this.cameras.main.startFollow(this.add.image(400, 600, 'logo'), true, 0.1, 0.1);

    this.lights.enable().setAmbientColor(0x555555);

    var hsv = Phaser.Display.Color.HSVColorWheel();

    var radius = 80;
    var intensity = 6;
    var x = radius;
    var y = 0;

    var color = hsv[10].color;

    var light = this.lights.addLight(400, y, radius, color, intensity);

    this.tweens.add({
        targets: light,
        y: 600,
        yoyo: true,
        repeat: -1,
        ease: 'Sine.easeInOut',
        duration: 2000
    });
}
2

Check the v3.60 change log for bug fixes.

3

I’ve tested this with Phaser v3.60.0-beta.18 (WebGL | Web Audio). Instead of the image becomes black, the light “switches off” now. Please, check this sample code:

var config = {
	type: Phaser.WEBGL,
	width: 800,
	height: 600,
	parent: 'phaser-example',
	backgroundColor: '#000000',
	scene: {
		preload: preload,
		create: create,
		update: update
	},
	physics: {
		default: 'arcade',
		arcade: {
			debug: true,
			fixedStep: true
		}
	},
};

var game = new Phaser.Game(config);

let player;
let move_right;
let move_left;
let move_up;
let move_down;

function preload()
{
	this.load.image('brick', ['assets/normal-maps/brick.jpg', 'assets/normal-maps/brick_n.png']);
	this.load.image('logo', 'assets/sprites/atari130xe.png');
}

function create()
{
	let bg = this.add.image(400, 300, 'brick');
	bg.setPipeline('Light2D');
    // let bg2 = this.add.image(800');
	// bg2.setPipeline('Light2D');
    // let bg3 = this.add.image(400');
	// bg3.setPipeline('Light2D');
    // let bg4 = this.add.image(800');
	// bg4.setPipeline('Light2D');


	// move_right
	move_right = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D);
	// move_left
	move_left = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A);
	// move_up
	move_up = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W);
	// move_down
	move_down = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S);


	player = this.physics.add.sprite(400, 600, "logo");
	player.body.drag.x = 0.0001;
	player.body.drag.y = 0.0001;
	player.body.useDamping = true;
	player.body.setCircle(46);


	this.cameras.main.startFollow(player, true, 0.1, 0.1);
	this.cameras.main.setZoom(1);
	this.cameras.main.setBounds(-1433, -1075, 2867, 2150);
    this.physics.world.setBounds(-1433, -1075, 2867, 2150);

	this.lights.enable().setAmbientColor(0x555555);


	var y = 0;

	var light = this.lights.addLight(400, y, 100, 0xff0000).setScrollFactor(0).setIntensity(6);

	this.tweens.add({
		targets: light,
		y: 600,
		yoyo: true,
		repeat: -1,
		ease: 'Sine.easeInOut',
		duration: 2000
	});
}

function update(time, delta)
{
	if (move_left.isDown)
	{
		player.setVelocityX(-150);
	}
	else if (move_right.isDown)
	{
		player.setVelocityX(150);
	}

	if (move_up.isDown)
	{
		player.setVelocityY(-150);
	}
	else if (move_down.isDown)
	{
		player.setVelocityY(150);
	}
}