【第2回】超入門！Unityでパズルゲームを作ろう！「タイトル画面の作成編」

ゲームが大好きな皆さんなら、一度は「自分でゲームを作ってみたい！」と、思ったことがあるのではないでしょうか？

本連載では、ゲーム開発初心者のゆくすぃが、基礎的なスクリプトだけを使って、超入門・パズルゲームの作り方を解説します！

本記事は、第2回「タイトル画面の作成編」です。

プログラミングの専門知識がなくたって、画像や音楽作成アプリが使えなくたって、案外、ゲームって作れるものです。興味が湧いたなら、ぜひ挑戦してみてください！

  2D脱出ゲームの作り方も解説しています。ご興味があれば、ぜひご覧ください！

プロジェクトを作成する

Unityでゲームを作るには、まず「プロジェクト」を新規作成する必要があります。
エクセルやパワーポイントで、ブックやプレゼンテーションを新規作成するのと同じです。

1．Unity Hubを起動し、2．開いた画面で「プロジェクト」を選び「＋新しいプロジェクト」をクリックします。

Unity Hub画面

すると、次のような画面（＝新しいプロジェクト作成画面）が開くので、新しいプロジェクトの設定を行います。

新しいプロジェクト作成画面

3．エディターのバージョンを選択します。今回は「6000.2.7f2」を選びました。

4．2Dパズルゲームを制作するので、テンプレートで「Universal 2D」を選択します。

5．Unity組織は、Unity IDの作成時に自動的に作成されます。デフォルトでは、アカウントのユーザー名と同じになります。複数のUnity組織がある場合は、任意の組織を選択します。

6．プロジェクト名は、ゲームを保存するフォルダ名にもなるので、ゲームタイトルにしておくとわかりやすいです。今回は「SampleGame04」と入力します。

7．任意の保存場所を指定します。

8．「Unity Version Control」は、複数人で同じプロジェクトを進める際に役立つ履歴管理ツールです。個人でゲームを制作する場合は、必ずしも有効化する必要はありません。

9．最後に「＋プロジェクトを作成」をクリックすると、指定したフォルダにプロジェクトが作成され、Unity Hub画面に戻ります。

「プロジェクト：SampleGame04」が作成される

ブラウザゲーム用に設定を行う

まずは、ブラウザゲーム用にビルドするための設定を行います。

Unity Hub画面で、プロジェクトをクリックして開きましょう。すると、次のような画面（＝エディターウインドウ）が開きます。

Unityのエディターウインドウ

１．ツールバーの「File」から「Build Profiles」を選んでクリックすると、以下のような画面（＝Build Profilesウインドウ）が開きます。

Build Profilesウインドウ

２．Platformsから「Web」を選択して、３．「Switch Platform」ボタンをクリックします。設定が終わったら、右上の「×」をクリックして、Build Profilesウインドウを閉じます。

ゲームの画面サイズを設定する

次に、ゲームの画面サイズを設定します。

ゲームビューの上部にある、ゲームビューコントロールバーでGameタブをクリックします。
デフォルトでは「Free Aspect」と表示されている部分（＝Aspect Ratio：アスペクト比）をクリックすると、画像のようなドロップダウンリストが表示されます。

ゲームビューのアスペクト比リスト

「VSync（Game view only）」にチェックを入れます。これは、ゲームビューでゲームを実行した際に、Unityがゲームを出力する速度とモニターの更新速度を合わせて、映像の表示がおかしくならないように調整する機能です。

アスペクト比は「1080px＊1920px」を選択します。

ゲームの画面サイズが「1080×1920」に設定される

シーンを作成する

ゲームを制作する環境が整ったので、いよいよ、シーンから作っていきましょう！

シーンについては、以下記事の「プロジェクト、シーンとは？」を参考にしてみてください。

今回は以下のように3つのシーンを作成します。

では、満を持して、Unityのエディターウインドウに戻りましょう。

Projectウインドウ（プロジェクトウインドウ）に「Assetsフォルダ（アセットフォルダ）」があり、その中に「Scenesフォルダ（シーンフォルダ）」が収まっています。シーンや画像・音・フォントなどのゲーム作りに使われるアセットは、すべてこの Assetsフォルダに保存します。

Scenesフォルダは Assetsフォルダの中にある

まずは、「シーン：TitleScene」を作ってみましょう。
Projectウインドウの中で右クリックすると、コンテキストメニューが表示されます。その中から「Create」を選び、追加で展開されるメニューの中から「Scene」を選んでクリックします。

Scenesフォルダを開き、Projectウィンドウの中で右クリック

すると、新しいシーンが追加されるので、名前に「TitleScene」と入力して確定します。

「シーン：TitleScene」が作成される

同様に「シーン：GameScene」と「シーン：ClearScene」も作成しましょう。

TitleScene / GameScene / ClearScene ･･･ 3つのシーンを作成

タイトル画面を作成する

まずは、これから作成する画面の構成を掴んでおきましょう。タイトル画面は、以下のようなレイヤー構造になっています。

タイトル画面のレイヤー構造

パネルを作成する

早速、タイトル画面を作っていきます。
ProjectウインドウのScenesフォルダから「シーン：TitleScene」を選んで、ダブルクリックしてください。「シーン：TitleScene」が開き、編集可能な状態となります。
※Sceneフォルダに最初から入っている「シーン：SampleScene」は、この時点で削除して構いません。

