UE5 で Render Target と SceneCapture(Component)2D で背景透過でメッシュをキャプチャする

UE5ぷちコンに出したゲームの中で利用したので忘れないようにメモです。

ゲーム内では以下のキャラクター選択と、罠選択で利用しています。

キャラクター選択 罠選択

SceneCapture2D と Hidden Actors を使う

[UE4]アルファ付きキャプチャー画像の簡単作成|株式会社ヒストリア

上記で紹介されている方法です。

記事では Level に直接 SceneCapture2D を配置していますが、BP を作成して SceneCaptureComponent2D を利用することもできます。今回の私の用途のように最初から撮影する対象が固定されている場合はこの方が便利でした。(他にも方法がありそうな気がしますが、、、)

ただ、この場合は Hidden Actors の設定は Level に配置した状態でしかできないので注意です。(ThirdPerson テンプレートのデフォルトマップだと SM_SkySphere を抜いておけば大丈夫です)

Texture を作成し Material にする

記事どおりではありますが以下のようにしていきます。今回は Widget に表示するので Material もその設定にします。

Render Target を Material にする

キャプチャするメッシュに動きやエフェクトを発生させたまま UI に表示したい場合は、Render Target をそのまま Material に利用できます。

ノードは同じですが、 Texture Sample の Texture の設定だけを Render Target に変更します。

UI に表示

ImageWidget コンポーネントの Brush に作成した Material を配置します。スクリーンショットだと分かりにくいのですが、Render Target を指定した方は動いたままで表示されています。

私は経験が浅いので、上記の方法で多くの場合は問題なさそうに思います。以降は調べていた中で気になった方法です。

SkySphere の外側に持っていっても同じことにはなる

SkySphere の外側に配置し、かつ向きを SkySphere から反対にむければそれだけで Hidden Actors なしで透過した状態になります。

グリーンバックを使う

上記で作成した BP にカメラと撮影対象の周りを囲むように壁を隙間なく配置します。今回使用したマテリアルは Green 単色ですが、撮影対象の色に応じて調整してもいいと思います。

Render Target の指定も特に変更はありませんが、今回は Hidden Actors で背景を抜いていないので Material 側で工夫が必要になります。

Distance でグリーンバックとの色の距離を判定し近ければ透過させるという方法です。なので、メッシュに同色が含まれていると一緒に消えてしまいます。

スクリーンショットDetails に映しているように、if 式で判定条件を調整し、できるだけキレイに抜けるようにする手間もあります。

ただ、この方法だと Level に配置するだけで完結するので Hidden Actors を指定する必要がありません。

Post Process と Depth を使う

最後に Post Process と Depth を使う方法です。以下の動画を見て、深度で抜いた方が楽そうだなと思いました。

How to Create Masks With the Custom Depth Buffer | Tips & Tricks | Unreal Engine - YouTube

SceneCapture2D には Post Process Material を指定できるのでそれを利用します。

Blend Mode は不透明 (Opaque) である必要があるのと、Output Alpha が必要なところがポイントです。

Post Process Materials in Unreal Engine | Unreal Engine 5.0 Documentation

Outputting alpha is not yet supported (should go through Opacity).

上記ドキュメントから Alpha は Opacity を通すとなっているため、SceneDepth の結果は Opacity に流します。(そもそも Output Alpha を ON にしないと opacity は有効にならない)
これで深さに応じて透過します。

もう一つポイントは、SceneCapture(Component)2DCapture Source の設定です。

Final Color にしないと、Post Process が適用された状態のキャプチャが取得できないためここを変更します。

SceneCapture(Component)2D の Post Process Materials に作成した Material を指定すれば完了です。

最初の Hidden Actors を指定したのと同様にキャラクターだけがマスクされた Rendar Target の結果が得られると思います。
よって、このケースでは Hidden Actors の時と同じく反転した Alpha で抜くだけの Material で OK です。

Custom Depth を使う

今回は全く必要無いのですが、とりあえず使ってみた版です。

まずは、BP 内の撮影対象である SkeletalMeshRender CustomDepth Pass を有効にします。Level に配置して、Buffer Visualization で確認できれば大丈夫です。

続いて Post Process Material です。正直、もっといい方法がありそうな気がします。特に SkySphere を抜くために if 式を使ってるあたりが ad-hoc 感が出ています。

この場合は Render Target の結果がこれまでとは変わってきますが、キャラクターが反転した Alpha になっているのは変わらないので最終的な Material は同じになります。

