Flashlight Effect

[yetneverdone]

Hi, Im trying to create a "fake" light effect for a 2D game. Im trying to implement the same way it is done with game maker studio.
The process is to use surfaces, then apply blend mode to subtract a flashlight radius to get visible parts. But im unable to use it in love2D.
Im tried using these codes:

Code: Select all

love.graphics.setBlendMode("alpha")
love.graphics.setColor(255,255,255,255)
love.graphics.draw(images.bg,width/2 - images.bg:getWidth()/2,height/2 - images.bg:getHeight()/2)

love.graphics.setBlendMode("subtract")
love.graphics.setColor(255,255,255,255)
love.graphics.draw(images.light,love.mouse.getX() * (width/sWidth),love.mouse.getY()* (height/sHeight))

But the result is like this:

Screenshot_2016-10-23_23-35-59.png (2.54 KiB) Viewed 6061 times

I want to achieve something like this:

images.jpg (1.35 KiB) Viewed 6061 times

But with alpha effects like making 3 circles with different alphas to create a smooth effect.

[raidho36]

What does the "light" texture look like exactly? And what's the image without shading applied?

It's hard to diagnose problem if you don't have any reference points.

[yetneverdone]

What does the "light" texture look like exactly? And what's the image without shading applied?

It's hard to diagnose problem if you don't have any reference points.

Not on my pc right now. The texture is just a 32x32 image with circle white line. Theres no shader ive used

[raidho36]

Then I suppose your graphics renders exactly right, it's just you're expecting wrong results from the things you're doing.

If it's a white circle, then if you subtract that from a picture, you get a picture with black circle on it.

[yetneverdone]

Then I suppose your graphics renders exactly right, it's just you're expecting wrong results from the things you're doing.

If it's a white circle, then if you subtract that from a picture, you get a picture with black circle on it.

What i want to a achieve is that the light follows the mouse, everything besides the circular visible area should be black. I got the follow to mouse working. The problem is the black areas around the light texture

[raidho36]

One way of solving it is creating a special canvas, filling it with solid white, rendering black spotlight on it where you need it, and then render the canvas with subtractive mode onto the scene.

[yetneverdone]

One way of solving it is creating a special canvas, filling it with solid white, rendering black spotlight on it where you need it, and then render the canvas with subtractive mode onto the scene.

Can you show me a sample code?

[raidho36]

Code: Select all

canvas = love.graphics.newCanvas ( love.window.getDimensions ( ) )
--[[]]--
love.graphics.setCanvas ( canvas )
love.graphics.clear ( 255, 255, 255 )
love.graphics.draw ( flashlight, x, y )
love.graphics.setCanvas ( )
love.graphics.blendMode ( "subtract" )
love.graphics.draw ( canvas )
love.graphics.blendMode ( "alpha" )

[yetneverdone]

Code: Select all

canvas = love.graphics.newCanvas ( love.window.getDimensions ( ) )
--[[]]--
love.graphics.setCanvas ( canvas )
love.graphics.clear ( 255, 255, 255 )
love.graphics.draw ( flashlight, x, y )
love.graphics.setCanvas ( )
love.graphics.blendMode ( "subtract" )
love.graphics.draw ( canvas )
love.graphics.blendMode ( "alpha" )

Thanks! But where would i put if theres a background image? Like in the photo i posted.

[raidho36]

In place of drawing shadow and flashlight - because that's what the code does.