[Approved] Shadow text (new feature) (1 Viewer)

[ajp8164]

This patch adds the capability of all controls (as far as I can see) that draw text to natively (optionally) display a shadowed version of that text.

Skinners have historically created the effect of shadow text by duplicating (for example) labels in the skin (shadow first followed by the overlapping foreground text). With this patch skinner can now use the following attributes to specify a shadow on the text:

shadowAngle - the integral angle, in degrees, of the shadow text. Zero degrees is along the x-axis, increasing positive values from zero will rotate the shadow clockwise.
shadowDistance - the number of pixels the shadow is offset from the normal (foreground) text.
shadowColor - the color of the shadow.

Here is a list of controls that support these attributes:

• Button
• CheckButton
• CheckList
• FadeLabel
• Label
• List
• Menu
• PlayListItemList
• PlayListButton
• SelectButton
• ThumbnailPanel
• ToggleButton
• UpDownButton
• UpDownList

The following Windows Plugins are also affected by this patch but only to the extent that they interface well with changes to the base GUI controls.

• NumberPlace
• RadioGuide
• TvGuide

The default shadow behavior is "no shadow". So all existing skins will work fine (this change is backward compatible).

The main implementation is handled in GUIFont.cs. This is where the shadow position is computed and drawn. I looked into adding a shadowBlur parameter but this requires some management of a view matrix and it appears that MP uses several optional methods to draw to the graphics context. An enterprising person that understands matrix transformations can likely add a blur feature pretty easily.

Except for the plugins, this patch replaces core.dll (it updates the GUI library).

I have personally tested this with Label and Button and it works great.

Let me know what you think.

EDIT: Added GUIFont.cs as an attachment per request (bummer that it's marked as a binary - that should be fixed too ;-)

 

[pilehave]

Personally I would like to see this feature to be added. But I would also like to see a memory-test with many labels and shadows though, to check if this has any noticeable increase in memory usage.

 

[ajp8164]

Personally I would like to see this feature to be added. But I would also like to see a memory-test with many labels and shadows though, to check if this has any noticeable increase in memory usage.

There is really no (it's never truly zero) impact to skins that do not use shadows since the calls to DrawString() to draw the shadow is avoided if the skin does not require shadows. This implementation does not draw a "noon shadow", ever. It simply does what a skinner that wants shadows would do - but in a more efficient way since its not the whole control that is duplicated - it is only an inner call to DrawText() (a wrapper around DrawString()) that is called twice.

Bottom line; no real impact to performance if you don't want shadow. If you do want shadows it should be more performant than the "traditional" approach of duplicating controls.

Hope I haven't mis-understood your question.

 

[pilehave]

Spot on Sounds great!

 

[rtv]

Did you think of our users who use right-to-left languages?

 

[catavolt]

This feature sounds great! Any screenshots to see how it works?

 

[ajp8164]

Did you think of our users who use right-to-left languages?

There should be no impact/it should work just fine. The implementation uses all existing capabilities to draw text strings; it simply draws the string twice (shadow under the original text). Using the parameters (Angle and Distance) the shadow can appear anywhere the user wishes relative to the original/base text position. Is there some consideration for right-to-left languages that I perhaps don't understand?

 

[ajp8164]

Pictures!

The following code created the text in the image:

		<control>
			<type>label</type>
			<posX>100</posX>
			<posY>430</posY>
			<width>315</width>
			<label>#date</label>
			<textcolor>FFFFFFFF</textcolor>
			<font>h4</font>
			<shadowAngle>0</shadowAngle>
			<shadowDistance>2</shadowDistance>
			<shadowColor>FF000000</shadowColor>
		</control>
		<control>
			<type>label</type>
			<posX>100</posX>
			<posY>460</posY>
			<width>315</width>
			<label>#date</label>
			<textcolor>FFFFFFFF</textcolor>
			<font>h4</font>
			<shadowAngle>45</shadowAngle>
			<shadowDistance>4</shadowDistance>
			<shadowColor>FF000000</shadowColor>
		</control>
		<control>
			<type>label</type>
			<posX>100</posX>
			<posY>490</posY>
			<width>315</width>
			<label>#date</label>
			<textcolor>FFFFFFFF</textcolor>
			<font>h4</font>
			<shadowAngle>90</shadowAngle>
			<shadowDistance>6</shadowDistance>
			<shadowColor>FF000000</shadowColor>
		</control>
		<control>
			<type>label</type>
			<posX>100</posX>
			<posY>520</posY>
			<width>315</width>
			<label>#date</label>
			<textcolor>FFFFFFFF</textcolor>
			<font>h4</font>
			<shadowAngle>135</shadowAngle>
			<shadowDistance>8</shadowDistance>
			<shadowColor>FF000000</shadowColor>
		</control>
		<control>
			<type>label</type>
			<posX>450</posX>
			<posY>430</posY>
			<width>315</width>
			<label>#date</label>
			<textcolor>FFFFFFFF</textcolor>
			<font>h4</font>
			<shadowAngle>180</shadowAngle>
			<shadowDistance>10</shadowDistance>
			<shadowColor>FFFF0000</shadowColor>
		</control>
		<control>
			<type>label</type>
			<posX>450</posX>
			<posY>460</posY>
			<width>315</width>
			<label>#date</label>
			<textcolor>FFFFFFFF</textcolor>
			<font>h4</font>
			<shadowAngle>215</shadowAngle>
			<shadowDistance>10</shadowDistance>
			<shadowColor>FFFF0000</shadowColor>
		</control>
		<control>
			<type>label</type>
			<posX>450</posX>
			<posY>490</posY>
			<width>315</width>
			<label>#date</label>
			<textcolor>FFFFFFFF</textcolor>
			<font>h4</font>
			<shadowAngle>270</shadowAngle>
			<shadowDistance>10</shadowDistance>
			<shadowColor>FFFF0000</shadowColor>
		</control>
		<control>
			<type>label</type>
			<posX>450</posX>
			<posY>520</posY>
			<width>315</width>
			<label>#date</label>
			<textcolor>FFFFFFFF</textcolor>
			<font>h4</font>
			<shadowAngle>305</shadowAngle>
			<shadowDistance>10</shadowDistance>
			<shadowColor>FFFF0000</shadowColor>
		</control>
		<control>
			<type>label</type>
			<posX>800</posX>
			<posY>430</posY>
			<width>315</width>
			<label>#date</label>
			<textcolor>FFFFFFFF</textcolor>
			<font>h1</font>
			<shadowAngle>45</shadowAngle>
			<shadowDistance>10</shadowDistance>
			<shadowColor>66000000</shadowColor>
		</control>
		<control>
			<type>label</type>
			<posX>800</posX>
			<posY>490</posY>
			<width>315</width>
			<label>#date</label>
			<textcolor>FFFFFFFF</textcolor>
			<font>h1</font>
			<shadowAngle>45</shadowAngle>
			<shadowDistance>10</shadowDistance>
			<shadowColor>33000000</shadowColor>
		</control>

 

[misterd]

Can you please post also GUIFont.cs? Unfortunately it is marked as binary in SVN and therefor not part of the patch.

MisterD

 

[ajp8164]

Can you please post also GUIFont.cs? Unfortunately it is marked as binary in SVN and therefor not part of the patch.

MisterD

Edited first post to attach there. Sorry, hadn't noticed that it wasn't in the patch. Thanks for your diligence and follow up!

-Andy