【Unreal 4】UMGコンポーネントの紹介と使い方（Common common components）

著作権表示: この記事は、CSDN ブロガー「髪が増えたらゲームを作りたい」のオリジナル記事です. CC 4.0 BY-SA 著作権契約に従います. 転載する場合は、元のソース リンクとこのステートメントを添付してください.
元のリンク: https://blog.csdn.net/weixin_37658157/article/details/125386345

読者の皆様、UMG に連絡する前に、公式文書を参照することをお勧めします。

1. ウィジェット タイプ リファレンスhttps://docs.unrealengine.com/4.27/zh-CN/InteractiveExperiences/UMG/UserGuide/WidgetTypeReference/
2. UMG UI デザイナーのクイック スタートhttps://docs.unrealengine.com/4.27/zh-CN/InteractiveExperiences/UMG/QuickStart/
3. UMG Interface Designer ユーザー ガイドhttps://docs.unrealengine.com/4.27/zh-CN/InteractiveExperiences/UMG/UserGuide/

[UMG コンポーネントの紹介と使用] 他の記事ナビゲーション:
パネル パネル コンポーネント: https://blog.csdn.net/weixin_37658157/article/details/125603119

ボーダーボーダー

Border コンポーネントは、画像と色のプロパティを設定できるサブコンポーネントを最大 1 つマウントでき、サブコンポーネントのパディングを設定できます。

ボタン ボタン

Unity3D の Button とは異なり、UMG の Button は最大で 1 つのサブオブジェクトをマウントできます (なぜこのように設計する必要があるのか​​、まだわかりません。教えていただければ幸いです)。この制限を破るために、Button の下に CanvasPanel をマウントできます。 、後で紹介する CanvasPanel について言及します。
Button の最も重要な機能は、もちろん、クリック、プレス、リフトなどの機能です。これらは Unity3D と似ているため、ここでは繰り返しません。

チェックボックス チェックボックス

チェック ボックスには、チェック状態が変化したときに呼び出される OnCheckStateChanged イベントという 1 つのイベントしかありません。
正直なところ、UE4 のチェック ボックスのサポートは非​​常に貧弱です. CheckBoxGroup もチェック ボックスとラジオ ボックスの切り替えオプションもありません. 選択/未選択/未決定のスタイル構成のみを提供します. 実際の開発プロセスでは、Button+ を使用することをお勧めします.一連のチェック ボックス ロジックを記述して、複雑なビジネス ニーズにより柔軟に対応できるようにするイメージ。

イメージ画像

最も基本的で一般的なコンポーネントの 1 つであり、次の点に注目してください。

1. ティントダイイング / Color And Opacity 色と透明度
   Image.Tint と Image.Color はどちらも画像に色を重ねて追加しますが、色を設定できる場所が 2 か所ある理由がわかりません。
2. Draw As 描画方法
   (1) なし 描画なし
   画像を描画しないモードです。
   
   (2) Box Jiugongge
   このモードでは、画像は九公歌に引き伸ばされます. このモードに切り替えると、マージンが下に表示され、左/右/上/下は、四角形の 4 つの線のオフセット度 (0~1) を表します。下の左の写真 角は伸ばしていません。
   
   (3) このモードでの Border Margin は
   4 辺の厚さ (0~1) を指定することと同じです. エッジがタイリングまたはストレッチで埋められるかどうかについては, メカニズムはまだ不明です. 実験では、厚みが0.5以上だと伸びたりひっくり返ったり、0.5以下だとタイル状になります。
   
   (4) 画像
   このモードでは、画像のタイリング方法を選択できます。水平タイリング、垂直タイリング、および水平および垂直タイリングがありますが、これらは比較的単純であり、再度説明することはありません。
   

名前付きスロット 名前付きスロット

YouTube チュートリアル: https://www.youtube.com/watch?v=IxVfdthJYTs (サイエンス オンライン)

実際、このコンポーネントは、カスタム ブループリントを再利用するときにサブコンポーネントにアタッチできないという問題を解決するためのものです. たとえば: 現在、SlotHUD と呼ばれるカスタム ブループリントがあります. SlotHUD にテキストをアタッチする場合、プロンプトが表示されますマウントできません:

少し変更を加えて、SlotHUD ブループリントに Named Slot コンポーネント (左上隅にあります) を追加します:

この時点で、必要なコンポーネントを NamedSlot ノードに追加できます:

