Why does my screen fade effect only happen once?

Question

Why does my screen fade effect only happen once?

47 views Asked by Jleger91 At 20 July 2023 at 17:26

I wrote a screen fade effect that starts the screen red and fades to black. When the code is called, it works correctly - only once; afterwards the effect fails and I don't know why.

export class FadeEffects {
    constructor(game) {
        this.game = game;
        this.width = 640;
        this.height = 480;
        this.fadeFinished = false;
        this.fade = 255;
    }//constructor()

    //this fade effect starts red transparent and fades to black
    fadeRed() {

        //now make the rectangle fade to black
        let fadeOut = setInterval(() => {
            console.log('in interval');
            this.fade -= 1;
            //when finished
            if (this.fade === 0) {
                this.fade = 255;
                this.fadeFinished = true;
                clearInterval(fadeOut);
            }//fade check
        }, 25);//fadeIn interval

        return this.fadeFinished;
    }//fadeRed()

    draw(context) {
        context.fillStyle = "rgba(" + this.fade + ", 0, 0, 0.5";
        context.fillRect(0, 0, this.width, this.height);
    }//draw()
}//class FadeEffects

Then in the calling function the object of FadeEffects is instantiated and toRemove is set to TRUE and fadeFinished is set to false. Then this code is called:

if(!this.fadeFinished && toRemove === 'TRUE'){
            this.fadeFinished = this.fadeEffect.fadeRed();
            this.fadeEffect.draw(context);
        }

Then when ready, fadeFinished is set to false again. But for some reason the effect only works the first time.

Original Q&A

There are 1 answers

**phatfingers** · Answer 1 · 2023-07-20T18:44:55+00:00

Your fadeRed function should invoke your draw function at each iteration. I would consider passing the context to your constructor, and letting draw reference it internally.

Here's a working test page.

<html>
<head>
<style>
#canvas { width: 640; height: 480; }
</style>
<script>
class FadeEffects {
    constructor(game, context) {
        this.game = game;
        this.width = 640;
        this.height = 480;
        this.fadeFinished = false;
        this.fade = 255;
        this.context = context;
    }//constructor()

    //this fade effect starts red transparent and fades to black
    fadeRed() {
        //now make the rectangle fade to black
        let fadeOut = setInterval(() => {
            console.log('in interval');
            this.fade -= 1;
            this.draw();
            //when finished
            if (this.fade === 0) {
                this.fade = 255;
                this.fadeFinished = true;
                clearInterval(fadeOut);
            }//fade check
        }, 25);//fadeIn interval

        return this.fadeFinished;
    }//fadeRed()

    draw() {
        this.context.fillStyle = "rgba(" + this.fade + ", 0, 0, 0.5";
        this.context.fillRect(0, 0, this.width, this.height);
    }//draw()
}//class FadeEffects
</script>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas=document.getElementById('canvas');
const context=canvas.getContext('2d');
const rect=new FadeEffects(null, context);
rect.fadeRed();
rect.fadeRed();
</script>
</body>
</html>

TechQA.

Why does my screen fade effect only happen once?

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in FADE

Related Questions in FADEOUT

Related Questions in EFFECTS

Related Questions in EFFECT

Popular Questions

Popular Tags

Trending Questions