Unity C# 音ゲーの作り方10 タイトル画面を作成してゲームシーンをチェンジさせよう | Unity入門の森 ゲームの作り方

Unity C# 音ゲーの作り方10 タイトル画面を作成してゲームシーンをチェンジさせよう

Unity C# 音ゲーの作り方


Unity入門の森オリジナル本格ゲーム制作講座はこちら
11種類の本格ゲームの全ソースコード公開・画像&動画による解説付き

今回はUnity C# 音ゲーの作り方講座の第10回目、「タイトル画面を作成してゲームシーンをチェンジさせよう」をチュートリアル形式で説明していきます。

前回までで音ゲーの基本処理を開発し終え、スコア表示などのUI部分も完成させました。

前回の記事:

Unity C# 音ゲーの作り方9 Sliderをスコアに合わせて動かそう/リファクタリングのススメ
今回はUnity C# 音ゲーの作り方講座の第9回目、「Sliderをスコアに合わせて動かそうをチュートリアル形式で説明していきます。第7,8回目に『musicbox』が『collisionbox』に衝突した時に加点・減点・コンボの仕組みを...

ゲームシーンとは、ゲームオブジェクトやアタッチしているコンポーネントなどをまとめているデータのことです。本講座のゲームシーンは以下になります。

第10回目では、『GameScene』とは別のゲームシーンでタイトル画面を作成してタイトル画面から『GameScene』に遷移させる仕組みを作成します。

また、『GameScene』の終了後タイトル画面に戻る仕組みも作成していきます。


【Line登録者限定のプレゼントもあるよ!】

音ゲーのタイトル画面を作成して『GameScene』に遷移するスクリプトを作成しよう

まず初めにタイトル画面となるシーン作成から始めていきましょう。

『Assets』フォルダー→『Scene』フォルダーの中で右クリックして『作成』→『シーン』を選択して名前を『Title』にしてください。

『Title』シーンアイコンをダブルクリックしてTitleシーンを編集できるようにしましょう。

 

次に『Title』シーンの中で右クリックして『UI』→『キャンバス』を作成してください。

『キャンバス』を作成したらヒエラルキーの『Canvas』の上で右クリックして『UI』→『パネル』を選択してください。

『Panel』のインスペクターのImageコンポーネントの中の『色』という項目の白いバーを選択して『色』という小さい画面がでてきたら『16進数』に『440044』と入力してください。

また、『色』という小さい画面の『A』という項目を『255』に設定してください。 

 

次に『Panel』のインスペクターにあるRectTransformを以下のように変更してください。

RectTransform      →   幅:480 高さ:800
RectTransformアンカー  →   centermiddle   最小X:0.5 Y:0.5  最大X:0.5 Y:0.5

この状態では、『GameScene』シーンの解像度と合わないため第2講座「UIを配置してゲーム画面を作成しよう」で作成・設定した『AspectKeeper』スクリプトを使用して解像度を合わせます。 

それでは、『Title』シーンの『Canvas』にある『Canvas Scaler』を以下のように変更してください。

UIスケールモード     →   画面サイズに拡大
参照解像度        →   『X:480 Y:800』
スクリーンマッチモード  →   『展開』

 

次に『Main Camera』のインスペクターに『AspectKeeper』スクリプトをドロップさせて以下のように内容を変更してください。

ターゲットカメラ    →   『Main Camera』
Aspect Vec       →   X:480  Y:800

解像度の設定が完了したらヒエラルキーにある『Canvas』の上で右クリックして『UI』→『テキスト』を選択してインスペクターの『Text Input』に『Music Game』と入力してください。

また、インスペクターにあるRectTransformを以下のように変更してください。

RectTransform   →   X:50 Y:0 Z:0 幅:300 高さ:50

 

続いて『Title』シーンから『GameScene』シーンに遷移するためのボタンを作成していきます。

ヒエラルキーにある『Canvas』の上で右クリックして『UI』→『ボタン』を選択してください。

『Button』オブジェクトの『▶︎』を選択して『Text』オブジェクトの『FontAsset』を『NotoSansJP-Light』に変更して『Text Input』に『スタート』と入力してください。

次に『Button』オブジェクトを選択してインスペクターのRectTronsformを以下のように変更してください。

RectTransform   →   X:0 Y:-100 Z:0 幅:150 高さ:50

 

ボタンの作成が完了したらシーンチェンジをするスクリプトを作成していきます。

『Script』フォルダーの中にスクリプトを作成して名前を『Title』に変更してください。

以下に完成したスクリプトを掲載するのでコピーして入力してください。

 

『Title』スクリプトの解説をしていきます。

ボタンを使用するためUI操作に必要な以下のコードを入力します。

 

シーンを操作したい時は、『SceneManagement』が必要になります。

今回は音ゲーのスタートボタンを押した時にシーンを変更したいのでボタンを押した時にStartGame関数が実行されるコードを入力します。

onClick.AddListener()メソッドでクリックされたら()内のメソッドを実行するイベントを設定しています。

