今回はランゲームを作る過程で、タイトル画面を一つ工夫して動画を取り入れて作り、
シーンの移動をしてゲームをスタートしていく方法の紹介です。

ランゲームを作ろう⑥、タイトル画面を動画で作ってシーンの移動をしよう！

タイトルロゴの作成サイトなんかも紹介していくので
是非ご覧になってください。
※一応前回のランゲーム作成の続きになっているので前回の記事も参考にしてください。
www.unityprogram.info

まず始めにタイトルで使う動画を作っていきます。

コレはMacのパソコンの場合になるのですが、Shift+command+５キーを同時に押して
画面録画をしていきます。

選択部分を収録とあるのでそれをクリックして選択部分を自分で決めて収録して保存してください。
時間は大体１０秒〜20秒ぐらいで動画をループさせるようにしていきますが好きな時間で作って、
写真に保存して見せたい部分をトリミングして最後に、写真の中に入れたままだとUnityに移行させた時に
写真扱いになってしまうのでデスクトップに保存してディスク内に保存するようにします。

よく分からない人はUnityエディタ画面に移した時に教えてくれるのでその通りに
実行すればいいと思います。

前回のシーンを保存して消して新しくタイトルシーンを作っていきます。

まず作った①のシーンを右クリック⇨Save Scene Asを選択して名前をStage1に
変更して保存します。
次にProject⇨Assets内でまとめて分かりやすく整理したい方は、右クリック⇨Create⇨Folderを
選択して自分の好きな名前に変更して②のようにシーンをまとめておくフォルダーを作ります。

次に、①のStage1シーンを③のフォルダー内にドラッグ&ドロップして
追加しておきます。

f:id:Phoenix9056:20200520151007p:plain

今度は②のStage1の横にある・・・を右クリック⇨Add New Sceneを選択し、
タイトル画面を作成するシーンを作るのですが、名前をStartに変更して①のようにします。

②のStage1のシーンはもう必要ないので右クリック⇨Remove Sceneを選択して
消してしまいましょう！

今度はタイトル画面を作っていきます。

※完成した状態からの説明なので悪しからず

Hierarchy内にある①の＋をクリックして3D Object⇨Planeを選択して
②のPlaneを作成します。
次にPlaneのInspector内にある③Transformの中にある、
Positionの値を全て０にして作業するとMainCameraに写るのでやりやすいと思います。

Rotationの値はXを90にしてPlaneを立てます。
次に真っ黒の面が写っていると思いますがコレは裏面に当たる所なので
動画をつけても見えないので、Yを１８０にして一回転して表面のグレーの部分が
写るようにしてください。
上手く画面に収まるようにあとは大きくしたり、動かしたり調整しましょう。

今度はMesh Renderer⇨Materialsにある
④Element0の部分をクリックしてSprites Defaultを探して変更してください。
元々設定されているElement0のMaterialは暗くて動画を移した時に暗くなってしまうので
真っ白なものに変更しました。

Inspector内の一番下にあるAdd Componentをクリックして⑤の
Video Playerを選択して追加しましょう。

一番最初に作った⑥の動画をパソコン内からドラッグ&ドロップして
ProjectのAssets内に追加して⑦のVideo Clipにドラッグ&ドロップして追加します。
⑧のLoopにチェックを入れて動画の再生が終わってもまた再生されるようにします。

ロゴジェネレーターでロゴを作っていこう！

タイトルのロゴとボタンで使うスタートボタンを今回
ロゴジェネレータを使用して作成していきましょう。
ちょっと変わったアニメのタイトルロゴを簡単に作れるクズイキさんがまとめたブログ
があるのでそのリンクを貼っておくので作って保存してください。
kuzumisan.com

f:id:Phoenix9056:20200520154409p:plain

今度はHierarchyの＋⇨UI⇨ Imageと選択してImageを追加します。
そうするとCanvasも自動で追加されるのでCanvasの上で右クリック⇨UI⇨
Buttonを選択してButtonを追加して①のようにしていきます。

編集しにくいと思うのでCanvasをダブルクリックすると全体が見えるようになって編集しやすいです。

先程作ったロゴをAssets内にドラッグ&ドロップして②の画像を追加してください。
f:id:Phoenix9056:20200520155504p:plain

この時に注意があるのですが、そのままの設定では画像を使用することが出来ないので、
①画像をクリックしてInspector内の②のTexture TypeをSprite（2D and UI)に変更して
最後に下の方にあるApplyをクリックして適用させて使えるようにしましょう。

そしたらHierarchy内にあるImageのInspector内にある③の
Source Imageの所にドラッグ&ドロップしてください。

f:id:Phoenix9056:20200520160126p:plain

①のButtonも同様にボタンで使用する②の画像を
③のButtonのInspector内にあるSource Imageの所に
ドラッグ&ドロップして追加していきます。

f:id:Phoenix9056:20200520160400p:plain

そのままの状態だとButtonの文字が表示されたままなので、
Buttonの中にある子要素①TextをクリックしてInspector内の②Text
に残っている文字を消してしまいましょう。

ここまで出来たら確認のため再生してみてみましょう！

f:id:Phoenix9056:20200520160851g:plain

上記の画像のように動くようになっているでしょうか？

今度はシーン遷移、移動をしていくようにします。

※結構簡略化して説明していくので分かりにくい方は下記記事を参考にしてください。
www.unityprogram.info

f:id:Phoenix9056:20200520161009p:plain

出来上がったシーンを始めにシーンを保存したやり方で保存して
Assets内に移します。
そうしたら、エディタ画面の上部にある、FileをクリックしてBuild Settingsを選択します。

Assets内に保存してある①のシーンを②のようにタイトル画面から上から順番に
ドラッグ＆ドロップして追加して✖️ボタンをクリックして消しましょう。

f:id:Phoenix9056:20200520161614p:plain

Hierarchyの＋⇨Create Emptyを選択してからのGameObjectを作成して、
今回名前をButtonSceneに変更して②のようにします。

今度はシーン遷移をするためのスクリプトを作成していきます。
Assets内で右クリック⇨Create⇨C# Scriptを選択して名前をSceneにします。
次のコードをコピー&ペーストするか同じ記述にしてください。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
//シーン移動に必要なUnityEngineを追加します。
using UnityEngine.SceneManagement;

public class Scene : MonoBehaviour
{
    //ボタンを押した時の処理。
    public void ButtonClicked()
    {
        //Stage1シーンに移動します。
        SceneManager.LoadScene("Stage1");
    }
}