Panel Icon Text Size

There are a number of things not quite right with the text so far.

• stone axe simply doesn't fit
• resource doesn't fit either
• stone is too low 

These are three issues all caused by the size of the text.

What might sound strange is that to address this, the first thing I'm going to do is make the text larger.  By changing the text size from 15 to 25 in the SetPanelSprite() function.

At this size, "tree" (4 characters) just about fills the icon width and "stone" (5 characters) is too wide, this has effectively set a maximum for the text size.

What I'm actually looking at here, though is how readable the text is.  If it's no good at it's maximum size, there is no point looking at other sizes.

Though not great, it is readable.  Darkening the panel will improve this. So initially, the text size will 24 - because its an even number and will make "stone" slightly smaller.

But if we change the number of columns later, the icon size will change, so we have to do it in a way which will also change the text.

thisIconMax# = IconSize() - 4.0
thisSize# = IconSize() * 0.375
setTextSize( thisNameText , thisSize# )

Local variable thisIconMax# is the maximum width of the text - it allows for a 4 pixel gap between names.

The current icon size is 64 pixels and we want a text size of 24, the value we multiply the icon size by ( 0.375) is worked out from 24 / 64.

Once the text size has been set, we can measure the resulting width of the text object using getTextTotalWidth().

thisScale# = thisIconMax# / getTextTotalWidth( thisNameText )

By dividing thisIconMax# by the width of the text object, we get a scale value.

• higher than 1.0 indicates thisIconMax# is bigger than the text.
• exactly 1.0 indicates they are the same width
• lower than 1.0 indicates thisIconMax# is smaller than the text.

In the third case, the text needs to be shrunk.  The new size is the original value ( 0.375 x the icon size ), multiplied by the scale value.

if thisScale# < 1.0 then setTextSize( thisNameText , thisSize# * thisScale# )

Then we use the size of one object to set the size of the other.

setTextSize( thisShadText , getTextSize( thisNameText ) )

Lets look at an example.

If a text size of 24 produced text which was 80 pixels wide, then the scale value would be (64.0 - 4.0) / 80.0 or 60.0 / 80.0 = 0.75

As this is less than 1.0, the the new text size would be 24 * 0.75 = 18

This would produce a width of 80 * 0.75 or 60

Since the height of the text has been changed, the Y position of the text needs to be reset to align it with the bottom of the icon.

setTextY( thisShadText , getSpriteY( thisSprite ) + IconSize() - getTextTotalHeight( thisNameText ) )
setTextY( thisNameText , getTextY( thisShadText ) - 1 )

Now the text will shrink if necessary to fit. This uses getTextTotalHeight() to allow for multi-line names, which is the next step.