みつまめ杏仁

アンリアルエンジン(UE4)でGUIを作るためにゴニョゴニョしてます。UIデザイナーの皆様の助けになれば幸いです。

そうだ、UE4でQUIZゲームを作ろう《おまけ編》いーなむで切り替えをわかりやすく

いーなむを使って遷移をわかりやすくしよう。します。いや、しませんか?提案させてください。ということで、先日のクイズゲームを作ろうという記事で、WidgetSwitcher を使って複数のWidgetを紙芝居的に入れ替えるというのを作りました。そのとき 0、1、2みたいに番号で管理していたので、後から忘れてしまっても大丈夫で、わかりやすくするしくみを導入したいと思います。

今回は 開発手法的なテクニックの紹介になるので、特に機能が増えたり、見た目が変わることはありません。変わるのはブループリントのノードです。関数ノードを作ります。

 

今回の内容は、以下の2つの記事の内容を作り終えた後のおまけ編となっています。

 

limesode.hatenablog.com

limesode.hatenablog.com

 

 目次

 

 

 

いーなむを作ろう

まず専用のアセットを用意します。

コンテンツブラウザの何もないところで右クリックします。

リストメニューから Blueprints > Enumeration を選択。

f:id:hiyokosabrey:20210525233127p:plain

f:id:hiyokosabrey:20210526004846p:plain

EScreenState という名前にしました。

EngineContent内を見てみると、頭に大文字の E を付けるのが慣例っぽいです。

これをダブルクリックしてエディタを開きます。

f:id:hiyokosabrey:20210526010300p:plain

右上の New ボタンをクリック。

今回は 4つの画面Widgetがあるので 4回クリック。

f:id:hiyokosabrey:20210526010427p:plain

Display Name と書かれたところに、いい感じに分かりやすくなるような名前を入力します。

WidgetSwitcher に登録した順番を元に名前を付けます

f:id:hiyokosabrey:20210526011326p:plain

 

f:id:hiyokosabrey:20210526011945p:plain

 wb_Title (タイトル画面) Title
 wb_Main(クイズ画面) Main
 wb_Right(正解演出)Right
 wb_Wrong(誤答演出)Wrong

 

後でWidgetSwitcherの順番を入れ替えることになった場合でも、入力しなおす必要はありません。右端の▲▼ボタンでここのリストも順番の入れ替えが可能です。

ここでしっかりと 1 対 1 に紐づいていれば大丈夫。

例えば、wb_Main2 が増えました~ しかも最後じゃなくてMain の次にしたいです~

という事態になっても、ヒエラルキーの順番を見ながら修正します。

 

 

いーなむを使ってみよう

QuizGame のWidgetを編集します。

f:id:hiyokosabrey:20210520233701p:plain

 

エディタを開いたら、Graphモードにします。

 f:id:hiyokosabrey:20210526213634p:plain

 

タイトル画面のボタンとバインドしている部分、ここのカスタムイベントにつながっているノードをまとめて選択状態にしたら、

f:id:hiyokosabrey:20210526213954p:plain

その上で右クリックして メニューから Collapse to Function を選択。

f:id:hiyokosabrey:20210526214123p:plain

すると、New Function ~ という1つのノードに変化しました。

f:id:hiyokosabrey:20210526215317p:plain


これは、関数化 という操作になります。

同じ仕事(タスク)を別の場所なんかで繰り返し行うときに、関数(ファンクション)としてまとめておくと、何度も同じノードをたくさん置かなくても、関数を一つ取り出してつなぐだけでスッキリします。しかも仕事の内容に名前を付けることにもなるので、あとからブループリントを見たときにも何をしてるかわかりやすくなります。

Photoshop で例えると アクション がイメージ的に近いです。

 

まずは New Function の名前を変更します。

変え方は 2通り

エディタ左 My Blueprintタブ の Functions リストから 右クリック > Rename する方法

選択して F2キーでも同じようにリスト内で変更することができます。

f:id:hiyokosabrey:20210526215737p:plain

もう一つは、この関数を編集している最中に変える方法。

 

このノードをダブルクリックします。

f:id:hiyokosabrey:20210526220404p:plain

関数の中だけのグラフに切り替わります。

f:id:hiyokosabrey:20210526220352p:plain

左端にある紫色のノードを選択して、右上の Detailsタブからリネームできます。

関数化したら、そのまま編集する流れになることが多いので、ひと手間減るかどうかぐらいの差でしかないですが、一応 2通りの方法を紹介しました。

 

ここは、WidgetSwitcher の切り替えを行っていたので、changeScreenState としましょうか。

続いて、そのまま 少し下にある、 Inputs というカテゴリの +ボタンをクリックします。

マウスオーバーすると +New Parameter というボタンに変わります。

f:id:hiyokosabrey:20210526221017p:plain

クリックすると、何やら出てきました。

f:id:hiyokosabrey:20210526221130p:plain

イベントディスパッチャーを追加したときにも、同じような操作をしました。

これはこの関数が受け取るパラメータ(引数=ひきすうとも言います)を追加する操作です。

