ボタンのスタイルを定義する
ボタンのカスタムスタイル
設計画面上で SpeedButton1をマウスでクリックし、右ボタンを押して、表示されたポップアップメニューから［カスタムスタイルの編集］を選択します。
スタイルエディタが表示されます。右側のスタイルリストを見ると、先ほど設定したBlackPanelの下に SpeedButton1Style1という新しいスタイルが追加されています。
リスト上のSpeedButton1Style1を見ると、左側に三角の印が付いています。これをクリックすると、スタイルを構成する複数のコンポーネントが表示されます。
SpeedButton1Style1には、すでに初期スタイルが設定されており、「マウスがこのコンポーネントの上に来た時だけ色を変更する」ようになっています。今回は、最初から色を表示させたいので、この設定を削除し、新たに必要な設定を加えます。
既定のスタイルを変更する
削除するのはTFloatAnimationです。これが、マウスが上に来た時だけ色を変更するという操作を行っていたアニメーション効果です。リスト中のTFloatAnimationの右側の×印をクリックして、スタイルから削除します。
次に、リスト中のbackground: TRectangleをクリックし、オブジェクトインスペクタ上で、不透明度を表すOpacityプロパティの値を0.0001から1に変更します。
| プロパティ | 値 |
| Opacity | 1 |
これでスタイルエディタ上に表示されているイメージにも色が反映されます。このスタイルの名前を SpButtonに変更します。
| プロパティ | 値 |
| StyleName | SpButton |
［適用して閉じる］をクリックして、スタイルエディタから設計画面に戻ります。
SpeedButton1とSpeedButton2のプロパティを変更し、設定したスタイルを適用します。
| プロパティ | 値 |
| Name | StartButton |
| StyleLookup | SpButton |
| Text | START |
| Font.Style.fsBold | True |
| プロパティ | 値 |
| Name | StopButton |
| Enabled | False |
| StyleLookup | SpButton |
| Text | STOP |
| Font.Style.fsBold | True |
StopButtonは、ゲームを行っている最中のみ有効なため、初期段階でEnabledプロパティはFalseです。
試しに動かしてみる
さて、ここまで作ったところで、いったんプロジェクトを保存しておきましょう。
ここまででは、アプリケーションに特に動きはありませんが、設計したフォームを実際に実行してみることはできます。F9ボタンを押すと、アプリケーションがビルドされ、作りかけのゲームが起動します。
マウスを［START］ボタンの上に移動してみてください。ボタンの色が変化しますね。
これは、SpeedButtonのスタイルを設定したときに残しておいたアニメーション効果によるものです。では、次回はラケットを配置して、ゲームらしくしていきましょう。