StartGame関数には、『GameScene』シーンをロードするコードを入力しています。ボタンを押した時に『GameScene』シーンをロードする仕組みになります。

 

『Title』スクリプトの入力ができたら『Button』オブジェクトのインスペクターにスクリプトをドロップしてください。

『Button』オブジェクトのインスペクターにある『クリック時』の『+』を選択して左下のオブジェクト選択欄に先ほどドロップしたスクリプトをアタッチします。

次にオブジェクトをアタッチした横にある『▼』を選択して『title』→『Start()』を選択してください。 

以下のような画面になっていればタイトル画面の作成は完了です。

音ゲーの『GameScene』から『Title』に遷移させるスクリプトを作成しよう

音ゲーのゲーム結果が表示された後にもう一度タイトル画面に戻るような仕組みを作っていきます。

まず初めに『Script』フォルダーにスクリプトを作成して名前を『Changescene』に変更して開いてください。

以下に完成したスクリプトを掲載するのでコピーして入力してください。

 

『Changescene』スクリプトの解説をしていきます。

『GameScene』シーンから『Title』シーンの変更は自動で行えるようにするためInvoke関数を使用しています。

 

ChangeScene関数は『Title』シーンをロードするように設定します。98秒後に『Title』シーンをロードするということです。

 

『Changescene』スクリプトの入力が完了したら『GameScene』アイコンをダブルクリックしてシーンを切り替えてください。

次にヒエラルキーの中で右クリックして『空のオブジェクトを作成』を選択して名前を『SceneManager』と変更してください。

『SceneManager』オブジェクトのインスペクターに『Changescene』スクリプトをドロップさせてください。 

このままでは実行した際にシーンをチェンジできないのでビルド設定を行なっていきます。

実行するために実行したいシーンをあらかじめ選択しておくということです。

Unity上部のにあるラベルの『ファイル』→『ビルド設定』を選択してください。

『Build Settings』という小さなページが出てきたら右側上部にある『シーンを追加』を選択してください。

シーンを追加すると『ビルドに含まれるシーン』の項目内に『GameScene』が追加されています。

一度『Build Settings』を閉じて『Title』シーンに切り替えてください。

同様に『Build Settings』を開いて『ビルドに含まれるシーン』の項目内に『Title』シーンを追加してください。

以下のようになっていればビルド設定のシーン追加は完了です。

それでは、実行ボタン▶︎を押して『GameScene』シーンから『Title』シーンに遷移していたら完了です。

 

音ゲーが完成したらテストプレイをしてエラーの確認をしよう

ついに音ゲーが完成しました。ここまでの開発お疲れさまでした。

音ゲーが完成したので実際にプレーをして遊んでみましょう。

実行ボタン▶︎を押して『スタート』ボタンを押して『Push』ボタンで遊んでみましょう。

動画は途中で終わっていますが、最後のタイトル画面に戻るまでスムーズに進みましたか?

以下のような『コンソール』という項目に赤文字のエラーが出ていなければ音ゲーの完成です。

Unityで音ゲーが完成したら実際にスマホでプレイしてみましょう。iPhoneで今回の音ゲー講座をビルドして実機プレイする方法を別記事にて解説しました。

関連記事:【画像付き】Unityで作ったiOSゲームをiPhoneスマホに転送・実機テストする方法

【画像付き】Unityで作ったiOSゲームをiPhoneスマホに転送・実機テストする方法
「Unityでゲームをなんとか完成させた!」「でもどうやってiOSアプリにすればいいの? iPhoneでビルドしたいけどどうすれば?」今回はUnityで開発したゲームのiOSアプリ化とビルド・実機プレイする方法を知りたい方のための記事になっ...

Unity C# 音ゲーの作り方講座 第10回目のまとめ

今回の講座ではUnity初心者さんを意識してできるだけ難しい文法を使わず泥臭いやり方で開発を進めていきました。どのスクリプトも短く意外と簡単に音ゲーが完成したかと思います。

第9回でも述べたように実はもっと良い書き方ができるのでは?もっと改造できるのでは?という部分もたくさんあります。

また、ちょっと高レベルですが、第4回の音ブロック配置の際にスクリプトに直接書き込むのではなく、音をどのタイミングで流すかのデータシートを作って読み込みできるようにするといろんな曲に対応できて良さそうですね。

音ブロック配置等、ゲームのレベルバランスに関係するところも今回はそこまで凝って作れていないのでそのあたりも改造の余地があるでしょう。コンボを続けると点数が跳ねるようにするのも面白いかと思います。

ぜひぜひ気づいたことやブラッシュアップできそうなところはご自身で改造していただけたらと思います。

本講座第10回にわたる音ゲーの作り方の説明を最後までお読みいただきありがとうございました。

Unity音ゲーの作り方 初心者向け入門講座へ戻る>>



Unity入門の森オリジナル本格ゲーム制作講座はこちら
11種類の本格ゲームの全ソースコード公開・画像&動画による解説付き

コメント

タイトルとURLをコピーしました