[Solved]Fading to Black and Back

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Post Reply
User avatar
shatterblast
Party member
Posts: 136
Joined: Tue Dec 11, 2012 9:47 pm
Location: Dallas, Texas, USA

[Solved]Fading to Black and Back

Post 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
Attachments
fade_demo.love
(511.86 KiB) Downloaded 251 times
Last edited by shatterblast on Sat Oct 18, 2014 1:07 am, edited 1 time in total.
User avatar
undef
Party member
Posts: 438
Joined: Mon Jun 10, 2013 3:09 pm
Location: Berlin
Contact:

Re: Fading to Black and Back

Post 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.
twitter | steam | indieDB

Check out quadrant on Steam!
User avatar
HugoBDesigner
Party member
Posts: 403
Joined: Mon Feb 24, 2014 6:54 pm
Location: Above the Pocket Dimension
Contact:

Re: Fading to Black and Back

Post 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 :)
@HugoBDesigner - Twitter
HugoBDesigner - Blog
User avatar
shatterblast
Party member
Posts: 136
Joined: Tue Dec 11, 2012 9:47 pm
Location: Dallas, Texas, USA

Re: Fading to Black and Back

Post by shatterblast »

Thank you very much. I will look this over. :awesome:
User avatar
shatterblast
Party member
Posts: 136
Joined: Tue Dec 11, 2012 9:47 pm
Location: Dallas, Texas, USA

Re: Fading to Black and Back

Post 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
Attachments
fade_demo_2.love
(512.13 KiB) Downloaded 224 times
User avatar
Chroteus
Citizen
Posts: 89
Joined: Wed Mar 20, 2013 7:30 pm

Re: [Solved]Fading to Black and Back

Post 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
User avatar
shatterblast
Party member
Posts: 136
Joined: Tue Dec 11, 2012 9:47 pm
Location: Dallas, Texas, USA

Re: [Solved]Fading to Black and Back

Post 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.
User avatar
Chroteus
Citizen
Posts: 89
Joined: Wed Mar 20, 2013 7:30 pm

Re: [Solved]Fading to Black and Back

Post 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.
Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot], Google [Bot] and 7 guests