ゲーム制作素人のUE4日記

ゲーム専門外の建築家が、趣味としてゲームを作ってる日記。ゲーム制作はど素人。

ウィジェットって有能

はい!

どーも、水鳶です。
 
今回はウィジェットについて、お話しします(初めてマトモなTips書くかもしれんw)

 

UE4でウィジェットっていうと、HUD代わりに使ってる方が多いですが、知ってる方は知ってるし、知らない方は知らない(当たり前)使い方を伝授しましょう。

 

 

基本

f:id:miztobi:20160405174548p:plain

「コンテンツブラウザ右クリック→ユーザーインターフェースウィジェットブループリント」でウィジェットが作成されます。

名前は見つけやすいように、わかりやすくね… 

 

ウィジェットは視覚的に編集できます。

❶左のパレットからドラッグして配置。

❷右のスロットで位置・大きさを決める。

米印のような見た目をした、アンカーというものを原点として、『原点からどれぐらいの位置にどれぐらいの大きさで』配置するかを定めます。

また、アンカーは自由に移動させられます。

f:id:miztobi:20160405174551p:plain

アンカーをポイントとしてではなく、幅として使うこともできます。

下は画面いっぱいいっぱいにアンカーを広げて、オフセットを全部0にしてます。

アンカーの位置は画面の何%の位置かという指定になるので、画面の90%を占めるように設定することもできます。

f:id:miztobi:20160405174552p:plain

 

ディスプレイに表示するのはすごく簡単です。

レベルブループリントでもキャラクターでもなんでもいいです。

下のように組んでください。これだけです。

プレイヤーコントローラーはなくても問題ないです。

f:id:miztobi:20160405174549p:plain

また、よく使う手段として、下のようにウィジェットを一旦変数に入れます。こうすることで、任意の時にチカチカさせたり、文章を書き換えたりできます。

f:id:miztobi:20160405174550p:plain

(Create Widgetノードの Return Valueから引っ張ってもいい気はしますが…)

 

  • アニメーション

ウィジェットはアニメーションさせれます。パワーポイントのアニメーションみたいなもんです。…と言っても、変化させれることは限られてますが…。

f:id:miztobi:20160405174553p:plain

❶でアニメーションを立ち上げる。

❷で動かしたい時間に合わせて、

❸でキーを打ち込む。

ディティールウィンドウで、◆マークの付いたモノは、アニメーションのキーが打ち込めます。

アニメーションは、(右上にあるグラフってところからひらける)ウィジェットのブループリントからも再生できますし、ウィジェットを作成したブループリントからでも下のように再生できます。

f:id:miztobi:20160405182942p:plain

 

バインド

ウィジェットのテキストや色を、動的に変えることができます。

ブループリントで管理をするんですが、一番使いやすいのは変数を作って、それをバインドする方法です。

  • 変数とバインド

右上のグラフから、ブループリントを開きます。

f:id:miztobi:20160405174554p:plain

❶色や数字、テキストの変数を作ります。(画像では色)

❷それをセットするプログラムを組んで、

f:id:miztobi:20160405174555p:plain

❸右上のデザイナーに戻って、対象となるウィジェットの「バインド」と書かれたプルダウンメニューから、さっき作った変数を指定します。

 

たったこれだけで、色やテキストを動的に変更できます。

よくある使い方としては、セッターを関数の中に入れます。こうすると、ウィジェットを生成したブループリントから、テキストや色を変更できます。

 

プラスα

アクターのブループリントのコンポーネントとして、ウィジェットを配置できます。

ただし、警告が出ます。どうやら、実験的に使うことを前提としているらしいのですが…

あんまりよくわかってないです(すいません)

f:id:miztobi:20160405174547p:plain

ウィジェットの子を動的に追加していきます。

具体的には、Vertical Box に 別のウィジェットブループリントのText Block を追加してます。

これも初めに、❶ウィジェットブループリントを生成して、❷親に追加しています。

(ついでにテキストも編集できるようにしてます)

f:id:miztobi:20160405174556p:plain

 

こんな感じで、ウィジェットはただHUDの代わりというわけではありません。

利用方法はまだまだ、まだまだ、あると思います。

 

公式ドキュメントはこちら

docs.unrealengine.com

 

んじゃまたノㇱ