それでは、レイアウト
FireMonkey HDアプリケーションの作成
新規にプロジェクトを作成します。メインメニューから［ファイル］-［新規作成］-［FireMonkey HD アプリケーション］-［C++Builder］を選択すると、FireMonkey HDアプリケーションが作成されます。表示されたフォームのプロパティを次のように設定してください。
| プロパティ | 値 |
| Name | GameForm |
| Caption | Racket Game |
このフォーム（ユニット）は、GameUnitという名前で保存します。プロジェクト名は、RGameです。
図2を参考にPanelを配置してください。上部のPanelは、レイアウト用のためデフォルトの名前で十分ですが、下部のPanelはコーディングでも使用するので、わかりやすい名前をつけておきます。
プロパティを次のように設定してください。
| プロパティ | 値 |
| Name | Panel1 |
| Align | alTop |
| プロパティ | 値 |
| Name | Court |
| Align | alClient |
コートとなるパネルの色は、黒（ちょっとレトロなゲームの感じですね）かグリーン（芝生のイメージです）に変えたいところです。VCLだと、Colorプロパティを使って個別に変更していましたが、FireMonkeyでは、スタイルというもう少し洗練された方式を採用しています。
スタイルは、一度定義してしまえば、他のコンポーネントにも割り当てられます。同じような設定を何度もしなくて済むわけです。一度設計したアプリケーションのルックアンドフィールも、スタイルを適用するだけで、簡単に変更できるようになっているのです。
カスタムスタイルの定義
設計画面上でCourtパネルをマウスでクリックし、右ボタンを押して、表示されたポップアップメニューから［カスタムスタイルの編集］を選択します。
すると、スタイルエディタが表示されます。エディタの右側にはリストがありますが、ここに、TRectangleがあります。TRectangleは四角形を表すコンポーネントですが、このコンポーネントの外観を定義することで、Panelのスタイルを設定します。
ここでは、色の設定を行うだけなので、オブジェクトインスペクタで、Fillプロパティを指定します。Fillプロパティの横にある＋印をクリックすると、サブプロパティが表示されます。ここから、Colorを選択し、値列でBlackを選択します。
作成した黒い色のスタイルを他でも使用できるように、StyleNameプロパティを分かりやすい名前に変更しておきます。
| プロパティ | 値 |
| Name | BlackPanel |
スタイルエディタの［適用して閉じる］ボタンを押し、設計画面に戻ります。設計画面にStyleBookコンポーネントのアイコンが表示されていることが分かります。オブジェクトインスペクタでGameFormのプロパティを見ると、StyleBookプロパティに追加されたStyleBookコンポーネントが設定されています。
作成したスタイルをCourtパネルに適用するには、Courtパネルを選択し、オブジェクトインスペクタのStyleLookupプロパティを変更します。
| プロパティ | 値 |
| StyleLookup | BlackPanel |
