Positioning Screen co-ordinates based on an Inventory Slot number

Continuing from the previous article yesterday about managing Inventory for CoronaSDK based games, some of you asked how to manage it on screen in a GUI environment.

Well, just a quick response to that that can help you manage that, I present this

there are a few things that you need to do before you can display the inventory items on screen and they are

local iconsAcross        -- Number of icons to display across
local iconWidth          -- The width of the icon
local iconHeight         -- The height of the icon
local offsetX, offsetY   -- The position offset where the icons would be displayed
local columnNo, rowNo    -- The RowNo, ColumnNo from the Inventory Slot No
local slotNumber         -- The InventorySlotNumber

these are useful to us as they are the variables that you can use to position the images and set them to what you want in your code.

First we will try to determine the columnNo and the rowNo from the slotNumber, this is easy to determine as there are iconsAcross number of icons in each row. so let's assume that iconsAcross = 5, the layout will look like

+---+---+---+---+---+
| 1 | 2 | 3 | 4 | 5 |
+---+---+---+---+---+
| 6 | 7 | 8 | 9 | 10|
+---+---+---+---+---+
| 11| 12| 13| 14| 15|
+---+---+---+---+---+
| 16| 17| 18| 19| 20|
+---+---+---+---+---+

If iconsAcross=3 then the layout would have been

+---+---+---+
| 1 | 2 | 3 |
+---+---+---+
| 4 | 5 | 6 |
+---+---+---+
| 7 | 8 | 9 |
+---+---+---+
| 10| 11| 12|
+---+---+---+

so if we try to get a mathematical formula from all of this, we get that the row is the rounded value of the (slotNo / iconsAcross) and the remainder of the slotNumber divided by the iconsAcross would give us the columnNo.

rowNo    = math.round(slotNo / iconsAcross)
columnNo = (slotNo % iconsAcross)

Now we need to get the x and y position of the icon from the Row and Column Number

the x and y position on screen is the pixel value of where to position the icon, we can get that from columnNo * iconWidth and rowNo * iconHeight, so

local xPos = columnNo * iconWidth
local yPos = rowNo * iconHeight

we cannot position the icons on screen as yet because you might want to place then in the lower half of the screen or some other position, just for that we have the offsetX and the offsetY, so the actual / final positions will be offsetX + xPos and offsetY + yPos

Now displaying the icon on screen for a given slotNo would be

local function displayIconOnScreen(slotNo)
 local imageName = items[slotNo] -- this is our icon filename
 
  rowNo = math.round(slotNo / iconsAcross)
  columnNo = (slotNo % iconsAcross)

  local xPos = columnNo * iconWidth
  local yPos = rowNo    * iconHeight

  local image = display.newImage(imageName)
  image:setReferencePoint(display.TopLeftReferencePoint)
  image.x = offsetX + xPos
  image.y = offsetY + yPos
end

this shall display the icon for the given slotNo on screen provided you have set up the following variables at the start and not modify them again

iconsAcross
iconWidth
iconheight
offsetX
offsetY

The only issue when you copy and use this code is that you are not removing the image object that was created earlier for that slot and creating a new one. You might want to remove the previous one so that you do not get overlapping images on screen.

Hope this helps you all to understand how the GUI part of inventory works.