Inventory, item placing help

[Tekken]

Hello guys, I want to create an inventory made out of pictures, all good and nice,  but, well let's say that math wasn't my favorit class in school and I'm a little confuse in DX functions cause they require a lot of calculus that I don't know, my question is how can I make a inventory like this (see the picture below) ?

A - Large items.

B - Small items.

What I want to know is how to make the pictures place like in the image?

 

Thank you!

[NeXuS™]

Picture isn't shown for me.

[Tekken]

See it here

[NeXuS™]

Still wrong.

[Tekken]

Ok here is a imgurl link :)

[NeXuS™]

You'll have to use the width of the panel and two variables as X offset and Y offset, so you can easily change the rectangle's position.

1. You start your X offset and Y offset at 0.
2. You draw the first item, and then you add the width of the first item to the X offset + some pixels.
3. If you have enough space to draw the next item in the same line, you repeat step 2.
4. If you don't, you reset the X offset and add the height of the items + some pixels to the Y offset.

Use a loop to draw them.

[Tekken]

Well you may laugh but I already knew that, but still I tried and I don't know what I'm doing wrong...(I did the first row but that's all )

Can you please show me an example?

Here I have the 3 images you need: https://drive.google.com/open?id=1Q8ESMbOlqedKTW9vr2_rOMjmvOug5xii

If you can make it draw 3 large items and 4 small that will be exactly what I need.

 

[pa3ck]

If you post your code and tell us which part you're stuck on, somebody might be able to help you..

[NeXuS™]

local sX, sY = guiGetScreenSize()
local bgW, bgH = 390, 675 -- Background item size
local bgX, bgY = (sX-bgW)/2, (sY-bgH)/2 -- Background pos
local lW = 160 -- Large item width
local sW = 80 -- Small item width

local itemTable = {
	"large",
	"large",
	"large",
	"small",
	"small",
	"small",
	"small"
}

function drawItems()
	dxDrawImage(bgX, bgY, bgW, bgH, "background.png")
	local offsetX, offsetY = 30, 30
	for i = 1, #itemTable do
		outputChatBox("i: " .. i .. " X: " .. offsetX .. " Y: " .. offsetY)
		if bgW - offsetX < (itemTable[i] == "large" and lW or sW) then
			offsetX = 30
			offsetY = offsetY + 90
		end
		dxDrawImage(bgX+offsetX, bgY+offsetY, itemTable[i] == "large" and lW or sW, 80, itemTable[i] .. "item.png")
		offsetX = offsetX + (itemTable[i] == "large" and lW or sW)+10
	end
end
addEventHandler("onClientRender", root, drawItems)

Try to understand the code. If you have issues, feel free to reply.

[Tekken]

Thank you, exactly what I needed.

I don't understand this part:

(itemTable[i] == "large" and lW or sW)

If you can explain it that'd be really nice.

[Addlibs]

That is basically an inline-if statement based on ternary operators (similar to : ? in many other languages including PHP, C, C++, etc)

See more: https://en.wikipedia.org/wiki/%3F:, https://en.wikipedia.org/wiki/%3F:#Lua

Here's my attempt at explaining it:

AND:
If the left operand is a logical true, and returns the RIGHT operand.
If the left operand is a logical false, and returns the LEFT operand.
OR:
If the left operand is a logical true, or returns the LEFT operand.
If the left operand is a logical false, or returns the RIGHT operand.

Following these laws, the statement is executed in this way:

where itemTable does equal "large":

itemTable[i] == "large" evaluates true;
true and lW -- left operand evaluates into a logical true, and therefore and returns the right operand, lW;
lW or sW -- left operand evaluates into a logical true, and therefore or returns the left operand, lW;
-- The result of this evaluation is lW.

where itemTable does NOT equal "large":

itemTable[i] == "large" --evaluates false;
false and lW -- left operand evaluates into a logical false, and therefore and returns the left operand, false;
false or sW -- left operand evaluates into a logical false, and therefore or returns the right operand, sW;
--The result of this evaluation is sW.

Basically,

function iif(a, b, c)
  return a and b or c
end

--equivalent to
function iif(a, b, c)
  if a then
    return b
  else
    return c
  end
end

 returns b if a is true, otherwise c.

Edited February 14, 2018 by MrTasty

[Tekken]

Thank you very much, really in depth explanation. I understand now.