参考にさせていただいた記事

コード

GitHub - dany1468/UE5_RenderTarget_SceneCapture_Test

DaVinci Resolve で対戦動画を作ってみたメモ

UE5ぷちコンに提出するにあたり紹介動画を作ったのですが、今回はオンライン対戦ゲームを作成したので対戦相手側とこちらの双方で動画を撮影し、それを編集で合わせるという方法を取りました。

環境

  • Davinci Resolve 18.0

1. 2つの動画のサイズを変更して左右にずらす

  • Zoom を 0.5 に変更
  • Position を画面の 1/4 ずらす
    • 1920px の動画なので 480px を指定
    • 双方で 480px, -480px を指定すれば左右にずれる

簡単ですね。

2. Video Collage を使う

Video Collage は Effects の Resolve FX Transform にあります。

それをまずは一つのトラックに適用し以下のようにパラメータを設定します。2 つ目のトラックにもほぼ同じ設定をするので、一つ目の属性をコピー (コピー元のトラックで Ctrl + C して、コピー先のトラックで Alt + V し、Plugins だけペースト)すればOKです。

今回は 1 と同じような見た目にしたかったので余計な Global での Margins や Offsets は全て 0 を指定しています。
Rows も今回は 1 つなので 1 にしています。

Tiles の設定は Zoom の部分だけです。
2 つ目のトラックで Active TileTile 2 にすれば右側に表示されます。

最後に背景色ですが、こちらは Tiles の設定で変更できますので好きな色に変更できます。

その他

対戦動画を撮るにあたり、ある程度ログインやロビーでの待機時間を合わせておいた方が編集時の手間が少ないなと学びました。最初は片方が先にログインしてロビーでずっと待っている状態だったので、その間延びした部分をカットしようにも side by side で表示するため見た感じが変になったり(ロビーを作る前にもう片方がロビーに入ってしまうような感じになったり。。)して大変でした。

以降は、「せーの」で合わせたおかげで最後の撮影は編集いらずでした。

参考

UE5 で PlasticSourceControl を更新した状態で C++ プロジェクトを作成できない

前提

  • Win 10
  • Unreal Editor: 5.0.3
  • Source Editor: Rider

Unreal Editor 4 系や、Visual Studio での検証まではしていないので、環境依存の可能性も十分にあります。

状況

GitHub - SRombauts/UE4PlasticPlugin: Official Plastic SCM Plugin for Unreal Engine

上記から Plastic SCM plugin for Unreal Engine の最新版 (今回は 1.6.0, 1.6.1 で試しました) をダウンロードし、ドキュメントの通り UnrealEngineInstallDir\UE_5.0\Engine\Plugins\UE4PlasticPlugin に展開しました。

この時点では Plugins\Developer\PlasticSourceControl は残している状態です。

Blueprint プロジェクトでは問題ない

全く問題なく利用できます。なので当初は気づきませんでした。

C++ プロジェクトを作成する

PlasticSourceControl という同名のプラグインが複数存在するというエラーが出てしまいました。

プラグインを削除する

しかし次は XmlParser2 が存在しないという内容のエラーメッセージが出てしまいます。

調査

上述の Github リポジトリXmlParser2 あたりで Issue が上がっていないかなど調べてみましたが、期待したような内容は出てきません。

プラグインの .uproject と比較

   "Modules": [
        {
            "Name": "PlasticSourceControl",
            "Type": "Editor",
            "LoadingPhase": "Default",
            "PlatformAllowList": [
                "Win64"
            ]
+      }
-      },
-      {
-          "Name": "XmlParser2",
-          "Type": "Editor",
-          "LoadingPhase": "Default"
-      }
-  ]

上記のように今回エラーの内容となっている XmlParser2 が入っています。

試しに外してみる

.uproject から XmlParser2 の記述を削除してみました。

結果としては、エラーが解消され無事 C++ プロジェクトが作成できるようになりました。

また、Unreal Editor での Source Control の操作も問題なくできているので、プラグインとしても利用できているようです。

XmlParser2

これ自体は、PlasticSourceControl と同じ Source フォルダに入っていて、PlasticSourceControl から参照されています。

なので、おそらくソースからビルドする際には上記の記述が必要になると思いますが、私はビルド済のバイナリを使っているので、今回はこのワークアラウンドで行こうと思います。

ARマーカーに適切な画像を探す

