フェイス作成編/文字列アイテムの配置方法2 - uLilithフェイス作成方法wiki

文字列アイテムの配置方法（２）

このページでは文字表示の装飾や画像ファイルを利用した文字表示、
StaticStringでの文字表示について説明します。

（背景画像ファイル・iniファイルと
このページで使用する画像ファイルを加えたものが→

文字の装飾 - FontStyleキー

文字列のフォントに装飾をつけてみましょう。

[String1] Category = DynamicString Type = PlayTime PosX = 10 PosY = 10 Width = 50 Height = 20 Align = Center FontFace = ＭＳＰゴシック AlternateFontFace = MS UI Gothic FontSize = 15 TextColor = 0xFFFFFFFF CrossFadeTime = 0 FontStyle = Italic

文字が斜体になりました。
FontStyleキーで、Bold（太字）Italic（斜体）Underline（下線）Strikeout（取り消し線）の
基本的な装飾をつけることが出来ます。
複数同時に使用する場合は、

FontStyle = Bold, Italic, Underline

のように半角カンマ・スペースで区切ってください。

文字の影の色を設定する - ShadowColorキー

文字列には影の色をつけることができます。

[String1] Category = DynamicString Type = PlayTime PosX = 10 PosY = 10 Width = 50 Height = 20 Align = Center FontFace = ＭＳＰゴシック AlternateFontFace = MS UI Gothic FontSize = 15 TextColor = 0xFFFFFFFF CrossFadeTime = 0 ShadowColor = 0xFF000000

文字に影がつきました。
ShadowColorキーを使用すると、ShadowColorキーに指定した色の影が文字につきます。

文字の影の色を縁取りの色に変更する - UseStringEdgeキー

文字の影は縁取りに変更することもできます。

[String1] Category = DynamicString Type = PlayTime PosX = 10 PosY = 10 Width = 50 Height = 20 Align = Center FontFace = ＭＳＰゴシック AlternateFontFace = MS UI Gothic FontSize = 15 TextColor = 0xFFFFFFFF CrossFadeTime = 0 ShadowColor = 0xFF000000 UseStringEdge = True

ShadowColorキーを指定した上で、UseStringEdgeキーをTrueにすると
ShadowColorの色で文字が縁取りされます。
UseStringEdgeキーがFalseの場合、あるいはキーが省略された場合は影になります。

画像で作った文字の使用 - StringByImageキー・StringImageFileキー

文字列アイテムは、通常のフォントだけでなく
画像で作った文字を表示することもできます。

この画像を「numberimage.png」と名前を付けてiniファイルと同じ場所に置いてください。
（ページ冒頭で添付した

testface04.zipにも入っています。）

[String1] Category = DynamicString Type = PlayTime PosX = 10 PosY = 10 Width = 120 Height = 23 Align = CenterLeft StringByImage = True StringImageFile = numberimage.png CrossFadeTime = 0

文字表示が画像による表示になりました。
StringByImageキーをTrueにした上で、
StringImageFileキーに文字表示用の画像ファイルを指定すると、
StringImageFileに指定した画像で文字を表示します。
主に時間表示や数値のみの部分などに使用される表示方法で、
特殊なフォントで文字を表示したいときに便利です。
この方法で表示できる文字は数字と一部の記号のみ（0123456789:.,-+%）で、
それ以外の文字列は空白として表示されます。
StringImageFileに使用される画像は、

0123456789:.,-+%

の16文字を同じ幅で、順番に並べて連結して作った１枚の画像です。

StringByImageキーがTrueになっている場合、
FontFace・FontStyle・TextColorなどの全てのフォント設定が無視されます。

普通の文字列の表示 - Captionキー

情報系ではない普通の文字列（単語・文章）を表示する場合はCaptionキーを使用します。

[String2] Category = StaticString Caption = uLilith PosX = 10 PosY = 50 Width = 50 Height = 20 Align = CenterLeft FontFace = ＭＳＰゴシック AlternateFontFace = MS UI Gothic FontSize = 15 FontStyle = Bold TextColor = 0xFFFFFFFF CrossFadeTime = 0

上のように設定すると、「uLilith」という文字が表示されます。

Captionキーは、指定した文字列がそのまま表示されます。
StaticStringでは必須のキーです。
DynamicStringでも使用できます。
情報系の文字列ではないけれど、マウスクリックに反応して
文字色や背景色を変えたい文字列アイテムは、
以下のようにCategoryはDynamicString、TypeはStaticItemにして、
Captionキーに表示したい文字列を指定した上で
文字色や背景色の設定をクリック／マウスオーバー時も含めて指定して下さい。

[String3] Category = DynamicString Type = StaticItem Caption = uLilith PosX = 10 PosY = 50 Width = 50 Height = 20 Align = CenterLeft FontFace = ＭＳＰゴシック AlternateFontFace = MS UI Gothic FontSize = 15 FontStyle = Bold TextColor = 0xFFFFFFFF CrossFadeTime = 0 PushedTextColor = 0xFF000000 MouseOverTextColor = 0xFF000000 Enable = True

見た目は先ほどの[String2]フィールドと同様の文字列ですが、
クリックに反応するアイテムができました。

縦書き表示 - IsVerticalキー

文字を縦書きで表示する場合はIsVerticalキーを利用します。

[String4] Category = StaticString Caption = "Sound Player" PosX = 10 PosY = 10 Width = 20 Height = 90 Align = TopCenter FontFace = ＭＳＰゴシック AlternateFontFace = MS UI Gothic FontSize = 15 FontStyle = Bold TextColor = 0xFFFFFFFF CrossFadeTime = 0 IsVertical = True