Page 1 of 2
Drawing part of image inside a circle
Posted: Thu Jun 23, 2016 3:20 pm
by DireMitten
Hiya. First post here. Also about my first real game with Löve2D
I'm working on a game in which the player must defend the earth from space missiles. You can see a video of it
here.
I want to make it look like the planet is spinning, and I imagined that I'd do this by having a simple scrolling texture that tiles both up/down and left/right, and then just moving it some amount to the left every update. Kinda like in
this video by Kurzgesagt.
At the moment, I have separate functions for drawing different things, like drawing the stars in the background, and the planet in the foreground. If I just had a rectangular image and drew that right after (or instead of) the planet, then it would be just that, a rectangle. I want to only draw the parts of the image that are within the blue circle.
I have no idea about how to do this. I've never used shaders before, and I don't know if that's what I should use. Should I find some other solution for drawing things? Could someone point me in the right direction?
Re: Drawing part of image inside a circle
Posted: Thu Jun 23, 2016 5:52 pm
by Sheepolution
You can do this with stencils.
Check out
love.graphics.stencil
Code: Select all
function love.draw()
local function stencil()
--drawing the planet
love.graphics.circle("fill", 100, 100, 100, 100)
end
love.graphics.setColor(255, 255, 255)
--Draw the planet
stencil()
--Set the stencil
love.graphics.stencil(stencil)
--Set the stenciltest
love.graphics.setStencilTest("greater", 0)
--Draw the inside
love.graphics.setColor(0, 0, 0)
love.graphics.rectangle("fill", 100, 20, 100, 40)
--End stencil test
love.graphics.setStencilTest()
end
Re: Drawing part of image inside a circle
Posted: Thu Jun 23, 2016 6:35 pm
by Trebgarta
Stencil will work perfectly. However, shaders will do this too, with a lot more features if you wish - for example skewing the 2D texture to make a fake sphere effect, or similar. I did a similar thing, I can describe it if you want. I still have the shader too.
Warning: may be overkill for your purposes, so I wouldnt recommend it if you dont need a fake sphere and kurzgesagt style is enough
Re: Drawing part of image inside a circle
Posted: Thu Jun 23, 2016 6:58 pm
by 4aiman
Please, post regardless of OP's purposes! ^____^
Re: Drawing part of image inside a circle
Posted: Thu Jun 23, 2016 7:13 pm
by Clyybber
Trebgarta wrote:kurzgesagt style is enough
Für wahr für wahr...
Re: Drawing part of image inside a circle
Posted: Fri Jun 24, 2016 9:56 am
by Trebgarta
4aiman wrote:Please, post regardless of OP's purposes! ^____^
I might write an article-ish thing about it in markdown and post it on github as a gist. Or maybe löve blogs?
But I realized, I deleted my solar system demo - shader stays, but have to rewrite lua side. Gonna slow things down
EDIT: Did a gist. I hope there are no errors or something
here
Re: Drawing part of image inside a circle
Posted: Fri Jun 24, 2016 2:39 pm
by DireMitten
Thanks to all of you for the great answers. It seems like stencils is the way to go for the "kurzgesagt" style. I'll probably look into doing it using shaders too, just for the fun of it.
Re: Drawing part of image inside a circle
Posted: Fri Jun 24, 2016 6:18 pm
by 4aiman
Thanks a *lot*, Trebgarta!
Re: Drawing part of image inside a circle
Posted: Sat Jun 25, 2016 1:01 am
by Tanner
Trebgarta's approach is really good! You can also do a similar thing without using shaders if you use a more complicated mesh.
https://gist.github.com/TannerRogalsky/ ... 01aa646d29
This is probably more expensive if you need to regenerate all the UVs every frame but if you don't want to rotate the sphere or you want to use an additional shader (like using a normal map to have lighting), then this approach might make sense.
Each image uses the same texture (just some tiling noise). The middle sphere is Trebgarta's shader. The top is my mesh and the bottom is my mesh with a lighting shader using a normal map.
This is what the vertices look like. The current approach doesn't use a vertex map but it should because it generates a lot of shared vertices.
Re: Drawing part of image inside a circle
Posted: Sat Jun 25, 2016 9:01 am
by Trebgarta
That is really brilliant, but kinda less of a fake sphere and closer to real one
I did have lighting too, stripped it away for the effect. But I used a pretty normal map I made in paint.net with linear gradients
However, I believe in your approach one can also pass in normals per vertex, and use the map for extra detail. Calculating the tangent plane at the point and find the diagonal normal vector. But I forgot how to... God I need to relearn math.
One can also do that in a geometry shader I believe. However, in love2d you cant do geometry shaders. What was the reasoning behind that?