さっぱり分からなかったのでメモです 😅

Xcode で調べる

とりあえず AR 用のプロジェクトを作成し、 Assets に AR Resources Group を作成し判定したい画像を入れていきます。

実際の Width/Height を入れる必要があるので入力すると、最終的な結果が表示されます。

上記の場合一つ以外はアラートマーク ⚠️ が出ています。理由も出ているのでそれを参考にします。繰り返しのパターンは良くないんですね。

arcoreimg tool を使って調べる

The arcoreimg tool  |  ARCore  |  Google Developers

It is built into the Unity SDK and ARCore Unreal plugin.

上記の通り Unreal Plugin にも含まれています。Mac の場合は以下にあります。

/Users/Shared/Epic Games/UE_5.0/Engine/Plugins/Runtime/AR/Google/GoogleARCore/Binaries/ThirdParty/Google/ARCoreImg/Mac/ptdbtool_macos_lipobin

面白いことに、Xcode ではアラートが付かなかった画像が 25 のスコアで、繰り返しパターンで注意された画像が 100 というスコアになりました。

参考

UE5 プロジェクトにおいて Finder のコンテクストメニューから Xcode プロジェクトを作成できないとき

通常は

上記のように .uproject ファイルのコンテクストメニューから簡単に Xcode プロジェクトを作成できます。

反応しない

HandheldAR プロジェクトを作成している際に、Apple Developer の登録を済ませ Certificate 等の導入を進めたどこかのタイミングから、上記のプロジェクト作成が反応しなくなりました 😩

原因を探る

UE5 Can't Generate xCode project : unrealengine

上記の記事でコマンドラインからプロジェクトを作る方法が紹介されていたため早速試してみました。

% sh "/Users/Shared/Epic Games/UE_5.0/Engine/Build/BatchFiles/Mac/GenerateProjectFiles.sh" -project="/Users/xxx/Documents/Unreal Projects/ARExample/ARExample.uproject" -game
.....略
Running bundled mono, version: Mono JIT compiler version 5.16.0.220 (2018-06/bb3ae37d71a Fri Nov 16 17:12:11 EST 2018)
/Users/Shared/Epic Games/UE_5.0/Engine /Users/Shared/Epic Games/UE_5.0/Engine
Executing iPhonePackager signing_match Engine -bundlename com.YourCompany.UnrealGame

.....略
No matching Signing Data found!
                           
No matching provision file was discovered for . Please ensure you have a compatible provision installed.
Writing project files... 100%

そうすると、上記のようなエラーが発生していました。どうやら、bundlenamecom.YourCompany.UnrealGame で provision ファイルを検索しており、それが存在しないとなっているようです。

もちろん、Unreal Editor での Project Setting では Bundle Identifier は設定済ですがそれが認識されていません。

今回利用したプロジェクト用の provision ファイルも Xcode にはインストール済みであっても失敗します。

失敗と言いつつ、 「Writing project files... 100%」となっているので、プロジェクトファイルだけ書き出して欲しい。

とりあえずの対処

Unreal Editor から C++ ファイルを作成すると Xcode のプロジェクトファイルも作成されるのですが、そちらは問題なく作成されました。

その後 Xcode で改めて 「Signing & Capabilities -> Bundle Identifier」 を設定しておきます。

UE5 で AR プロジェクトを実機で動作させるまで 📲

最初に

まず、以下の公式のページが丁寧に解説されているので、情報としてはそれ以上のことはこの記事にはないと思います。

また、以下の記事もわかりやすいです。

本稿では、個人的に手順を追いながら時間のかかったことなどを記載していく形です。

無料の実機ビルドは諦めた

この段階でライセンスを購入したくはなかったので無料の範囲で行いたかったが、公式含め多くのチュートリアルがライセンス有りを前提にしていたり、リンクを失ってしまったがそもそもどこかのバージョンから UE を使う場合においてはライセンスを使わないと難しいみたいな記述も読んだので諦めることにした。

私が iOS 開発に詳しくないだけなので、UE のツールチェインの外で実機に転送するなどすれば可能なのかもしれません

準備

Handheld AR のプロジェクトを作成する

テンプレートのまま作成しました。

Apple ARKit の Plugin はデフォルトで有効になっています。

Xcode 用のプロジェクトファイルを作成する

通常なら Finder のコンテクストメニューからサクッと作成できるのですが失敗します。

UE5 Can't Generate xCode project : unrealengine

