fc2ブログ

凛(kagring)のUE5/UE4とゲーム制作と雑記ブログ

2016 年から UE4 / 2021年から UE5 を触り始めました。勉強したもののメモ用ブログです。ゲーム制作に関するメモや雑記とか色々あります。C++ での Qt、Unity もほんの少しあります。

2016年11月 | ARCHIVE-SELECT | 2017年01月

PREV | PAGE-SELECT |

≫ EDIT

UE4 ウィジェットリフレクタ(WidgetReflector)を使ってエディタのUIのサイズを変更(スケーリング)する

UE4のエディタのUIのサイズを変更する方法です。
ちょうどウィジェットリフレクタについて調べていたのでメモ。

・UE4 エディターのUIサイズを自由にスケーリング
http://unrealengine.hatenablog.com/entry/2015/02/23/223000

いつもお世話になってます。alwei さんのブログです!

4Kモニターなどを使っていたり、極端に小さい解像度でやっている時には便利です。

こんな時に使えそうですね。

さてさて、実際にどういうことなのかは、上記ブログをみてもらったほうが早いのですが
ちょうど動画も上げられているようでしたのでペタリ。


こういう機能がデフォルトであるのはうれしいですね。

| UE4 | 16:13 | comments:0 | trackbacks:0 | TOP↑

≫ EDIT

UE4 エディタ拡張・ウィジェットリフレクタ(WidgetReflector)

エディタ拡張でUIを作る場合に、どれにどのウィジェットを使っているかわからなかったり、
どういうウィジェット使えばこういう配置になるのかわからないとか結構あったりすると思います。
スレートに関するものがあまりWEBになかったりするので…。

というわけで、資料がないならUE4のエンジンから学んでしましまおう!と。
ここで役に立つのが「ウィジェットリフレクタ(WidgetReflector)」です。

ウィジェットリフレクタについての詳しい説明はこちらのサイトがすごくためになります!

・【UE4】エディタ拡張(レイアウト編)
http://logicalbeat.jp/blog/840/

・[UE4] プラグインによるエディタ拡張(3) SlateUIを使用してウィンドウを作成する
http://historia.co.jp/archives/373

こういうことをやるためのものですね。

WidgetReflectorというツールを使用すると、画面に表示されているUIがどのようなウィジェットを使用して構成されているのかを確認することが出来ます。

メインメニューから [Window -> Developer Tools -> Widget Reflector] でツールを起動し「Pick Widget」ボタンを押すと、↓のように、マウスカーソルが乗っているUIの構成をリアルタイムに表示してくれます。

このツールを利用すれば、どのウィジェットを使えばそのUIが実現できるのかを簡単に調べることが出来ます。


ウィジェットリフレクタは「ウィンドウ」「デベロッパーツール」
ウィジェットリフレクタ002

「ウィジェットリフレクタ」を選択すると開くことができます。
ウィジェットリフレクタ003

ウィジェットリフレクタウィンドウの「Pick Live Widget」ボタンを押すと
ウィジェットリフレクタ004

こんな感じでUE4エディタ上のウィジェットにカーソルを合わせて中身を見ることができます。
ウィジェットリフレクタ000

カーソルを合わせたウィジェットがどういうウィジェットの構成でできているのかが
こんな感じで確認することができます。
ウィジェットリフレクタ001
「Esc」キーを押すと、今の状態で止めてくれるので中身を確認したい場合は使いましょう。

このツールのすぐれているところは

コードを確認する際は、「Widget Info」項目のソースファイル名をクリックすると、VisualStudioが立ち上がって、自動でファイルを開いてくれます。

ここにつきるのかなと思います!
最終的にエンジンのソースをのぞかないといけないというのは何とも言えないところで
ドキュメントがほしいところですが、
やっぱり一番エンジンのソースを見るのが勉強になるのかなーとぼんやり思ったりします。

| UE4 | 16:03 | comments:0 | trackbacks:0 | TOP↑

≫ EDIT

UE4 詳細タブなどで直接変更した値がリアルタイムで反映されない場合の対処方法

詳細タブなどで位置情報などを変更したときに、
瞬時にリアルタイムでビューポートに反映されないときの対処方法です。

とはいえ特に難しいことはなく、
ビューポートの左上にある三角のマークをクリックして「Realtime」にチェックを入れるだけです。

この三角のボタンを押して
エディタリアルタイム反映001

「Realtime」の項目にチェックをいれます。
エディタリアルタイム反映000

最初全然値が瞬時に反映されなくてUE4のエディタってそんなものなのかなーと思ってました。

| UE4 | 16:58 | comments:0 | trackbacks:0 | TOP↑

≫ EDIT

UE4 エディタ拡張・簡単なウィジェットの配置方法(SVerticalBox、SHorizontalBox、AutoHeight、.AutoWidth)

深くは考えないでできる簡単なウィジェットの配置についてです。

最近UE4の記事でお世話になってるロジカルビートさんを参考に。

