Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

C++Builder 10.2 TokyoでレトロなラケットゲームをiOSで再構築してみる

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2017/12/21 14:00

目次

ゲームで使うアイテムを用意する

ラケットを配置する

 ラケットを配置します。ラケットは、Labelコンポーネントです。ゲームに使用するラケットは、Courtパネルの上に、予備のラケットは、RacketPanel上に配置します。

 Labelコンポーネントのデフォルト文字は黒色(背景は透過)なので、黒のCourtパネルの上に置くと、どこに配置したか分かりにくくなっています。

 配置したLabelを選択した状態で、マウスの右ボタンをクリックし、「カスタムスタイルの編集」を選択して、スタイルエディタに切り替えます。

 画面中央部のデザイン部にTRectangleを配置し、プロパティを設定します。

図9 ラケット用のスタイル定義
図9 ラケット用のスタイル定義
TRectangleのプロパティ
プロパティ
Aligen Client
Fill.Color #FFFFC107
Text  

 このLabelスタイルの設定を先ほど配置した5つのTLabelに設定していきます。

 ついでにLabel1から5までのプロパティ設定も行います。

Label1のプロパティ
プロパティ
Name Racket
Height 8
Width 120
Anchors [akLeft,akBottom]
Position.Y 400
StyleLookup Label1Style1
Text  

 メイン操作するラケットです。

Label2プロパティ
プロパティ
Name Racket1
Height 8
Width 50
Position (10,16)
StyleLookup Label1Style1
Text  
Label3のプロパティ
プロパティ
Name Racket2
Height 8
Width 50
Position (10,72)
StyleLookup Label1Style1
Text  
Label4のプロパティ
プロパティ
Name Racket3
Height 8
Width 50
Position (10,128)
StyleLookup Label1Style1
Text  
Label5のプロパティ
プロパティ
Name Racket4
Height 8
Width 50
Position (10,184)
StyleLookup Label1Style1
Text  

 すべてのラベルテキストは空にしておきます。以上でラケットの配置は終了です。

ボールを配置

 ボールもLabelを用いて表現します。Courtパネル上にLabelを1つ配置します。ボールの色はラケットとは別の色にしたいので、別のスタイルを定義します。作成方法は先ほどと同様です。今度は、スタイル名をBallLabelとしたスタイルを作成し、Fill.ColorをRedに指定します。

ボールLabelのプロパティ
プロパティ
Name Ball
Height 8
Width 8
StyleLookup BallStyle1
Text  

 ボールのラベルテキストも同じく空にしてください。

スコア表示

 スコアの表示部分にもLabelを使います。スコアは、ScorePanel上に表示します。2つのLabelをScorePanel上に配置します(このLabelコンポーネントも、黒のScorePanelパネルの上に置くと、どこに配置したか分かりにくくなりますので注意してください)。

Label1のプロパティ
プロパティ
Name ScoreTitle
Aligen Left
Margins.Left 10
Margins.Right 10
TextSettings.FontColor White
TextSettings.Font.Size 16
Width 95
Label2のプロパティ
プロパティ
Name ScoreLabel
Aligen Client
Margins.Left 10
Margins.Right 10
TextSettings.FontColor White
TextSettings.Font.Size 16
Text 0
HorzAlign Trailing

 このScoreLabel(TLabel)にスコア点が表示されますので、初期の文字は0が入っています。

 これでデザインは完了です。ただ、スタイルについては少し注意が必要です。FireMonkeyのスタイルは、各OSごとに定義することができます。通常、各OSでデフォルトのスタイルが用意されており、WindowsならWindowsの、iOSならiOSの外観になるようにスタイルが切り替わります。先ほどから作成していたカスタムスタイルは、実はWindowsプラットフォーム向けに行っていたので、iOSやAndroidで表示しようとすると、それらのデフォルトスタイルが適用され、作成したStyleBook1のスタイルは適用されません。

図10 StyleBook
図10 StyleBook

 StyleBook1を詳しく見てみると、DefaultとWindows 10 Desktopの2つが存在します。先ほどまで作成していたカスタムスタイルは、Windows 10 Desktopに対して行っていたので、ここでは、「0 - Default」を削除しWindows 10 Desktopがデフォルトになるようにします。

 アプリケーションによっては、OS標準の外観にしたい場合と、アプリ固有の外観にしたい場合(特にゲームなど)があるでしょう。FireMonkeyの場合、デフォルトスタイルをどのように定義するかで、外観を自由にコントロールできるので便利です。

 画面中央上にある「スタイル」ドロップダウンリストで、スタイルをiOSに切り替えてみてください。同じスタイルが適用されていることが確認できます。

図11 スタイルの切り替え
図11 スタイルの切り替え

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • EDN編集部(イーディーエヌ編集部)

    エンバカデロ・デベロッパーネットワーク(EDN)は、ソフトウェア開発者とデータベース技術者のための技術情報サイトです。Delphi、C++Builderをはじめとする開発ツールやER/Studioなどのデータベースツールに関連する技術記事、ビデオなどを提供しています。EDN編集部は、EDN記事と連携...

バックナンバー

連載:EDN CodeZine出張所

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5