Hi,
I have searched forums extensively as well as Stack Overflow to find out how to approach gradient drawing. I mostly need it for polygons at the moment, but I am sure it would be useful to have it for any shape.
I know there was a discussion regarding this and the best method so far is to use a 1x1px image.
Is there some internal plan to move gradients forward in addition to line and fill modes?
Maybe somebody from the LOVE developers can chip in?
Thanks.
Gradients (gradient as fill)
Gradients (gradient as fill)
My boat driving game demo: https://dusoft.itch.io/captain-bradley- ... itius-demo
Re: Gradients (gradient as fill)
Mesh! https://love2d.org/wiki/Meshdusoft wrote: ↑Tue Mar 12, 2024 5:37 am Hi,
I have searched forums extensively as well as Stack Overflow to find out how to approach gradient drawing. I mostly need it for polygons at the moment, but I am sure it would be useful to have it for any shape.
I know there was a discussion regarding this and the best method so far is to use a 1x1px image.
Is there some internal plan to move gradients forward in addition to line and fill modes?
Maybe somebody from the LOVE developers can chip in?
Thanks.
How to make lights with shadows with gradient, but without shaders:
viewtopic.php?p=244845#p244845
Code: Select all
function love.load()
vertices = {
{100, 50, 0,0, 1,0,0},
{700, 400, 0,0, 0,1,0},
{50, 550, 0,0, 0,0,1},
}
mesh = love.graphics.newMesh( vertices, mode, usage )
end
function love.draw()
love.graphics.draw (mesh)
end
Re: Gradients (gradient as fill)
Meshes seem to be unnecessary complicated for my use - I am neither using images, nor canvas. I am working with 2D, not 3D.
I am drawing polygons directly and using physics functions. I can simulate gradients via repeated drawing of multiplied polygons, but I will have to benchmark performance here for larger numbers.
I am drawing polygons directly and using physics functions. I can simulate gradients via repeated drawing of multiplied polygons, but I will have to benchmark performance here for larger numbers.
My boat driving game demo: https://dusoft.itch.io/captain-bradley- ... itius-demo
Re: Gradients (gradient as fill)
I make gradients with a 2x1 image and a quad.
If you want polygons with a gradient, I'm afraid darkfrei is right, you need meshes and possibly love.math.triangulate() to get a triangle mesh from the polygon. Also you'll need to set the UVs yourself appropriately. Or you can use a stencil to mask the gradient, or a shader.
Code: Select all
local gradientData = love.image.newImageData(2, 1, 'rgba8',
'\255\000\000' .. '\255' ..
'\000\255\000' .. '\255')
local gradient = love.graphics.newImage(gradientData)
gradient:setFilter('linear', 'linear')
local gradientQuad = love.graphics.newQuad(0.5, 0, 1, 1, 2, 1)
function love.draw()
-- Draw a 160x180 vertical gradient centred at 400,300
love.graphics.draw(gradient, gradientQuad, 400, 300, math.rad(90), 180, 160, 0.5, 0.5)
end
Re: Gradients (gradient as fill)
Than you can use the meshes with texture?dusoft wrote: ↑Tue Mar 12, 2024 9:39 am Meshes seem to be unnecessary complicated for my use - I am neither using images, nor canvas. I am working with 2D, not 3D.
I am drawing polygons directly and using physics functions. I can simulate gradients via repeated drawing of multiplied polygons, but I will have to benchmark performance here for larger numbers.
https://github.com/darkfrei/love2d-lua- ... th-texture
Re: Gradients (gradient as fill)
Thanks for your suggestions, I will be staying with scaled up overlapping polygons for now.
My boat driving game demo: https://dusoft.itch.io/captain-bradley- ... itius-demo
Re: Gradients (gradient as fill)
You can see it on the screenshot (blue ones, yellow is the original polygon that was used for scaling up). I create couple of scaled up polygons of the same shape just drawing over each other (starting from the outside - from large to small). This efficiently creates a gradient, I can control how many polygons (gradient steps) to have.
PS: ignore the gray lines, I just use those for debug purposes.
PS: ignore the gray lines, I just use those for debug purposes.
- Attachments
My boat driving game demo: https://dusoft.itch.io/captain-bradley- ... itius-demo
Re: Gradients (gradient as fill)
Even better examples with full polygon visible.
Gradient starts around the original polygon (boat shaped), but I could make it start around centroid point, this is just matter of setting the scale and drawing...
Gradient starts around the original polygon (boat shaped), but I could make it start around centroid point, this is just matter of setting the scale and drawing...
- Attachments
My boat driving game demo: https://dusoft.itch.io/captain-bradley- ... itius-demo
Re: Gradients (gradient as fill)
Nice, I see what you're after. Thank you for the images.
Who is online
Users browsing this forum: No registered users and 13 guests