help scrollbar

[luislasonbra]

hi, I'm making a list of items in lua, I dont know how to create a scrollbar.

I have the following code to make a scrollbar, but it does not work well.

Code: Select all

scrollbar = {};

scrollbar = function()
	local temp = {};

	temp.x = 0;
	temp.y = 0;

	temp.w = 20;
	temp.h = 200;
	temp.minW = 20;
	temp.minH = 20;

	temp.rect = {};

	temp.padding = 2;
	temp.visible = true;
	temp.contentHeight = 0;

	temp.scrollY = 0;

	local mouseDown = false;

	function temp:loadScroll()
		temp.rect.x = temp.x;
		temp.rect.y = temp.y;
		temp.rect.w = temp.w;
		temp.rect.h = temp.minH;
	end

	function temp:updateScroll(dt)
		if temp.contentHeight < temp.h then
			temp.visible = false;
			return;
		else
			temp.visible = true;
		end

		temp.rect.h = temp.h / temp.contentHeight;
		temp.rect.h = math.max(temp.rect.h, temp.minH);

		local mx = love.mouse.getX();
		local my = love.mouse.getY();

		if mouseDown == true then
			temp.rect.y = math.max(temp.y, math.min(math.floor(my), (temp.h - temp.y)));

			temp.scrollY = temp.rect.y - temp.y;
		end
	end

	function temp:mousepressedScroll(x, y, button)
		if button == "l" then
			if x >= temp.rect.x and x <= (temp.rect.x + temp.rect.w) and
				y >= temp.rect.y and y <= (temp.rect.y + temp.rect.h) then
				mouseDown = true;
			end
		end
	end

	function temp:mousereleasedScroll(x, y, button)
		mouseDown = false;
	end

	function temp:drawScroll()
		if temp.visible == true then
			love.graphics.rectangle("fill", temp.x, temp.y, temp.w, temp.h);
			love.graphics.setColor(255, 0, 0, 200);
			love.graphics.rectangle("fill", temp.rect.x, temp.rect.y, temp.rect.w, temp.rect.h);
			love.graphics.setColor(255, 255, 255, 255);
		end
	end

	return temp;
end

my question is:
which is the algorithm to make a scrollbar in lua and love2d?

hope you can understand my question.

here the file

scrollbar.love

(1.59 KiB) Downloaded 216 times

[artofwork]

Seems to work fine on my end, what problem are you having?

Is it an issue with the items being displayed outside of the window?

If that's the case then draw out the contents of the list behind the scroll bar or destroy the top order of a list item while a new one is being created other then that i don't see an issue it seems to work fine.

[Positive07]

Nice! although your culling is not entirely right, for the minimum value you must use math.floor as you have been doing, but for the max value you must use math.ceil

so I changed your maxItem function to something like this:

Code: Select all

-- position del scroll menos la posicion actual.
function maxItem(y,b)
	if y < content.y then
		return 0;
	end
	if b then
		return math.floor(y / itemH);
	else
		return math.ceil(y / itemH);
	end
end

You may notice the new argument passed to it, b, I use this argument to detect whether this is the max or the min value. So I had to change the two lines that call this function, to give the appropriate arguments.

Code: Select all

local min = maxItem((content.y + 10) + (scroll.scrollY + 2),true);
local max = maxItem(content.h + (scroll.scrollY + 2),false);

Also since you probably want to use this scrollbar inside of a window and you dont want the items to overflow the container I added this line before the for loop

Code: Select all

love.graphics.setScissor(content.x,content.y,content.w,content.h)

and this one after the for loop

Code: Select all

love.graphics.setScissor()

There is just one error left to fix, you cant reach the last two items (the maximum is 18), I'll try to fix this and come back

Enjoy!

[Jasoco]

Scrollbars are tricky to draw because you need to do some silly math. But once you figure it out, it makes you feel good. In my RPG I first decided to skip even trying when making an Inventory system and instead made a page based list where a list longer than what can fit just got split into pages. It was simpler. But had a lot more code in the end. So when I moved onto coding my Store system, I tried it again and after a bit of trial and error, I finally figured out the math.

[undef]

I would like to add that I think scolling is more intuitive with mouse weel support, this could be easily integrated.