【Unity ゲーム制作】神経衰弱ゲームを作ろう！〜その１
スポンサーリンク
今回はUnityを使用して簡単な神経衰弱ゲームを作成しようと思います！
1 . プロジェクトを立ち上げよう！
Unity を起動して プロジェクトを作成しましょう。
今回は神経衰弱ですのね「MemoryGame」と命名しました
プロジェクトが生成されるとこのような画面が開くと思います。
初期は「SampleScene」が開かれているので、新たに「Start」と「Game」シーンを作成してください。
2 . 神経衰弱をするフィールドを作成しよう！
ここからは先ほど作成した「Game」シーン内に作成します。
今回は2Dゲームとして作成するため「Hierarchy」に Canvasを作成しましょう。
Canvasの作り方
Unity上の 「Hierarchy」上で右クリックを押します。
出てきた一覧から 「UI → Canvas」の項目を選択して左クリックをしてください。
するとHierarchy 上に Canvasが生成されます。
背景を作成しよう！
今度は作成した「Canvas」を選択した状態で右クリックを押して、「UI → Image」を選択して下さい。
この様な画面が表示されると思います。
初期設定だと、image のサイズが小さいため大きくしましょう。
Imageのサイズを大きくしよう！
右側にある「Inspector」のWidth と Height の値を変更することでサイズを変更できます。
Width は「横幅」 Height は 「高さ」を意味しています、
初期値は 100 に設定しているため、そちらを Width 「1920 」 Height 「1020」に変更しましょう。
変更するとImageが画面いっぱいに表示されると思います。
今回作成したImageは背景として使用するため名前を 「bg 」に変更しましょう。
Hierarchyの image をクリックすると、名前の部分が青く選択されます。
元の名前を削除して、新たに 「 bg 」と書き込みEnterキーを押しましょう。
これで名前が変更されました。
神経衰弱用のフィールドを作成しよう！
次はフィールド部分の作成に入ります。
神経衰弱の様なトランプゲームの作るにあたり「カードを床やテーブルに整列して並べる」図を表現する必要があります。
そのため、Unityの機能である 「GridLayoutGroup」を使用して表現して見ましょう！。
Canvasを選択して右クリック「UI → CreateEmpty」を選択します。
これは名前の通り座標以外何も備わっていないオブジェクトです。
このオブジェクトの名前を「 CardField 」に変更しましょう。
カード表記用のオブジェクトを作ろう！
少し脱線しますが GridLayoutGroup を使う前に表示する「カード」用のオブジェクトを作って起きましょう。
先ほど作成した「CardField」を選択して 右クリック 「 UI → Image」を選択します。
生成できたら Image の色を赤色に変えてみましょう。
Image の inspector の Color をクリックしましょう。
すると色を選択するダイアログが表示されます。
そのまま赤色を選択してみましょう。
するとUnity上のImageも赤色に変更されたと思います。
これでカード用のオブジェクトの準備が出来ました。
GridLayoutGroupをオブジェクトに追加する
「CardField」に 「GridLayoutGroup」を追加しましょう。
Inspector の一番下にある 「Add Component」をクリックします。
検索欄で 「 Grid」と検索すると画面に現れると思います。
Grid Layout Groupを選択すると、CardField オブジェクトに GridLayoutGroup が追加されました。
Grid Layout Group に付いては以下の記事を参考にしてください。
wojtek.hatenablog.com
Grid Layout Group の設定を変更
神経衰弱の様に「カードを整列して並べる」ことを表現するために設定を変更しましょう。
- Cell Size : X 200 Y 300 に変更
- Spacing : X 50 Y 50 に変更
- Child Alignment : 「Middle Center」に変更
- Constraint : 「Fixed Column Count」に変更
- Constraint Count 「 6 」に設定
Card Field に Content Size Fitter を追加
Grid Layout Group の後にもう一つのコンポーネントを追加しましょう。
AddComponent → 検索 → Content Size Fitter を選択
Content Size Fitter は子オブジェクトの大きさによって、アタッチされているオブジェクトのサイズを変更されます。
今回はカード枚数によって大きさを動的に変更できるようにするためにアタッチしました。
カードを増やしてみよう
それではGrid Layout Group が機能しているか試してみましょう。
「Card Field」の子オブジェクトになっている「image」の数を増やしてみましょう。
増やし方は 「Image」を選択してCntrol + D か、コピー → ペーストでも増加出来ます。
Grid Layout Group が機能している場、imageを増やすとこの様な状態になります。
image : 6枚
image : 12枚
image : 18枚
綺麗に整列されて表示されていると思います。
今回は外枠を作成しました。
次回からはスクリプトの作成に行きたいと思います！