デフォルトだと Boolean 型が出てくるのですが、すでに別のタイプをいじったことがあると、上の画像と違うのが出ることがあります。

 

この ▼ のついた プルダウンリストを開けて、用意してある いーなむ を探します。

f:id:hiyokosabrey:20210526004846p:plain

f:id:hiyokosabrey:20210526222217p:plain

これを選択します。ついでに 名前も NewScreenState に変更しました。

f:id:hiyokosabrey:20210526222404p:plain

 

グラフ上ではこうなります

f:id:hiyokosabrey:20210526222526p:plain

最終的に、この NewScreenState のピンと、 Index のピンをつなぐわけですが、方が違うので、キャスト(型変換)が必要です。

 

ところが、ドラッグしても 互換性がないと突っぱねられます。

f:id:hiyokosabrey:20210526222907p:plain

ここは自動ではやってくれないのです。

しかたがないので、手動でキャストするノードを取り出します。
toint で検索。Integer形へ という英文で書くと  to Int  が元です。

f:id:hiyokosabrey:20210526223544p:plain

変換アダプタのようなものですね。

f:id:hiyokosabrey:20210526223633p:plain

無事つながりました。

これで関数は完成です。

 

元のグラフに戻るには、タブを切り替えます。

f:id:hiyokosabrey:20210526224243p:plain

最初からあるグラフは、イベントグラフ EventGraph という名前がついてます。
ブループリントの編集に慣れてくると、いろんな関数やらマクロやらを開くことが多くなるので、編集が終わったら閉じるようにするとEventGraphに戻りやすくなります。

 

戻ってきてみると、

f:id:hiyokosabrey:20210526224857p:plain

あらまぁ 少し見ない間に~ てな見た目になります。

 

かつての様子 ↓

f:id:hiyokosabrey:20210526225742p:plain

 

いーなむ を入力のパラメータにすると、プルダウンメニューが追加されました。
ここはタイトル画面のスタートボタンが押されたら、メインの画面に遷移する という処理なので、Title を Main に変えます。

f:id:hiyokosabrey:20210526225332p:plain

 

ここで再生して問題ないかテストしてみましょうか。

 

問題なく動作すればOK。 あとは 似たような処理を見つけて入れ替えていきます。

グラフを見てみるとWidgetSwitcher の切り替えをしているところが3か所あります。

f:id:hiyokosabrey:20210620114758p:plain

ここを入れ替えていきましょう。

 

関数ノードを取り出すのは、リストからドロップしてもいいし、

f:id:hiyokosabrey:20210620114207p:plain


何もないところで右クリックして検索、でも取り出せます。

f:id:hiyokosabrey:20210526232747p:plain

 

f:id:hiyokosabrey:20210620114419p:plain

f:id:hiyokosabrey:20210526233127p:plain

 

すごくわかりやすくなったと思いますが、いかがでしょうか? 

 

いーなむは、インデックスのように数字で管理しているものに対して順番にわかりやすく名前を付けることができるのです。

今後 切り替えるものが増えた時も、いーなむアセットを編集するだけで済みます。

f:id:hiyokosabrey:20210526011945p:plain

これで 切り替えるときに、あれ?何番だっけ?という悩みが解決します。

さらに、このいーなむエディタの Description (説明)欄に書き込んだメモが、マウスオーバーで表示されるという新設設計。

f:id:hiyokosabrey:20210527001716g:plain

ぜひご活用ください

 

今回のおまけ編はここまでです

 

ここからはおまけのおまけ

 

 

逆引きで確認する方法 (おまけのおまけ)

デバッグするときの確認で便利なのが、番号を 文字 に戻す方法。

関数が呼ばれるたびに、PrintString したいと思います。

 

関数の中身に細工します。

f:id:hiyokosabrey:20210526234627p:plain

ちょっと引くぐらいキャストしまくってます。

 

WidgetSeitcher をGetタイプで取り出して、そこから

Get Active Widget Index で現在アクティブな(表示されている)番号を取り出して、

f:id:hiyokosabrey:20210526235824p:plain

いったん Byte型(バイト)にキャスト

f:id:hiyokosabrey:20210526235411p:plain

今度はバイトから いーなむ EScreenState にキャスト

f:id:hiyokosabrey:20210526235421p:plain

そこからようやく String型(ストリング=文字列)にキャストしてもいいし、

PrintString ノードにつないでも、ここは自動でキャストしてくれます。

f:id:hiyokosabrey:20210526235545p:plain

 

こういう機能追加や改造がしやすいのも関数化するメリットだったりします。

 

再生して確認してみましょう。

f:id:hiyokosabrey:20210527000022p:plain

 

なんか開発してるって感じになりませんか?

PrintString はいろいろ動作確認のときに大変便利なノードです。

今どうなってる? って時に役に立ちます。


 

今回は以上です

わからないところや突っ込み、リクエストなどなどあれば、このブログのコメント機能かTwitterにて

 

ではでは

ステキななUMGライフを!