Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Fade in and out

edited June 2012 in Questions Posts: 18

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.


  • Posts: 179

    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.

  • edited June 2012 Posts: 18

    @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.

  • Posts: 65

    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. (:|

  • Posts: 179

    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
    function draw()
        if myFader.fading == true then myFader:draw() end
    function changeLevel()
        if currentLev == 1 then currentLev = 2
        else currentLev = 1 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)
    function touched(touch)
        if touch.state == ENDED and myFader.fading == false then
            --pass a function to the fade function to be completed
            --when the screen is all black
    --====== Fader class ======
    fader = class()
    function fader:init(fadeSpeed)
        self.fading = false
        self.alpha = 0
        self.fadeSpeed = fadeSpeed --raise this to fade faster
    function fader:fade(func)
        self.fading = true
        if func ~= nil then self.func = func end
    function fader:draw()
        if self.fading then
            fill(0, 0, 0, self.alpha)
            --change that color if you want to fade to a color other than black
            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
            if self.alpha <= 0 then 
                self.fadeSpeed = self.fadeSpeed * -1
                self.alpha = 0 
                self.fading = false --fade complete
  • Posts: 18

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

Sign In or Register to comment.