LÖVE

Posted: **Wed Feb 06, 2013 6:09 am**

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!

Posted: **Wed Feb 06, 2013 7:53 am**

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.

Posted: **Wed Feb 06, 2013 7:56 am**

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

Posted: **Wed Feb 06, 2013 6:41 pm**

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!

Posted: **Wed Feb 06, 2013 10:01 pm**

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)

Posted: **Wed Feb 06, 2013 10:40 pm**

Saegor wrote: 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.

Posted: **Thu Feb 07, 2013 12:03 am**

Saegor wrote: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!

Posted: **Thu Feb 07, 2013 12:23 am**

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)

LÖVE

Lock cursor on a grid

Lock cursor on a grid

Re: Lock cursor on a grid

Re: Lock cursor on a grid

Re: Lock cursor on a grid

Re: Lock cursor on a grid

Re: Lock cursor on a grid

Re: Lock cursor on a grid

Re: Lock cursor on a grid