0

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.

Improve this question
1
  • what is fadeFinished supposed to do? seems me it would start out true, then once the fade function starts its set to false, then once the fade is finished you set it to true again. so a) I don't understand why its set false in the constructor (rather than at the beginning of the fadeRed function) and b) you say "Then in the calling function the object of FadeEffects is instantiated and toRemove is set to TRUE and fadeFinished is set to false" but you didn't post that code, so I'm not really sure what this is supposed to look like.
    – chiliNUT
    Commented Jul 20, 2023 at 22:34

1 Answer 1

Reset to default
0

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>
Improve this answer
3
  • I implemented the change and it still only does the effect once. It's weird.
    – Jleger91
    Commented Jul 20, 2023 at 20:28
  • I just added some working test code. You should be able to use it to locate any material differences
    – phatfingers
    Commented Jul 20, 2023 at 21:56
  • Strangely that didn't work either. The problem I'm having doesn't seem to be the interval, but the rectangle stops drawing after the first complete fade, and it never fades again.
    – Jleger91
    Commented Jul 21, 2023 at 2:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.