Textured Circle: A Quad issue

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.
Post Reply
Solumin
Prole
Posts: 9
Joined: Wed Mar 16, 2011 4:44 am
Location: NJ

Textured Circle: A Quad issue

Post by Solumin »

Hi again, lövers! I'm having a problem with using quads to create tiled textures. In the game, each platform is textured using a quad. This works well for rectangles since, well, it's a quad. However, circular platforms (and by extension, any other non-rectangle platforms) can't be colored by a quad. Does anyone have any ideas about how to fit a quad to a non-rectangle?

I tried it with Frame buffers, but it didn't work well. I drew each actual shape (circle, polygons, etc.) on one frame buffer and all of the quads on the other frame buffer. I then grabbed the image data for each frame buffer, used a mapPixel to make any pixels in the quad fb that didn't match their counterparts in the shape fb transparent, while any other pixels were left alone. This didn't work -- so i went a step farther and did the opposite to the shape fb, except the other pixels were set to white. Then I pasted the shape fb image data into the quad fb image data, created a new image using the new quad fb image data, and drew that image. It worked. However, there is no way this could work in a side-scrolling game and still have a playable game. :ehem:
User avatar
leiradel
Party member
Posts: 184
Joined: Thu Mar 11, 2010 3:40 am
Location: Lisbon, Portugal

Re: Textured Circle: A Quad issue

Post by leiradel »

I'm not sure I fully understand the problem, but isn't it a transparency issue? Does your original image for a "circular" tile have transparent pixels?

Maybe you could post a screenshot showing the problem you're facing?

Cheers,

Andre
Solumin
Prole
Posts: 9
Joined: Wed Mar 16, 2011 4:44 am
Location: NJ

Re: Textured Circle: A Quad issue

Post by Solumin »

Hmm, I guess I didn't explain my self well. I'm trying to draw the platforms for the game. Since each platform is a hardoncollider shape, I just used each one's :draw() method. However, I now need to draw each platform using tiles. The obvious solution is to use a quad, since that will handle the tiling by itself. The problem with using a quad is that it can only be rectangular. I have circular platforms and there is a very good possibility that I will have non-rectangular polygons for platforms. (hardoncollider is flexible like that) Because quads can only be rectangular, I was wondering if anyone knew of a way to get a tiling effect for any given shape.
Attachments
The bottom-right square is the quad for a circle.  The blue background is what the background color should be.
The bottom-right square is the quad for a circle. The blue background is what the background color should be.
BadQuad.png (4.78 KiB) Viewed 2796 times
The bottom-right shape is the circle with the quad behind it.  The background should be blue, but is black because of the transparency.
The bottom-right shape is the circle with the quad behind it. The background should be blue, but is black because of the transparency.
GoodQuad.png (4.6 KiB) Viewed 2796 times
Solumin
Prole
Posts: 9
Joined: Wed Mar 16, 2011 4:44 am
Location: NJ

Re: Textured Circle: A Quad issue

Post by Solumin »

So I found a solution.

Code: Select all

function getOddImage(coords, img)
	local palette = love.graphics.newFramebuffer()
	local cx,cy,cr = unpack(coords)
	cx, cy = cr, cr
	local diam = cr*2
	local image = love.graphics.newImage(img) --it's assumed that img is a proper path.
	local quad = love.graphics.newQuad(0,0, diam,diam, image:getWidth(),image:getHeight())

	love.graphics.setRenderTarget(palette)
	love.graphics.setColor(255,255,255)
	love.graphics.circle('fill',cx, cy, cr,32)
	love.graphics.drawq(woodImg, quad, 0,diam)

	local data = palette:getImageData()
	local circleData = love.image.newImageData(diam, diam)
	local r1,g1,b1,a1
	local r2,g2,b2,a2
	for x=0,diam-1 do
		for y=0, diam-1 do
			r1,g1,b1,a1 = data:getPixel(x,y) --a pixel from the target circle
			r2,g2,b2,a2 = data:getPixel(x, y+diam) --a pixel from the quad/wood
			if a1 == a2 then
				circleData:setPixel(x,y, r2,g2,b2,a2)
			end
		end
	end
	love.graphics.setRenderTarget()
	return love.graphics.newImage(circleData)
end
(It should be noted that the Framebuffer, palette, is created outside of the function. It's included here for completeness. Creating a framebuffer every time this is called would be a major waste!)

Basically, I create my own image of a circle with the wood grain texture on it. When the circular platform that called this function is drawn, the image created here is used. This is much simpler than what I had been trying to do before (it only uses one Framebuffer instead of, say, 3 or so) and I don't think it'll be super laggy. Of course, large circle will present a problem, and eventually this should probably be written in C to speed things up. But hey, it works.
User avatar
leiradel
Party member
Posts: 184
Joined: Thu Mar 11, 2010 3:40 am
Location: Lisbon, Portugal

Re: Textured Circle: A Quad issue

Post by leiradel »

It's still not clear to me what the problem is/was...

You can make a circular shape in, say, Gimp, make corners transparent (so that only the circular wood texture is opaque), save as a PNG and have it rendered in LÖVE without having a black/blue/whatever square "behind" it.
Post Reply

Who is online

Users browsing this forum: No registered users and 3 guests