【UE4】エディタ拡張(レイアウト編)
http://logicalbeat.jp/blog/840/
詳しくはこの記事を見るとよいです!

というわけで簡単に縦にウィジェットを並べる方法です。

SNew(SDockTab)
.TabRole(ETabRole::NomadTab)
[
SNew(SVerticalBox)
+ SVerticalBox::Slot()
.AutoHeight()
[
SNew(STextBlock)
.Text(LOCTEXT("STextBlock", "STextBlock"))
]
+ SVerticalBox::Slot()
.AutoHeight()
[
SNew(SButton)
.Text(LOCTEXT("SButton", "SButton"))
]
];

こんな感じに表示されます(整形しようと思ったらやり方わかりませんでした…)
スレートUIレイアウト000
「SVerticalBox」を使うと自動で縦に均等に並べてくれます。
そのままだとウィンドウサイズに応じて縦にも大きくなってしまうので
「.AutoHeight()」指定をすることで、一番適切な(小さくて整理する)サイズにしてくれます。
横も自動で適切なサイズにしたい場合は「.AutoWidth()」を指定します。

横にウィジェットを並べる場合はこんな感じに。

SNew(SDockTab)
.TabRole(ETabRole::NomadTab)
[
SNew(SVerticalBox)
+ SVerticalBox::Slot()
.AutoHeight()
[
SNew(SHorizontalBox)
+ SHorizontalBox::Slot()
[
SNew(SButton)
.Text(LOCTEXT("SButton", "SButton"))
]
+ SHorizontalBox::Slot()
[
SNew(STextBlock)
.Text(LOCTEXT("STextBlock", "STextBlock"))
]
+ SHorizontalBox::Slot()
[
SNew(SButton)
.Text(LOCTEXT("SButton", "SButton"))
]
]
];

こんな感じに表示されます。
スレートUIレイアウト001
「SHorizontalBox」を使うことでウィジェットが横に均等に配置されます。
大体はこれでいいのですが、ウィジェットごとに配置を綺麗にしたい場合はサイズを指定するか
「.AutoWidth()」を指定するとうまくいくと思います。

「.AutoWidth()」を指定した結果がこちら。

SNew(SDockTab)
.TabRole(ETabRole::NomadTab)
[
SNew(SVerticalBox)
+ SVerticalBox::Slot()
.AutoHeight()
[
SNew(SHorizontalBox)
+ SHorizontalBox::Slot()
.AutoWidth()
[
SNew(SButton)
.Text(LOCTEXT("SButton", "SButton"))
]
+ SHorizontalBox::Slot()
.AutoWidth()
[
SNew(STextBlock)
.Text(LOCTEXT("STextBlock", "STextBlock"))
]
+ SHorizontalBox::Slot()
.AutoWidth()
[
SNew(SButton)
.Text(LOCTEXT("SButton", "SButton"))
]
]
];

こんな感じに表示されます。
スレートUIレイアウト002

「SVerticalBox」
「SHorizontalBox」
「AutoHeight()」
「AutoWidth()」

最低限これだけ覚えておけば、結構いい感じにレイアウトできるんじゃないかなと思います。

スレートは文法が分かりにくいところがかなりありますが、
理解できればかなり自由なレイアウトができるようなつくりになってるみたいですね。

| UE4 | 17:33 | comments:0 | trackbacks:0 | TOP↑

≫ EDIT

UE4 プラグイン・プラグインの種類

エディタ拡張を勉強してるときに、
何も考えずに「Standalone Window」を選択していたので、そこら辺のメモ。
テンプレートについては以下のサイトで詳しい説明が書いてあります。

・UE4でのPlugin開発記録メモ(PluginBrowserのTemplate作成機能を使って簡単にpluginを作るよ)
http://qiita.com/BlackMa9/items/e9c99ee2bf652bb91064

テンプレートの種類は以下のものがあるようです。

・Blank

そのままですブランクのpluginです。特に無しです

・ToolbarButton

ツールバーやメニューバーに専用アイコンを追加します。
選択されるとダイアログボックスが表示され「OK」ボタンが選択出来ます。
ちなみに、ボタンに表示する画像も自由に設定でき、とりあえず40x40の画像を用意すれば差し替えることも出来ます。

・StandaloneWindow

「ToolbarButton」と同じく。ツールバーにボタンを表示、ボタンが押された際のイベントが実装されています。
ただし、こちらのテンプレでは、ダイアログボックスではなく、タブを表示する機能が実装されています。

・BlueprintLibrary

その名の通り、BP用関数ライブラリをpluginとして作るためのテンプレです。
テンプレにはFloatの値をIN/Outで指定できるBP「ExecuteSampleFunction」が空関数で作れらます。
※ちなみにテンプレで作られるBPの関数(実態)はplugin名に依存するため、環境によって実装先の関数名が異なりますので注意。ただしBP名は宣言部にある「DisplayName」に依存するため同じになります。(この辺は知識がないと複雑ですね・・・)

