Scaling love.graphics geometric shapes like bitmap pics?

[Daniel Eakins]

Let's say I want my game to have a specific native resolution (320x200) which is scaled up on the player's desktop monitor using the love.graphics.scale() function.

In this screenshot, the blue and orange background is a bitmap (PNG) picture scaled up, while the white line is a dynamic shape generated using love.graphics.line():



Is there a way to render the line as if it were a bitmap picture so that it has the same pixel resolution as like the blue and orange picture?

[Lafolie]

An easy way to do this is with a canvas. It may not be the most elegant solution, but may work well if you're using multiple line/shapes that don't move independently.

Code: Select all

function love.load()
	gWidth, gHeight = 320, 200 --my game resolution
	love.graphics.setDefaultFilter("nearest", "nearest")

	i = 1 --scaling factor
	while gWidth*(i+1) < love.window.getDesktopDimensions() do i = i+1 end
	love.window.setMode(gWidth*i, gHeight*i, {fullscreentype = "desktop"})

	line = love.graphics.newCanvas()
	line:renderTo(function() love.graphics.line(10, 0, 210, 200) end)
end

function love.draw()
	love.graphics.push()
		love.graphics.scale(i)

		testImage = love.graphics.newImage("test.png")
		love.graphics.draw(testImage)
		love.graphics.draw(line)
	love.graphics.pop()
end

love.keypressed = function(key, unicode)
	if key == "escape" then love.event.push("quit") end
end

If you don't want the aliasing then you can use

Code: Select all

love.graphics.setLineStyle("rough")

to get a more harsh, pixellated result.

[Jasoco]

Yeah, you should use a canvas. By having a sort of "base resolution" for your game, create a canvas of that size and draw everything to it. Then draw that canvas to the screen at the scale you need.

Otherwise you're just gonna get the smooth shape edges.

[Daniel Eakins]

Ohh no, it turns out my computer doesn't support canvases! I didn't know it doesn't

[Daniel Eakins]

Any other idea?

[Plu]

You could try the more direct approach and using graphics.scale to draw everything bigger.

https://love2d.org/wiki/love.graphics.scale

It's basically the same kind of approach as using a canvas except you'll have to do it directly to the screen. Should still work though.

[Lafolie]

It's basically the same kind of approach as using a canvas except you'll have to do it directly to the screen. Should still work though.

The whole problem is that this doesn't work for primitives drawn by the framework.

Is there a particular reason you're not using pre-rendered images? If not, just use a few images instead.

[Plu]

Seriously? Sorry I didn't know that. Seems... weird that it wouldn't do that
I'm guessing it's just how openGL handles it?

edit: Oops, I should have reread the OP before posting again, it does indeed mention there it doesn't work. (But I still think it's weird.)

[Daniel Eakins]

Seriously? Sorry I didn't know that. Seems... weird that it wouldn't do that
I'm guessing it's just how openGL handles it?

edit: Oops, I should have reread the OP before posting again, it does indeed mention there it doesn't work. (But I still think it's weird.)

Yeah it's pretty weird, but I guess it's preferrable for games who need "vectorized" graphics.

Is there a particular reason you're not using pre-rendered images? If not, just use a few images instead.

I'd like the geometric shapes to be dynamically generated to accomodate different coordinates/angles/lengths.

Example at 0:48



In this video from a SNES game, when these two characters do a special attack, red lines are drawn in their paths. So these lines can start anywhere on the screen and have any angle and length possible.

[micha]

If I get it correctly, then you want to draw lines (or polygons) such that they are pixelated in a consistent way with your other images.

Since Canvas is not option for you, you can try ImageData. You create an empty one, draw the lines onto it and then make a new image from it and draw it scaled. This might take some time, but if you only do it ocasionally, it should be okay.

The drawing on the imageData is the difficult part. You can only use the setPixel-function, so you have to create a function that draws a line onto an imageData using only single pixels.