Displaying images in a miniwindow

Hey everyone,

I'm trying to make an affects window that displays images when affects are up, similar to something you might see in an MMO.

I need help with figuring out how to make the images appear and disappear in a way that if there is only 1 it shows on the top left, and if there are more, it goes to box 2, 3, 4, etc in that order from left to right, then next row left to right. (Like shown below)



I was thinking something similar to

but I don't really know how to get the images to align in order and all of that jazz.
I'm hoping to still use the timers on the cooldown buttons, so I can have a timer overlay of when the affect will run out.

Any guidance would be appreciated...

If you look at the code in the other plugin you linked and search for "-- where to draw the icon" you'll see that it draws icons with relative rather than fixed coordinates. It determines where to draw the next icon by multiplying the index (minus 1) of the spell in the list (0, 1, 2, 3, etc) by the width of an icon plus the space between icons.

For instance, if your icons are each 20 pixels wide, and you want 5 pixels in between them, the left side of your first icon will be at 0*(20+5), the left side of your second will be at 1*(20+5), and so on.

Moving to multiple rows is similar, but instead of using the index to figure out how far to the right to put the icon, you'll want to use the modulus of the index and how many things you want on one row and then you'd use an integer division to figure out which row to put something on.

In concrete arithmetic, say you want 5 images per row.

For the left-to-right part, you'd have:

(1-1) % 5 = 0
(2-1) % 5 = 1
(3-1) % 5 = 2
(4-1) % 5 = 3
(5-1) % 5 = 4
(6-1) % 5 = 0
(7-1) % 5 = 1
(8-1) % 5 = 2
and so on.

You can see how it loops over and over from 0 to 4.

For deciding which row, you'd have:

math.floor((1-1) / 5) = 0
math.floor((2-1) / 5) = 0
math.floor((3-1) / 5) = 0
math.floor((4-1) / 5) = 0
math.floor((5-1) / 5) = 0
math.floor((6-1) / 5) = 1
math.floor((7-1) / 5) = 1
math.floor((8-1) / 5) = 1
math.floor((9-1) / 5) = 1
math.floor((10-1) / 5) = 1
math.floor((11-1) / 5) = 2
math.floor((12-1) / 5) = 2
and so on.

You can see how it goes up one after every five items.

The trick then is to multiple those results instead of just the index by the width of each graphic plus the space.

So, to sum up, if your icons are each 20 pixels wide, and you want 5 pixels in between them, the left side of your first icon will be at (0%5)*(20+5) and the top of the first icon will be at math.floor((0/5)*(20+5), and the left side of your second icon will be at (1%5)*(20+5), and the top of your second icon will be at math.floor(1/5)*(20+5), and so on. And if you want the whole thing to be offset from the top and the left, you'd just add another 5 to every result.

The -1s in the above are because Lua starts counting indexes at 1, but we want to start counting from 0 for this.