Panel Icon Grid

The maximum number of icons that will fit in the panel is calculated from the constants originally set up for rows and columns.

The first thing is calculate this value and store it in a variable called panelIconMax.  This is then used to dimension the array which will be used to store the sprites.

panelIconMax = PANEL_ROWS * PANEL_COLS

dim panelIconSprite[ panelIconMax ]

Next, count through the list using a for / next loop, and create a blank sprite for each icon position

for icon = 1 to panelIconMax
    panelIconSprite[ icon ] = createSprite( 0 )
    setSpriteSize( panelIconSprite[ icon ] , iconSize# - 4, iconSize#  - 4)
    setSpriteColor( panelIconSprite[ icon ] , 255 , 255 , 255 , 127 ) 
next icon

Also in this loop we do two other things;

• Set the size of the sprite  (4 pixels smaller than iconSize#)
• Set the colour of the Sprite (transparent white)

We set the size to be smaller so that there will be a 2 pixel border around each one, if we set them to the full size, they would appear to be one big sprite and wouldn't really show where the icons go.

We set the colour using the SetSpriteColor() command.  As well as the sprite reference (the array), this takes a value for Red, Green, Blue and Alpha (transparency).  These values are all in the range 0 to 255.

The Red, Green and Blue values are all 255 which will make the sprite white, the alpha value is 127 which is 50% transparent.

We also need to position the icons, but this is something that will be done in several places so is better handled by a function.

Functions are self contained program modules which are put after the main do / loop and called in the same way a standard command is.

This function will be called PositionPanelIcons() and it is defined at the end of the program like this;

function PositionPanelIcons()
   iconDepth = getSpriteDepth( panelSprite ) - 1
   for icon = 1 to panelIconMax
      offset = icon - 1
      col = offset mod PANEL_COLS
      row = offset / PANEL_COLS
      x# = col * iconSize#
      y# = row * iconSize# + getSpriteY( panelSprite )
      setSpritePosition( panelIconSprite[ icon ] , x# , y# )
      setSpriteDepth( panelIconSprite[ icon ] ,  iconDepth  )

   next icon

endfunction

As well as X and Y positions, all object have a depth position.  This defines the order they appear in on the screen.  Depth 1 is at the front, depth 10,000 is at the back.

The first thing the function does is get the depth of the panel sprite using the getSpriteDepth() command.  It then subtracts 1 and stores it in the variable iconDepth.  This is done outside the for/next loop as it only need to be done once.

Then a loop is started which counts through the array of icon sprites.

Because the calculations for X and Y use values from zero and our icon list starts at 1, we first subtract 1 from the icon number and store it in a variable called offset.

The variable offset is then used to calculate the row and column of the sprite using the formulas from the last post.  These values are stored in variables row and col.

The row and col variables are then multiplied by the iconsize# to get the X and Y position of the icon.

The Y also has the Y position of the panel sprite added - as the panel sprite moves, so will the icons.

Finally both values have 2 added to provide a border and the results stored in x# and y#

Next the sprite is positioned using the x# and y# values

Finally the depth is set using the iconDepth variable, which puts the sprite in front of the panel.

This is repeated for all of the sprites in the loop.

Because functions are self contained, any variables set up outsize the function and used by the function need to be made global. to do this we need to add the following line to the start of the program - just after the constant definitions.

global panelSprite , iconSize# , panelIconMax

Arrays are always global so nothing needs to be done for the function to use this one

Finally, we need to put a call to the function;

PositionPanelIcons()

At the start just before the do command, and in the two places where the panel is moved (after each of the setTextY() commands).

And the panel now has some semi-transparent squares where the icons will go.