どのシーンが開いているのかは、プロジェクト名の横で確認できる

Hierarchyウインドウ（ヒエラルキーウインドウ）の左上にある「+」をクリックすると、コンテキストメニューが表示されます。その中から「UI」を選び、追加で展開されるメニューの中から「Panel（パネル）」を選んでクリックします。

すると、Hierarchyウインドウに新しいパネルが追加されるので、名前を入力して確定します。今回は「TitlePanel」としました。
※「パネル：TitlePanel」作成と同時に「Canvas」と「EventSystem」が追加されます。これらは、パネルなどのUIを使う時に必ず一つ必要なものなので、削除しないでください。

「パネル：TitlePanel」が作成される

パネルの色を変える

HierarchyウインドウでTitlePanelを選択すると、エディターウインドウ右側にInspectorウインドウ（インスペクターウインドウ）が表示されます。このInspectorウインドウを使って、TitlePanelの色を変更します。

Inspectorウインドウの Imageコンポーネントで色を変更する

InspectorウインドウのImageコンポーネントにあるColorプロパティをクリックすると、Colorウインドウが開きます。カラーピッカーから色を選ぶか、カラーコードを指定して色を変更しましょう。
「A（Alpha）：透過度」が「255」以外の数値になっている場合は「255」に修正します。

TitlePanelの色を「#EC49D8」に変更した

ゲームタイトル（＝テキスト）を追加する

TextMeshProを日本語フォントに対応させる

パネル上にゲームタイトル（＝テキスト）を追加する際、「TextMeshPro」というUIを使いたいのですが、これがデフォルトでは日本語フォントに対応していません。そこで、まずは以下記事を参考にして、日本語を使えるように設定します。
参考URL：初心者向け！TextMesh Proで日本語を使おう（Unity Learning Materials）

ゲームタイトル（Text – TextMeshPro）を追加する

では、早速、TitlePanel上にTextMeshProを使ってゲームタイトルを追加しましょう。

TitlePanel上にゲームタイトルを載せたいので、TitlePanelを選択した状態にしておきます。
TitlePanelの上で右クリックすると、コンテキストメニューが表示されます。その中から「UI」を選び、追加で展開されるメニューの中から「Text – TextMeshPro」を選んでクリックします。

すると、Hierarchyウインドウに新しいTextが追加されるので、名前を入力して確定します。今回は「TitleText」としました。

TitlePanelパネルの上に「テキスト：TitleText」が作成される（親子関係）

HierarchyウインドウでTitleTextを選択すると、エディターウインドウ右側にInspectorウインドウが表示されます。このInspectorウインドウを使って、TitleTextの表示テキストやフォントサイズ・フォント色、などを変更します。

InspectorウインドウのTextMeshPro – Text（UI）コンポーネントで設定する

「ゲームタイトル：仲間外れはだぁれ？」が表示される

TitleTextの位置を変更したい場合は、InspecctorウインドウのRect Transformコンポーネントか、移動ツールを使って移動できます。

ゲームの説明文（Text – TextMeshPro）を追加する

TitleTextと同じように、TextMeshProを使ってゲームの説明文を追加します。

TitlePanelを選択した状態で右クリックし、コンテキストメニューから「UI ＞ Text – TextMeshPro」を選んでクリックします。Hierarchyウインドウに新しいTextが追加されるので、名前を入力して確定します。今回は「Explanation」としました。
表示テキストを入力し、フォントサイズやフォント色・位置などを調整します。

「Game Start」ボタンを追加する

最後に、ボタンを追加します。

Hierarchyウインドウの左上にある「+」をクリックすると、コンテキストメニューが表示されます。その中から「UI」を選び、追加で展開されるメニューの中から「Button – TextMeshPro」を選んでクリックします。

すると、Hierarchyウインドウに新しいButtonが追加されるので、名前を入力して確定します。今回は「GameStart」としました。

TitlePanelパネル上に「ボタン：GameStart」が作成される（親子関係）

Hierarchyウインドウで「ボタン：GameStart」を選択すると、エディターウインドウ右側にInspectorウインドウが表示されます。まずは、このInspectorウインドウを使って「ボタン：GameStart」の土台部分の色を変更します。

GameStartの色を「#D50E7F」に変更した

次に、Hierarchyウインドウで「ボタン：GameStart」のテキスト部分にあたる「Text（TMP）」をクリックします。すると、エディターウインドウ右側にInspectorウインドウが表示されるので、TextMeshProコンポーネントで表示テキストやフォントサイズ・フォント色、などを設定します。

「ボタン：GameStart」のテキストが設定され、タイトル画面が完成！

クリア画面を作ってみました！

プロジェクトを保存する

プロジェクトを閉じる前に、Unityで行った作業内容を保存しましょう。

Unity画面上部の「File」をクリックして表示されるメニューから「Save Project」をクリックします。

まとめ

今回の記事では、タイトル画面の作成について解説しました。
画面サイズの設定や日本語対応など、ゲーム制作の下準備に少し時間がかかりましたね。毎回同じ作業を繰り返すのは手間なので、あらかじめ、下準備を済ませたテンプレートプロジェクトを作っておくと便利かもしれません。

次回は、【第3回】超入門！Unityでパズルゲームを作ろう！「ゲーム画面の作成編」です。

以上、最後まで読んでいただき有難うございました！