上記の情報にあるように GenerateProjectFiles.sh を使って生成を試みます。(-h でいくつかオプションも表示されます)

が、それでも失敗しました。。

No matching Signing Data found!
                           
No matching provision file was discovered for . Please ensure you have a compatible provision installed.

となってしまいます。

実は、諸々の Certificate や Provision の導入をする前は普通に成功したのですが、その辺の導入をした後に改めてプロジェクトを作ってやってみると失敗するようになってしまいました。

ここは引き続き調査なのですが、とりあえずはプロジェクトファイル無しでも実機で動作させるには問題ないため進めます。

プロビジョニングプロファイルと署名証明書

Unreal Engine のプロジェクト向けの iOS、tvOS、および iPadOS のプロビジョニング プロファイルおよび署名証明書をセットアップします | Unreal Engine ドキュメント

上記に沿って進めます。

「2. XcodeApple Developer アカウントと関連付ける」

こちらは特に迷うところはありません。

「3. 識別子 (App ID) を作成する」

上記のような感じで作成しました。

バンドル ID は、Xcode プロジェクトと Unreal Editor の [Project Settings (プロジェクト設定)] の両方で一致している必要があります。

上記の記述がドキュメントにある通り、Unreal Editor の設定も以下のように更新しておきます。

「4A. Xcode からコード署名証明書を生成する」

上述したように、Xcode のプロジェクトファイルを作成できなかったため、ここはスキップします。

「4B. 署名証明を手動で生成する」

CertificateSigningRequest.certSigningRequest みたいなファイルが生成されるので、ドキュメントの後の手順に沿って Apple Developer ページで証明書を作成し、キーチェーンに登録します。

「Device を登録する」

これはドキュメントには無いですが、Device も登録します。

UUID ですが、取得方法はいろいろあると思いますが、Music アプリから取得しました。(ここがクリッカブルになってるのは知りませんでした)

「6. プロビジョニング プロファイルを作成する」

(なんで 5 がないんだろう。en-US にしても同じなので翻訳漏れではなさそう。)

ドキュメント通りで問題ありませんが、先ほど登録したデバイスを選ぶ箇所があるのでそこも選択します。

そのプロファイルをクリックして Dock の Xcode アプリ アイコンにドラッグし、インストールします。

上記の記述がありますが、以下の場所にあることを確認できます。

~/Library/MobileDevice/Provisioning Profiles/

「7. プロビジョニング プロファイルと署名証明書を Unreal Editor に追加し、チームで共有する」

ここはスキップします。

「8. プロジェクトをパッケージ化する」

ここまでの仕上げとしてプロジェクトの設定を確認しておきます。基本的にはチェックを入れるだけで済むはずです。

登録した実機をケーブルで繋ぎます。

私は、パッケージ化ののちに Quick Launch で実機に入れました。

無事に実機で実行できるようになりました 🎉

UE5 での Rider 利用時の現時点での注意点

注意点とは書いていますが、個人的な注意不足であり、通常は最初に設定してしまえばハマることは無いように作られています 😅

UE 5.0.1 での Rider の起動方法

ここは注意点でもなんでもないです。

UE4 の頃から変わりませんが、Editor Preference で Rider を Source Code Editor に指定します。

そうすれば、上記のように Tools メニューから呼び出すことができます。

RiderLink Plugin の導入方法

UE4 の頃は RiderLink は Engine に導入しても問題ありませんでした。なので、そのノリで以下のプロンプトが出てくると Engine に Install したくなります。

これをしてしまうと、以下のようなエラーが発生するようになりビルドができなくなってしまいます 😥

個別のゲームにインストールするようにする

上記の解決方法は、単に Engine ではなく各ゲームにインストールするだけなのですが、それを毎回するのは面倒です。
なので、Rider 側で自動で新規のゲームに対してプラグインをインストールするオプションを入れてくれています。

上記のオプションの部分にもしっかりと、ランチャーから起動した UE5 では Engine インストールは動かないと書かれています。

上記のオプションのチェックをつけて、Save すれば自動でゲームに対するプラグインのインストールが始まります。

そうなると以下のように、Engine に入っていたプラグインはなくなり

代わりに以下のようにゲーム内のプラグインとして追加されます。

これで問題なくビルドができるようになります。

上記のオプションのチェックは、新たにプロジェクトを作って適用されるので以降は新規作成時に自動でプラグインが追加されます。