grid ui?

[ArgyleEyes]

Howdy, new round here I suppose. I float around.
anyway. I was gonna start off messing with shapes n such for starters since I'm more of an art man than coder. (mainly just server framework stuffs in c#) and its been awhile since I've heavily tinkered with that lol.

So umm I guess so far I'm just looking to make something like this? which I swear I've seen done in java before but I can't find it T_T

(pretty much the selected area expands to fill the area and shrinking the others.)
has anyone done something like this in löve? I've kinda looked around but havent mustered the strength to dive into any gui libraries yet... any suggestions? *shrugs*

I guess thats all I'm curious about for now..probs dig around some more and just read up on lua stuffs. (never messed with it outside of modding a recent card game)
oh..and i take it theres no one working on a love.video?
..isnt vlc in lua >.>
..sorry being random..to much coffee.

lol thanks yall.

[Robin]

I don't think so. That's pretty advanced compared what is provided by GUI libraries around here.

What do you want to do with such a grid UI?

[ArgyleEyes]

I guess it would be rather time consuming... U_U
Figured I'd find that java one (still lookin) and just look at how it was done (math n such w/e) *hate*
pretty much just starting with drawing the rectangles and have them adjust shape based on which one is pressed/hovered within a larger unseen rectangle area... worry about adding content to the tiles later. something like a paperdoll, inventory, etc, etc interface but thats a ways off from now. just alil idea i wanted to mess with *shrugs*
thanks.

[tentus]

Step 1: render a grid of items.
Step 2: figure out how to click items in the grid.
Step 3: rendered a clicked item at a different size
Step 4: render the other items at appropriate sizes.

It's not impossible by any means, but it's complicated where it should be simple. Are you sure the effect is worth it?

Edit: Not an elegant piece of code, but it ended up being kind of fun to write.

Code: Select all

function love.load()
	width = 4
	height = 4
	selected = { x = 1, y = 1 }
end

function love.draw()
	for x=1, width do
		for y=1, height do
			local rect = getPixels(x, y)
			love.graphics.rectangle("fill", unpack(rect))
		end
	end
end

function love.mousepressed(x, y, button )
	local mouse = {x, y, 1, 1}
	for x=1, width do
		for y=1, height do
			local rect = getPixels(x, y)
			if overlap(mouse, rect) then
				selected = { x = x, y = y }
			end
		end
	end
end

function overlap(a, b)
	return not (a[1]+a[3] < b[1] or b[1]+b[3] < a[1] or a[2]+a[4] < b[2] or b[2]+b[4] < a[2])
end

function getPixels(x, y)
	local temp = {x * 100, y * 100, 90, 90}
	if selected.x == x then
		temp[3] = 190
	elseif x > selected.x then
		temp[1] = temp[1] + 100
	end
	if selected.y == y then
		temp[4] = 190
	elseif y > selected.y then
		temp[2] = temp[2] + 100
	end
	return temp
end

[ArgyleEyes]

yup.
thats pretty much what I'll be tinkerin around with.
If I manage doing that then I'm sure I could handle other silly ideas in the future.

*edit ~ahhh puhsha did you beat me to it?

-- pretty slick, I appreciate the example. :p