Panel Layout

At the moment, this size of the slide out icon panel is set by the resolution of the screen - specifically the width - and the number of icons specified in the constants PANEL_ROWS and PANEL_COLS.

To recap,

• The panel width is the full width of the display
• The icon width (in pixels) is the width of the display in pixels divided by the number of columns
• The icon height is the same as the width
• The panel height is the icon height multiplied by the number of rows

It was done this way so that the icons are square and evenly distributed on the panel, irrespective of the resolution of the device being used.

So on my phone, for example, in portrait (vertical orientation) the display is 480 pixels wide by 800 high.  Based on 4 columns and 3 rows, this gives;

• The panel width is 480 pixels
• The icon width is 120 pixels ( 480 / 4 )
• The icon height is 120 pixels
• The panel height is 360 pixels (120 x 3 )

So on my phone, the panel occupies 360 / 800 or 45% of the height of the screen.

On a baseline android phone, with a resolution of 320 x 480 (portrait), the icons would be 80 x 80 pixels and the panel would be 320 x 240 or 50% of the height of the screen.

In both cases, the icons are being scaled up from their 64 x 64 pixel source and the panel is taking up about half of the screen space when open.

Increasing the number of icons across - the number of columns - the icon size will be smaller and so the panel height will be smaller.  This will also allow more icons in the panel.

Making the icons closer to their original size (as stored in the image) will improve the quality of the icons by reducing the amount of up-scaling needed.

In the example images above - for a 320x480 display - the middle option ( 5 Columns) would show the icons as they were drawn with no scaling at all.

The icons within the panel represent two type of things; Objects and Groups.

Ideally, objects should be closer to the work area, so start in the top left corner.

Putting the group icons at the end, separates the two types and the empty icons between, provide a buffer between them.

The objects shown in the panel, will be members of the currently selected group.  This requires another value to be stored, in a field called group, which will be part of the panelType UDT.

type panelType
   height#
   speed#
   isOpen
   image
   sprite
   text
   sound
   iconMax
   group
endtype

As always, it has a return function.

function PanelGroup()
endfunction panel.group

And is set in the Initialise() function.

panel.group = 0

and at the end of the function, by changing the line.

game.groupObject$ = Base96Sort( GameGroups() )

into

if len( GameGroups() ) > 0
   game.groupObject$ = Base96Sort( GameGroups() )
   panel.group = Base96Decode( left( GameGroups() , 2) )
else
   panel.group = 0
endif

Which now decodes the first group ID ( if any exist ) and stores it.