Incomplete camera's FadeIn effect

[inmylo]

Phaser versions: 3.10 and 3.12
OS: linux
Tested on Chromium and Firefox

---

Hello,

I've tried to use camera's Fade effect and it seems something is not finishing. For example, I open this labs demo: https://labs.phaser.io/edit.html?src=src\games\firstgame\part10.js. Then add this to the end of create() function:

    var camera = this.cameras.main;

    this.time.delayedCall(3000, function() {
        camera.fadeOut(250);
    }, [], this);

    camera.on('camerafadeoutcomplete', function() {
        camera.fadeIn(250);
    });

I've noticed that after the end camera stays a little dark, like not fully transparent. I've compared 2 screenshots, before and after the fade effects. At the moment I'm forced to call camera.resetFX() to make colors brighter again.

Please check why after fade out/in effects camera is not fully transparent like before.

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[samid737]

cannot reproduce in WEBGL or CANVAS:

3.12.0 beta-2 WEBGL

3.12.0 beta-2 CANVAS

3.11.0 WEBGL

3.11.0 CANVAS

@Imilo do you have the screenshots by any chance?

[inmylo]

@samid737 , I've created screenshots for you. I'm on Linux if that matters. On the attached image I show Phaser versions 3.10 and 3.12. In v3.12 colors became a little better, but are still darker.

Here are 2 images for each version:

• on the left - before FadeOut-FadeIn
• on the right - after that.

Color's Hex representation below each image is a color of dark green section. But visually you can see that other colors became a little darker too. Hex colors I've got from Gimp.

On Firefox this selected color becomes even darker - #709689.

If we imagine that there is a loop inside FadeIn where colors become brighter on each iteration - I would guess that the last iteration is being skipped.

[photonstorm]

Even if the last iteration was skipped, it still shouldn't matter, because the Fade effect works by calling update, which changes the alpha value each frame, and then calls postRenderWebGL which draws a filled rectangle over the Camera as long as !this.isRunning && !this.isComplete - these booleans are set to false and true respectively when the effectComplete method is called (which happens when the timer is up, as part of the update loop.)

Basically, as long as those booleans are set, it doesn't draw the rectangle anyway, even if it never quite reached the full alpha value it was meant to.

Which means that, for some reason, perhaps effectComplete isn't ever getting called, so it's constantly drawing the rectangle over the Camera every frame regardless. I guess you could confirm this by checking the isRunning and isComplete values of the fade effect at run-time. Do they ever get changed as they should?

You could also edit postRenderWebGL to log something out just before the return true at the end - does it carry on logging constantly, even after the fade should have finished? If so, this is the issue. If not, it's something else unrelated to the fade.

[inmylo]

In Phaser I've added to the @method Phaser.Cameras.Scene2D.Effects.Fade#postRenderWebGL:

...
console.log("something");
return true;

And in my code I've replaced

camera.fadeIn(250);

with:

scene.fade = camera.fadeIn(250);

Then added to the update function:

if (this.fade) {
    console.log(this.fade.fadeEffect.isRunning + ":::" + this.fade.fadeEffect.isComplete);
}

Before fade effect of course there is nothing printed, but after that there is:

(15) something
true:::false
something
true:::false
something
true:::false
something
true:::false
something
true:::false
something
true:::false
something
true:::false
something
true:::false
something
true:::false
something
true:::false
something
true:::false
something
true:::false
something
true:::false
something
false:::false

That means that something is being printed some times and isRunning has became false, but isComplete stays as false

[photonstorm]

^ which means effectComplete never gets called. Log it out, check to see if it does get called (because if it does the issue is something else)

The question is: what is it about the way you've set things up that causes this? As there's no reason the complete method would never be called, but for some reason in your case that's happening.

[bdaenen]

I actually happened to run into this problem as well when calling fadeIn in the scene create method. I will make a fiddle later today to try and reproduce it, and once I have some time I'll investigate this further.

[bdaenen]

@photonstorm I logged it out and effectComplete is actually called. It sets this.isRunning = false and this.isComplete = true;

Due to these flags the update method is no longer called after the completion of the effect, but postRenderWebGL/Canvas still is called by the camera. This is probably done for keeping the contents of the camera faded out after the fadeOut effect finished.

The alpha value sticks to some small decimal number close to 0 for fadeIn and is never updated to a flat 0 due to the final update not updating the alpha value. The same issue causes the fadeOut to sometimes not completely hide the game as it gets stuck somewhere between 0.9 and 1.

I think an appropriate fix would be to set this.alpha to 0/1 depending on the direction just before we call this.effectComplete. This is currently causing the effect to not fully fade, as in the very last loop we don't update alpha, we just trigger complete:

 update: function (time, delta)
    {
        ...
        if (this._elapsed < this.duration)
        {
            this.alpha = (this.direction) ? this.progress : 1 - this.progress;
        }
        else
        {
            this.effectComplete();
        }
    }

I'll shoot you a pull request to fix this.

Edit: forgot to add a link reproducing this:
https://jsbin.com/rapusuguxo/edit?html,js,output

Run it a couple of times, use the chrome color picker built in to the web dev tools to see the difference in color outside and inside of the "box".