注意点:PlaginCreatorでBlueprintLibraryのプラグインを作成するとShippingで正常に取り込まれません。
これは、プラグインの種別(type)が”Developper”のままであることが原因です。
なので、BlueprintLibraryを作成したときは、"Runtime"に変更しないとダメです。

・EditorMode

ランドスケープやフォーリッジ用のエディタ拡張用プラグインっぽいです。(正直あまりわかってないです)
ただ、うまく理解し実装できると作業効率に繋がるエディタ拡張が作れそう?かも。
難点は、ボタン配置を理解するにはSlate辺りを理解する必要があるかも?

・ThirdPartyLibrary

サードパーティ製外部ライブラリを取りむ際のテンプレです。
テンプレではエディタ起動時にウインドウを表示するDLLを取り込んだときの動作が実装されているようです。
DLLやら引き込みたいと考えている人には、参考になるかもしれません。


とのことです。
「ToolbarButton」「StandaloneWindow」はエディタ拡張で。
「BlueprintLibrary」はゲームを作るときに重宝する感じになるのかなと思います。

| UE4 | 13:02 | comments:0 | trackbacks:0 | TOP↑

≫ EDIT

UE4 エディタ拡張・スレートUI(SlateUI)参考

スレートUI(SlateUI)参考用のメモ。
随時更新中(予定)

・スレート ウィジェットの例(公式ページ)
https://docs.unrealengine.com/latest/JPN/Programming/Slate/Widgets/index.html

・【UE4】エディタ拡張(準備編)(ロジカルビート)
http://logicalbeat.jp/blog/701/
順を追ってスレートを使ったプラグインの作成方法が書かれています。

| UE4 | 12:39 | comments:0 | trackbacks:0 | TOP↑

≫ EDIT

UE4 エディタ拡張・メッセージダイアログの表示(FMessageDialog)

メッセージダイアログを表示する方法です。
おなじみのこんな感じのやつですね。
メッセージボックス000

このサイトを参考にさせていただきました。

・UE4でのPlugin開発記録メモ(FMessageDialogでダイアログ表示編)
http://qiita.com/BlackMa9/items/38701d6b4122b966975c

詳しい説明は上記サイトに書いてありますのでそちらを見たほうがわかりやすいです!
こちらは自分の実践とメモ程度に。

構文としてはこんな感じになりました。

const FText MessageText = LOCTEXT("Message", "メッセージ");
const FText TitleText = LOCTEXT("Title", "タイトル");
if(FMessageDialog::Open(EAppMsgType::YesNo, MessageText, &TitleText) == EAppReturnType::Yes){

// EAppReturnType::Yesが押された場合の処理
}

プログラムでおなじみのダイアログと同じで、
「ダイアログの種類」「メッセージ」「タイトル」
という3つの引数のようです。
そのあとの行はどのボタンが押されたかのチェックですね。

公式ドキュメントはこちらに。

・FMessageDialog
https://docs.unrealengine.com/latest/INT/API/Runtime/Core/Misc/FMessageDialog/index.html

ダイアログの種類もこちらに。

・EAppMsgType::Type
https://docs.unrealengine.com/latest/INT/API/Runtime/Core/GenericPlatform/EAppMsgType__Type/index.html

結構エディタ拡張にはちょいちょい使いそうな機能です。
ちなみにこれ処理をみてもらうとわかるとおり、同期処理でのメッセージダイアログなので
非同期の場合はまた別の方法がありそうですね。

| UE4 | 14:40 | comments:0 | trackbacks:0 | TOP↑

≫ EDIT

UE4 エディタ拡張・プラグイン作成とウィンドウ表示

エディタ拡張に手を出すことにしてみました。
最近でとても参考になる記事があったので詳しくはこちらを見るとよさそうです!

ロジカルビートさんためになります!

【UE4】エディタ拡張(準備編)
http://logicalbeat.jp/blog/701/

とりあえずやり方をメモ。

「編集」メニューの「Plugins」を実行します。
プラグイン作成001

右下の方にある「New plugin」ボタンを押します。
プラグイン作成002

どのテンプレートにする?と聞かれるので「Standalone Window」を選択します。
プラグイン作成003
作成するフォルダとプラグイン名も入力しましょう。

と、これだけで完了です。
そうするとエディタ上部に作ったプラグイン名のボタンが増えてるので、それを押すとウィンドウが表示されます。
デフォルトのままだと中央に文字が表示されるだけのウィンドウですが。

とりあえずこれだけだとさびしいのでソースをいじってウィンドウにボタンと文字を表示してみることにしました。

ロジカルビートさんのここらへんを参考に。

【UE4】エディタ拡張(ラベル編)
http://logicalbeat.jp/blog/733/

とはいえ、ひとつしかUIを表示していなかったので見よう見まねで二つ表示してみることに。
プラグイン作成004
うん。表示されましたが微妙な感じになりました。
ボタンが大きい…。
SlateUIの構文をもっと勉強しないとだめですねこれ。

| UE4 | 16:57 | comments:0 | trackbacks:0 | TOP↑

PREV | PAGE-SELECT |