いーなむを使って遷移をわかりやすくしよう。します。いや、しませんか?提案させてください。ということで、先日のクイズゲームを作ろうという記事で、WidgetSwitcher を使って複数のWidgetを紙芝居的に入れ替えるというのを作りました。そのとき 0、1、2みたいに番号で管理していたので、後から忘れてしまっても大丈夫で、わかりやすくするしくみを導入したいと思います。
今回は 開発手法的なテクニックの紹介になるので、特に機能が増えたり、見た目が変わることはありません。変わるのはブループリントのノードです。関数ノードを作ります。
今回の内容は、以下の2つの記事の内容を作り終えた後のおまけ編となっています。
目次
いーなむを作ろう
まず専用のアセットを用意します。
コンテンツブラウザの何もないところで右クリックします。
リストメニューから Blueprints > Enumeration を選択。
EScreenState という名前にしました。
EngineContent内を見てみると、頭に大文字の E を付けるのが慣例っぽいです。
これをダブルクリックしてエディタを開きます。
右上の New ボタンをクリック。
今回は 4つの画面Widgetがあるので 4回クリック。
Display Name と書かれたところに、いい感じに分かりやすくなるような名前を入力します。
WidgetSwitcher に登録した順番を元に名前を付けます
wb_Title (タイトル画面) → Title
wb_Main(クイズ画面) → Main
wb_Right(正解演出) → Right
wb_Wrong(誤答演出) → Wrong
後でWidgetSwitcherの順番を入れ替えることになった場合でも、入力しなおす必要はありません。右端の▲▼ボタンでここのリストも順番の入れ替えが可能です。
ここでしっかりと 1 対 1 に紐づいていれば大丈夫。
例えば、wb_Main2 が増えました~ しかも最後じゃなくてMain の次にしたいです~
という事態になっても、ヒエラルキーの順番を見ながら修正します。
いーなむを使ってみよう
QuizGame のWidgetを編集します。
エディタを開いたら、Graphモードにします。
タイトル画面のボタンとバインドしている部分、ここのカスタムイベントにつながっているノードをまとめて選択状態にしたら、
その上で右クリックして メニューから Collapse to Function を選択。
すると、New Function ~ という1つのノードに変化しました。
これは、関数化 という操作になります。
同じ仕事(タスク)を別の場所なんかで繰り返し行うときに、関数(ファンクション)としてまとめておくと、何度も同じノードをたくさん置かなくても、関数を一つ取り出してつなぐだけでスッキリします。しかも仕事の内容に名前を付けることにもなるので、あとからブループリントを見たときにも何をしてるかわかりやすくなります。
Photoshop で例えると アクション がイメージ的に近いです。
まずは New Function の名前を変更します。
変え方は 2通り
エディタ左 My Blueprintタブ の Functions リストから 右クリック > Rename する方法
選択して F2キーでも同じようにリスト内で変更することができます。
もう一つは、この関数を編集している最中に変える方法。
このノードをダブルクリックします。
関数の中だけのグラフに切り替わります。
左端にある紫色のノードを選択して、右上の Detailsタブからリネームできます。
関数化したら、そのまま編集する流れになることが多いので、ひと手間減るかどうかぐらいの差でしかないですが、一応 2通りの方法を紹介しました。
ここは、WidgetSwitcher の切り替えを行っていたので、changeScreenState としましょうか。
続いて、そのまま 少し下にある、 Inputs というカテゴリの +ボタンをクリックします。
マウスオーバーすると +New Parameter というボタンに変わります。
クリックすると、何やら出てきました。
イベントディスパッチャーを追加したときにも、同じような操作をしました。
これはこの関数が受け取るパラメータ(引数=ひきすうとも言います)を追加する操作です。
デフォルトだと Boolean 型が出てくるのですが、すでに別のタイプをいじったことがあると、上の画像と違うのが出ることがあります。
この ▼ のついた プルダウンリストを開けて、用意してある いーなむ を探します。
これを選択します。ついでに 名前も NewScreenState に変更しました。
グラフ上ではこうなります
最終的に、この NewScreenState のピンと、 Index のピンをつなぐわけですが、方が違うので、キャスト(型変換)が必要です。
ところが、ドラッグしても 互換性がないと突っぱねられます。
ここは自動ではやってくれないのです。
しかたがないので、手動でキャストするノードを取り出します。
toint で検索。Integer形へ という英文で書くと to Int が元です。
変換アダプタのようなものですね。
無事つながりました。
これで関数は完成です。
元のグラフに戻るには、タブを切り替えます。
最初からあるグラフは、イベントグラフ EventGraph という名前がついてます。
ブループリントの編集に慣れてくると、いろんな関数やらマクロやらを開くことが多くなるので、編集が終わったら閉じるようにするとEventGraphに戻りやすくなります。
戻ってきてみると、
あらまぁ 少し見ない間に~ てな見た目になります。
かつての様子 ↓
いーなむ を入力のパラメータにすると、プルダウンメニューが追加されました。
ここはタイトル画面のスタートボタンが押されたら、メインの画面に遷移する という処理なので、Title を Main に変えます。
ここで再生して問題ないかテストしてみましょうか。
問題なく動作すればOK。 あとは 似たような処理を見つけて入れ替えていきます。
グラフを見てみるとWidgetSwitcher の切り替えをしているところが3か所あります。
ここを入れ替えていきましょう。
関数ノードを取り出すのは、リストからドロップしてもいいし、
何もないところで右クリックして検索、でも取り出せます。
すごくわかりやすくなったと思いますが、いかがでしょうか?
いーなむは、インデックスのように数字で管理しているものに対して順番にわかりやすく名前を付けることができるのです。
今後 切り替えるものが増えた時も、いーなむアセットを編集するだけで済みます。
これで 切り替えるときに、あれ?何番だっけ?という悩みが解決します。
さらに、このいーなむエディタの Description (説明)欄に書き込んだメモが、マウスオーバーで表示されるという新設設計。
ぜひご活用ください
今回のおまけ編はここまでです
ここからはおまけのおまけ
逆引きで確認する方法 (おまけのおまけ)
デバッグするときの確認で便利なのが、番号を 文字 に戻す方法。
関数が呼ばれるたびに、PrintString したいと思います。
関数の中身に細工します。
ちょっと引くぐらいキャストしまくってます。
WidgetSeitcher をGetタイプで取り出して、そこから
Get Active Widget Index で現在アクティブな(表示されている)番号を取り出して、
いったん Byte型(バイト)にキャスト
今度はバイトから いーなむ EScreenState にキャスト
そこからようやく String型(ストリング=文字列)にキャストしてもいいし、
PrintString ノードにつないでも、ここは自動でキャストしてくれます。
こういう機能追加や改造がしやすいのも関数化するメリットだったりします。
再生して確認してみましょう。
なんか開発してるって感じになりませんか?
PrintString はいろいろ動作確認のときに大変便利なノードです。
今どうなってる? って時に役に立ちます。
今回は以上です
わからないところや突っ込み、リクエストなどなどあれば、このブログのコメント機能かTwitterにて
ではでは
ステキななUMGライフを!