投稿

7月, 2017の投稿を表示しています

[UnrealC++] ゲームウィンドウ内にSlate Widgetを埋め込む

イメージ
はじめに 前回は、一般的なGUIを外部ウィンドウにまとめることで、主に非ゲーム的な用途を想定した、UE4アプリケーションの作成方法について紹介しました。今回は、外部ウィンドウにGUIをまとめるのではなく、ゲームウィンドウ内にGUIを埋め込むことで、一般的なGUIを持つUE4アプリケーションを作成する方法の一つを紹介します。なお、記事内での「一般的なGUIアプリケーション」とは、WPFやQtといったGUIフレームワークによって作成された、例えば図1のようなものを想定しています。 図1 一般的なGUIをもつアプリケーションの例 SWidget直接挿入による埋め込み ゲームウィンドウ内にGUIを埋め込む方法の一つとして、ゲームウィンドウを構築しているSWidgetに対し、埋め込みたいSWidgetを子ウィジェットとして挿入する方法が考えられます。図2は、PIEでゲームを開始し、現れたゲームウィンドウに対してWidget Reflectorを適用した結果です。SViewportに至るまでのツリー構造の中に、挿入可能なSVerticalBoxなどがいくつか確認できます。 図2 New Editor Window(PIE)に対してWidget Reflectorをかけた結果 ルートであるSWindowやGameViewport(SViewport)はGEngine経由でアクセスすることができるため、挿入可能なSVerticalBoxなどは容易に取得することができ、実際に埋め込みたいSWidgetの直接挿入も実現することができます(できました)。 しかし、この方法には問題があります。ゲーム開始モード(Selected Viewport, New Editor Window (PIE), Standalone, ......)によって、ゲームウィンドウを構築するウィジェット構成が異なるためです。図3はSelected Viewportでゲームを開始した場合の、Widget Reflectorの結果です。 図3 Selected Viewportに対してWidget Reflectorをかけた結果 図2と比べると、SViewportに至るまでの構成がまったく異なります。これを解決するためには、ゲーム開始モードごとのウィジェッ

[UnrealC++]SWindowで対話可能な外部ウィンドウを作る

イメージ
図1 対話可能な外部ウィンドウ(左下) はじめに UE4を非ゲーム的な用途のアプリケーションを作成する時、一般的なアプリケーションのようなGUIを作りづらいという問題に直面したことがあります。UMGで作るのが最も簡単ですが、外部ウィンドウにGUI部分をまとめて、ウィンドウ同士で対話するというやり方もあります。 今回は、図1のような、「ボタンを持ったウィンドウ」を生成し、ボタンが押されると特定の処理が実行されるような、対話可能な外部ウィンドウの作り方を紹介します。 実装 C++でMyGameInstanceを実装する Slateを用いるので、今回もSlateモジュールを追加します。.Build.csを次のようにします。 次に、GameInstanceを継承したクラス(名前をMyGameInstanceとします)を作成します。GameInstanceを選ぶ理由ですが、GUIをまとめたウィンドウ(以降、GUIウィンドウと略します)はレベルに依存せず、起動から終了までどこからでもアクセスできる必要があり、そのような機能に最も適当と考えたからです。 .hを次のように実装します。 OnClickedはGUI ウィンドウ上のボタンを押されたときの関数です。Blueprintで継承して、BP上で実装します。 .cppを次のように実装します。 GameInstanceのInit関数をオーバーライドして実装しました。 関数の本体は、SetTimerForNextTickを使って実行を遅延させます。これは、Init関数が呼び出される時点でゲームのウィンドウがまだ完全に生成されていない問題を回避するためです。 次に、SNewによってSWindowを生成します。SWindowのコンテンツには、SButtonを与えます。SButtonのOnClicked_Lambdaには、BlueprintImplementableEventに指定したOnClicked関数を呼び出すようなラムダ式を与えます。 最後に、FSlateApplication::Get().AddWindowAsNativeChildに、GUIウィンドウであるwindowと、ゲームウィンドウである GetGameViewportClient()->GetWindow()を親ウ

[UMG]NativeWidgetHostを継承してカラーピッカーを作る

