C++Builder XE2＋FireMonkeyで昔のラケットゲームを再構築してみる（1）

15年前の入門書の課題を、最新の開発環境を使って再挑戦

ボタンのスタイルを定義する

ボタンのカスタムスタイル

　設計画面上で SpeedButton1をマウスでクリックし、右ボタンを押して、表示されたポップアップメニューから［カスタムスタイルの編集］を選択します。

　スタイルエディタが表示されます。右側のスタイルリストを見ると、先ほど設定したBlackPanelの下に SpeedButton1Style1という新しいスタイルが追加されています。

　リスト上のSpeedButton1Style1を見ると、左側に三角の印が付いています。これをクリックすると、スタイルを構成する複数のコンポーネントが表示されます。

図8　SpeedButton1Style1のスタイル

　SpeedButton1Style1には、すでに初期スタイルが設定されており、「マウスがこのコンポーネントの上に来た時だけ色を変更する」ようになっています。今回は、最初から色を表示させたいので、この設定を削除し、新たに必要な設定を加えます。

既定のスタイルを変更する

　削除するのはTFloatAnimationです。これが、マウスが上に来た時だけ色を変更するという操作を行っていたアニメーション効果です。リスト中のTFloatAnimationの右側の×印をクリックして、スタイルから削除します。

　次に、リスト中のbackground: TRectangleをクリックし、オブジェクトインスペクタ上で、不透明度を表すOpacityプロパティの値を0.0001から1に変更します。

TRectangle

プロパティ	値
Opacity	1

　これでスタイルエディタ上に表示されているイメージにも色が反映されます。このスタイルの名前を SpButtonに変更します。

SpeedButton1Style1

プロパティ	値
StyleName	SpButton

［適用して閉じる］をクリックして、スタイルエディタから設計画面に戻ります。

　SpeedButton1とSpeedButton2のプロパティを変更し、設定したスタイルを適用します。

SpeedButton1

プロパティ	値
Name	StartButton
StyleLookup	SpButton
Text	START
Font.Style.fsBold	True

SpeedButton2

プロパティ	値
Name	StopButton
Enabled	False
StyleLookup	SpButton
Text	STOP
Font.Style.fsBold	True

　StopButtonは、ゲームを行っている最中のみ有効なため、初期段階でEnabledプロパティはFalseです。

図9　SpeedButtonのプロパティ設定

試しに動かしてみる

　さて、ここまで作ったところで、いったんプロジェクトを保存しておきましょう。

　ここまででは、アプリケーションに特に動きはありませんが、設計したフォームを実際に実行してみることはできます。F9ボタンを押すと、アプリケーションがビルドされ、作りかけのゲームが起動します。

　マウスを［START］ボタンの上に移動してみてください。ボタンの色が変化しますね。

図10　とりあえず実行してみる

　これは、SpeedButtonのスタイルを設定したときに残しておいたアニメーション効果によるものです。では、次回はラケットを配置して、ゲームらしくしていきましょう。