追加された行はこの色です。
削除された行はこの色です。
&youtube(https://www.youtube.com/watch?v=BOUQMJBWW3Y)
[[https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO]]
[[00:00>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=00m00s]] オープニング
[[00:29>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=00m29s]] 1.SceneCapture[[↓>#002]]
[[00:40>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=00m40s]] 2.Scene Capture Cube[[↓>#003]]
[[00:59>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=00m59s]] 2-1.キューブマップの作成[[↓>#004]]
[[01:12>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=01m12s]] 2-1-1.キューブの描画ターゲット[[↓>#005]]
[[02:07>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=02m07s]] 2-1-2.解像度の変更[[↓>#006]]
[[02:30>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=02m30s]] 2-1-3.スタティックテクスチャ[[↓>#007]]
[[03:17>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=03m17s]] 2-2.メインキャラクターと異なる視点[[↓>#008]]
[[04:29>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=04m29s]] 2-2-1.Capture Every Frame[[↓>#009]]
[[04:56>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=04m56s]] 2-2-2.角度を変える[[↓>#010]]
[[05:17>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=05m17s]] 3.Scene Capture 2D[[↓>#011]]
[[05:36>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=05m36s]] 3-1.鏡のような異なる視点[[↓>#012]]
[[06:16>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=06m16s]] 3-1-1.解像度の変更[[↓>#013]]
[[06:47>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=06m47s]] 3-1-2.レンダーターゲット2Dマテリアルの作成[[↓>#014]]
[[07:22>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=07m22s]] 3-1-3.Capture Every Frame[[↓>#015]]
[[07:57>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=07m57s]] 3-2.UMGで表示[[↓>#016]]
[[08:04>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=08m04s]] 3-2-1.UMG用マテリアルの作成[[↓>#017]]
[[08:33>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=08m33s]] 3-2-2.ウィジェットブループリントの作成[[↓>#018]]
[[09:20>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=09m20s]] 3-2-3.レベルブループリント[[↓>#019]]
[[09:47>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=09m47s]] 3-3.背景の透過[[↓>#020]]
[[10:58>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=10m58s]] 3-4.操作キャラクターをUMGで表示[[↓>#021]]
[[11:12>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=11m12s]] 3-4-1.キャラクターブループリント[[↓>#022]]
[[12:04>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=12m04s]] 3-4-2.テクスチャレンダーターゲット2D[[↓>#023]]
[[12:24>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=12m24s]] 3-4-3.マテリアルの作成[[↓>#024]]
[[12:55>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=12m55s]] 3-4-4.UMG[[↓>#025]]
[[13:08>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=13m08s]] 3-4-5.ポストプロセスマテリアルの作成と適用[[↓>#026]]
[[13:49>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=13m49s]] 3-4-6.ポストプロセスマテリアルの設定[[↓>#027]]
[[14:58>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=14m58s]] ��CustomDepthとSceneDepthの比較[[↓>#028]]
[[16:04>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=16m04s]] ��SceneDepthと深度距離の比較[[↓>#029]]
[[17:35>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=17m35s]] �Ｇ鮃�で透過[[↓>#030]]
[[18:03>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=18m03s]] 設定ファイル[[↓>#031]]
別の方法（CustomDepthのみでマスク）[[↓>#034]] &color(#ff0000){''追加''}
[[18:26>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=18m26s]] エンディング
[[18:35>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=18m35s]] 別視点演出のメリットは？[[↓>#033]]
*1.SceneCapture [[00:29>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=00m29s]]&aname(002)
アクタを配置パネルでSceneCaptureを検索します。
[Scene Capture 2D]と[Scene Capture Cube]があります。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/mkZYUneqGM.jpg,400)
*2.Scene Capture Cube [[00:40>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=00m40s]]&aname(003)
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/tJ0FJ4_qFY.jpg,400)
Scene Capture Cubesは、各フレーム毎に動的なキューブマップをキャプチャします。
Cubemap Render Targetをキャプチャすることで、テクスチャやマテリアルとして利用出来るようになります。
注意！として
Scene Capture Cubesはパフォーマンスコストがかなり高くなるため、
どうしても必要な場合のみ使用してください。
**2-1.キューブマップの作成 [[00:59>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=00m59s]]&aname(004)
キューブマップは、周囲の環境の反射を表現する360°のテクスチャです。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/3BrOevACol.jpg,400)
SkyLightに使うキューブマップを作成します。
***2-1-1.キューブの描画ターゲット [[01:12>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=01m12s]]&aname(005)
[Scene Capture Cube]をレベルに配置します。
右クリック＞テクスチャ＞キューブの描画ターゲットで、
新しいTextureRenderTargetCubeを作成します。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/c5LROr3MES.jpg,400)
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/0v216RxLwq.jpg,200)
名前を「TRT_CubeMap」にします。
または、
Scene Capture Cubeの詳細パネル＞シーンキャプチャ＞Texture Targetのプルダウンメニューを開きます。
一番上の新規アセットの作成で、キューブの描画ターゲットを作成します。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/9PIVjYFhBH.jpg,400)
作成した「TRT_CubeMap」をTexture Targetに割り当てます。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/dFLx2tlKLv.jpg,400)
「TRT_CubeMap」ファイルを開きます。
Scene Capture Cubeが映している景色TextureRenderTargetCubeに反映されています
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/OyYO8VWYuS.jpg,400)
これはリアルタイムのキャプチャです。
Scene Capture Cubeを動かすと、
TextureRenderTargetCubeの景色も動きます。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/K1mSZRfBsw.jpg,400)
***2-1-2.解像度の変更 [[02:07>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=02m07s]]&aname(006)
解像度は、
詳細パネル＞テクスチャレンダーターゲットキューブ＞Size Xで変更できます。
512にします。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/Hic3j54qUW.jpg,400)
解像度がすぐに1024×512に変わります。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/Px5p8f5Jfk.jpg,400)
詳細パネル＞テクスチャレンダーターゲット
Target Gammaを2.2にします。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/JJBn9TzQQz.jpg,400)
保存して閉じます。
***2-1-3.スタティックテクスチャ [[02:30>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=02m30s]]&aname(007)
DirectionalLightを選択します。
詳細パネル＞Light Colorを赤色にしてみます。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/vTfeIWYL2J.jpg,400)
「TRT_CubeMap」ファイルを右クリック＞「スタティックテクスチャを作成」します。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/gJStjJrPdZ.jpg,200)
作成したテクスチャキューブファイルがキューブマップとして使用できます。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/c59EpGY8OW.jpg,200)
これで通常のキューブマップと同じように取り扱う事ができます。
Light Colorを白色に戻します。
SkyLightを選択します。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/SsxFUKWlvX.jpg,400)
詳細パネル＞ライト＞Real Time Caputureを無効にします。
Source TypeをSLS Specified Cubermapにします。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/n7PkWVzyEi.jpg,400)
Cubemapに作成したキューブマップを割り当てます。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/mhDyo1hsXa.jpg,400)
全体的に赤っぽくなって、
影も赤黒くなりましたね。
キューブマップが環境ライティングに反映されましたね。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/ZUH8TnSRL2.jpg,400)
**2-2.メインキャラクターと異なる視点 [[03:17>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=03m17s]]&aname(008)
メインキャラクターの視点と異なる視点を映すことができます。
キューブの描画ターゲット
「TRT_CubeMap」を右クリック＞「マテリアルを作成」します。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/Gzv6ZgM4gz.jpg,200)
ファイルを開きます。
詳細パネル＞マテリアル＞Shading Modelを「Unlit」にします。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/TmsOIcmRIQ.jpg,400)
Multiplyノードを配置します。
Texture Sampleノードとエミッシブカラーにつなぎます。
ReflectionVectorWSノードを配置します。
出力ピンをTexture SampleノードのUVsピンにつなぎます。
ReflectionVectorWSノードは、サーフェス法線上に反射するカメラ方向を表す3チャンネルのベクター値を出力します。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/7t1SrRJdSV.jpg,400)
CustomWorldNormalピンを右クリックでパラメータに昇格します。
値は「0.0」にします。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/NsUDje_ebM.jpg,400)
保存して閉じます。
アクタを配置パネル＞ジオメトリより
ボックスをレベルに配置します。
パネルにマテリアルを割り当てます。
起動してみましょう。
走っているキャラクターが映りましたね。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/wpcDOQr4Qi.jpg,400)
***2-2-1.Capture Every Frame [[04:29>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=04m29s]]&aname(009)
SceneCaptureCubeを選択します。
詳細パネル＞シーンキャプチャ
Capture Every Frameを無効にすると
キャプチャの更新はロード時に１回、その後は移動した時にのみ行います。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/5OLOBnE7XB.jpg,400)
***2-2-2.角度を変える [[04:56>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=04m56s]]&aname(010)
SceneCaptureCubeをY：-90°にします。
詳細パネル＞シーンキャプチャ
Capture Rotation を有効にします。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/J_wuEVgtdH.jpg,400)
表示が変わりましたね。
SceneCaptureCubeをZ:3000
上から見下ろす表示になりましたね。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/s2ukP3PXb2.jpg,400)
*3.Scene Capture 2D [[05:17>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=05m17s]]&aname(011)
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/3s2SJaLbzA.jpg,400)
Screen Capture Cubeと同様に、
Scene Capture 2Dはシーンの画像をフレーム毎に作成します。
Scene Capture 2Dはシーンをキャプチャし、テクスチャとして格納します。
%%Scene Capture Cubeよりも約6分の1、負荷が高いです。%% &color(#ff0000){''修正''}
UE 日本語ドキュメント
『Scene Capture Cube よりも 6 分の 1 程度負荷が高いだけですが、余分な処理が必要になるため、Scene Capture 2D の使用には未だ注意が必要です。』
英語でみると
While only 1/6 as expensive as the Scene Capture Cube, care should still be used with the Scene Capture 2D, as they still require extra processing.
別の翻訳かけると、
「Scene Capture Cube の 1/6 の価格しかありませんが、Scene Capture 2D では追加の処理が必要なため、注意が必要です。」
ってことなので、
Scene Capture 2Dは、Scene Capture Cubeと比べると1/6軽いってことですね。
動画と逆ですね。
%%Scene Capture Cubeよりも約6分の1、負荷が高いです。%%
**3-1.鏡のような異なる視点 [[05:36>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=05m36s]]&aname(012)
[Scene Capture 2D]をレベルに配置します。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/zfQTUrSsGr.jpg,400)
右クリック＞テクスチャ＞描画ターゲットで、
新しいTextureRenderTarget2Dを作成します。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/DSKKJhMTWc.jpg,400)
名前を「TRT_2D」にします。
または、
Scene Capture 2Dの詳細パネル＞シーンキャプチャ＞Texture Targetのプルダウンメニューを開きます。
一番上の新規アセットの作成で、描画ターゲットを作成します。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/Y7y4naa3xH.jpg,400)
作成した「TRT_2D」をTexture Targetに割り当てます。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/KSnrBg3b78.jpg,400)
「TRT_2D」ファイルを開きます。
Scene Capture 2Dが映している景色がTextureRenderTarget2Dに反映されています。
***3-1-1.解像度の変更 [[06:16>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=06m16s]]&aname(013)
解像度は、
詳細パネル＞テクスチャレンダーターゲット2D＞Size X、Size Yで変更できます。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/PbZQ30HQ2l.jpg,400)
X：1024、Y：1024にします。
解像度がすぐに1024×1024に変わります。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/07nlYKM0Ly.jpg,400)
詳細パネル＞テクスチャレンダーターゲット
Target Gammaを2.2にします。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/XYlGM60uME.jpg,400)
保存して閉じます。
***3-1-2.レンダーターゲット2Dマテリアルの作成 [[06:47>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=06m47s]]&aname(014)
描画ターゲット
「TRT_2D」を右クリック＞「マテリアルを作成」します。
アクタを配置パネル＞形状より
Planeをレベルに配置します。
パネルにマテリアルを割り当てます。
起動してみましょう。
走っているキャラクターが映りましたね。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/LBlI1cpowe.jpg,400)
***3-1-3.Capture Every Frame [[07:22>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=07m22s]]&aname(015)
Scene Capture 2Dを選択します。
詳細パネル＞シーンキャプチャ
Capture Every Frameを無効にすると
キャプチャの更新はロード時に１回、その後は移動した時にのみ行います。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/NFdgwYCoJ3.jpg,400)
Capture on Movementを無効にします。
Scene Capture 2Dを移動時にキャプチャの更新するかどうかです。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/9WIqrQ3VSd.jpg,400)
起動してみます。
静止画になりますね。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/M4BHwYqDqp.jpg,400)
**3-2.UMGで表示 [[07:57>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=07m57s]]&aname(016)
RenderTarget2DをUMGを使って表示します。
***3-2-1.UMG用マテリアルの作成 [[08:04>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=08m04s]]&aname(017)
描画ターゲット
「TRT_2D」を右クリック＞「マテリアルを作成」します。
名前を「TRT_2D_Mat_UMG」にします。
ファイルを開きます。
詳細パネル＞マテリアル＞Material Domainを
User Interfaceにします。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/3w3fgZcw_Y.jpg,400)
ノードの接続が切れたので、つなぎます。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/yIt50up_zi.jpg,400)
保存して閉じます。
***3-2-2.ウィジェットブループリントの作成 [[08:33>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=08m33s]]&aname(018)
右クリック＞ユーザーインターフェース＞ウィジェットブループリント
＞User Widgetをクリックします。
名前を「UMG_TRT2D」にします。
ファイルを開きます。
パネル＞CanvasPanelをドラッグアンドドロップします。
一般＞Imageをドラッグアンドドロップします。
名前をImage_TRT2Dにします。
Size To Contentを有効にします。
アピランス＞Brush＞Imageで
RenderTarget2Dマテリアル「TRT_2D_Mat_UMG」を指定します。
アピランス＞Brush＞ImageSizeで X：256Y：256にします。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/UG4rO6sYFg.jpg,400)
保存して閉じます。
***3-2-3.レベルブループリント [[09:20>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=09m20s]]&aname(019)
レベルブループリントを開きます。
Create Widgetノードを配置します。
Event BeginPlayノードにつなぎます。
Classに作成した「UMG_TRT2D」を指定します。
最後にAdd to Viewportノードをつなぎます。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/71VSBYJhZN.jpg,400)
保存して閉じます。
起動してみましょう。
画面に表示されましたね。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/uUP6CEeUEw.jpg,400)
**3-3.背景の透過 [[09:47>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=09m47s]]&aname(020)
UMGで表示したRenderTarget2Dの背景を透過します。
表示したいアクターを配置します。
「SM_SkySphere」が届かないはるか上空に配置します。
10000000.0(1と0が8個)
SceneCapture2Dを配置します。(100000120.0)
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/zqx7Do9erl.jpg,400)
右クリック＞テクスチャ＞描画ターゲット
RenderTarget2Dを作成します。
名前を「TRT_2DSky」にします。
SceneCapture2Dを選択します。
詳細パネル＞シーンキャプチャ＞Texture Targetで
RenderTarget2Dを指定します。
「TRT_2DSky」ファイルを右クリックして、
マテリアルを作成します。
ファイルを開きます。
Material DomainをUser Interfaceにします。
Blend ModeをTranslucentにします。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/OCAiguLyxD.jpg,400)
オパシティピンが選択できるようになります。
1-xノードを配置します。
Texture SampleノードのA（アルファ）ピンにつなぎます。
結果ノードのオパシティにつなぎます。
ビューポートで背景が透過しましたね。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/atTb2pKgEE.jpg,400)
保存して閉じます。
起動してみましょう。
UMGで背景が透過されましたね。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/jYMGhP2ZkS.jpg,400)
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/Kbc_Lxrn4x.jpg,400)
こうすると何かいい感じになります。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/9CtnzKW9o7.jpg,400)
**3-4.操作キャラクターをUMGで表示 [[10:58>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=10m58s]]&aname(021)
操作キャラクターをUMGで表示したいと思います。
また、カスタム深度を利用して背景を透過します。
***3-4-1.キャラクターブループリント [[11:12>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=11m12s]]&aname(022)
キャラクターのブループリントを開きます。
詳細パネルでDepthを検索します。
Mesh＞Render CustomDepth Passを有効にします。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/N0LHnedH_E.jpg,400)
ビューポートに移動します。
コンポーネントパネルの「+追加」で
SceneCaptureComponent2Dを追加します。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/gn0fgmx54a.jpg,400)
位置をX：60.0、Y：0.0、Z：50.0にします。
回転をX：0.0、Y：0.0、Z：180.0にします。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/RgYPAW1xGM.jpg,400)
シーンキャプチャ＞Texture Target
新規アセットの作成で描画ターゲットを作成します。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/wPOOV3s9Ll.jpg,400)
名前を「TRT_2DMain」にします。
保存フォルダを指定して保存します。
Capture SourceをFinal Colorにします。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/9nc_HlH44u.jpg,400)
コンパイルして保存して閉じます。
***3-4-2.テクスチャレンダーターゲット2D [[12:04>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=12m04s]]&aname(023)
「TRT_2DMain」を開きます。
詳細パネル＞テクスチャレンダーターゲット2Dで
解像度を1024にします。
詳細パネル＞テクスチャレンダーターゲット
Target Gammaを2.2にします。
保存して閉じます。
***3-4-3.マテリアルの作成 [[12:24>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=12m24s]]&aname(024)
「TRT_2DMain」を右クリックで「マテリアルを作成」します。
ファイルを開きます。
Material DomainをUser Interfaceにします。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/FFdnjLKaDG.jpg,400)
Blend ModeをTranslucentにします。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/brLrasPHJN.jpg,400)
オパシティピンが選択できるようになります。
1-xノードを配置します。
Texture SampleノードのA（アルファ）ピンにつなぎます。
結果ノードのオパシティにつなぎます。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/V9JFIdzHQC.jpg,400)
保存して閉じます。
***3-4-4.UMG [[12:55>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=12m55s]]&aname(025)
UMG_TRT2Dを開きます。
「TRT_2DMain_Mat」に入れ替えます。
***3-4-5.ポストプロセスマテリアルの作成と適用 [[13:08>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=13m08s]]&aname(026)
カスタム深度を利用して背景を透過します。
右クリック＞マテリアル
名前を「PPM_Transparency」にします。
キャラクターのブループリントを開きます。
コンポーネントパネルで
SceneCaptureComponent2Dを選択します。
詳細パネル＞ポストプロセスボリューム＞Rendering Features＞ポストプロセスマテリアル＞Arrayで
「+」をクリックしてエレメントを追加します。
プルダウンメニューでアセットリファレンスを選択します。
PPM_Transparencyを指定します。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/8lbkYCezWH.jpg,400)
コンパイルします。
保存して閉じます。
***3-4-6.ポストプロセスマテリアルの設定 [[13:49>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=13m49s]]&aname(027)
「PPM_Transparency」を開きます。
詳細パネル＞マテリアル＞Material Domainを
Post Processにします。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/qNdvtCOc_5.jpg,400)
ポストプロセスマテリアル＞Output Alphaを有効にします。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/5g73MJUMNC.jpg,400)
SceneTextureノードを配置します。
SceneTextureIDをPostProcessInput0にします。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/HokVl2D0Jx.jpg,400)
ComponentMaskノードをつなぎます。
Bを有効にして、RGBにします。
Colorにつなぎます。
結果ノードのエミッシブカラーにつなぎます。
オパシティを右クリックして「パラメータへに昇格」します。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/h9wfljJaSr.jpg,400)
オパシティが0.0の時、普通に表示されます。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/9TIcqENPxN.jpg,400)
オパシティが0.5の時、薄く表示されます。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/YuCX5jJuPX.jpg,400)
オパシティが1.0の時、非表示になります。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/Vu1ZvdfHhs.jpg,400)
白黒で表現すると、0.0は黒色、1.0は白色です。
つまり、
表示したい箇所は黒色
非表示にしたい箇所は白色にします。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/vaIHGevj4_.jpg,200)
エミッシブカラーピンを一旦切断します。
オパシティを0.0にします。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/RFGn01QyM9.jpg,400)
**��CustomDepthとSceneDepthの比較 [[14:58>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=14m58s]]&aname(028)
SceneTextureノードを配置します。
SceneTextureIDをCustomDepthにします。
ComponentMaskノードをつなぎます。
Gを無効にして、Rだけにします。
Colorにつなぎます。
SceneTextureノードを配置します。
SceneTextureIDをSceneDepthにします。
ComponentMaskノードをつなぎます。
Gを無効にして、Rだけにします。
Colorにつなぎます。
Ifノードを配置します。
エミッシブカラーにつなぎます。
AピンにCustomDepthをつなぎます。
BピンにSceneDepthをつなぎます。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/G2BJECqiAP.jpg,400)
A＞Bの時、赤色をつなぎます。
A==Bの時、緑色をつなぎます。
A＜Bの時、青色をつなぎます。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/ANvBPj7uW9.jpg,400)
一旦保存して閉じます。
起動してみましょう。
キャラクターとSkySphereが緑色で、
それ以外が赤色ですね。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/PzZXaTRGjj.jpg,200)
「PPM_Transparency」を開きます。
赤色の箇所は背景なので、白色をつなぎます。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/nqYEnhha7P.jpg,400)
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/sbMy8pJC3R.jpg,200)
**��SceneDepthと深度距離の比較 [[16:04>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=16m04s]]&aname(029)
緑色と青色を切断します。
Ifノードを配置します。
A==BピンとA＜Bにつなぎます。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/tAvC3JYTTt.jpg,400)
SceneTextureノードを配置します。
SceneTextureIDをSceneDepthにします。
ComponentMaskノードをつなぎます。
Gを無効にして、Rだけにします。
Colorにつなぎます。
Aピンにつなぎます。
1キーを押しながらクリックします。
SkySphereの深度である100000000（1と0、8個）を記入します。
Bピンにつなぎます。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/wh6gzpr212.jpg,400)
A＞Bの時、赤色をつなぎます。
A==Bの時、緑色をつなぎます。
A＜Bの時、青色をつなぎます。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/GYjCPv3YoV.jpg,400)
一旦保存して閉じます。
起動してみましょう。
キャラクターが青色で、
SkySphereが緑色ですね。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/DnSQpOtQ68.jpg,200)
「PPM_Transparency」を開きます。
緑色を切断します。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/nS4rLkPjnI.jpg,400)
一旦保存して閉じます。
起動してみましょう。
SkySphereが赤色になりましたね。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/a0aQaApYla.jpg,200)
「PPM_Transparency」を開きます。
赤色の箇所はSkySphereなので、白色をつなぎます。
緑色の箇所はSkySphereなので、白色をつなぎます。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/uQysyiisCw.jpg,400)
青色の箇所はキャラクターなので、黒色をつなぎます。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/gde9QNJXrh.jpg,400)
一旦保存して閉じます。
起動してみましょう。
キャラクターが黒色で背景が白色になりましたね。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/OqCh1FEuFf.jpg,200)
**�Ｇ鮃�で透過 [[17:35>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=17m35s]]&aname(030)
「PPM_Transparency」を開きます。
エミッシブカラーを切断します。
PostProcessInput0をエミッシブカラーにつなぎます。
オパシティを切断します。
Ifノードをオパシティにつなぎます。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/2YA62hKpZo.jpg,400)
保存して閉じます。
起動してみましょう。
背景が透過した操作キャラクターがUMGで表示できましたね。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/PSxtx40Ck2.jpg,400)
*設定ファイル [[18:03>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=18m03s]]&aname(031)
**TRT_CubeMap_Mat
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/8yH7albn0P.png,400)
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/1wh2ylb5iK.png,400)
**TRT_2D_Mat
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/PZ5G7PkKvL.png,400)
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/fUot6fRUZs.png,400)
**TRT_2D_Mat_UMG
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/toCFnSPgZ3.png,400)
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/2lItzOQC1h.png,400)
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/x2g5ybj7Rw.png,400)
**TRT_2D_Mat_UMG（透過）
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/Vko9ClLOD6.png,400)
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/1ASQwYC0sY.png,400)
**操作キャラクター透過
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/FV_NdVlMZg.png,400)
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/IgiA3eHIsu.png,400)
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/hjs9p3w24d.png,400)
**ポストプロセスマテリアル
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/_AeI0eKIDy.png,400)
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/V4XlQGVShO.png,400)
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/UeZsjEP0Bm.png,400)
**別の方法（CustomDepthのみでマスク）&aname(034) &color(#ff0000){''追加''}
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/G2Du_ellIo.png,400)
違いは、キャラクターとカメラの間にアクターが入った時の表示が異なる。
▼CustomDepthのみでマスクの表示
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/Wn396Sa1cC.PNG,400)
▼比較と深度距離でマスクの表示
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/W3l1z2N3pl.PNG,400)
*別視点演出のメリットは？ [[18:35>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=18m35s]]&aname(033)
**臨場感の向上:
別視点からの視点切り替えは、プレイヤーに新たな視覚的体験をもたらします。
これにより、ゲーム内の出来事や環境がよりリアルに感じられ、没入感が高まります。
**戦略的な選択:
別の視点からゲーム世界を観察することで、プレイヤーは戦術的な判断を下す際に有利な情報を得ることができます。
例えば、敵の位置やアイテムの配置を把握し、戦闘やパズルの解決に役立てることができます。
**物語の深化:
別視点で物語を描くことで、登場人物の背景や動機、感情をより詳細に探求できます。
プレイヤーは複数の視点を通じて物語を理解し、感情移入することができます。
**謎解きの刺激:
別視点からの情報を組み合わせて謎を解くことは、プレイヤーの知的好奇心を刺激します。
複数の視点を組み合わせて問題を解決する楽しさがあります。
**美的要素の強調:
別視点でのカメラアングルは、美しい景色や建物、キャラクターのデザインを際立たせる効果があります。
プレイヤーはゲーム世界の美しさを存分に楽しめます。
[[https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO]]
[[00:00>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=00m00s]] オープニング
[[00:29>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=00m29s]] 1.SceneCapture[[↓>#002]]
[[00:40>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=00m40s]] 2.Scene Capture Cube[[↓>#003]]
[[00:59>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=00m59s]] 2-1.キューブマップの作成[[↓>#004]]
[[01:12>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=01m12s]] 2-1-1.キューブの描画ターゲット[[↓>#005]]
[[02:07>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=02m07s]] 2-1-2.解像度の変更[[↓>#006]]
[[02:30>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=02m30s]] 2-1-3.スタティックテクスチャ[[↓>#007]]
[[03:17>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=03m17s]] 2-2.メインキャラクターと異なる視点[[↓>#008]]
[[04:29>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=04m29s]] 2-2-1.Capture Every Frame[[↓>#009]]
[[04:56>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=04m56s]] 2-2-2.角度を変える[[↓>#010]]
[[05:17>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=05m17s]] 3.Scene Capture 2D[[↓>#011]]
[[05:36>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=05m36s]] 3-1.鏡のような異なる視点[[↓>#012]]
[[06:16>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=06m16s]] 3-1-1.解像度の変更[[↓>#013]]
[[06:47>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=06m47s]] 3-1-2.レンダーターゲット2Dマテリアルの作成[[↓>#014]]
[[07:22>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=07m22s]] 3-1-3.Capture Every Frame[[↓>#015]]
[[07:57>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=07m57s]] 3-2.UMGで表示[[↓>#016]]
[[08:04>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=08m04s]] 3-2-1.UMG用マテリアルの作成[[↓>#017]]
[[08:33>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=08m33s]] 3-2-2.ウィジェットブループリントの作成[[↓>#018]]
[[09:20>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=09m20s]] 3-2-3.レベルブループリント[[↓>#019]]
[[09:47>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=09m47s]] 3-3.背景の透過[[↓>#020]]
[[10:58>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=10m58s]] 3-4.操作キャラクターをUMGで表示[[↓>#021]]
[[11:12>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=11m12s]] 3-4-1.キャラクターブループリント[[↓>#022]]
[[12:04>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=12m04s]] 3-4-2.テクスチャレンダーターゲット2D[[↓>#023]]
[[12:24>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=12m24s]] 3-4-3.マテリアルの作成[[↓>#024]]
[[12:55>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=12m55s]] 3-4-4.UMG[[↓>#025]]
[[13:08>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=13m08s]] 3-4-5.ポストプロセスマテリアルの作成と適用[[↓>#026]]
[[13:49>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=13m49s]] 3-4-6.ポストプロセスマテリアルの設定[[↓>#027]]
[[14:58>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=14m58s]] ��CustomDepthとSceneDepthの比較[[↓>#028]]
[[16:04>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=16m04s]] ��SceneDepthと深度距離の比較[[↓>#029]]
[[17:35>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=17m35s]] �Ｇ鮃�で透過[[↓>#030]]
[[18:03>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=18m03s]] 設定ファイル[[↓>#031]]
別の方法（CustomDepthのみでマスク）[[↓>#034]] &color(#ff0000){''追加''}
[[18:26>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=18m26s]] エンディング
[[18:35>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=18m35s]] 別視点演出のメリットは？[[↓>#033]]
*1.SceneCapture [[00:29>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=00m29s]]&aname(002)
アクタを配置パネルでSceneCaptureを検索します。
[Scene Capture 2D]と[Scene Capture Cube]があります。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/mkZYUneqGM.jpg,400)
*2.Scene Capture Cube [[00:40>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=00m40s]]&aname(003)
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/tJ0FJ4_qFY.jpg,400)
Scene Capture Cubesは、各フレーム毎に動的なキューブマップをキャプチャします。
Cubemap Render Targetをキャプチャすることで、テクスチャやマテリアルとして利用出来るようになります。
注意！として
Scene Capture Cubesはパフォーマンスコストがかなり高くなるため、
どうしても必要な場合のみ使用してください。
**2-1.キューブマップの作成 [[00:59>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=00m59s]]&aname(004)
キューブマップは、周囲の環境の反射を表現する360°のテクスチャです。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/3BrOevACol.jpg,400)
SkyLightに使うキューブマップを作成します。
***2-1-1.キューブの描画ターゲット [[01:12>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=01m12s]]&aname(005)
[Scene Capture Cube]をレベルに配置します。
右クリック＞テクスチャ＞キューブの描画ターゲットで、
新しいTextureRenderTargetCubeを作成します。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/c5LROr3MES.jpg,400)
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/0v216RxLwq.jpg,200)
名前を「TRT_CubeMap」にします。
または、
Scene Capture Cubeの詳細パネル＞シーンキャプチャ＞Texture Targetのプルダウンメニューを開きます。
一番上の新規アセットの作成で、キューブの描画ターゲットを作成します。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/9PIVjYFhBH.jpg,400)
作成した「TRT_CubeMap」をTexture Targetに割り当てます。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/dFLx2tlKLv.jpg,400)
「TRT_CubeMap」ファイルを開きます。
Scene Capture Cubeが映している景色TextureRenderTargetCubeに反映されています
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/OyYO8VWYuS.jpg,400)
これはリアルタイムのキャプチャです。
Scene Capture Cubeを動かすと、
TextureRenderTargetCubeの景色も動きます。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/K1mSZRfBsw.jpg,400)
***2-1-2.解像度の変更 [[02:07>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=02m07s]]&aname(006)
解像度は、
詳細パネル＞テクスチャレンダーターゲットキューブ＞Size Xで変更できます。
512にします。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/Hic3j54qUW.jpg,400)
解像度がすぐに1024×512に変わります。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/Px5p8f5Jfk.jpg,400)
詳細パネル＞テクスチャレンダーターゲット
Target Gammaを2.2にします。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/JJBn9TzQQz.jpg,400)
保存して閉じます。
***2-1-3.スタティックテクスチャ [[02:30>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=02m30s]]&aname(007)
DirectionalLightを選択します。
詳細パネル＞Light Colorを赤色にしてみます。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/vTfeIWYL2J.jpg,400)
「TRT_CubeMap」ファイルを右クリック＞「スタティックテクスチャを作成」します。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/gJStjJrPdZ.jpg,200)
作成したテクスチャキューブファイルがキューブマップとして使用できます。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/c59EpGY8OW.jpg,200)
これで通常のキューブマップと同じように取り扱う事ができます。
Light Colorを白色に戻します。
SkyLightを選択します。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/SsxFUKWlvX.jpg,400)
詳細パネル＞ライト＞Real Time Caputureを無効にします。
Source TypeをSLS Specified Cubermapにします。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/n7PkWVzyEi.jpg,400)
Cubemapに作成したキューブマップを割り当てます。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/mhDyo1hsXa.jpg,400)
全体的に赤っぽくなって、
影も赤黒くなりましたね。
キューブマップが環境ライティングに反映されましたね。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/ZUH8TnSRL2.jpg,400)
**2-2.メインキャラクターと異なる視点 [[03:17>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=03m17s]]&aname(008)
メインキャラクターの視点と異なる視点を映すことができます。
キューブの描画ターゲット
「TRT_CubeMap」を右クリック＞「マテリアルを作成」します。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/Gzv6ZgM4gz.jpg,200)
ファイルを開きます。
詳細パネル＞マテリアル＞Shading Modelを「Unlit」にします。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/TmsOIcmRIQ.jpg,400)
Multiplyノードを配置します。
Texture Sampleノードとエミッシブカラーにつなぎます。
ReflectionVectorWSノードを配置します。
出力ピンをTexture SampleノードのUVsピンにつなぎます。
ReflectionVectorWSノードは、サーフェス法線上に反射するカメラ方向を表す3チャンネルのベクター値を出力します。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/7t1SrRJdSV.jpg,400)
CustomWorldNormalピンを右クリックでパラメータに昇格します。
値は「0.0」にします。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/NsUDje_ebM.jpg,400)
保存して閉じます。
アクタを配置パネル＞ジオメトリより
ボックスをレベルに配置します。
パネルにマテリアルを割り当てます。
起動してみましょう。
走っているキャラクターが映りましたね。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/wpcDOQr4Qi.jpg,400)
***2-2-1.Capture Every Frame [[04:29>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=04m29s]]&aname(009)
SceneCaptureCubeを選択します。
詳細パネル＞シーンキャプチャ
Capture Every Frameを無効にすると
キャプチャの更新はロード時に１回、その後は移動した時にのみ行います。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/5OLOBnE7XB.jpg,400)
***2-2-2.角度を変える [[04:56>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=04m56s]]&aname(010)
SceneCaptureCubeをY：-90°にします。
詳細パネル＞シーンキャプチャ
Capture Rotation を有効にします。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/J_wuEVgtdH.jpg,400)
表示が変わりましたね。
SceneCaptureCubeをZ:3000
上から見下ろす表示になりましたね。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/s2ukP3PXb2.jpg,400)
*3.Scene Capture 2D [[05:17>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=05m17s]]&aname(011)
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/3s2SJaLbzA.jpg,400)
Screen Capture Cubeと同様に、
Scene Capture 2Dはシーンの画像をフレーム毎に作成します。
Scene Capture 2Dはシーンをキャプチャし、テクスチャとして格納します。
%%Scene Capture Cubeよりも約6分の1、負荷が高いです。%% &color(#ff0000){''修正''}
UE 日本語ドキュメント
『Scene Capture Cube よりも 6 分の 1 程度負荷が高いだけですが、余分な処理が必要になるため、Scene Capture 2D の使用には未だ注意が必要です。』
英語でみると
While only 1/6 as expensive as the Scene Capture Cube, care should still be used with the Scene Capture 2D, as they still require extra processing.
別の翻訳かけると、
「Scene Capture Cube の 1/6 の価格しかありませんが、Scene Capture 2D では追加の処理が必要なため、注意が必要です。」
ってことなので、
Scene Capture 2Dは、Scene Capture Cubeと比べると1/6軽いってことですね。
動画と逆ですね。
%%Scene Capture Cubeよりも約6分の1、負荷が高いです。%%
**3-1.鏡のような異なる視点 [[05:36>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=05m36s]]&aname(012)
[Scene Capture 2D]をレベルに配置します。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/zfQTUrSsGr.jpg,400)
右クリック＞テクスチャ＞描画ターゲットで、
新しいTextureRenderTarget2Dを作成します。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/DSKKJhMTWc.jpg,400)
名前を「TRT_2D」にします。
または、
Scene Capture 2Dの詳細パネル＞シーンキャプチャ＞Texture Targetのプルダウンメニューを開きます。
一番上の新規アセットの作成で、描画ターゲットを作成します。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/Y7y4naa3xH.jpg,400)
作成した「TRT_2D」をTexture Targetに割り当てます。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/KSnrBg3b78.jpg,400)
「TRT_2D」ファイルを開きます。
Scene Capture 2Dが映している景色がTextureRenderTarget2Dに反映されています。
***3-1-1.解像度の変更 [[06:16>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=06m16s]]&aname(013)
解像度は、
詳細パネル＞テクスチャレンダーターゲット2D＞Size X、Size Yで変更できます。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/PbZQ30HQ2l.jpg,400)
X：1024、Y：1024にします。
解像度がすぐに1024×1024に変わります。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/07nlYKM0Ly.jpg,400)
詳細パネル＞テクスチャレンダーターゲット
Target Gammaを2.2にします。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/XYlGM60uME.jpg,400)
保存して閉じます。
***3-1-2.レンダーターゲット2Dマテリアルの作成 [[06:47>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=06m47s]]&aname(014)
描画ターゲット
「TRT_2D」を右クリック＞「マテリアルを作成」します。
アクタを配置パネル＞形状より
Planeをレベルに配置します。
パネルにマテリアルを割り当てます。
起動してみましょう。
走っているキャラクターが映りましたね。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/LBlI1cpowe.jpg,400)
***3-1-3.Capture Every Frame [[07:22>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=07m22s]]&aname(015)
Scene Capture 2Dを選択します。
詳細パネル＞シーンキャプチャ
Capture Every Frameを無効にすると
キャプチャの更新はロード時に１回、その後は移動した時にのみ行います。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/NFdgwYCoJ3.jpg,400)
Capture on Movementを無効にします。
Scene Capture 2Dを移動時にキャプチャの更新するかどうかです。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/9WIqrQ3VSd.jpg,400)
起動してみます。
静止画になりますね。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/M4BHwYqDqp.jpg,400)
**3-2.UMGで表示 [[07:57>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=07m57s]]&aname(016)
RenderTarget2DをUMGを使って表示します。
***3-2-1.UMG用マテリアルの作成 [[08:04>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=08m04s]]&aname(017)
描画ターゲット
「TRT_2D」を右クリック＞「マテリアルを作成」します。
名前を「TRT_2D_Mat_UMG」にします。
ファイルを開きます。
詳細パネル＞マテリアル＞Material Domainを
User Interfaceにします。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/3w3fgZcw_Y.jpg,400)
ノードの接続が切れたので、つなぎます。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/yIt50up_zi.jpg,400)
保存して閉じます。
***3-2-2.ウィジェットブループリントの作成 [[08:33>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=08m33s]]&aname(018)
右クリック＞ユーザーインターフェース＞ウィジェットブループリント
＞User Widgetをクリックします。
名前を「UMG_TRT2D」にします。
ファイルを開きます。
パネル＞CanvasPanelをドラッグアンドドロップします。
一般＞Imageをドラッグアンドドロップします。
名前をImage_TRT2Dにします。
Size To Contentを有効にします。
アピランス＞Brush＞Imageで
RenderTarget2Dマテリアル「TRT_2D_Mat_UMG」を指定します。
アピランス＞Brush＞ImageSizeで X：256Y：256にします。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/UG4rO6sYFg.jpg,400)
保存して閉じます。
***3-2-3.レベルブループリント [[09:20>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=09m20s]]&aname(019)
レベルブループリントを開きます。
Create Widgetノードを配置します。
Event BeginPlayノードにつなぎます。
Classに作成した「UMG_TRT2D」を指定します。
最後にAdd to Viewportノードをつなぎます。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/71VSBYJhZN.jpg,400)
保存して閉じます。
起動してみましょう。
画面に表示されましたね。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/uUP6CEeUEw.jpg,400)
**3-3.背景の透過 [[09:47>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=09m47s]]&aname(020)
UMGで表示したRenderTarget2Dの背景を透過します。
表示したいアクターを配置します。
「SM_SkySphere」が届かないはるか上空に配置します。
10000000.0(1と0が8個)
SceneCapture2Dを配置します。(100000120.0)
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/zqx7Do9erl.jpg,400)
右クリック＞テクスチャ＞描画ターゲット
RenderTarget2Dを作成します。
名前を「TRT_2DSky」にします。
SceneCapture2Dを選択します。
詳細パネル＞シーンキャプチャ＞Texture Targetで
RenderTarget2Dを指定します。
「TRT_2DSky」ファイルを右クリックして、
マテリアルを作成します。
ファイルを開きます。
Material DomainをUser Interfaceにします。
Blend ModeをTranslucentにします。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/OCAiguLyxD.jpg,400)
オパシティピンが選択できるようになります。
1-xノードを配置します。
Texture SampleノードのA（アルファ）ピンにつなぎます。
結果ノードのオパシティにつなぎます。
ビューポートで背景が透過しましたね。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/atTb2pKgEE.jpg,400)
保存して閉じます。
起動してみましょう。
UMGで背景が透過されましたね。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/jYMGhP2ZkS.jpg,400)
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/Kbc_Lxrn4x.jpg,400)
こうすると何かいい感じになります。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/9CtnzKW9o7.jpg,400)
**3-4.操作キャラクターをUMGで表示 [[10:58>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=10m58s]]&aname(021)
操作キャラクターをUMGで表示したいと思います。
また、カスタム深度を利用して背景を透過します。
***3-4-1.キャラクターブループリント [[11:12>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=11m12s]]&aname(022)
キャラクターのブループリントを開きます。
詳細パネルでDepthを検索します。
Mesh＞Render CustomDepth Passを有効にします。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/N0LHnedH_E.jpg,400)
ビューポートに移動します。
コンポーネントパネルの「+追加」で
SceneCaptureComponent2Dを追加します。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/gn0fgmx54a.jpg,400)
位置をX：60.0、Y：0.0、Z：50.0にします。
回転をX：0.0、Y：0.0、Z：180.0にします。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/RgYPAW1xGM.jpg,400)
シーンキャプチャ＞Texture Target
新規アセットの作成で描画ターゲットを作成します。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/wPOOV3s9Ll.jpg,400)
名前を「TRT_2DMain」にします。
保存フォルダを指定して保存します。
Capture SourceをFinal Colorにします。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/9nc_HlH44u.jpg,400)
コンパイルして保存して閉じます。
***3-4-2.テクスチャレンダーターゲット2D [[12:04>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=12m04s]]&aname(023)
「TRT_2DMain」を開きます。
詳細パネル＞テクスチャレンダーターゲット2Dで
解像度を1024にします。
詳細パネル＞テクスチャレンダーターゲット
Target Gammaを2.2にします。
保存して閉じます。
***3-4-3.マテリアルの作成 [[12:24>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=12m24s]]&aname(024)
「TRT_2DMain」を右クリックで「マテリアルを作成」します。
ファイルを開きます。
Material DomainをUser Interfaceにします。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/FFdnjLKaDG.jpg,400)
Blend ModeをTranslucentにします。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/brLrasPHJN.jpg,400)
オパシティピンが選択できるようになります。
1-xノードを配置します。
Texture SampleノードのA（アルファ）ピンにつなぎます。
結果ノードのオパシティにつなぎます。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/V9JFIdzHQC.jpg,400)
保存して閉じます。
***3-4-4.UMG [[12:55>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=12m55s]]&aname(025)
UMG_TRT2Dを開きます。
「TRT_2DMain_Mat」に入れ替えます。
***3-4-5.ポストプロセスマテリアルの作成と適用 [[13:08>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=13m08s]]&aname(026)
カスタム深度を利用して背景を透過します。
右クリック＞マテリアル
名前を「PPM_Transparency」にします。
キャラクターのブループリントを開きます。
コンポーネントパネルで
SceneCaptureComponent2Dを選択します。
詳細パネル＞ポストプロセスボリューム＞Rendering Features＞ポストプロセスマテリアル＞Arrayで
「+」をクリックしてエレメントを追加します。
プルダウンメニューでアセットリファレンスを選択します。
PPM_Transparencyを指定します。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/8lbkYCezWH.jpg,400)
コンパイルします。
保存して閉じます。
***3-4-6.ポストプロセスマテリアルの設定 [[13:49>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=13m49s]]&aname(027)
「PPM_Transparency」を開きます。
詳細パネル＞マテリアル＞Material Domainを
Post Processにします。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/qNdvtCOc_5.jpg,400)
ポストプロセスマテリアル＞Output Alphaを有効にします。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/5g73MJUMNC.jpg,400)
SceneTextureノードを配置します。
SceneTextureIDをPostProcessInput0にします。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/HokVl2D0Jx.jpg,400)
ComponentMaskノードをつなぎます。
Bを有効にして、RGBにします。
Colorにつなぎます。
結果ノードのエミッシブカラーにつなぎます。
オパシティを右クリックして「パラメータへに昇格」します。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/h9wfljJaSr.jpg,400)
オパシティが0.0の時、普通に表示されます。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/9TIcqENPxN.jpg,400)
オパシティが0.5の時、薄く表示されます。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/YuCX5jJuPX.jpg,400)
オパシティが1.0の時、非表示になります。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/Vu1ZvdfHhs.jpg,400)
白黒で表現すると、0.0は黒色、1.0は白色です。
つまり、
表示したい箇所は黒色
非表示にしたい箇所は白色にします。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/vaIHGevj4_.jpg,200)
エミッシブカラーピンを一旦切断します。
オパシティを0.0にします。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/RFGn01QyM9.jpg,400)
**��CustomDepthとSceneDepthの比較 [[14:58>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=14m58s]]&aname(028)
SceneTextureノードを配置します。
SceneTextureIDをCustomDepthにします。
ComponentMaskノードをつなぎます。
Gを無効にして、Rだけにします。
Colorにつなぎます。
SceneTextureノードを配置します。
SceneTextureIDをSceneDepthにします。
ComponentMaskノードをつなぎます。
Gを無効にして、Rだけにします。
Colorにつなぎます。
Ifノードを配置します。
エミッシブカラーにつなぎます。
AピンにCustomDepthをつなぎます。
BピンにSceneDepthをつなぎます。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/G2BJECqiAP.jpg,400)
A＞Bの時、赤色をつなぎます。
A==Bの時、緑色をつなぎます。
A＜Bの時、青色をつなぎます。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/ANvBPj7uW9.jpg,400)
一旦保存して閉じます。
起動してみましょう。
キャラクターとSkySphereが緑色で、
それ以外が赤色ですね。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/PzZXaTRGjj.jpg,200)
「PPM_Transparency」を開きます。
赤色の箇所は背景なので、白色をつなぎます。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/nqYEnhha7P.jpg,400)
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/sbMy8pJC3R.jpg,200)
**��SceneDepthと深度距離の比較 [[16:04>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=16m04s]]&aname(029)
緑色と青色を切断します。
Ifノードを配置します。
A==BピンとA＜Bにつなぎます。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/tAvC3JYTTt.jpg,400)
SceneTextureノードを配置します。
SceneTextureIDをSceneDepthにします。
ComponentMaskノードをつなぎます。
Gを無効にして、Rだけにします。
Colorにつなぎます。
Aピンにつなぎます。
1キーを押しながらクリックします。
SkySphereの深度である100000000（1と0、8個）を記入します。
Bピンにつなぎます。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/wh6gzpr212.jpg,400)
A＞Bの時、赤色をつなぎます。
A==Bの時、緑色をつなぎます。
A＜Bの時、青色をつなぎます。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/GYjCPv3YoV.jpg,400)
一旦保存して閉じます。
起動してみましょう。
キャラクターが青色で、
SkySphereが緑色ですね。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/DnSQpOtQ68.jpg,200)
「PPM_Transparency」を開きます。
緑色を切断します。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/nS4rLkPjnI.jpg,400)
一旦保存して閉じます。
起動してみましょう。
SkySphereが赤色になりましたね。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/a0aQaApYla.jpg,200)
「PPM_Transparency」を開きます。
赤色の箇所はSkySphereなので、白色をつなぎます。
緑色の箇所はSkySphereなので、白色をつなぎます。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/uQysyiisCw.jpg,400)
青色の箇所はキャラクターなので、黒色をつなぎます。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/gde9QNJXrh.jpg,400)
一旦保存して閉じます。
起動してみましょう。
キャラクターが黒色で背景が白色になりましたね。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/OqCh1FEuFf.jpg,200)
**�Ｇ鮃�で透過 [[17:35>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=17m35s]]&aname(030)
「PPM_Transparency」を開きます。
エミッシブカラーを切断します。
PostProcessInput0をエミッシブカラーにつなぎます。
オパシティを切断します。
Ifノードをオパシティにつなぎます。
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/2YA62hKpZo.jpg,400)
保存して閉じます。
起動してみましょう。
背景が透過した操作キャラクターがUMGで表示できましたね。
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/PSxtx40Ck2.jpg,400)
*設定ファイル [[18:03>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=18m03s]]&aname(031)
**TRT_CubeMap_Mat
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/8yH7albn0P.png,400)
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/1wh2ylb5iK.png,400)
**TRT_2D_Mat
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/PZ5G7PkKvL.png,400)
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/fUot6fRUZs.png,400)
**TRT_2D_Mat_UMG
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/toCFnSPgZ3.png,400)
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/2lItzOQC1h.png,400)
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/x2g5ybj7Rw.png,400)
**TRT_2D_Mat_UMG（透過）
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/Vko9ClLOD6.png,400)
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/1ASQwYC0sY.png,400)
**操作キャラクター透過
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/FV_NdVlMZg.png,400)
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/IgiA3eHIsu.png,400)
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/hjs9p3w24d.png,400)
**ポストプロセスマテリアル
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/_AeI0eKIDy.png,400)
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/V4XlQGVShO.png,400)
&ref(https://image01.seesaawiki.jp/s/o/seasidejetcity-memo/UeZsjEP0Bm.png,400)
**別の方法（CustomDepthのみでマスク）&aname(034) &color(#ff0000){''追加''}
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/G2Du_ellIo.png,400)
違いは、キャラクターとカメラの間にアクターが入った時の表示が異なる。
▼CustomDepthのみでマスクの表示
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/Wn396Sa1cC.PNG,400)
▼比較と深度距離でマスクの表示
&ref(https://image02.seesaawiki.jp/s/o/seasidejetcity-memo/W3l1z2N3pl.PNG,400)
*別視点演出のメリットは？ [[18:35>>https://youtu.be/BOUQMJBWW3Y?si=7G4S_B89cNSsk6oO&t=18m35s]]&aname(033)
**臨場感の向上:
別視点からの視点切り替えは、プレイヤーに新たな視覚的体験をもたらします。
これにより、ゲーム内の出来事や環境がよりリアルに感じられ、没入感が高まります。
**戦略的な選択:
別の視点からゲーム世界を観察することで、プレイヤーは戦術的な判断を下す際に有利な情報を得ることができます。
例えば、敵の位置やアイテムの配置を把握し、戦闘やパズルの解決に役立てることができます。
**物語の深化:
別視点で物語を描くことで、登場人物の背景や動機、感情をより詳細に探求できます。
プレイヤーは複数の視点を通じて物語を理解し、感情移入することができます。
**謎解きの刺激:
別視点からの情報を組み合わせて謎を解くことは、プレイヤーの知的好奇心を刺激します。
複数の視点を組み合わせて問題を解決する楽しさがあります。
**美的要素の強調:
別視点でのカメラアングルは、美しい景色や建物、キャラクターのデザインを際立たせる効果があります。
プレイヤーはゲーム世界の美しさを存分に楽しめます。