Page 1 of 1

[Solved]Fading to Black and Back

Posted: Thu Oct 16, 2014 8:34 am
by shatterblast
So HUMP's gamestate.lua works wonderfully for me. I would like to establish a fade to black transition for exiting a gamestate and a fade from black to clear when entering a gamestate. I found this snippet of code in another part of the forums. It fades between clear and black in one continuous cycle.

How can I pause the cycle between black, clear, and black again to stay at the clear?

Otherwise, if someone could explain the tween.lua library's fade to me, I would appreciate it. I originally chose the code below because I had difficulty implementing tween.lua's fade. Thanks!

Code: Select all

    function love.load()
       timer = 0
       alpha = 0

       fadein  = 2
       display = 7
       fadeout = 9

       image = love.graphics.newImage("background01.png")
    end
    function love.update(dt)
      timer=timer+dt

      if timer<fadein then alpha=timer/fadein
      elseif timer<display then alpha=1
      elseif timer<fadeout then alpha=1-((timer-display)/(fadeout-display))
      else alpha=0 end

    end
    function love.draw()
       love.graphics.setColor(255, 255, 255, alpha*255)
       love.graphics.draw(image, 0, 0)
    end

Re: Fading to Black and Back

Posted: Thu Oct 16, 2014 1:22 pm
by undef
You could stop the timer once the fade in is complete, and then count the timer back to zero as soon as you want to fade out.

Re: Fading to Black and Back

Posted: Thu Oct 16, 2014 2:11 pm
by HugoBDesigner
I personally would set a few variables for the fade: alpha, timer, maxtimerIn and maxtimerOut (just so you can adjust easily) and nextstate.
Then, whenever I needed a new gamestate, I'd name it on the "nextstate" variable. Then set the timer and the alpha to work together. When the timer reached 0, I'd change the gamestate to the "nextstate" value and reset the timer. Something more or less like this:

Code: Select all

function love.load()
    alpha = 0
    timer = 0
    maxtimerIn = 1
    maxtimerOut = 2 --just in case you need two different fading times
    nextstate = false
end

function love.update(dt)
    if nextstate then --fade in
        timer = timer + dt
        if timer >= maxtimerIn then
            timer = maxtimerOut
            changeGameState(nextstate) --I don't know what function you call on HUMP, so this is placeholder
            nextstate = false
        end
        
        alpha = timer/maxtimerIn*255
    elseif timer > 0 then --fade out
        timer = timer - dt
        if timer <= 0 then
            timer = 0
        end
        
        alpha = timer/maxtimerOut*255
    end
end

function love.draw()
    --Draw everything in your game

    --Place this at the very end
    love.graphics.setColor(0, 0, 0, alpha)
    love.graphics.rectangle("fill", 0, 0, windowWidth, windowHeight)
end

function switchState(gamestate) --Call this when you want to switch gamestate and the fade to happen
    nextstate = gamestate
end
Should be pretty easy to understand and reproduce, hopefully :)

Re: Fading to Black and Back

Posted: Thu Oct 16, 2014 5:19 pm
by shatterblast
Thank you very much. I will look this over. :awesome:

Re: Fading to Black and Back

Posted: Sat Oct 18, 2014 1:07 am
by shatterblast
Well, I found one solution. Press 2 to fade to black. Press 1 to return to the image from black. It will work even if the screen is black. Edit "fade_time" to change how long it takes to fade in either direction.

Code: Select all

function love.load()
  
  timer = 0
  alpha = 0

  fade_time  = 2

  image = love.graphics.newImage("background01.png")
    
  fade_state = "Fade_To_Clear"
end

function love.update(dt)
  
  if fade_state == "Fade_To_Clear" then
    timer=timer+dt
    if timer > 4 then
      fade_state = "Clear"
    end
  end
  
  if fade_state == "Fade_To_Black" then
    timer=timer-dt
    if timer < 0 then
      timer = 0
      fade_state = "Clear"      
    end
  end
  
  if timer<fade_time then
    alpha=timer/fade_time
  end
  
end

function love.draw()
  love.graphics.setColor(255, 255, 255, alpha*255)
  love.graphics.draw(image, 0, 0)
  
  love.graphics.print("Press 1 to fade from black to clear.  Press 2 to fade from clear to black.", 50, 50)
  love.graphics.print(fade_state, 50, 110)
end

function love.keypressed(key)
  if key == "1" then
    fade_state = "Fade_To_Clear"
  elseif key == "2" then
    fade_state = "Fade_To_Black"
  end
end

Re: [Solved]Fading to Black and Back

Posted: Thu Nov 20, 2014 1:08 pm
by Chroteus
Or, you can use Venus, which is exactly what you're looking for: Smooth transitions between gamestates (including fade)
Link: viewtopic.php?f=5&t=78018

Re: [Solved]Fading to Black and Back

Posted: Thu Nov 20, 2014 1:53 pm
by shatterblast
Chroteus wrote:Or, you can use Venus, which is exactly what you're looking for: Smooth transitions between gamestates (including fade)
Link: viewtopic.php?f=5&t=78018
Maybe it's my lack of experience, but I had trouble starting graphics in the INIT portion of a gamestate in Venus. It worked fine when the graphics files were kept global, but that defeated the purpose of me using gamestates in the first place. With HUMP, putting the graphics files in ENTER seemed to work just fine.

I did like Venus when I tried it, but I couldn't get it to work like I wanted.

Re: [Solved]Fading to Black and Back

Posted: Thu Nov 20, 2014 2:52 pm
by Chroteus
Hmm, as long as you initialize everything in init, everything will load fine. The reason putting to enter doesn't work is because of the following order:

INIT -> Transition state -> ENTER & state you've switched to ("State" from now on)

Since in transition state, State's draw function is called, any image drawn in State must be loaded in INIT.
I believe I warned about loading everything in init (and resetting data, if needed, in enter) in documentation.