Porting flashlight effect from clickteam to love

[ChocolateLoxtl]

Hi everybody, this is my first post on the forums since this I was looking a lot on the internet about this and can't found something useful.

For some context, I made a proof of concept for a flashlight effect on clickteam fusion 2.5 and this effects uses a effect for invert colors and a subtract effect on the layer

On the image is better to see


The current layer I'm on have 2 images, the room dark mode and with effect to invert colors, and also a flashlight mask.



and on a layer above without any effect I have the room with all lights

so I tried replicate this effect but the final result don't look nothing like the original on fusion



here the code I used to try make this work:

Code: Select all

function love.load()
    dbginterface = require 'src.Components.Modules.Game.Interface.DebugInterface'
    roomoff = love.graphics.newImage("assets/images/game/test/room_off.png")
    roomlight = love.graphics.newImage("assets/images/game/test/room_light.png")
    flashlight = love.graphics.newImage("assets/images/game/night8/flashlight.png")
    light = love.graphics.newImage("assets/images/game/night8/lantern_light.png")

    shd_perspective = love.graphics.newShader("assets/shaders/Projection.glsl")
    shd_invert = love.graphics.newShader("assets/shaders/InvertShader.glsl")
    tuneConfig = {
        latitudeVar = 26.6,
        longitudeVar = 40,
        fovVar = 0.263000
    }
    shd_perspective:send("latitudeVar", tuneConfig.latitudeVar)
    shd_perspective:send("longitudeVar", tuneConfig.longitudeVar)
    shd_perspective:send("fovVar", tuneConfig.fovVar)

    flash = {
        x = 0,
        y = 0
    }

    gameCam = camera.new(0, nil)
    gameCam.factorX = 2.8
    gameCam.factorY = 25

    cnv_mainCanvas = love.graphics.newCanvas(love.graphics.getWidth(), love.graphics.getHeight(), {
        format = "rgba8",
        readable = true,
    })
    cnv_invertedRoom = love.graphics.newCanvas(love.graphics.getWidth(), love.graphics.getHeight(), {
        format = "rgba8",
        readable = true,
    })
    cnv_flash = love.graphics.newCanvas(love.graphics.getWidth(), love.graphics.getHeight(), {
        format = "rgba8",
        readable = true,
    })
    love.graphics.setBackgroundColor(0, 0, 0, 0)
end

function love.draw()
    cnv_mainCanvas:renderTo(function()
        gameCam:attach()
        love.graphics.draw(roomlight, 0, 0)
        gameCam:detach()
    end)

    cnv_invertedRoom:renderTo(function()
        gameCam:attach()
            love.graphics.setShader(shd_invert)
                love.graphics.draw(roomoff, 0, 0)
            love.graphics.setShader()
        gameCam:detach()
    end)

    cnv_flash:renderTo(function()
        love.graphics.draw(cnv_invertedRoom, 0, 0)
        love.graphics.draw(flashlight, flash.x, flash.y, 0, 1.2, 1.1, flashlight:getWidth() / 2, flashlight:getHeight() / 2)
    end)

    love.graphics.setShader(shd_perspective)

    love.graphics.draw(cnv_mainCanvas, 0, 0)

    love.graphics.setBlendMode("subtract")
    love.graphics.draw(cnv_flash, 0, 0)
    love.graphics.setBlendMode("alpha")
    love.graphics.setShader()
end

I already see some "flashlight" related post on the forum but none of them seem to fit, specially this one so I really don't know what to do.

[RNavega]

Hello. A couple of questions:
- What is that perspective shader being used for, I see a FOV and other parameters, is it like a pincushion effect? (This is just curiosity and not related to your problem.)
- If roomOff is always under the same invert shader, couldn't that result be baked into the discrete image? Like going to some image editor and inverting the colors and saving. This way you'd spare one canvas object as well as that shader pass, having only to draw roomOff as it is in the file.

As for the problem, it's difficult to say what's causing it. The LÖVE result seems darker, so the first thing I'd test is trying to turn on (or off) gamma correction, which you can read about in here: https://love2d.org/wiki/love.graphics.isGammaCorrect

Other than that, making sure that I wasn't using some further layer transparency to calibrate the darkness of the unlit room, back in Clickteam Fusion.

[ChocolateLoxtl]

- What is that perspective shader being used for, I see a FOV and other parameters, is it like a pincushion effect? (This is just curiosity and not related to your problem.)

Replying to this, this shader I based on the fusion effect called projection and give a aspect of 3D projection

If roomOff is always under the same invert shader, couldn't that result be baked into the discrete image? Like going to some image editor and inverting the colors and saving. This way you'd spare one canvas object as well as that shader pass, having only to draw roomOff as it is in the file.

I already tried inverting the colors in some image editor to avoid passing into the inverse shader but seems no result too

[RNavega]

this shader I based on the fusion effect called projection and give a aspect of 3D projection

Ah cool, like a spherical or cylindrical projection.
https://www.youtube.com/watch?v=g_Fxc9_V7Vc
(And also this)
It's very effective.

I already tried inverting the colors in some image editor to avoid passing into the inverse shader but seems no result too

It wouldn't solve the problem, just simplify your setup because then you don't need the extra shader and canvas.
But did you try changing the gamma setting (turning it on if it's off, or off if it's on) in love.conf and seeing if it makes a difference?

Other than that, if you can post a small crop of the unlit and lit room assets --no need for the whole image-- so that others can test it here.

[ChocolateLoxtl]

Update guys, I finally made it to work, I don't know how the clickteam fusion version works about the layer composing and other stuff but when tested in othedr engines like Construct 2, I got the same result as love version.
so if you guys want to make the same effect as I want, I really recommend takle a look at this post. But in short you don't need any kind of inversion of colors or something, the only thing that matter and need the colors to be inverted is the flashlight mask and after this you apply the multiply blend on the flashlight canvas

also some quick note, for the perspective I recommend add scrolling texture as canvas so you can draw it and apply the perspective shader.

Code: Select all

function love.draw()
    -- assuming have some kind of perspective shader --
    cnv_mainCanvas:renderTo(function()
        gameCam:attach()
        love.graphics.draw(roomlight, 0, 0)
        gameCam:detach()
    end)

    cnv_flash:renderTo(function()
        gameCam:attach()
                love.graphics.draw(roomoff, 0, 0)
        gameCam:detach()
        love.graphics.draw(flashlight, flash.x, flash.y, 0, 1.2, 1.1, flashlight:getWidth() / 2, flashlight:getHeight() / 2)
    end)

    love.graphics.setShader(shd_perspective)
        love.graphics.draw(cnv_mainCanvas, 0, 0))
        love.graphics.setBlendMode("multiply", "premultiplied")
        love.graphics.draw(cnv_flash, 0, 0)
        love.graphics.setBlendMode("alpha")
    love.graphics.setShader()
end