What's bad about a Canvas?

[elevitate]

I've seen a few posts where people are talking about how their game engines use Canvases and how they hope to change that in future.

What's bad about them?

I'm in the early stages of a game engine that will use a lot of procedurally generated content, and Canvases seem a really good fit.

Could anyone help me out with what their fault is?

[Robin]

Welcome!

A problem with Canvases is that not every computer supports them, so that means if you use Canvases in your game or library, you'll exclude some people right away.

For those with support for them, Canvases are just pure awesome.

[Jasoco]

That's the problem. A lot of ideas I want to do can't be done as well without canvases. It's a shame that a lot of video cards are just plain dumb when it comes to this. You'd think these days this stuff would be standardized and cards would support everything there can possibly exist.

I love canvases. I hate people who complain about them. Well, I hate their computers. Not the people.

[bartbes]

Or their software, mesa does it.

[Nixola]

So, Jasoco hates Windows (and maybe MACs, but I'm not sure)

[Jasoco]

So, Jasoco hates Windows (and maybe MACs, but I'm not sure)

Mac. It's Mac. Just like it's Lua, not LUA. It's Mac, not MAC.

[elevitate]

Hmm. Perhaps if I explain what I want to use them for, maybe one of you helpful folks could tell me if there's a better route?

I want to take 'base' images and layer them to create variations. So, say I have three different hats that a guy could wear, and some different t-shirts, 'guys' etc. all in a Texture Atlas.

I assume that it would be faster to say "Okay, this character will use hat 1, t-shirt 4, guy 2 - layer them together and output them into this surface, then just quickly blit that surface to the 'master' surface in future" - instead of having to do the whole thing every time.

About ten years ago I looked really briefly at SDL with C++ and it's that experience that makes me thing I need to do as I describe above. Scanning through the Love documentation, it looks like a Canvas is what I want to use. Or should I be using something else?

Basically, I want to be able to 'edit' my images in-game to e.g. set the eye colour of my little 24x32 character from blue to green without it being too 'expensive' to do so and without having a zillion tiny sprites to maintain in my Atlas.

Any help much appreciated!

[dreadkillz]

Yes a canvas is perfect for that job. You create your canvas, and then you "paste" your character pieces onto the canvas. The canvas then acts as one big image, so it should run faster than having to separately draw each of your character pieces. There are other tricks to canvases, but that is one of them. If you want to edit the color of one of your piece, you could create a new canvas, change the color, then copy the pieces you want onto the new canvas.

[NÖÖB]

Could you do it like this? -- without canvas. I've supplied example images in the .love

Code: Select all

function love.load()
	_a = 0
	love.graphics.setDefaultImageFilter("nearest", "nearest")
	playerImageBuffer = love.image.newImageData(32, 32) -- initialize PO2 buffer
	
	playerImageHead = love.image.newImageData("head001.png")
	playerImageBody = love.image.newImageData("body003.png")
	fhtagn(playerImageHead, playerImageBuffer, 10, 0)
	fhtagn(playerImageBody, playerImageBuffer, 8, 14)
	pix1 = love.graphics.newImage(playerImageBuffer)

	playerImageHead = love.image.newImageData("head002.png")
	playerImageBody = love.image.newImageData("body003.png")
	fhtagn(playerImageHead, playerImageBuffer, 10, 0)
	fhtagn(playerImageBody, playerImageBuffer, 8, 14)
	pix2 = love.graphics.newImage(playerImageBuffer)
	
	playerImageHead = love.image.newImageData("head001.png")
	playerImageBody = love.image.newImageData("body002.png")
	fhtagn(playerImageHead, playerImageBuffer, 10, 0)
	fhtagn(playerImageBody, playerImageBuffer, 8, 14)
	pix3 = love.graphics.newImage(playerImageBuffer)
end

function love.update(dt)
_a = _a + (1 * dt)
end

function love.draw()
	love.graphics.draw(pix1, 64,64, 0, 2, 2)
	love.graphics.draw(pix2, 128, 128, _a, 4 * math.sin(_a), 4 * math.cos(_a))
	love.graphics.draw(pix3, 196, 196, -_a, 8 * math.cos(_a), 8 * math.cos(_a))
end

function fhtagn(image, buffer, offsetX, offsetY)
	local imageWidth = image:getWidth()
	local imageHeight = image:getHeight()
	for _y = 0, imageHeight - 1 do
		for _x = 0, imageWidth - 1  do
			local r, g, b, a = image:getPixel(_x, _y)
			buffer:setPixel(_x + offsetX, _y + offsetY, r, g, b, a)
		end
	end
end

[edit] lol, you can just replace the entire contents of the fhtagn function with this:

Code: Select all

buffer:paste(image, offsetX, offsetY)

[elevitate]

Thanks for your help, dreadkillz and NOOB. I like the nocanvas.love it looks like what I'm after!

Yep... setPixel / getPixel - that looks like what I'm after! Just something so I can quickly blit stuff onto base images to create variations. That example has it all - wish I'd found the imageData docs earlier

Thanks all!