mushroom log

不完全勉強メモ

CommonUI Pluginの(デザイン的な)話

この記事はUnreal Engine (UE) Advent Calendar 2022 Part3の13日目の記事です。

CommonUI Pluginについて

UE4.26ごろからひっそりと、Epic公式のCommonUI Pluginが利用できるようになっています。現時点でまだExperimentalなのですが、すでにFortnite等で実用化されているようで、十分な実績があります。また、今年11月のUnreal Insiteでもライブが行われ、その便利さがアピールされました。

さて、このPluginでは以下のようなメリットを受けられます。

色々ありますが、デザイナー視点では「スタイルを分離できる」点にとても嬉しさを感じますね! そこで今回は、Common UIのデザイン方面での使い方を紹介していきます。

Common UI Pluginの導入について

 

 

(すいません、現在執筆中です)

 

 

Common UI Widgetの作り方

Common UIウィジェットの機能を使う場合、Common User Widgetクラスを継承したウィジェットを作成する必要があります。

 

 

(すいません、現在執筆中です)

 

 

ボタンを作成する場合はCommon Button Baseクラスを継承する必要があります。作成時点では空っぽですが、何かしらのプリミティブを挿入すると見慣れたボタン型の形が表れます。

Styleの作り方

 

 

(すいません、現在執筆中です)

 

 

 

なお、従来のプリミティブButtonウィジェットにあるPaddingが設定できないため、押し下げた表現がデフォルトではできません。

 

 

(すいません、現在執筆中です)

 

 

 

※ただし、このサウンド設定は排他制御が効かないようです。短時間でClickやHoverが発生すると、それだけのサウンドが再生されて非常にうるさくなります。

Styleを使った応用

 

 

(すいません、現在執筆中です)

 

 

最後に

スタイルを分離できることで、デザイナーだけで完結できる作業が増えます。また、紹介したように、見た目のコントロールを一か所に記述できることで、管理上のメリットが大きいです。ワンオフが増えがちなゲームUIでは場合によりけりですが、特にノンゲームでの利用では、WebデザインにおけるCSSのような存在として、大いに役立つ可能性があります。

今回紹介していないCommon UI Pluginのその他のメリットについても強力で、非常にお勧めできるプラグインとなっています。ぜひ、UIデザイナーの方は採用を検討してみてはいかがでしょうか。

それでは!

参考サイト

  •