Lock cursor on a grid

[tomshreds]

Hi,

Let's say I have a grid somewhere on the screen. I'd like that, when the cursor is over the grid, it would actually snap on the grid points.

For example, if I'd like to put stuff on a grid a-la sim city 2000. Is there any way of doing so? Because I'd need a way to properly put shapes on a grid.

I don't know if I explained myself properly, if you need more info please ask.

Thanks!

[micha]

You have a cursor provided by your operating system. You cannot easily lock this one to a grid. However you can either have an in-game cursor or you have a functionality where the grid cell underneath your curser is highlighted.

This is quiet easy.
Assume you have a grid with a mesh width h (in both directions). Assuming you have the cursor coordinates. To find the corresponding grid coordinates you go

Code: Select all

grid.x = math.floor(cursor.x/h)
grid.y = math.floor(cursor.y/h)

So you divide the cursor coordinates by the mesh width and then round (towards zero) to get an integer number.

[Saegor]

EDIT : exactly like micha said. there is an example of working code

Code: Select all

function love.load()

	gr = love.graphics
	mo = love.mouse

	gr.setFont(gr.newFont(16))

	getW = gr.getWidth()
	getH = gr.getHeight()

	grid = 64
end

function love.draw()
	
	draw_grid()
	
	local gx, gy = getTile()

	draw_tile(gx, gy)
	
	print_info(gx, gy)
end

function draw_grid()

	gr.setColor(255, 255, 255)

	for x = 0, getW, grid do
	
		gr.line(x, 0, x, getH)
	end

	for y = 0, getH, grid do
	
		gr.line(0, y, getW, y)
	end
end

function draw_tile(gx, gy)

	gr.setColor(255, 255, 255)

	gr.rectangle("fill", gx * grid, gy * grid, grid, grid)
end

function getTile()

	local mx, my = mo.getPosition()
	
	return

	math.floor(mx/grid),
	math.floor(my/grid)
end

function print_info(gx, gy)

	gr.setColor(0, 0, 0)
	gr.print("gx = " .. gx .."\ngy = "..gy, gx * grid, gy * grid)
end

[tomshreds]

Thanks to both of you, it worked wonders!!!

Another question:

I want to make some kind of bright highlight around objects when I place them on the grid.

My objects are PNG images loaded into löve. So let's say I'd like a 2px think white line around the image's shape. Where should I begin?

I'm having a hard time thinking about that one since shapes aren't regular. For example one shape could be a television.

Any ideas?

Thanks!

[Saegor]

it will be hard

i suggest you trying to draw the same image in white filter and slightly zoomed behind your normal image

i will make a quick test for you when i find some time

edit : it will work if you find a way to easily center images drawed. test the .love to understand
or you will find a better way to do this (because it's ugly to do the way i try)

[micha]

i suggest you trying to draw the same image in white filter and slightly zoomed behind your normal image

This will work, but you wont have the same line width everywhere.
Also, imagine you have a non-convex shape (like a ring with a hole in the middle). Then on the inside you will not get the line.

The safest way of solving this is predrawing the contourline for all objects you have in the game. If this is to much work, you consider using something else to highlight objects. You could e.g. draw a rectangle around it or put a circular glow behind it.

[tomshreds]

it will be hard

i suggest you trying to draw the same image in white filter and slightly zoomed behind your normal image

i will make a quick test for you when i find some time

edit : it will work if you find a way to easily center images drawed. test the .love to understand
or you will find a better way to do this (because it's ugly to do the way i try)

You example works for me, the only concern I have is that I'd have to have both the image and the highlight image to be on the same center point so it wouldn't act as a shadow but as an highlight. Any ideas?

Thanks everybody for your help, this is great!

[tomshreds]

I found a way to draw it like I wanted:

Code: Select all

        love.graphics.setBlendMode("additive")
        love.graphics.setColor(255, 255, 255)

        local ratio = 1.1

        local highlight_x = math.floor(x - (((draggingObject.ImageSize.width * ratio) - draggingObject.ImageSize.width) / 2))
        local highlight_y = math.floor(y - (((draggingObject.ImageSize.height * ratio) - draggingObject.ImageSize.height) / 2))

        love.graphics.draw(draggingObject.Image, highlight_x, highlight_y, 0, ratio, ratio)

        love.graphics.setBlendMode("alpha")
        love.graphics.draw(draggingObject.Image, x, y)