NamedSlot は補助ノードとしてのみ使用されます ただし、属性はありません. [詳細] パネルをクリックすると、NamedSlot の属性がその親ノードと一致していることだけがわかります (上の図の SlotHUD の属性はコンポーネントの名前が同じで、自動的に名前が変更される場合、名前を使用してコード内の NamedSlot を直接取得しないでください。重複した名前のトラップを防ぎます。

プログレスバー プログレスバー

(1) 塗りつぶし値と塗りつぶし方向を設定する
Percent と BarFillType を設定するだけで、5 つの異なる塗りつぶし方向から選択できます。

(2) マーキー効果（マーキー、動く字幕）
MarqueeImage の画像を設定し Is Marquee オプションにチェックを入れると有効になります これはなかなか面白い機能ですが、実際のゲーム開発では回転ドアを使うことが多いですテキストを表示し、この機能はかなり役に立たないようです。

テキスト テキスト

最も基本的で一般的なコンポーネントの 1 つで、比較的簡単に使用できます。テキストのフォント サイズ、書体、単語の間隔、色を設定できます。また、ストローク (アウトライン設定) と投影 (シャドウ オフセット - シャドウ オフセット) も設定できます。 、影の色 - 影の色)、取り消し線 (Strike Brush) と、すべての英語のテキストを小文字または大文字に変換する操作 (Transform Policy) もサポートしていることに言及する価値があります。

リッチ テキスト ブロック リッチ テキスト ブロック

YouTube チュートリアル: https://www.youtube.com/watch?v=msy7bRDpKF4 (Science Online)
公式チュートリアル: https://docs.unrealengine.com/5.0/zh-CN/umg-rich-text-blocks-in -アンリアル エンジン/

リッチ テキスト ブロックは、U3D よりも優れた設計が可能な UE4 の数少ないコンポーネントの 1 つであると言わざるを得ません. ラベル スタイルをカスタマイズできるだけでなく、グラフィックスとテキストの混合レイアウトもサポートできます (U3D は使用方法:
(1) ラベル スタイルをカスタマイズする
RichTextBlock をエディターに直接ドラッグすると、Content にテキストを入力した後に文字化けが発生します。

これは、リッチ テキストがUE4 の では Text Style Set (テキスト スタイル セット) の方式を採用 リッチ テキストのスタイル データを管理するため、テキスト スタイル セットを指定しないと文字化けが発生します。
まず、データ テーブルを作成しましょう:

もちろん、コンテンツ ブラウザで右クリックして作成することもできます:

次に、RichTextStyleRow タイプの構造を選択します:

新しく作成したデータ テーブルをダブルクリックし、[追加] をクリックして新しいスタイルを追加します。それを style1 に名前変更します (大文字と小文字は区別されません)。フォント ファミリを指定する必要があります。

プロジェクトに Font Family オプションがない場合は、Show Engine Content オプションをオンにして、エンジンの組み込みの Font Family を使用できます。

データ テーブルを作成したら、RichTextBlock の外観の下にあるテキスト スタイル セットのデータ テーブルに戻って設定し、コンテンツに次のように入力します。

<style1>这是一段文字</>

PS: スタイル名をデフォルトに変更すると、ラベルがない場合にデフォルトで使用されます. たとえば、次の 2 つの内容は同等です:

<default>这是一段文字</>
这是一段文字

(2) グラフィックとテキストの混合
RichTextBlock の Appearance プロパティの下に、Decorator Classes という項目があることに気づきましたか。これは、より拡張された機能をサポートできるように、既存のデータ テーブルに N 個のデコレータを追加することをサポートする UE4 の天才です。画像とテキストの混合レイアウトを実現したい場合は、画像デコレータ ブループリント クラスをデコレータ クラスに追加するだけです (詳細については、RichTextBlockImageDecorator.cpp を参照してください)。デコレータを追加するプロセスは次のとおりです。新しいデータ テーブルを作成します。タイプは RichImageRow です
:

上記 (1) に従い、新しいスタイルを作成しますが、現在構成されているスタイルはテキストではなく画像です: 次に、RichTextBlockImageDecorator を継承する

新しいブループリント クラスを作成します:

作成したばかりのデータ テーブルを指定します最後に、 RichTextBlock

コンポーネントに戻り、Created デコレーター ブループリント クラスを追加します。

RichTextBlockImageDecorator でサポートされるプロパティは次のとおりです (等号の前後にスペースを入れないでください)。

<img id="样式名" strecth="拉伸值" width="宽度值" height="高度值"></>

実験では、strecth 属性は効果がないように見えることがわかりましたが、ソース コードには strecth 属性を解析するためのロジックがあり、その理由は今のところ不明です。

スライダー

The most important callback of the Slider is OnValueChanged. 現在の値、最大値、スライド方向、およびスライダーとスライダーの色は、プロパティ パネルで調整できます。これは比較的単純です。
スライダーの長さはコンポーネント全体の長さを調整することで実現できますが、幅はバーの太さで調整する必要があることに注意してください。スライダの長さと幅は、それが属する画像の画像サイズを調整することによって実現されます. 画像を参照してください:

このコンポーネントの設計はあまり科学的ではありません. スライダとスライダは 2 つのコンポーネントで設計する必要があります.スライダーの一部の位置関係で特別な処理が必要な場合はさらに面倒です。