ゆくすぃごきげんよう、Budding Lab.編集部のゆくすぃです！
「鬼武者」は約20年ぶり、「大神」は約18年ぶりの完全新作ということで、発売日が待ち遠しくてたまりません。
ゲームが大好きな皆さんなら、一度は「自分でゲームを作ってみたい！」と、思ったことがあるのではないでしょうか？
本連載では、ゲーム開発初心者のゆくすぃが、基礎的なスクリプトだけを使って、超入門・パズルゲームの作り方を解説します！
本記事は、第3回「ゲーム画面の作成編」です。
プログラミングの専門知識がなくたって、画像や音楽作成アプリが使えなくたって、案外、ゲームって作れるものです。興味が湧いたなら、ぜひ挑戦してみてください！
2D脱出ゲームの作り方も解説しています。ご興味があれば、ぜひご覧ください！
ゲーム画面の構成を考える
今回のゲームは･･･
- ゲーム画面内をクリック（タップ）して、隠されたピース（5枚）を入手する。
- 入手したピース（5枚）の中から、正しい4枚を選んで正しい位置に置く。
･･･という内容です。
なので、ゲーム画面には、クリック（タップ）するとピースを入手できるゲームオブジェクト（UI：Image）を5つ配置します（下図左：黄色のハイライト）。このうち「2」と「5」以外には画像を設定せず、透明のままにしておきます。こうすることで、あたかも箱や家具の中からピースを取り出したように見せられます。
インベントリには、入手後に表示される5つのピース（UI：Image）を配置します。
さらに、インベントリからドラッグしたピースをスナップさせる場所（＝スナップポイント）にも、透明なゲームオブジェクト（GameObject）を4つ配置します（下図右：水色のハイライト）。5つのピースのうち1つはダミーなので、インベントリから取り出したピースを元の位置へ戻せるよう、インベントリ側にもスナップポイントを用意しておきます。
では早速、このイメージ通りにゲーム画面を作っていきましょう！
準備：Imagesフォルダを作って画像を追加する
画像・音・フォントなどのゲーム作りに使われるアセットは、すべて Assetsフォルダに保存します。
まずは、Assetsフォルダの中にImagesフォルダを作成し、そこに画像を追加しましょう。準備した画像ファイルを、Projectウインドウの右側（フォルダの内容が表示されるエリア）にドラッグ＆ドロップするだけで簡単に追加できます。
Assetsフォルダ ＞ Imagesフォルダに画像を追加
ゲームパネル（GamePanel）を作る
ゲームの背景となる「GamePanel」を作ります。
ProjectウインドウのScenesフォルダから「シーン：GameScene」を選んで、ダブルクリックしてください。「シーン：GameScene」が開き、編集可能な状態となります。
Hierarchyウインドウ（ヒエラルキーウインドウ）の左上にある「+」をクリックすると、コンテキストメニューが表示されます。その中から「UI」を選び、追加で展開されるメニューから「Panel（パネル）」を選んでクリックします。
すると、Hierarchyウインドウに新しいパネルが追加されるので、名前を入力して確定します。今回は「GamePanel」としました。
※「パネル：ParentPanel」作成と同時に「Canvas」と「EventSystem」が追加されます。これらは、パネルなどのUIを使う時に必ず一つ必要なものなので、削除しないでください。
「GamePanel」の位置とサイズは下図の通りです。
Hierarchyウインドウで「GamePanel」を選択したまま、InspecctorウインドウのImageコンポーネントにあるSource Imageプロパティの赤丸部分をクリックします。
すると、Imagesフォルダに保存した画像ファイルが表示されるので、ゲーム画面の背景に使いたいものを選んでクリックしましょう。最後に「Set Native Size」をクリックします。
ゲームの背景となる「GamePanel」が完成しました。
インベントリパネル（InventoryPanel）を作る
同じ要領で、入手したピースが入る「InventoryPanel」を作ります。
Hierarchyウインドウに新しいパネルを追加し、「InventoryPanel」と名前を入力して確定します。「InventoryPanel」の位置とサイズは下図の通りです。
「InventoryPanel」のImageコンポーネントにあるSource Imageプロパティで、インベントリの背景に使いたい画像を選びます。最後に「Set Native Size」をクリックすると「InventoryPanel」は完成です。
入手用のピース（UI：Image）を配置する
「GamePanel」上に、クリック（タップ）するとピースを入手できるゲームオブジェクト（UI：Image）を配置していきます。
見えているピースを配置する
例として「5」のピースを配置してみましょう。
「GamePanel」の上で右クリックし、コンテキストメニューが表示されたら、その中から「UI」を選び、追加で展開されるメニューから「Image（イメージ）」を選んでクリックします。
すると、HierarchyウインドウにImageが追加されるので、名前を入力して確定します。今回は「bg0_card0」としました。
Hierarchyウインドウで「bg0_card0」を選択したまま、InspectorウインドウのImageコンポーネントにあるSource Imageプロパティの赤丸部分をクリックします。
すると、Imagesフォルダに保存した画像ファイルが表示されるので、「5」用に準備したものを選び、最後に「Set Native Size」をクリックします。「5」の位置とサイズは下図の通りです。
「5」のピースを配置できました。
同じ要領で「GamePanel」の上に「2」を配置しましょう。「東・西・風・北・南」のピースは「InventoryPanel」の上に乗せます。
見えないピースを配置する
例として「4」のピースを配置してみます。
「GamePanel」の上に新しいImageを追加し、名前を入力して確定します。今回は「bg0_card3」としました。画像は設定しないので、ImageコンポーネントにあるSource Imageプロパティは「None（Sprite）」のままにしておきます。
ImageコンポーネントにあるColorプロパティの赤枠部分をクリックすると、Colorウインドウが開くので「A（Alpha）：透過度」を「0」に修正します。
これで、透明な「4」のピースを配置できました。
※画像を指定せず、透過度も「0」にするなら「UI：Image」である必要はなさそうですが、後でButtonコンポーネントを持たせる都合上、初めからImageコンポーネントを持っているImageが使いやすいです。
同じ要領で「GamePanel」の上に「1・3」のピースを配置します。
スナップポイント（GameObject）を配置する
「GamePanel」上に、インベントリからドラッグしたピースをスナップさせる場所（＝スナップポイント）を配置していきます。これには空のゲームオブジェクト（＝Create Empty）を使います。
例として「1」のピースを配置してみます。
「GamePanel」の上で右クリックし、コンテキストメニューが表示されたら、その中から「Create Empty」を選んでクリックします。
すると、HierarchyウインドウにGameObjectが追加されるので、名前を入力して確定します。今回は「Snap0」としました。「1」の位置とサイズは下図の通りです。
同じ要領で「GamePanel」の上に「2・3・4」を配置しましょう。「5・6・7・8・9」のスナップポイントは「InventoryPanel」の上に乗せます。
ゆくすぃ以上で、画面作りは完了です！次回からは「Microsoft Visual Studio」を使ってスクリプトを書いていきます！
まとめ
今回の記事では、ゲーム画面の作成について解説しました。
UI ＞Image で作られるゲームオブジェクト（＝Image）と、Create Empty で作られるゲームオブジェクト（＝GameObject）の使い分けが、現時点ではわかりづらいかもしれません･･･が、コツコツと作業を進めるうちに、だんだんとわかってくることなので安心してください。
次回は、【第4回】超入門！Unityで診断ゲームを作ろう！「ピースの入手とシーンの切替編」です。
以上、最後まで読んでいただき有難うございました！
