コンテンツへスキップ

【Unity】タイトル画面を作成する

最終更新日：2024年8月5日

概要

この記事で目指すヒエラルキーの構成は以下の通りです。

make_title_screen98
ゲームオブジェクト内容
Titleシーン
– Title Camera – メインカメラ
– TitleCanvas– キャンバス（画像やテキストを表示する）
– – TitleImage– – タイトルのロゴを表示する画像
– – StartButtonImage– – スタートボタンを表示する画像
– – – Text– – – スタートボタン上に表示するテキスト

手順

STEP ①：フォルダを作成する

下図のように、「プロジェクト」ウィンドウの Assets を右クリックして、「作成」⇒「フォルダー」を選択してフォルダを作成します。

make_folder_in_project

Assets の下に「Images」、さらにその下に「GameScreen」を追加して、次のようなフォルダ構成にします。

make_title_screen2

STEP ②：タイトル画面で使う画像を用意する

タイトルロゴ（TitleLogo.png）とボタンに使用する画像（Button.png）を用意します。下記の画像は、こちらからダウンロードできます。

make_title_screen3
make_title_screen4

タイトルロゴのテキスト（Fruits Hunter）を変えたい場合は、前述のフォルダと同じ場所にある「TitleLogo.psxprj」ファイルを編集してください。テキストだけでなく、色やフォントなども変更することができます。「PhotoScape X」という無料の画像編集ソフトを使いました。

action-game-1-1

STEP ③：プロジェクトに画像を追加する

STEP ① で作成した「GameScreen」に、STEP ② で用意した画像を追加します。ドラッグアンドドロップで画像を追加できます。

make_title_screen5

STEP ④：シーンを作成する

シーンは、ゲームの画面ごとに作成します。ゲームの画面には、タイトル画面、ゲームクリア画面、ゲームプレイ画面、メニュー画面など色々あると思います。

下図のように、「プロジェクト」ウィンドウの Scenes を右クリックして、「作成」⇒「シーン」を選択してシーンを作成します。

make_title_screen6

シーンの名前を「Title」とします。

make_title_screen7

作成したシーン「Title」をダブルクリックすると、ヒエラルキーに「Title」が表示されます。

make_title_screen8

STEP ⑤：タイトルロゴ用に画像オブジェクトを追加する

ヒエラルキー上の「Title」を右クリックして、「ゲームオブジェクト」⇒「UI」⇒「画像」を選択します。すると、「Canvas」と「Image」が追加されます。

make_title_screen9

追加された「Canvas」を選択し、「インスペクター」ウィンドウを表示します。「インスペクター」ウィンドウ一番上の名前を「TitleCanvas」に変更します。

STEP ⑥：タイトルロゴを設定する

追加された「Image」を選択し、「インスペクター」ウィンドウを表示します。下表のように設定します。

No項目入力内容
①名前「TitleImage」とする
②ソース画像Assets 内の「Images」⇒「GameScreen」フォルダ内の「TitleLogo」をドラッグアンドドロップする
③アスペクト比を保存チェックを入れる（画像の縦横比が維持されます）
make_title_screen11

設定ができたら、「シーン」ウィンドウを開いて画像のサイズや位置を調整します。

STEP ⑦：スタートボタン用の画像を設定する

ヒエラルキー上の「TitleCanvas」を右クリックして、「UI」⇒「画像」と選択し、「Image」を追加します。下表のように設定します。

No項目入力内容
①名前「StartButtonImage」とする
②ソース画像Assets 内の「Images」⇒「GameScreen」フォルダ内の「Button」をドラッグアンドドロップする
③アスペクト比を保存チェックを入れる
make_title_screen12

設定ができたら、「シーン」ウィンドウを開いて画像のサイズや位置を調整します。

STEP ⑧：スタートボタンの上にテキストを設定する

ヒエラルキー上の「StartButtonImage」を右クリックして、「UI」⇒「テキスト – TextMeshPro」と選択します。追加した「Text」のインスペクターに TextInput という入力欄があるので「START」と入力します。下図のようにできれば OK です。

make-title-button-text

下図のようなウィンドウが表示されたら、どちらもインポート（Import）して、右上にある「×」をクリックして閉じます。

TextMeshPro

ボタンの上にテキストが表示されない場合は、文字の色とボタンの色が同じ白色なのかもしれません。その場合は、テキストの色を変更してみましょう。

テキストに日本語を使った場合、文字化けしてうまく表示されないことがあります。その場合は、下記の記事を参考に日本語化対応しましょう。

TextMeshPro（TMP） で日本語を使う方法

STEP ⑨：スタートボタンを押したときのプログラム

「プロジェクト」ウィンドウの Assets を右クリックして、「作成」⇒「フォルダー」を選択して「Scripts」フォルダを作成します。作成した「Scripts」フォルダを右クリックして、「作成」⇒「C# スクリプト」を選択して、スクリプトファイル（プログラム）を作成します。ファイル名を「TitleController」とします。下図のようになると思います。

make-title-scripts

「TitleController」をダブルクリックして、Visual Studio でファイルを開きます（ファイルが開かない場合はこちら）。下記のプログラムを追記して保存します。onClickStartButton メソッドが実行されたときに、SampleScene に移動する、というプログラムです。

public void onClickStartButton()
{
    SceneManager.LoadScene("SampleScene");
}

作成したスクリプトファイルを、StartButtonImage のインスペクターにドラッグアンドドロップします（下図の赤枠）。さらに、インスペクターの最下部にある「コンポーネントを追加」をクリックし、「UI」⇒「ボタン」の順に選択します（下図の青枠）。

make-title-scripts-drag-drop

ボタンが押されたときにプログラムが実行されるようにしていきます。
　① Button の欄のクリック時の項目にある「+」をクリックします。
　② ヒエラルキーから、ボタンをドラッグアンドドロップします。
　③ 「TitleController」⇒「onClickStartButton」の順に選択します。

make-title-scripts-click

正しく設定できると、ボタンが押されたとき（②）に、onClickStartButton メソッドが呼び出されて（③）、メソッド内のプログラム（他のシーンに移動する）が実行されます。

STEP ⑩：タイトル画面の完成を確かめる

画面上にある再生ボタンを押してみましょう（左図）。すると、「ゲーム」のウィンドウが表示されるでしょうか？右図のように表示されればタイトル画面は表示されますか？スタートボタンを押すとシーンが変わりますか？

make_title_screen13
make_title_screen14

最終更新日：2024年8月5日

おすすめの小学生向けプログラミング教室

ad-earth-shop-online

当教室をおすすめする理由

完全個人レッスンで、お子さま一人ひとりに合わせたアドバイスをします

月謝が安いので続けやすい
（月４回コース：７，０００円、都度コース：１回につき２，０００円　※１回５５分授業）

オンラインレッスンなので、送迎が不要

プログラミングの大会応募や検定受験などを中心に年間スケジュールを作成します

小学３年生から受けることができます

保護者の方がレッスンを見守ることができる

ゲーム作りを通して、楽しくプログラミングが学べます

「スイカゲーム」や「マインクラフト」、「フォートナイト」など、人気のゲームを作れるようになります。生徒が作りたい作品に取り組むので、プログラミングに夢中になる子もいます。保護者の方から、「授業がない日でもプログラミングをしています」という嬉しい報告を多数いただいています。

games

選べる「入会特典」

① 最初の月謝が無料

　５５分のレッスンを４回無料で受講できます

② ディスプレイをプレゼント

　ディスプレイを二つ並べて作業効率をアップさせよう！

ad-earth-shop-online2

広告

最終更新日：2024年8月5日