UE4 UI エフェクト

CATEGORY2018.05.17こんにちは。新人UIデザイナーの板橋です。今回は日本語解説があまりなかったUMGのWidgetSwitcherという機能について説明していきたいと思います。【WidgetSwitcherとは】名前の通り、Widgetを切り替える機能です。場所はpanelカテゴリの中にあります。画像ではWidgetを並べていますが、ImageやProgress Bar, Textなども使えます。Active Widget Indexは上から順番に0, 1, 2…といったように番号が割り振られます。【子Widgetを切り替える方法】「Active Widget Index」は、「Set Active Widget Index」というノードで指定できます。UMGをDesiner画面からGraph画面(Widget Blueprint)に切り替えて、次のようなBlueprintを組んでみました。 【試しに組んでみました】これを利用してボタンクリックで画像が切り替わるUMGを組んでみました。・Level Blueprint・Widget Blueprint最後に先ほど作成したカスタムイベントにindexの数字を入力すればWidgetSwitcherによって子Widgetが切り替わります。 タブ型のUI表記する場合に簡単に中身のWidgetを切り替えることができそうです。他にも、本実装や画像を切り出す前に、画面遷移を試し見するなど、色々工夫はできるかもしれません。以上です！参考になれば幸いです・・・！ 【おまけ】CATEGORYゲーム制作のご依頼や※メールソフトが起動します〒141-0032historiahistoria Enterprise© 2017 historia Inc.

こんにちは。新人UIデザイナーの板橋です。 UE4初心者ですので、同じく初心者の方達に向けて解説していきたいと思います。 今回は日本語解説があまりなかったUMGのWidgetSwitcherという機能について説明していきたいと思います。 【WidgetSwitcherとは】 名前の通り、Widgetを切り替える機能です。 UMGでキラキラ効果を作ってみます。UMGの動画キャプチャがうまくいかず、静止画しか載せられませんがかなりキラキラします。用途が伝わりにくいかと思い頑張って金塊の絵を描きました。リワード演出とか、ランクアップ演出とかで使えるのではないかと。 キラキラする数と範囲を調整できる仕様です。ではさっそくテクスチャから。サイズは 128ｘ128、加算で使うのでアルファは無しです。私はよくTarga形式を使います。この場合24bitにしました。このテクスチャを使ったマテリアルをそれぞれ用意します。キラキラ本体のマテリアルはこんなカンジ。4.10からベースマテリアルのタイプに「User Interface」が追加されています。ライトの計算やカリングの判定が不要なのでコンパクトです。UMGで使う場合は強制的にこのタイプになります。 グロー用のマテリアルは以下。加算半透明（Addtive）でたくさん重なるので、色は暗めです。テクスチャの状態で調整するのではなく、マテリアルで調整します。マテリアルが準備できたら、キラキラ用子まず編集モード「Designer」から。キャンバスにImageパーツを２つ配置します。サイズはグロー用が大きく 256ｘ256 に引き伸ばします。キラキラ本体は、そのままの 128ｘ128です。エディタ右 Detailsタブの Appearance > Brush > Image のところに、用意しておいたマテリアルをセットします。配置できたら、アニメーションを追加します。トラックはこんなカンジ。とりあえずパーツには "Shine" と "Glow" という名前を付けました。0.45 Secで完全に消えます。加算半透明なのでOpacityではなく、RGBの輝度を落とせば消えてくれます。ただ暗くするだけだと華やかさが出ないので、途中彩度の高い黄色や茶色を経由させています。アニメーションができたら、グラフ編集に行く前にやっておくことがあります。初期状態をアニメーションの最終フレームと同じ状態にしておくことで開始時に一斉に同時表示されるのを回避します。 ここで編集モードを「Graph」に切り替えます。 変数を一つ用意します。この変数タイプは、Vector2Dを今回この変数を使ってキラキラの発生エリアを限定します。で、親引数（Inputs）はもちろんBox2D型ですがいきなり、Breakノードで分解してます。これはBox2D型のままだと引き算ができないからです。なぜ引き算するかというとキラキラの大きさを元に表示開始位置を補正するためで、パーツの原点が左上にあるために補正しないと全体的に右下にずれた見た目になります。そこでキラキラのサイズの半分を引いてやると、左上にずらすことができます。直接 256ｘ256の半分の128ｘ128を計算に使ってもいいのだけれど、あとからデザインやサイズを変更した場合に対応するのが面倒なので、ここは自動的に割り出すようにします。今回の例はグロー効果の方がサイズが大きいので、その大きい方のサイズを取得して２で割って使ってます。大きい方をキャンバスの左上に置いているからです。こういった「仕込み」は、デザイナーにとっては面倒だし小難しい向きもあると思いますが、地味に調整箇所が減るので後から触るときにラクです。 次にアニメーションを再生する関数です。とりあえず関数名は "start" にしました。（この名前は後で使います）Wow はアニメーションの名前です（思いつかなくて・・・）。ポイントは、下の FunctionName はこのあと作る関数名 "PositionSet" の名前を入力しています。  で、そのPositionSet関数がこれ。（SetPositionというノードがあるので逆にしただけ・・・）表示範囲を変数"Area"が持っているので、それを Break Box2D して、さらにスプリットするとFloat型のPINに分解できます。分解したFloat型の値を、 ここで決定したランダムな位置を、なぜRenderTransformかというと、今回移動させるキャンバスパネルの設定が下図のようになっているからです。キラキラの位置が決まったところで、最後にアニメーション開始までの時間差をランダムに設定します。先の関数と同じ Set Timer by Function Name ノードにアニメーション開始用の関数名を書いて、Timeピンには Float型のランダム発生ノードをつないでいます。以上で子 子まずはキャンバスにキラキラの範囲指定用のCanvasPanelを置きます。後ろの絵は無くても構いません。（頑張って描いたので貼っておこう）実際に表示しないので、BehaviorのVisiblity設定は Hiddenにしておきます。名前は"shineArea" にしました。is Variable のチェックは忘れずに。 編集モードを 「Graph」に切り替えます。まず、キラキラの表示数を持たせる変数を整数型でひとつ用意します。初期値は 20くらいでしょうか。 EventConstructionにつないでいきます。ForLoopノードでキラキラの数分ループを回します。Create AutoSizeノードは、付けておかないと固定サイズで表示されてしまいます。ZOrderは表示優先なので、とりあえずForLoopから出てきたIndex値をつないで同じ優先にならないようにしています。何かと重なっておかしな見た目になるようだったら、このIndex値に数値を足して下駄をはかせるとよいかと。 最後、子表示範囲の中でランダムなポジションを決めるので、先に表示範囲をセットしてやらないといけません。なので、 AreaSet関数を先につなぎます。これは引数にBox2Dが必要なので、それを渡すためのマクロをつないでいます。マクロは最初下のような状態でした。表示範囲設定用のキャンバスパネル "shineArea" からサイズとポジションを取得してBox2D型に整形しています。親 いよいよ表示です。レベルブループリントに親いかがでしょうか？

.