イメージ
今回は、NativeWidgetHostというウィジェットを使って、動画のようなカラーピッカーをUMG上で使えるようにする方法を紹介します。 はじめに SWidgetとUWidget UE4エディタは多数のUIコンポーネント(ラベル、テキストブロック、ボタン、あるいはそれらを組み合わせたもの)で構築されており、それらUIコンポーネント全てがSWidget(を継承したクラス)です。図1はWidget Reflectorというツールを用いて、エディタを構築するウィジェットを調べたものです。WidgetName一覧にある接頭辞にSがついたクラスは全てSWidgetを継承したクラスであり、UE4エディタがSWidgetを継承したクラスの組み合わせによって構成されていることがわかるかと思います。 図1 Widget Reflector 一方で、図2はUMGのパレットを示したもので、この一覧にあるウィジェットがUWidgetです。UMGを使っていて気づいた方もいらっしゃるかもしれませんが、図2にあるウィジェット、例えばComboBoxやCheckBoxといったウィジェットのデフォルトの外観は、UE4エディタにある同じ機能を持ったウィジェットとまったく同じものです。それもそのはず、UWidgetはSWidgetをUMG向けにラップしたクラスであり、UWidget内部で使われているSWidgetと、UE4エディタで使われているSWidgetは同じものであるためです。 図2 UMGのパレット NativeWidgetHostとは UE4のドキュメント には、このように書かれています。 「子スレート ウィジェットを 1 つ格納できるコンテナ ウィジェットです。UMG ウィジェット内部にネイティブ ウィジェットをネスティングすることだけが必要な場合に使用します。」 ここで「子スレートウィジェット」とは、SWidgetを継承したクラスのことを指し、UWidgetとして公開されていないSWidgetをUMG上で使いたい場合に用いる、と説明されています。実は、SWidgetをゲーム中に使うこと自体は、UMGを仲介する必要がありません( 参考 )。しかし、この方法ではUIデザインはまともにできないため、より扱いやすくするためにUMGに

[UE4] Blueprintのグラフを画像として出力するプラグイン GraphShutter の配布・導入・使用法について

イメージ
はじめに UE4でBlueprintを他の人と共有するとき、皆さんはどうしていますか。言葉で説明する、プロジェクトで配布する、 BlueprintUE.com を使うなど方法は色々ありますが、やはりスクリーンショットを使うことが多いかと思います。 スクリーンショットを使う利点としては、UE4上でのノードの表示内容を視覚的に届けられる点が挙げられます。一方でノードの量が多いと、それを収めようとグラフ全体をズームアウトしてしまい、結果的にノードの名前も読み取れないぐらいまで縮小されてしまうことがあります。私は、これを避けるためにグラフのスケーリングを変えず、部分的にスクリーンショットを撮って、画像編集ソフトで結合するという方法をとっていました。これは手軽さからは程遠い作業で、いつも簡易化できないか考えていました。 今回は、それらの問題を解決するために、「任意のグラフを画像として出力する」プラグインを開発しました。このプラグインを使えば、どれほどノードが多くても、ショートカット1つで、グラフを見やすい大きさの画像として出力することができ、画像編集の手間を省くことができます。 注意事項 本プラグインは現在開発が始まったばかりで、多くのバグと問題を抱えています。また、この記事を書いている段階では、「グラフを画像として出力する」ということが実現可能であることを実証するための最低限の機能しか実装されていません。そのため、動作が非常に不安定であり、本番環境での使用を推奨しません。また、このプラグインを用いて発生した損害等に対する責任を製作者は一切負いません。 配布 次のリンクから、プラグインのバイナリをダウンロードできるようにしました。 https://1drv.ms/u/s!AqklsC13CiMggaMKGgdDT4C8p0wUHA 導入 1. ダウンロードしたzipファイルを解凍します。 2. プラグインを使用したいプロジェクト内に「Plugins」フォルダを作成します。 図1 Pluginsフォルダを作成する 3. Pluginsフォルダの中に解凍したGraphShutterフォルダをコピーします。 図2 Pluginsフォルダ内にGraphShutterフォルダをコピーする 4. UE4を起動してメニューの[Ed

[UnrealC++]LandscapeのHeightmapをC++から変更する

イメージ
今回は、図1のような、Landscapeの高さをC++コードによって変更する方法について紹介します。 図1 C++によって変更されたLandscape はじめに 本記事は Unreal Engine 4 Scripting with C++ に記載されていた、LandscapeのHeighmapを変更する方法を参考にしています。 個人的には、Landscapeをランタイムで生成するようなものを期待していたのですが、これは上手くいきませんでした。Editorモジュールも使っており、現状、ゲーム制作で使えるレベルではありません。それでも、Landscape関連のAPIを扱う際の取っ掛かりになるかもしれないので、方法をまとめておきます。 実装する Build.csにモジュールを追加する Landscape、LandscapeEditorモジュールをPrivateDependencyModuleNamesに追加しました。LandscapeEditorモジュールはEditorモジュールなので、Gameモジュールに追加するのは不適切なのですが、今回は簡略化のためにGameモジュールに追加しました。 GenerateLandscape関数を作成する BlueprintFunctionLibraryで作成します。まず、.hを次のようにしました。 次に、.cppを次のようにしました。 順にコードについて説明します。 (11~15行目)レベルにあるLandscapeActorを取得しています。TActorIteratorによって列挙していますが、有効なものが1つ見つかれば、それだけをHeightmapの変更対象とします。特定のLandscapeを変更対象としたいときは、ActorTag等を使うべきかもしれません。 (18行目)レベル内全てのLandscapeInfo(コンポーネントサイズやサブセクションサイズなどの情報を管理するオブジェクト)をリセットし、再生成する関数のようです。Unreal Engine 4 Scripting with C++に必要と書いてあるのですが、必要性がイマイチ分かりませんし、今回に限っては無くても動作しました。一応記述しておきました。 (21~23行目)対象のLandscapeの大きさを