【Unreal Engine_3】サブレベルをボタンで切り替える方法を実装してみました

前回に続き、Unreal Engineを使ったデザインレビューツールの改良を加えてみました。今回は、ボタンをクリックしてサブレベルを切り替える方法です。ボタンの下にテキストボックスを配置し、サブレベルの名前を表示する仕組みも取り入れてみました。

・前回のブログの記事で完成した状態からスタートします。Persistent Levelの直下にウサギのモデルデータが入っているサブレベルが一つと環境データが入っているサブレベルが三つある状態です。

・まずはサブレベルを切り替える際にクリックするボタンを作っていきます。

・BluePrintsフォルダの中で右クリック → User Interface → Widget Blueprintとたどり、別ウィンドウが立ち上がるのでUser Widgetをクリックしてブループリントを新たに作ります。名前はButton_Widgetとしました。

・作成したButton_Widgetをダブルクリックして開きます。

・まずは上の図のようにCanvas Panelを設置してからボタンとその中にテキスト、さらにボタンの下にテキストを配置し、位置や背景色、文字色などをお好みで調整します。

※本ブログ以降でもボタンを追加で配置していく予定なので今回は左端に設置しています。

・ボタンの下に配置したテキストは選択したサブレベルの名前を表示する場所です。このテキストの文字列を外部から操作するには変数化する必要があるので、上の図の右上にあるIs Variableにチェックを入れます。

・ボタンをクリックした時の動作を組んでいきます。ボタンを選択した状態で、Details欄の一番下にあるEventsの項目の中から、On Clickedの横にある＋ボタンを押します。

・自動的にGraph画面に切り替わり、赤色のイベントノードが自動で生成されています。

・このButton_Widgetではボタンをクリックした状態を通知する(知らせる)機能にとどめ、通知を受け取った後の実際の動作の部分はPersistentレベルのブループリントに記載していきます。よって、ここではイベントディスパッチャーという機能を使って通知を行う機能を作ります。

・上の図の左にあるEVENT DISPATCHERS欄の＋ボタンを押して任意の名前をつけ、右のグラフエリアにドラッグ＆ドロップし、Callを選択すると青色のノードが生成されるのでそれらをつなぎます。

・ボタン下のテキストブロックに書き込む設定は、テキストブロックを選択した状態で、Details欄にある上の図のBind→Create Bindingボタンをクリックします。

・自動で関数が生成されるので、String型の変数を作成し、上の図のようにつなぎます。作成した変数に値を入れると自動的にテキストブロックの表示が更新される仕組みです。

・Button_Widgetにおける作業はここで終了なので、忘れずにコンパイル→上書き保存を行います。

・次に、サブレベルを切り替える際のフェードイン＆フェードアウトのアニメーションを作っていきます。先ほどと全く同じやり方で、BluePrintsフォルダ内に新しくブループリントを作成します。名前はLoading Widgetとしました。

・Loading Widgetをダブルクリックして開きます。

・デザイナー画面でCanvas PanelとImageを配置します。imageは枠一杯に広げます。

・Animations欄の＋Animationボタンを押して、新しくアニメーションを一つ作成します。次に、+Trackボタンを押してImageを追加し、右の＋ボタンを押してColor and Opacityを選択します。フェードイン、フェードアウトは時間と共に透明度を変化させる方法で実現するということになります。

・右のタイムシーケンスが0.00の位置にいることを確認してから、RGBがそれぞれ0.0、Aが1.0と入力し、右上の◎ボタンをクリックして確定します。画面の色が黒で不透明の状態です。

・次に、タイムシーケンスが0.50の位置まで移動させてから、RGBAをすべて0.0と入力し、右上の◎ボタンをクリックして確定します。この状態は透明になり、フェードアウトの状態になります。今回、フェード時間は0.5秒にしましたがお好みで調整してみてください。

・そのままGraph画面に切り替え、アニメーションのノードを組んでいきます。

