ノベルゲームの作り方6 UnityでUIアニメーション dotweenで演出ありシーン遷移を実現する | Unity入門の森 ゲームの作り方

ノベルゲームの作り方6 UnityでUIアニメーション dotweenで演出ありシーン遷移を実現する

Unity ノベルゲームの作り方


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

この記事は「恋愛ホラーノベルゲーム」の作り方講座の第6回です。

前回はUITransitionのInとOut処理をUniTaskで非同期処理として実行できるように改造を行いました。さらにViewBase、SceneBaseを作成し、クラスの継承を活用し共通コンポーネントとして整理を行いました。

前回の記事:

ノベルゲームの作り方5 UniTaskで処理を待つ・Unityのasync/awaitで非同期処理をマスターしよう
この講座は恋愛ホラーノベルゲームの作り方講座。今回は第5回目です。 前回はDoTweenを用いたアニメーション処理や画面遷移ユーティリティを作成しました。 前回の記事: 今回は作成した「UITransition」にUniTaskを使用した非...

ここまでの開発により今回から作成するUIアニメーション処理の実装準備が整いました。

いよいよ本格的なノベルゲームとしてのUIアニメーション・複数シーンの遷移処理をDoTweenとUnitaskを併用して完成させていきます。


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

シーン内のビュー遷移処理を作成

SceneBaseの処理を追加

前回作成した「SceneBase.cs」に、ビューの遷移のための処理を追加していきます。

ベースクラスに処理を追加する、ということは継承されているクラスをアタッチした全てのもので実行できる処理になります。

まずは「Start()」内に処理を追加します。

一番上「UniTask」を使用するために「using Cysharp.Threading.Tasks;」を追加します。

中の処理には多めに説明コメントを書いてるので参考にしてください。

先に追加した変数の「initilalViewIndex」は最初にどのビューを表示するか、「isInitialTransition」はその際フェードイン・アウトのトランジションを行うかを表します。

それらを使用して「Start()」ではシーンが始まった最初の状態を設定しています。

「if( initilalViewIndex >= 0 )」で初期インデックスが0を含む正の値の時に「viewList」すべてにforeachで同じ処理を行います。「var view」の「var」は型推論と呼ばれ自動的に型を設定してくれます。

今回の場合はリストが「ViewBase」なので「var」と書いておけば自動で「ViewBase」になります。

foreachの括弧の中をみていきます。まずは「if」文の中身以外を抜き出します。

「view.Scene = this」の処理で「ViewBase」クラスの変数「Scene」にこのオブジェクト自身を保管しています。

次の部分

List.IndexOf( 要素 ) : 要素のインデックス(要素番号)を取得

この関数を使用します。「インデックス」というのは「0」からは始まるリスト内での番号です。

そしてこのインデックスと変数の「initilalViewIndex」が同じ場合、言い換えると「initilalViewIndex」で指定したインデックスの「View」の場合に「if」内の処理を行います。この処理は後で解説します。

それ以外は「else」の処理である「view.gameObject.SetActive( false );」でビューを非表示にします。

では次にif内の処理を抜き出します。

ここは簡単に解説します。

トランジションするときは最初に「Canvas.alpha」を「0」つまり透明にしてから「SetActive( true )」で表示して「TransitionIn()」で徐々に表示させています。

ここではわかりやすさのため、先にアルファ値を0にしてから「SetActive()」を行っていますがこの順番が逆でも同じフレーム内で実行されるので見えません。
ただし間にawaitやコルーチンが入ったりすると一瞬見えてしまうことがあるので処理の順番は常に注意しておきましょう。

その間に「ViewBase」の「OnViewOpened()」を実行します。

そしてトランジションしないときは単純に「OnViewOpened()」を実行し「SetActive( true )」で表示するだけです。

最後にcurrentViewに開いたビューを保管して終わりです。

続いて関数を追加します。 

関数名部分は「public virtual async UniTask ChangeView( int index )」です。 

「public 」にして、継承用の「virtual」、非同期用の「async」、そして返り値に「UniTask」にして、引数は「int(整数)」でインデックスを指定します。

この関数は「指定インデックスのビューに移動する」関数です。

最初の部分は「currentView」つまり現在のビューがあるときに、そのビューで「OnViewClosed();」を実行し「currentView.Transition.TransitionOutWait();」で徐々に消していきます。

この関数には「await」が付いているので、これが実行されると処理はここで遷移(徐々に消える)が終わるまで待機します。

次に先ほどと同じように「viewList」を「foreach」そして「if( viewList.IndexOf( view ) == index )」を使用して、指定インデックスとそうでない場合に分けて処理を行います。

処理は「Start()」のときとほど同じで、指定ビューではオープン処理を行いそうでないものを非表示にします。

 

SplashからTitle、TitleからHomeの処理を再度追加

ではここで最初にテスト用に追加しておいた、Splashから数秒でタイトルに、タイトルからボタンを押すとHomeに行く処理を改めて必要な部分に追加していきます。

まずは「SplashView.cs」です。 

以前「TitleScene.cs」にコルーチンで待機して移動する処理を作成したかと思います。

前回消して綺麗にしてあるかと思いますので、ここはあえて「UniTask」を使用して「SplashView.cs」に同じ動き作成してみましょう。

using文の呼び出しやメソッドにasyncを付与するのを忘れずに。

続きを読む

このコンテンツはパスワードで保護されています。 コンテンツを読みたい方はUnity入門の森ショップ(https://unityforest.shop/)で講座閲覧権を取得してね。

次回に向けて

今回までの講座でUnityを用いてUIアニメーションをUniTaskを用いた非同期処理とdotweenの併用で好きなだけ遷移処理を作れるようになりました。

ビューを増やしたり、シーンを増やしたり、それぞれご自身で作成したいようにUIまわりの操作処理を拡張しやすくなったはずです。オリジナルゲームを作る際は作品に合わせて自由にこうしたUIアニメーション処理を拡張してみましょう。

次回からいよいよ背景・人物画像を入れて見た目をノベルゲームらしくしていきます。

次回の記事 : 

ノベルゲームの作り方7 Unityで素材画像をインポート・拡大縮小UIアニメーションの実装
この記事は「恋愛・ホラー風ノベルゲーム」を作成していく講座の第7回です。 前回まででゲームのシステム部分とタイトルからゲームまでの流れを作成しました。 今回は画像を入れて見た目をよりゲームっぽくしていきましょう。 なお画像はフリーで使用でき...

Unity ノベルゲームの作り方講座へ戻る >>



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

コメント

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