読者です 読者をやめる 読者になる 読者になる

みつまめ杏仁

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

フキダシを作ってみる

UE4 Widget UI UMG マテリアル

テキストブロックのサイズを取得する方法がわかったので、

応用編として、テキストブロックのサイズに合わせてフキダシの大きさを調整するしくみを考えてみた。

f:id:hiyokosabrey:20160612224834p:plain

↑かの ウォルト・ディズニーの言葉です。

(この微妙な中華系のフォントが気になる・・・)

 

9 Scale Grid が UMGだと簡単に実装できるのでそれも使います。

f:id:hiyokosabrey:20160612224443p:plain

試しながら厄介だったのはサイズを変更する際の基準位置。いろいろとアンカーの場所を変えたり計算方法を変えて試してみたけど、結局左上基準でサイズ変更されるので今のところお手上げ状態です。

とはいえ、

まずはテクスチャを3枚。

フキダシの本体。128x128で9ScaleGridで分割して使います。グレーの市松のところはアルファ値が0で抜きの部分です。

f:id:hiyokosabrey:20160612225708p:plain

次にフキダシなんでシッポの部分。64x64です。

f:id:hiyokosabrey:20160612225755p:plain

もう一枚オマケ。

f:id:hiyokosabrey:20160612225834p:plain

32x128で、マスクとして使います。ちょっと変な使い方をします。

 

今回はカラーバリエーションを考慮してモノクロです。

コンテンツブラウザにインポートしたら、マテリアル作成です。

f:id:hiyokosabrey:20160612232332p:plain

上の カラー(V3)がフキダシの基本カラーで、下のカラー(V3)はフチドリ用です。

カラーの指定は普通のベクター3のノードですが、ベクターパラメータにしておくと、マテリアルインスタンスでカラバリが作れるので便利です。

何をやってるか気になる方は、いったん同じようにつないでみてから、▼をクリックするとそのタイミングでの状態がサムネイルで確認できます。ちゃんと反映されてないときはいったんアプライすればOKです。

 

次にフキダシのシッポ。これは2つのパーツに分けて重ねるのでマテリアルも2つ用意します。

一つ目。フチドリカラーのシッポ。

f:id:hiyokosabrey:20160612233657p:plain

次に2つ目。基本カラーのシッポ。

f:id:hiyokosabrey:20160612233803p:plain

よく似ていますが、 TextureSampleノードから、Opacity につながるところが違います。もちろん同じテクスチャを使っています。

 

このあたり、マテリアルパラメータコレクションを使えばカラーを共有できるはずなんですが、なぜかマテリアルドメインを User Interface にすると値が取得できませんでした。ナゾです・・・

 

マテリアルが揃ったので、Widgetを作成します。

まずはキャンバスにImageパーツを置いたら、さっき作ったマテリアルをセット。

f:id:hiyokosabrey:20160612235136p:plain

Detailタブの設定を変更します。

f:id:hiyokosabrey:20160612235127p:plain

Image Size のところにテクスチャの大きさを入力します。(必須)

Draw Asを Box に切り替えます。

Marginは、絵に合わせて調整します。これは小数点で指定するのですが、一応最大値は 0.5(50%)です。それ以上だと重複する部分が出てきます。個別に指定することもできます。

f:id:hiyokosabrey:20160613230433p:plain

次にシッポ。

テクスチャと同じ大きさのImageパーツを2つ配置して、用意しておいた2つのマテリアルをセットします。

f:id:hiyokosabrey:20160613231633p:plain

この3つのパーツの Z Order(表示優先) を ↓ のように設定します。

f:id:hiyokosabrey:20160613233218p:plain

シッポで本体を挟み込む感じです。

最初シッポをくっつけるようにしてたのですが、表示位置や画面のスケールによっては微妙なスキマができたので、このようにサンドイッチするかたちに変えました。

f:id:hiyokosabrey:20160614205055p:plain f:id:hiyokosabrey:20160614205101p:plain

 

次に、テキストブロックを配置します。

文字サイズやカラーを設定したらIs Variableにチェックを付けておきます。

f:id:hiyokosabrey:20160613234254p:plain

基本のパーツは揃いましたが、もうひとつオマケを作っておきます。

f:id:hiyokosabrey:20160612225834p:plainまずはこのテクスチャを使って下のようなマテリアルを作ります。

f:id:hiyokosabrey:20160614210028p:plain

プレビューで動きが確認できるので、スピードを調整する場合は、Timeノードから出てきた値に、Multiplyで 0.7 とか 1.5 とかを掛け算します。

このマテリアルを、UMGのイメージパーツにセットします。

f:id:hiyokosabrey:20160614210619p:plain

そのままだと ▲ なので、Transform のScale値で上下ひっくり返します。▼

f:id:hiyokosabrey:20160614210709p:plain

こういった単純なループアニメーションは、マテリアルにやらせておくとUMGのアニメーションを管理しなくて済むのでラクチンです。

特にカーソルの点滅アニメーションとかにオススメです。

 

ということで

ちょっと長くなってきたので今回はこの辺で。

次回いろいろ計算しながら、フキダシを変化させて、さらにテキストの切り替えをやります。