Drawing part of image inside a circle

[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?

[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

[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

[4aiman]

Please, post regardless of OP's purposes! ^____^

[Clyybber]

kurzgesagt style is enough

Für wahr für wahr...

[Trebgarta]

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 somethinghere

[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.

[4aiman]

Thanks a *lot*, Trebgarta!

[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.

[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?