[UE4学習]UE4触ってみた学習ノート -UE4のUMGUIデザイナのクイックスタート試してみた

UE4でUnreal Motion Graphics UI デザイナ(UMG)のクイックスタートを参考に、ボタン・テキスト・ゲージと各キー・クリックのインプット毎に値を変化させてみた時の話 —学習ノート

関連の連載記事1日目のページ：

[C, C++学習]UE4触ってみたのと、C, C++言語再学習ノート-1日目- –C言語、コンパイル方法～C言語の変数型、文字列、書式指定、型キャスト、printf()、scanf()、自作の関数にも付く型、voidとは

公式のドキュメントの「UMG UIデザイナのクイックスタートガイド」に掲載されているものを真似して作ってみたものを載せています。

『UMG UI デザイナ』について軽く説明

UIっていうところから、何となく想像つかれる方もいらっしゃると思いますが、まず軽く説明します。

Unreal Motion Graphics UI デザイナ (UMG) は、ビジュアル UI オーサリングツールです。ユーザー向けに表示するインゲームの HUD、メニューやその他のインターフェース関連のグラフィックスを作成するために使用できます。UMG の中核をなすのは、ウィジェットです。これは、一連の事前作成された関数でインターフェース (ボタン、チェックボックス、スライダー、進捗バーなど) を作成するために使用できます。こうしたウィジェットは、特殊な Widget ブループリントで編集され、以下の 2 つのタブを作成に使用します。Designer タブでは、インターフェースと基本的関数を視覚的にレイアウトできます。Graph タブでは、使用されるウィジェットの背後の機能を提供します。
引用元: UMG UI デザイナ|Unreal Engine ドキュメント

つまりは、画面に表示させるテキストやボタンや画像など、そして、それに何かしらのインプットがあった場合(例えばクリックされたとか、キー入力されたとか)、それに変化の動作を関連付けるような感じのことをするようです。

第一印象から、実際に少し触ってみた感想

第一印象は、出てきた画面に戸惑いつつ、「かっこいいすごい！」(語彙力)となりました。でも、こう、何か伸ばして繋いでいくところは、何となくこの連載記事1日目でやったマテリアルエディタっぽいかなという印象も持ちました。

しばらく、公式ドキュメントと睨めっこしながら色々使ってみた感想としましては、変数があるところとか関数やマクロ、クラスが出てくるところ見ると、「これって変数やオブジェクトを視覚的に配置しただけで、割とコーディングそのままなんじゃない…？」と思いました。

ところどころ出てくる単語も(そりゃ英語ならそうだろ)、繋ぎ方の思考？というか指向？というか、そういう感じのものも何となく、プログラミングしているような印象受けました。

それでもって、こういった風に表現されていると、わかりやすいし、間違えも起こりにくいですし、効率性アップですね！(使いこなせさえすれば…！)

やっぱり考えつく人はこういうもの作っちゃうんだなーと感嘆と共に拝みたくなりました。

作ってみたものをチラ見せ

ちょっとライティングのビルドやってなかったので、左上の赤文字の「LIGHTING NEEDS TO BE REBUILT (2 unbuilt objects)」っていうのが邪魔なんですが、スタート画面は割とすんなりいけました。

※ちなみに、背景画像は、「バックグラウンドのサンプル」からダウンロードさせていただきました。

このボタンやボタンに関連付けるテキスト、それから、ホバーした時に、ボタンの色が黄色に変化したり、クリックした時に、ゲームスタートするように設定するのと、↓の画面の左右にある、テキストやゲージや、それが、何のインプットがあった時に、どんな反応するのか、また、その反応する値はどの変数の値か、みたいなものをつないでつないで設定しました。