Page 1 of 1
Draw another image after the screen fades to black (flux).
Posted: Fri Aug 21, 2015 8:24 am
by 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?
Re: Draw another image after the screen fades to black (flux
Posted: Fri Aug 21, 2015 1:25 pm
by 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.
Re: Draw another image after the screen fades to black (flux
Posted: Fri Aug 21, 2015 2:23 pm
by 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
Re: Draw another image after the screen fades to black (flux
Posted: Fri Aug 21, 2015 3:17 pm
by 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.
Re: Draw another image after the screen fades to black (flux
Posted: Fri Aug 21, 2015 4:35 pm
by 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?
Re: Draw another image after the screen fades to black (flux
Posted: Fri Aug 21, 2015 8:13 pm
by 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.
Re: Draw another image after the screen fades to black (flux
Posted: Mon Aug 24, 2015 11:06 am
by s-ol
Aloud wrote: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