・画面上で右クリック→Add Custom Nodeと入力すると赤色のイベントノードが生成されますので、二つ用意し、それぞれに識別しやすい名前をつけます。それらにPlay Animationノードをつなげます。重要なのは、フェードアウト側は逆再生になりますのでPlay ModeをReverseに設定しておきます。これらのイベントを呼び出せばアニメーションが再生されるということです。

・さらに下の空いている個所に、今度はイベント終了通知を出す動作を組んでいきます。

・サブレベルを切り替える際の動作の仕組みは、ボタンをクリック → Loading Widgetを生成→ フェードインアニメーション 再生→ 現在のサブレベルをアンロード → 次のサブレベルをロード → フェードアウトアニメーション再生 → Loading Widgetを除去という工程を順番にたどる必要があるため、何らかの方法でアニメーションが終了するタイミングを通知＆取得する必要があります。

・そこで、グラフ画面上で右クリックし、Event On Animation Finishedノードを検索して取り出します。アニメーションが終了した後の動作はPersistentレベルに記載しますので、先ほどと同じくイベントディスパッチャーの機能を使います。EVENT DISPATCHER欄にフェードイン、フェードアウト用のそれぞれを作成し、CallノードをEvent On Animation Finishedノードの後ろに二つ繋げます。

・Loading_Widgetにおける作業はここで終了なので、忘れずにコンパイル→上書き保存を行います。

・続いてPersistentレベルのブループリントは上の図のように組んでいきます。

・最初に変数を4つ、用意します。

・一番上の変数はString型のArrayです。サブレベルの切り替えは、ボタンを押すごとにアレイの中に格納されているサブレベルの名前を取り出して順繰りに切り替える方式にします。よって、Details欄のDefault Valueの中に切り替えに必要なサブレベルの名前をすべて登録します。

・二つ目の変数は、ボタンを押した時、読み込まれたサブレベルの名前を格納する変数です。Default Valueの中に、プレイモード開始時のサブレベルの名前を登録します。

・Level BeforeとLevel Afterの変数は、ボタンを押す前と押した後の配列のインデックス番号です。Level Beforeの初期値が0、Level Afterの初期値が1となります。

・ノードツリー前半部分は上の図のようになります。簡単な解説は以下となります。

①最初にボタンウィジェットを作成し、Add to Viewportで画面に表示させます。

※図には表示していませんが、ボタンをLoading Widgetよりも上に常に表示する場合はZOrderの数値を0よりも大きくセットします。

②ボタンのクリックイベントが発生したら、Loading_Widgetを作成し、画面に表示させたらそのままフェードアウトアニメーションを実行させます。

③フェードアウトアニメーションの終了通知を受け取ったら、現在のサブレベルをアンロードし、続いて次のサブレベルをロードします。

・後半部分は上の図のようになります。

④サブレベルのロード後、現在のサブレベルの名前を変数に格納し、Delayノードでわずかに時間を遅らせてからShould Be Visibleノードにつないで画面への表示を行います。その後、Remove From ParentノードによってLoading Widgetを消し、ボタン下のテキストブロックに現在のサブレベル名を表示させます。

⑤Sequenceノードよりも後ろの部分はインデックス番号の増加の仕方を記述しています。ボタンを1回クリックするたびにインデックス番号が1増加しますが、今回は3つのサブレベル名を登録しているため2の次が0にまた戻ることになります。その処理をIndex BeforeとIndex Afterの両方で設定しています。

・ここまできたらコンパイルしてから上書き保存します。

・最後にサブレベルのブループリントを開き、上の図のように組みます。

    ノードの切り替えに必要なすべてのサブレベルのブループリントに作成します。

⑥サブレベルを開いたら、Loading_Widgetを作成し、Add to Viewportノードで画面に表示してからフェードインアニメーションを再生します。

⑦アニメーション終了通知を受け取ったら、Remove from ParentノードによってLoading_Widgetを削除します。

・終わったら、コンパイルしてから上書き保存を行います。

・作業はこれで完成です。プレイボタンを押すと上の図のような表示になり、ボタンを押すたびに環境を切り替えることができると思います。