はじめに
OX ENGINNER STUDIOでクライアントエンジニアをしています澤野です。
今回はUnrealEngine5(以下UE5)を用いて初めてC++でUMG実装を行う人に向けて、
ざっくりと実装を行う過程をテキストの変更処理を例にご紹介します。
制作フロー
制作フローとしてざっくりと次のステップに分ける事ができます。
①ウィジェットブループリントを作る
➁クラスの追加
➂コード実装
➃親クラスの変更
➄テスト
各ステップについて順番に説明していきます。
ウィジェットブループリントを作る
UMGのレイアウトやアニメーション、UE上での見た目を確認するためにまずはウィジェットブループリント(以下WBP)を作って確認します。
この作業は仮実装などではない限り、デザイナーさんに作成していただく事がほとんどです。
WBPの作り方などについてはネット上に記事が沢山あるため割愛します。
クラスの追加
WBPが用意できたらWBPに対する処理を書くためのクラスを作成します。
エディタのメニューバーからツール ー＞新規C++クラスを選択して「C++クラスを追加」ウィンドウを開いてください。
このウィンドウで「全てのクラス」を選択し検索バーに「User Widget」と入力しヒットしたUser ウィジェットを選択して「次へ」を押してください。
ファイル名を入力して「クラスを作成」を押してください。
今回はファイル名を「TestWidget」にしました。
.cppと.hが追加されたらクラス追加完了です。
コード実装
①ウィジェットのバインド
いよいよC++コードを書いていきます。
今回はテキスト変更処理を例にという事で、WBP生成時にテキストを変更し2秒経過後にさらにテキスト変更を行っていきたいと思います。
先程追加したクラスのヘッダーファイルにWBP上に配置されているウィジェットをバインドするための変数を用意します。
// テキストブロックのバインド
UPROPERTY(meta = (BindWidget))
TObjectPtr<UTextBlock> TestTextBlock;
ここで使用しているプロパティ修飾子BindWidgetについて説明します。
WBP上に配置されている各ウィジェットをC++コードから操作するために
C++クラスのメンバー変数と配置されているウィジェットを結びつける必要があります。
プログラミングでは何かの要素や識別子・データなどを相互に結び付けたり、関連付けたりする事をバインドと言います。
プロパティ修飾子であるBindWidgetとはC++側の変数とWBP上のウィジェットを自動的にバインドしてくれるプロパティ修飾子です。
このプロパティ修飾子を付けると変数名と同じ名前のウィジェットをWBP上から探して自動でバインドしてくれます。
ただ、注意が必要なのは変数名とウィジェットの名前が一致していないとWBPがエラーになるため
ウィジェットの名前を変更した際にプログラムの変数名も変更しなくてはいけないので気をつけてください。
よって今回はWBP側でテキストブロックの名前を「TestTextBlock」としていたため、変数名も合わせて「TestTextBlock」としています。
またもう一つポイントとして、UE5から生ポインタの使用は非推奨となっているためTObjectPtr型を使用しています。
生ポインタよりもダングリングポインタ、ガベージコレクションによる不具合の危険性が低いためこちらを使用しましょう。
➁関数の実装
さて、ウィジェットのバインドができたところで今回の例であるテキストの変更処理を追加していきます。
まずヘッダーにコンストラクタとTickを追加します。
// コンストラクタ
virtual void NativeConstruct() override;
// Tick
virtual void NativeTick(const FGeometry& MyGeometry, float InDeltaTime) override;
UUserWidgetを継承したクラスの場合コンストラクタとTick処理は「NativeConstruct」と「NativeTick」で行います。
AActorなどを継承した場合と関数が異なるので気をつけてください。
cppファイルの方にもテキスト変更処理を追加していきます。
void UTestWidget::NativeConstruct()
{
Super::NativeConstruct();
if (IsValid(TestTextBlock))
{
// テキストの変更
TestTextBlock->SetText(FText::FromString(“Start”));
}
}
void UTestWidget::NativeTick(const FGeometry& MyGeometry, float InDeltaTime)
{
Super::NativeTick(MyGeometry, InDeltaTime);
ElapsedTime += InDeltaTime;
// 2秒後にテキストを変更する
if (IsValid(TestTextBlock) && ElapsedTime > 2.0f)
{
//2秒経過を知らせるログ表示
FString Log(TEXT(“2 seconds later”));
UKismetSystemLibrary::PrintString(GetWorld(), Log, true, true, FLinearColor::White, 1.0f, NAME_None);
// テキスト変更
TestTextBlock->SetText(FText::FromString(“Finish”));
}
}
NativeConstrucで最初に表示するテキストの設定を行い、NativeTickでは2秒カウントを行ってからテキストの表示を行っています。
SetTextなどについては公式ドキュメントをご参照ください。
今回のコードのポイントはIsValid関数です。
ゲーム開発においてNull参照によりゲームがクラッシュしてしまいゲームが途中で中断されてしまうと
ゲームの品質に影響を与えるためNullチェックは大切です。
このコードではIsValid関数を用いてNullチェックを行っています。
IsValid関数はNullチェックの他にガベージコレクションの対象になっていないかの確認もしてくれるため
普通にNullチェックするよりも安全です。
UEのNullチェックではIsValidを使うようにしましょう。
あと、TextBlockのインクルードを忘れずに。
#include “Components/TextBlock.h”
親クラスの変更
ここまで出来たら最後にWBPの親クラスを作成したC++クラスに変更しましょう。
まずはエディタからWBPを開き、右上からグラフを選択しクラス設定を押してください。
その後詳細画面のクラスオプションから親クラスの変更を押してブルダウンから作成したクラスを選択してください。
今回はクラス名を「UTestWidget」としたためブルダウンから「TestWidget」を選択しています。
親クラスを設定した際、BindWidgetプロパティ修飾子が付いている変数の名前とウィジェットの名前が一致しないとコンパイルエラーになるためよく名前を確認してください。
こちらはコンパイルエラーになった場合の画面です。
あとは、このWBPをレベルに生成するだけです。
テスト
今回はテスト用に表示するためにDefault Pawn ClassのBeginPlayから生成を行います。
ここでの注意としてウィジェット作成ノードのClassピンにC++のクラスではなく、
必ずC++クラスが親クラスとなっているWBPを選択してください。
でないとテキストが表示されません。
ここまできたらレベルのプレイボタンを押してください。
きちんとC++コードから設定した”Start”が表示されています。
また、2秒経過後にきちんと”Finish”と2秒経過を知らせるログが表示されたのでTickもきちんと動いている事が確認できました。
まとめ
いかがでしたでしょうか？以上がC++による簡単なUMG制作の例でした。
UUserWidgetを継承したC++クラスを作成するとWBPを作成する際に表示される親クラス選択の候補として出てくるので仕様書などでUIの仕様が固まっているなら先にC++クラスから作成しても構いません。
その際、WBP作成時にC++クラスを選択するため親クラスの設定などは不要になります。
今回の例はテキスト変更でしたがUEにはボタンや画像など色々なウィジェットが用意されているのでぜひ該当クラスの公式ドキュメントを読んで様々なUI実装に挑戦してみてください。
最後までお読みいただきありがとうございました。
