スコアを表示する
スコアの表示にもLabelコンポーネントを使う
残りはスコアの表示部分です。これもLabelを使います。スコアは、ScorePanel上に表示します。2つのLabelをScorePanel上に配置します（このLabelコンポーネントも、黒のScorePanelパネルの上に置くと、どこに配置したか分かりにくくなっています）。
図8 スコア用のLabelの配置
スコア表示用のカスタムスタイル
今回は、Labelの文字色を設定するためのスタイルを作成します。マウスの右ボタンをクリックして［カスタムスタイルの編集］を選択し、スタイルエディタに切り替えます。
オブジェクトインスペクタ上でStyleNameプロパティの値を変更します。
Label1Style1
| プロパティ | 値 |
| StyleName | ScoreStyle |
次に、リストの左側の三角の印をクリックして展開します。今回は、文字の色を指定するので、表示されたTTextコンポーネントをマウスで選択し、オブジェクトインスペクタ上でプロパティを次のように設定します。
TText
| プロパティ | 値 |
| Fill.Color | Red |
図9 TTextのプロパティ設定
設定が終わったら［適用して閉じる］ボタンをクリックし、設計画面に戻ります。
スコア用のLabelにスタイルを適用する
オブジェクトインスペクタ上で、ScorePanel上に配置した2つのLabelのプロパティを設定します。
Label1
| プロパティ | 値 |
| Name | ScoreTitle |
| Font.Family | Arial |
| Font.Size | 16 |
| Font.Style.fsBold | True |
| Font.Style.fsItalic | True |
| StyleLookup | ScoreStyle |
| Text | Score |
Label2
| プロパティ | 値 |
| Name | ScoreLabel |
| Font.Family | Arial |
| Font.Size | 16 |
| Font.Style.fsBold | True |
| Font.Style.fsItalic | True |
| StyleLookup | ScoreStyle |
| Text | 0 |
| TextAlign | taTrailing |
ScoreLabelでは、表示されるテキストを右詰に表示するため、TextAlignプロパティをtaTrailingに設定しています。
図10 完成したユーザーインターフェイス
いよいよコーディングへ
これでユーザーインターフェイスの設計は終わりです。IDEのメニューより、［ファイル］-［すべて保存］を選択して、ここまでの内容を保存しておきます。
今回は、いくつかスタイルを修正し、カスタムスタイルとして登録しました。カスタムスタイルをさらに変更すれば、ゲームの外観をいろいろとカスタマイズすることもできます。
さて、次回はいよいよゲームのためのコーディングを行っていきましょう。
