Flashlight Effect

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.
User avatar
pgimeno
Party member
Posts: 3674
Joined: Sun Oct 18, 2015 2:58 pm

Re: Flashlight Effect

Post by pgimeno »

This post may prove helpful: viewtopic.php?p=198669#p198669

Edit: Proof of concept attached. I've reduced the opacity of the mask canvas to let something be seen through.
Attachments
flashlight-POC.love
(142.68 KiB) Downloaded 448 times
User avatar
yetneverdone
Party member
Posts: 448
Joined: Sat Sep 24, 2016 11:20 am
Contact:

Re: Flashlight Effect

Post by yetneverdone »

pgimeno wrote:This post may prove helpful: viewtopic.php?p=198669#p198669

Edit: Proof of concept attached. I've reduced the opacity of the mask canvas to let something be seen through.
Thanks! This really works
User avatar
yetneverdone
Party member
Posts: 448
Joined: Sat Sep 24, 2016 11:20 am
Contact:

Re: Flashlight Effect

Post by yetneverdone »

pgimeno wrote:This post may prove helpful: viewtopic.php?p=198669#p198669

Edit: Proof of concept attached. I've reduced the opacity of the mask canvas to let something be seen through.
Another help.

I want to add a beam/ray effect from the player's position to the light, I have this code that achieves that

Code: Select all

love.graphics.polygon("fill", lightX + light:getWidth()/2,lightY, player.x + player.w/2,player.y+player.h/2, lightX + light:getWidth()/2, lightY + light:getHeight())
But the problem is that I dont know where to put it, i want it to have a similar transparency effect.
User avatar
sherpal
Prole
Posts: 17
Joined: Wed Sep 14, 2016 9:29 am
Location: Belgium

Re: Flashlight Effect

Post by sherpal »

pgimeno wrote:This post may prove helpful: viewtopic.php?p=198669#p198669

Edit: Proof of concept attached. I've reduced the opacity of the mask canvas to let something be seen through.
In your post from that other thread, you say
pgimeno wrote:You can mimic subtractive mode using a shader, if you absolutely must, but I think the effect you're after is best accomplished the above way.
Can you explain why you think that shader is not the best solution here? It seems more elegant to me, but I'm absolutely no reference so I wonder :)

Thanks
User avatar
raidho36
Party member
Posts: 2063
Joined: Mon Jun 17, 2013 12:00 pm

Re: Flashlight Effect

Post by raidho36 »

You gonna have to pass current canvas into shader and compute proper texture coordinates and there will be blurring due to interpolation, plus you can't write to the canvas you read from so you'll need to duplicate it first.
User avatar
pgimeno
Party member
Posts: 3674
Joined: Sun Oct 18, 2015 2:58 pm

Re: Flashlight Effect

Post by pgimeno »

To yetneverdone:
yetneverdone wrote: Another help.

I want to add a beam/ray effect from the player's position to the light, I have this code that achieves that

Code: Select all

love.graphics.polygon("fill", lightX + light:getWidth()/2,lightY, player.x + player.w/2,player.y+player.h/2, lightX + light:getWidth()/2, lightY + light:getHeight())
But the problem is that I dont know where to put it, i want it to have a similar transparency effect.
The transparency is given by the alpha argument to setColor.

You probably want the effect to cover the tangent to the circle, not the height. That requires some maths, to figure out the tangent point for a given cast point. Not trivial at all, especially selecting the cast points and the tangent points. If your player is taken as another circle, things may be a bit simpler. See http://mathworld.wolfram.com/Circle-CircleTangents.html. If you can make a mock-up image of what exactly you want, I may be able to help better.


To sherpal:
sherpal wrote:Can you explain why you think that shader is not the best solution here? It seems more elegant to me, but I'm absolutely no reference so I wonder :)
Whenever something can be easily done without a shader, I prefer that way. That leaves the shader available for other effects.
User avatar
yetneverdone
Party member
Posts: 448
Joined: Sat Sep 24, 2016 11:20 am
Contact:

Re: Flashlight Effect

Post by yetneverdone »

pgimeno wrote:To yetneverdone:
yetneverdone wrote: Another help.

I want to add a beam/ray effect from the player's position to the light, I have this code that achieves that

Code: Select all

love.graphics.polygon("fill", lightX + light:getWidth()/2,lightY, player.x + player.w/2,player.y+player.h/2, lightX + light:getWidth()/2, lightY + light:getHeight())
But the problem is that I dont know where to put it, i want it to have a similar transparency effect.
The transparency is given by the alpha argument to setColor.
You probably want the effect to cover the tangent to the circle, not the height. That requires some maths, to figure out the tangent point for a given cast point. Not trivial at all, especially selecting the cast points and the tangent points. If your player is taken as another circle, things may be a bit simpler. See http://mathworld.wolfram.com/Circle-CircleTangents.html. If you can make a mock-up image of what exactly you want, I may be able to help better
The code i posted already works, it draws lines from the top of the circle, to the player, then to the bottom of the circle, i tried checking without the blend modes, it created a triangle similar to what i want to achieve. The only thing i need is to make the inside of the triangle to blend like the circle.
User avatar
sherpal
Prole
Posts: 17
Joined: Wed Sep 14, 2016 9:29 am
Location: Belgium

Re: Flashlight Effect

Post by sherpal »

raidho36 wrote:You gonna have to pass current canvas into shader and compute proper texture coordinates and there will be blurring due to interpolation, plus you can't write to the canvas you read from so you'll need to duplicate it first.
pgimeno wrote:Whenever something can be easily done without a shader, I prefer that way. That leaves the shader available for other effects.
Thanks, it's clearer :)
Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot], Semrush [Bot] and 4 guests