Draw another image after the screen fades to black (flux).

[Aloud]

I'm new to LÖVE and Lua in general, and I'm pretty sure the problem I'm facing right now is basic for most people here, but...

Code: Select all

flux = require "assets/flux"

function love.load()
  
  love.graphics.setBackgroundColor(0, 0, 0)
  fade = {alpha = 0}
  image01 = love.graphics.newImage("assets/hohoho.png")
  image02 = love.graphics.newImage("assets/kyaaaa.png")
  
  -- the flux library used to make tweening animation (fade from black, fade to black)
  flux.to(fade, 1.5, {alpha = 255}):ease("linear"):delay(2)
   :after(fade, 1.5, {alpha = 0}):ease("linear"):delay(1.5)
  
end

function love.update(dt)
  
  flux.update(dt)
  love.mouse.setVisible(false)
  
  if love.keyboard.isDown("escape") then
    love.event.quit()
  end 
  
end

function love.draw()
  
  love.graphics.setColor(255, 255, 255, fade.alpha)
  love.graphics.draw(image01, 0, 0)
  
end

Basically, I'm using flux to create some sort of fading animation to my image ("image01"). So far, I could make this work just fine, and right now I'm trying to draw another image ("image02") after the screen fully fades to black again and redo the fading animation again. The question is, how exactly do I do this?

[bakpakin]

Never used flux, but looking at the documentation, it looks like you should create two fade tables; let's call them 'fade01' and 'fade02', each with an alpha value. Your 'love.load' function would look like this:

Code: Select all

local function fadeinout(t)
   return flux.to(t, 1.5, {alpha = 255}):ease("linear"):delay(2)
   :after(t, 1.5, {alpha = 0}):ease("linear"):delay(1.5)
end

function love.load()
  
  love.graphics.setBackgroundColor(0, 0, 0)
  fade01 = {alpha = 0}
  fade02 = {alpha = 0}
  image01 = love.graphics.newImage("assets/hohoho.png")
  image02 = love.graphics.newImage("assets/kyaaaa.png")
  
  -- the flux library used to make tweening animation (fade from black, fade to black)
  fadeinout(fade01):after(fadeinout(fade02))
  
end

You don't need the 'fadeinout' function, but I think it keeps it cleaner as you're doing the same fade twice.
And your 'love.draw' function would then look like this:

Code: Select all

  love.graphics.setColor(255, 255, 255, fade01.alpha)
  love.graphics.draw(image01, 0, 0)
  love.graphics.setColor(255, 255, 255, fade02.alpha)
  love.graphics.draw(image02, 0, 0)

Hope that helps.

[Aloud]

Thank you for your help, bakpakin! Unfortunately, the code doesn't work; and it gives me this error instead:

Code: Select all

Error: assets/flux.lua:91: attempt to compare number with nil
stack traceback:
	assets/flux.lua:91: in function 'new'
	assets/flux.lua:123: in function 'after'
	main.lua:16: in function 'load'
	[string "boot.lua"]:418: in function <[string "boot.lua"]:413>
	[C]: in function 'xpcall'

My current code, just for reference:

Code: Select all

flux = require "assets/flux"

local function fadeinout(t)
  return flux.to(t, 1.5, {alpha = 255}):ease("linear"):delay(2)
  :after(t, 1.5, {alpha = 0}):ease("linear"):delay(1.5)
end

function love.load()
  
  love.graphics.setBackgroundColor(0, 0, 0)
  fade01 = {alpha = 0}
  fade02 = {alpha = 0}  
  image01 = love.graphics.newImage("assets/hohoho.png")
  image02 = love.graphics.newImage("assets/kyaaaa.png")
  
  fadeinout(fade01):after(fadeinout(fade02))
  
end

function love.update(dt)
 
  flux.update(dt)
  love.mouse.setVisible(false)
 
  if love.keyboard.isDown("escape") then
    love.event.quit()
  end
 
end

function love.draw()
  
  love.graphics.setColor(255, 255, 255, fade01.alpha)
  love.graphics.draw(image01, 0, 0)
  love.graphics.setColor(255, 255, 255, fade02.alpha)
  love.graphics.draw(image02, 0, 0)

end

[bakpakin]

Hmm. Maybe the fadeinout function wouldn't work. I guess you could replace it with the more straightforward thing:

Code: Select all

function love.load()
  
  love.graphics.setBackgroundColor(0, 0, 0)
  fade01 = {alpha = 0}
  fade02 = {alpha = 0}  
  image01 = love.graphics.newImage("assets/hohoho.png")
  image02 = love.graphics.newImage("assets/kyaaaa.png")
  
  flux.to(fade01, 1.5, {alpha = 255}):ease("linear"):delay(2)
  :after(fade01, 1.5, {alpha = 0}):ease("linear"):delay(1.5)
  :after(fade02, 1.5, {alpha = 255}):ease("linear"):delay(2)
  :after(fade02, 1.5, {alpha = 0}):ease("linear"):delay(1.5)
  
end

That should work.

[Aloud]

It finally works! Once again, thanks a lot!

However, I do have one final question (I think), if you don't mind. Should I make a new fade table every time I have to draw a new image and create a new fading animation for it, or is there an easier method to do this?

[bakpakin]

You should probably keep the fade table and manually reset it, but it's probably easiest to remake the tween animation every time you need to redo the animation, as flux doesn't seem to specify how to reset a tween. It shouldn't be an issue with performance; flux tables look lightweight in the source.

[s-ol]

I'm new to LÖVE and Lua in general, and I'm pretty sure the problem I'm facing right now is basic for most people here, but...

Code: Select all

flux = require "assets/flux"

function love.load()
  
  love.graphics.setBackgroundColor(0, 0, 0)
  fade = {alpha = 0}
  image01 = love.graphics.newImage("assets/hohoho.png")
  image02 = love.graphics.newImage("assets/kyaaaa.png")
  
  -- the flux library used to make tweening animation (fade from black, fade to black)
  flux.to(fade, 1.5, {alpha = 255}):ease("linear"):delay(2)
   :after(fade, 1.5, {alpha = 0}):ease("linear"):delay(1.5)
  
end

function love.update(dt)
  
  flux.update(dt)
  love.mouse.setVisible(false)
  
  if love.keyboard.isDown("escape") then
    love.event.quit()
  end 
  
end

function love.draw()
  
  love.graphics.setColor(255, 255, 255, fade.alpha)
  love.graphics.draw(image01, 0, 0)
  
end

Basically, I'm using flux to create some sort of fading animation to my image ("image01"). So far, I could make this work just fine, and right now I'm trying to draw another image ("image02") after the screen fully fades to black again and redo the fading animation again. The question is, how exactly do I do this?

All you need to do is swap out the image at the right time:

Code: Select all

  image = image01
 flux.to(fade, 1.5, {alpha = 255}):ease("linear"):delay(2):oncomplete(function () image = image02 end)
   :after(fade, 1.5, {alpha = 0}):ease("linear"):delay(1.5)

-- ...

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