Fade in and out

Questions
1

Hello all,

I have a question on something that I thought would be fairly simple to accomplish but for some reason I can’t quite wrap my brain around it. I have a separate Transition class that I use to move from one scene to another. I was trying to have it fade to black and then fade back into the next scene. So far it will go to black, but it doesn’t fade, it just switches to black, then switches to the next scene. Would there be anyway to accomplish this fading effect?

Thanks in advance.

2

Try drawing a rectangle that covers the entire screen that has the color 0,0,0,0. When it is time to fade, increment that alpha amount so that on the next frame the color is 0,0,0,5, all the way to 0,0,0,255. Now the screen is completely black so we need to fade in, so start decreasing the alpha until it is 0 again. Let me know if you need some code for this.

3

@Vega Some code would be useful. I’ve tried to do that before however it yielded the same result. I would gradually increase the alpha but when it would draw the screen it wouldn’t show any fading.

Thanks for your help.

4

Just a quick tip that I think applies here^. Remember to call noSmooth() and noStroke() before rendering such a large rectangle. On my iPad 1, not doing so drops me down to about 10 FPS. You’ll probably need the usual pushStyle/popStyle surrounding it so nothing else is affected.

^ Forgive me, I’m bored on a lunch break so just randomly sticking my oar in here and there. (:expressionless:

5

Here is an example. I think this should be a highly reusable fading class.

function setup()
    print ("touch screen to change level.")
    currentLev = 1
    myFader = fader(5) 
    -- the number is how fast to fade. 1 is super slow
end

function draw()
    drawLevel(currentLev)
    if myFader.fading == true then myFader:draw() end
end

function changeLevel()
    if currentLev == 1 then currentLev = 2
    else currentLev = 1 end
end

function drawLevel(lev)
    if lev == 1 then
        background(255, 0, 0, 255)
        stroke(255, 255, 255, 255)
        text("Level 1",WIDTH/2,HEIGHT/2)
    elseif lev == 2 then
        background(0, 255, 0, 255)
        stroke(255, 255, 255, 255)
        text("Level 2",WIDTH/2,HEIGHT/2)
    end
end

function touched(touch)
    if touch.state == ENDED and myFader.fading == false then
        myFader:fade(changeLevel)
        --pass a function to the fade function to be completed
        --when the screen is all black
    end
end

--====== Fader class ======
fader = class()

function fader:init(fadeSpeed)
    self.fading = false
    self.alpha = 0
    self.fadeSpeed = fadeSpeed --raise this to fade faster
end

function fader:fade(func)
    self.fading = true
    if func ~= nil then self.func = func end
end

function fader:draw()
    if self.fading then
        pushStyle()
        noSmooth()
        noStroke()
        fill(0, 0, 0, self.alpha)
        --change that color if you want to fade to a color other than black
        rect(0,0,WIDTH,HEIGHT)
        popStyle()
        self.alpha = self.alpha + self.fadeSpeed
        if self.alpha >= 255 then 
            self.alpha = 255 
            self.fadeSpeed = self.fadeSpeed * -1
            if self.func ~= nil then self.func() end -- its all black, so switch the frame
        end
        if self.alpha <= 0 then 
            self.fadeSpeed = self.fadeSpeed * -1
            self.alpha = 0 
            self.fading = false --fade complete
        end
    end
end
6

@Vega Thank you very much. That works perfectly :slight_smile: