手順 1: プロジェクトの作成とフォームへのテーブルの追加

絵合わせゲームの作成における最初の手順は、プロジェクトの作成とフォームへのテーブルの追加です。テーブルはアイコンを 4 x 4 のグリッドに整列させるために便利です。いくつかのプロパティの設定も行ってゲーム ボードの見栄えが良くなるようにします。

プロジェクトを作成し、フォームにテーブルを追加するには

1. メニュー バーで [ファイル]、[新規]、[プロジェクト] の順にクリックします。

2. Visual Studio Express を使用していない場合は、最初にプログラミング言語を選択する必要があります。[インストールされたテンプレート] ボックスの一覧で、[Visual C#] または [Visual Basic] を選択します。

3. プロジェクト テンプレートの一覧で [Windows フォーム アプリケーション] テンプレートを選択し、プロジェクトに「MatchingGame」という名前を付けて、[OK] をクリックします。

4. [プロパティ] ウィンドウで、次のフォーム プロパティを設定します。

   1. フォームの [Text] プロパティを [Form1] から [Matching Game] に変更します。このテキストはゲーム ウィンドウの上部に表示されます。

   2. フォームのサイズとして幅を 550 ピクセル、高さを 550 ピクセルに設定します。そのためには、[Size] プロパティを [550, 550] に設定します。または、統合開発環境 (IDE) の右下隅に適切なサイズが表示されるまで、フォームの隅をドラッグします。

5. IDE の左側にある [ツール ボックス] のタブをクリックして、ツール ボックスを表示します。

6. ツール ボックスの [コンテナー] カテゴリから TableLayoutPanel コントロールをフォームにドラッグし、次のプロパティを設定します。

   1. [BackColor] プロパティを [CornflowerBlue] に設定します。そのためには、[プロパティ] ウィンドウで [BackColor] プロパティに横にあるドロップダウン矢印をクリックして、 [BackColor] ダイアログ ボックスを開きます。次に、[BackColor] ダイアログ ボックスの [Web] タブをクリックして、使用できる色の名前の一覧を表示します。

      [!メモ]

      色はアルファベット順に並んでいません。CornflowerBlue は一覧の下部にあります。

   2. プロパティの横のドロップダウン ボタンをクリックし、大きな中央ボタンをクリックして、[Dock] プロパティを [Fill] に設定します。これによりテーブルがフォーム全体に広がって表示されます。

   3. [CellBorderStyle] プロパティを [Inset] に設定します。これによりボード上の各セル間に視覚的な境界線が表示されます。

   4. TableLayoutPanel の右上隅の三角形のボタンをクリックして、そのタスク メニューを表示します。

   5. タスク メニューで、[行の追加] を 2 回クリックして行を 2 つ追加し、[列の追加] を 2 回クリックして列を 2 つ追加します。

   6. タスク メニューで、[行および列の編集] タスクをクリックして、[列と行のスタイル] ウィンドウを開きます。各列を選択し、[パーセント] をクリックして、各列の幅を全体の幅の 25% に設定します。ウィンドウの上部にあるドロップダウン ボックスから [行] を選択し、各行の高さを 25% に設定します。完了したら、[OK] をクリックします。

   これで、TableLayoutPanel に 16 個の同じサイズの四角形のセルで構成された 4 x 4 のグリッドができました。これらの行と列は後でアイコン画像が表示される場所になります。

7. フォーム エディターで TableLayoutPanel が選択されていることを確認します。これは、[プロパティ] ウィンドウの上部に [tableLayoutPanel1] が表示されていることでわかります。表示されていない場合は、TableLayoutPanel をフォームで選択するか、[プロパティ] ウィンドウの上部にあるドロップダウン コントロールで選択します。

   TableLayoutPanel コントロールが選択されている状態で、ツール ボックスを開き、Label コントロール ([コモン コントロール] カテゴリ内) を TableLayoutPanel コントロールの左上のセルに追加します。これで、IDE で Label コントロールが選択されました。このコントロールの次のプロパティを設定します。

   1. ラベルの [BackColor] プロパティが [CornflowerBlue] に設定されていることを確認します。

   2. [AutoSize] プロパティを [False] に設定します。

   3. [Dock] プロパティを [Fill] に設定します。

   4. プロパティの横のドロップダウン ボタンをクリックし、中央ボタンをクリックして、[TextAlign] プロパティを [MiddleCenter] に設定します。これによりアイコンはセルの中央に表示されます。

   5. [Font] プロパティをクリックします。省略記号 (…) ボタンが表示されます。

   6. 省略記号ボタンをクリックし、[Font] を [Webdings] に、[Font Style] を [Bold] に、[Size] を [72] に設定します。

   7. ラベルの [Text] プロパティを c という文字に設定します。

      これで、TableLayoutPanel の左上のセルに、青色の背景の中央に黒いボックスが配置されました。

      [!メモ]

      Webdings フォントはアイコンのフォントであり、Windows オペレーティング システムに付属しています。この絵合わせゲームでは、プレーヤーはアイコンのペアを一致させる必要があるため、このフォントを使用して、一致するアイコンを表示します。[Text] プロパティに c を設定する代わりに、さまざまな文字を入力してどのようなアイコンが表示されるのか確認してみてください。感嘆符はクモ、大文字の N は目、コンマはトウガラシです。

8. Label コントロールを選択し、TableLayoutPanel 内の次のセルにコピーします (Ctrl + C キーを押すか、メニュー バーで [編集]、[コピー] の順にクリックします)。次に、これを貼り付けます (Ctrl + V キーを押すか、メニュー バーで [編集]、[貼り付け] の順にクリックします)。最初のラベルのコピーが TableLayoutPanel の 2 つ目のセルに表示されます。再度貼り付けると、3 つ目のセルにまた別のラベルが表示されます。すべてのセルが埋まるまで、Label コントロールの貼り付け操作を続けます。

   [!メモ]

   多く貼り付けすぎた場合は、IDE によって TableLayoutPanel に新しい行が追加され、新しいラベル コントロールを追加する場所が作成されます。これは、元に戻すことができます。新しいセルを削除するには、Ctrl + Z キーを押すか、メニュー バーで [編集]、[元に戻す] の順にクリックします。

   これで、フォームがレイアウトされました。結果は次の図のようになります。

   絵合わせゲームの初期のフォーム

   

続行または確認するには

• チュートリアルの次の手順に進むには、「手順 2: Random オブジェクトおよびアイコンのリストの追加」を参照してください。

• 概要のトピックに戻るには、「チュートリアル 3: 絵合わせゲームの作成」を参照してください。