58.UIとは？ - Vantan Unreal Engine 5

58.UIとは？

「UI」はゲームでいう画面上のテキストやHPバー、持ち物のインベントリなどのボタンや画像の事です。下の画像で言うと、ボタンやテキスト(左下の操作ボタン、右下の複数のボタン、中央のChapterなど全て)の事をUIと言います。

https://scrapbox.io/files/65c8b2f0318f800025372642.jpg

UIはUserInterfaceの略で「ユーザーとゲームを繋ぐもの」という意味があります。正確に言うとUIとは画面のボタンだけではなく、キーボードの操作やマウスの操作なども含みます。しかしゲームで言うUIは一般的にゲーム画面上で表示されているボタンやテキストなどの事を指します。「UI = ボタンやテキストなどの画面上の操作インターフェース」と覚えておきましょう。

UnrealEngineにおけるUI作成方法は？

UnrealEngineにおいてUIを作る方法は二つあります。それがUMG(ウィジェットブループリント)と、ブループリントから作る「HUD」という方法になります。

ただし「HUD」の方はほとんど使用しないので正直覚える必要はありません。なのでこの章ではUnrealEngineでUIを作成する基本的な方法「UMG(ウィジェットブループリント)」を使った方法について解説します。なおC++の場合はコードからUIを作成していくのですが、C++の知識が必要で難易度が高くなり、さらに手間がかかる方法になるのでここでは解説しません。基本的にはこの章で紹介する方法を採用してゲームのUIを作成する事をおすすめします。

①UMGとは？

「UMG」はUnrealEngineで主に使用されるUI作成ツールの事です。Unreal Motion Graphicsの略で直訳すると「仮想的なモーショングラフィックス」という意味になります。UMGは様々なUIを思い通りに作成する事ができます。UMGはアセットで言うと「ウィジェットブループリント」というアセットにあたります↓

https://scrapbox.io/files/65c8b4786feeef0026ed79fd.jpg

このウィジェットブループリントを作成して開くと以下のUIを作成する場所、「ウィジェットブループリントエディタ」が開きます。ここでゲーム画面に表示するUIを作成するという事になります↓(UIを編集するウィジェットブループリントエディタ)

https://scrapbox.io/files/65c8b4a0c2271000241474da.jpg

ここのあたり名称がややこしいのですが、イメージとしてはUIを作成する方法が「UMG」という名称で、実際にUMGでUIを作成するアセットが「ウィジェットブループリント」というアセットになります。

UMGでUIを作成する簡単な流れ

このページではUI作成方法を簡単に紹介して次ページからUIを実際に作っていきます。

ウィジェットブループリントエディタでは、ウィジェットと呼ばれるUIのパーツを組みあわせて表示するUIを作成していきます。UMGのエディタ左側にウィジェットというUIのパーツとなる部品が沢山並んでおり、中央の画面にウィジェットを追加して組み立てていきます。例えばテキストというウィジェットを下では追加しています。

https://scrapbox.io/files/65c8b509f9aceb00241b193e.jpg

ウィジェットとは？

ウィジェットはUIの構成部品の事です。ウィジェットを組み合わせる事でゲーム画面上のUIを作成していきます。

UIをUMGで作成した後にブループリントで実際のゲーム画面に出力させて使用します。こんな感じになります↓

https://scrapbox.io/files/65c8b5a93b4d4200247ef3f9.jpg

②「HUD」とは？

ではもう一つUIを作成する方法のHUDですが、HUDは一般的に知られている意味としての「HUD」とUnrealEngineでUIを作成するツールとしての名称の「HUD」があります。まずHUDの一般的な意味から簡単に紹介していきます。

一般的な知られている「HUD」の意味とは？

HUDはHead up display(画面に表示される情報)の略で、画面上に表示されるHPバーやスコアなどのUIという意味で知られています。

UIとHUDは意味が似ていますが、UIは「画面上のボタンなど含むユーザーとゲームを繋ぐもの全て」で、HUDは「ゲームプレイ中のHPバーやスコアなどのUI」の事を指します。

UIを作成するツールとしてのHUDとは？

UnrealEngineでUIを作成する方法としてのブループリントクラス「HUD」というものがあります。このHUDはコンテンツブラウザで右クリック > ブループリントクラス > HUDと検索すると出てくるブループリントクラスになります。

https://scrapbox.io/files/65c8b816c02f920025302ecd.jpg

しかしこのHUDは、昔のUI作成方法でとてもシンプルなUIしか作成する事ができません。なのでUIを作成する事はできますが、使う機会は今はほぼありません。HUDで作ったUIは以下画像のようにテキストも汚くなってしまいます↓

https://scrapbox.io/files/65c8b84455d3820025c5745c.jpg

なのでHUDを使う場合は非常に限定的です。

まとめ (UIとは？)

UIとはゲーム画面上のボタンやテキストやHPバーなどの事を指します。UnrealEngineではUIを作成するツールとしてUMGとHUDというものがありますがHUDはほぼ使わないのでUMGの方を極めていけばオッケーです。