fc2ブログ

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

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

2021年03月 | ARCHIVE-SELECT | 2021年05月

PREV | PAGE-SELECT | NEXT

≫ EDIT

UE4 BPで3D空間上に点(Point)と平面(Plane)をデバッグ表示する(Draw Debug Point、Draw Debug Plane)

BPで3D空間上に点(Point)と平面(Plane)をデバッグ表示する方法です。

こちらを参考にさせていただきました。

・【UE4】覚えておくと便利?かもしれないまとめ
https://argonauts.hatenablog.jp/entry/2021/03/25/203400

「Draw Debug ~」系のノードがあったのですね。
これを使うと、カメラアクターを指定した時間だけ画面上にデバッグ表示ができます。

「Draw Debug Plane」と「Draw Debug Point」というノードがあります。
DrawDebug点と平面000
3D 空間上に指定した点(Point)と平面(Plane)を表示するもののようです。

まずは点を表示してみました。
こんな感じに「Draw Debug Point」ノードを使います。
DrawDebug点と平面004

するとこんな感じに。
DrawDebug点と平面002
わかりづらいですが左上に黒い四角が表示されています。
点の表示なので、カメラが近くても遠くても指定したサイズで表示されます。

次は平面を表示してみました。
こんな感じに「Draw Debug Plane」ノードを使います。
DrawDebug点と平面003

結果はこんな感じに。
DrawDebug点と平面001
平面もちゃんと表示されていますね。

ちゃんと処理が実行されているかなど、
デバッグ表示系はとても助かるのでこういったものは駆使していきたいですね。

| UE4 | 10:00 | comments:0 | trackbacks:0 | TOP↑

≫ EDIT

UE4 作成した関数などを別名で短くして検索しやすくする(Compact Node Title)

作成した関数などを別名で短くして検索しやすくする方法です。

こちらを参考にさせていただきました。

・[UE4] ちょっとだけ幸せになれるブループリント
https://historia.co.jp/archives/4120/

こんな感じで関数を作成してみました。
コンパクトノードタイトル001

この「TestFunction」という関数を検索して呼び出す場合には
その関数名を途中まで入力する必要があります。
コンパクトノードタイトル000
こんな感じで「testf」まで入力することで絞り込むことができました。

これを別名にしたり、短い名前にしたりする方法があります。
「Compact Node Title」という関数などの詳細で設定できるものになります。

まずは「TestFunction」の関数の詳細を開き、
「コンパクトノードタイトル(Compact Node Title)」に「+=」という文字列を設定
してみます。
コンパクトノードタイトル002
上記の赤枠のような感じですね。
本来は関数名と全然違う名称をつけるのはよくないのですが
わかりやすいように今回は「+=」という名称を設定しています。


すると、こんな感じで「Compact Node Title」で設定した「+=」を入力すると
「TestFunction」を絞り込む
ことができます。
コンパクトノードタイトル003

これはかなり便利なのですが、

C++の演算子のオーバーロードのような感じの使い方に向いていると思います。
頻繁に使うユーティリティなどもコンパクトにしてしまうのがいいかもしれません。

と書かれているとおり、ルール付けなどをちゃんとした上で運用するのがよさそうです。

| UE4 | 10:00 | comments:0 | trackbacks:0 | TOP↑

≫ EDIT

UE4 マテリアル(Material)でUVのスクロールをする(Panner)

マテリアル(Material)でUVのスクロールをする方法です。

こちらを参考にさせていただきました。

・UV 座標をアニメートする
https://docs.unrealengine.com/ja/RenderingAndGraphics/Materials/HowTo/AnimatingUVCoords/index.html

やり方は簡単で「Panner」ノードを使うだけでした。

Panner ノードは、マテリアル グラフに追加すると以下のように表示されます。 Panner ノードは Coordinates と Time の 2 つの入力を受け取り、結果を出力します。


こんな感じで「Panner」ノードをテクスチャパラメータに接続します。
マテリアルでUVスクロール001

パラメータはこんな感じで
「Speed X」と「Speed Y」でスクロールの速度を調整できます。
マテリアルでUVスクロール002

こんな感じにプレビューでも見え方が反映されます。
マテリアルでUVスクロール000

結果はこんな感じになりました。
無事UVスクロールしているようです。

基本的なことかもしれませんが忘れた時のメモということで。

| UE4 | 10:00 | comments:0 | trackbacks:0 | TOP↑

≫ EDIT

UE4 マテリアル(Material)でテクスチャのアルファを反映する(Opacity Mask、Masked)

マテリアル(Material)でテクスチャのアルファを反映する方法です。

こちらを参考にさせていただきました。

・Unreal Engine 4 : アルファ抜き (Opacity Mask)
https://vfxsamurai.blogspot.com/2019/08/unreal-engine-4-opacity-mask.html

こんな感じでマテリアルのノードを作成します。
UMGアルファマスク000
「オパシティマスク(Opacity Mask)」にアルファの値をつなぎます。
プレビューでもちゃんとした見た目になっていますね。

UMGのマテリアル(User Interface)の場合は「Blend Mode」に「Masked」を指定します。
UMGアルファマスク002

するとこんな感じでテクスチャのアルファを反映することができました。
UMGアルファマスク001

結構基本的なことなのですが、久々に触ると忘れるのでメモでした。

| UE4 | 10:00 | comments:0 | trackbacks:0 | TOP↑

≫ EDIT

UE4 UMGのウィジェットを回転させたときにでるジャギーを軽減する(Retainer Box)

UMGのウィジェットを回転させたときにでるジャギーを軽減する方法です。

おかずさんのこちらのツイートの技術メモです。
UMG のウィジェットを中途半端に回転させるとジャギーが出てしまうのでどう対応するか。といったものですね。

・UMG widget appearing aliased when shear transformed.
https://answers.unrealengine.com/questions/227528/umg-widget-appearing-aliased-when-shear-transforme.html

普通に「Text Box」ウィジェットを配置して5度傾けてみるとこんな感じになります。
UMGのジャギー軽減000

拡大するとこんな感じになります。
UMGのジャギー軽減003
曲線部分はともかくとして、直線部分が拡大すると結構がたがたになっていますね。

これを改善するため、おかずさんのツイートに書かれている
「RetainerBoxを親にして、その子のPadding又はTranslatiionを少し調整」をやってみました。
UMGのジャギー軽減001
結果はこんな感じに。
自分がテストしたときには特に値の調整などしないでも上記の結果になったのですが
場合によっては「Padding」や「Translatiion」の値を調整することになりそうです。

拡大するとこんな感じになります。
UMGのジャギー軽減004
かなり直線部分も滑らかになったんじゃないでしょうか。

個人的には少しぼやけてしまうのが気になるところではあるのですが
ジャギジャギしているよりはいいのかな…というところでしょうか。

注意点としてはこれでしょうか。
回転するウィジェットは親の「Retainer Box」にする(子は回転しない)
というのを気を付ける感じですね。

こういうちょっとしたテクニックで見栄えがよくなる方法はいろいろと覚えておきたいですね。

| UE4 | 10:00 | comments:0 | trackbacks:0 | TOP↑

≫ EDIT

UE4 ポストプロセスマテリアル(Post Process Material)で画面を白黒の二値化した部分に色を付ける

ポストプロセスマテリアル(Post Process Material)で画面を白黒の二値化した部分に色を付ける方法です。

こちらの記事を参考にさせていただきました。

・Post Processで白黒ドット表現 レベル【★☆】
https://kinnaji.com/2019/10/21/pixelart/

記事の中で書かれている白黒の部分で二値化を行っている箇所があったので
こちらをもとに作成してみました。

それによってできたポストプロセスマテリアルがこちら。
二値の黒に色を付ける000

手法としてはまずはグレースケール化を行い、
その値を使って白黒の二値化し、二値化した部分の色を変更する
といったものです。

最初にグレースケール化を行います。
二値化001

次に上記のグレースケール化の結果を使って二値化します。
二値の黒に色を付ける002

最後に二値化した結果を使い、暗いほうの色を「Max」ノードを使って設定します。
二値の黒に色を付ける003

というわけでこれを使ってみた結果これが
グレースケール004

グレースケール化でこうなり
グレースケール003

二値化でこんな感じになり
二値化003

暗いほうに色をつけるとこんな感じになります。
二値の黒に色を付ける004
ちゃんと暗いほうの色が緑に変化してますね。

ちなみに明るいほうに色を付ける場合は「Min」ノードを使います。
二値の黒に色を付ける006

これを実行するとこんな感じになります。
二値の黒に色を付ける005

色によって普通のモノトーンとはまた違う雰囲気になるので
いろいろと試してみたいですね。

| UE4 | 10:00 | comments:0 | trackbacks:0 | TOP↑

≫ EDIT

UE4 ポストプロセスマテリアル(Post Process Material)で画面を白黒の二値化する

ポストプロセスマテリアル(Post Process Material)で画面を白黒の二値化する方法です。

こちらの記事を参考にさせていただきました。

・Post Processで白黒ドット表現 レベル【★☆】
https://kinnaji.com/2019/10/21/pixelart/

記事の中で書かれている白黒の部分で二値化を行っている箇所があったので
こちらをもとに作成してみました。

それによってできたポストプロセスマテリアルがこちら。
二値化000

手法としてはまずはグレースケール化を行い、
その値を使って白黒の二値化する
といったもののようです。

最初にグレースケール化を行います。
二値化001

次に上記のグレースケール化の結果を使って二値化します。
二値化002

というわけでこれを使ってみた結果これが
グレースケール004

グレースケール化でこうなり
グレースケール003

二値化でこんな感じになります。
二値化003
白黒の二値化になりましたね。

ちょっとずつ個性が出てきたのではないかなと思います。

| UE4 | 10:00 | comments:0 | trackbacks:0 | TOP↑

≫ EDIT

UE4 ポストプロセスマテリアル(Post Process Material)で画面をグレースケール(Gray Scale)化する

ポストプロセスマテリアル(Post Process Material)で画面をグレースケール(Gray Scale)化する方法です。

こちらの記事を参考にさせていただきました。

・Post Processで白黒ドット表現 レベル【★☆】
https://kinnaji.com/2019/10/21/pixelart/

記事の中で書かれている白黒の部分でグレースケール化を行っている箇所があったので
こちらをもとに作成してみました。

それによってできたポストプロセスマテリアルがこちら。
グレースケール000

「NTSC」という手法を使っているのですが、コメントにはこう書かれています。

NTSCとは、白黒テレビの時代に使用していた色の識別の計算のための値です。
(今回は簡易的に解釈して値を代入しています)
詳しくはWikiをご覧ください。
→NTSC

・NTSC
https://ja.wikipedia.org/wiki/NTSC

詳細についてはこちらが参考になりました。

・グレースケールのひみつ
https://ofo.jp/osakana/cgtips/grayscale.phtml

RGB に係数を掛けて、その値をすべて足し、それを値として使う方法ですね。

Y = ( 0.298912 * R + 0.586611 * G + 0.114478 * B )

計算はこちらに。

グレースケール000
上記処理の「Multiply」のところが実際にRGBに係数を掛けているところですね。

グレースケール001
赤枠の部分が、RGBそれぞれに入っている値を一つのスカラー(Float)値に変換しているところです。
最後の入力はスカラー値なので、RGBにそれぞれ同じ値が入力されるのでグレースケールになるということですね。

・「Break Out Float3 Components」で RGB にそれぞれ分解
・「Add」を2つ使ってRとGとBを足す計算して単一のスカラー値に変換する
・その結果をカラーに反映(スカラー値の入力なのでRGBすべてに同じ値が入る)


最初入力が一本だったので、どういう入力かどうかで誤解してしまったのですが
省略せずに書くとこういう感じになるようです。
グレースケール002
スカラー値をRGBそれぞれに同じ値としていれて結果出力。といったものですね。

というわけでこれを使ってみた結果これが
グレースケール004

こんな感じになります。
グレースケール003
ちゃんとグレースケールになっているようですね。

グレースケールのマテリアルノードについて、こちらの記事がありました。

・UE4のポストプロセスマテリアルで色々してみた 応用編 - Unreal Engine 4 (UE4) Advent Calendar 2014
https://pafuhana1213.hatenablog.com/entry/2014/12/09/000111

上記記事内で以下のツイートの紹介がありました。
ということのようです。

命令数はともかくとして、マテリアルノードがすっきりするのでやってみました。
グレースケール005
こちらのほうが見やすくていいですね!

| UE4 | 10:00 | comments:0 | trackbacks:0 | TOP↑

≫ EDIT

UE4 「Add pin」など実行ピンを増やせるノードでピンの前後に実行ピンを挿入する(Insert Execution pin Before、Insert Execution pin After)

「Add pin」など実行ピンを増やせるノードでピンの前後に実行ピンを挿入する方法です。

こちらを参考にさせていただきました。

・【UE4】UE4Tips120選~勉強会にて配ったTipsカードの内容を一挙公開!~
https://kinnaji.com/2020/02/09/tips120/

「Multigate」や「Sequence」ノードなど、「Add pin」でExecピンを増やせるノードは、
特定のピンを右クリック→「Insert Execution pin Before/After」で、
そのピンの前後にピンを追加できる。

と書かれていました。

「Multigate」や「Sequence」ノードなどの「Add pin」でExecピンを増やせるノードが対象のようです。

とりあえず試してみることにしました。
「Sequence」ノードを作成して、以下のようにノードを接続してみました。
ピンの追加の挿入000

これの「Then 0」と「Then 1」の間にピンを挿入したいため
「Then 1」を右クリックして「前に実行ピンを挿入(Insert Execution pin Before)」を実行します。
ピンの追加の挿入001

するとこんな感じに「Then 0」と「Then 1」の間に実行ピンが挿入されました。
ピンの追加の挿入002
ちゃんと前後のピンの接続状態も維持されているみたいですね。

後ろに実行ピンを挿入したい場合は
「後に実行ピンを挿入(Insert Execution pin After)」
を使います。

BPの見やすさや、処理の順番的に実行ピンを並び替えたいというのはあったりするので
このテクニックは結構使いそうですね。

| UE4 | 10:00 | comments:0 | trackbacks:0 | TOP↑

≫ EDIT

UE4 UMGでテクスチャをタイリング表示する(Image Widget、Tiling)

UMGでテクスチャをタイリング表示する方法です。

マテリアルの機能で行ってもいいのかなと思ったのですが
Image Widget の詳細に設定項目があったのでそちらになります。

まずは「Image Widget」を配置してテクスチャを割り当てます。
UMGのタイリング002
「ImageBG」という名前で配置してみました。

配置した結果がこちら。
UMGのタイリング003
見事に伸びてますね。

これをタイリング描画を行いたいので
「Image Widget」の詳細タブにある「Tiling」を設定します。
UMGのタイリング000
「No Tile」がデフォルトで、そのまま引き延ばした表示になります。
「Horizontal」は横方向だけタイリングして表示します。
「Vertical」は縦方向だけタイリングして表示します。
「Both」は縦横両方の方向をタイリングして表示します。


「Both」にしてみた結果がこちら。
UMGのタイリング001
無事タイリングされていい感じの見た目になったんじゃないかと思います。

UMGの機能でやるのか、他の方法があるのかはいろいろ調べないといけないなと思いました。

| UE4 | 10:00 | comments:0 | trackbacks:0 | TOP↑

PREV | PAGE-SELECT | NEXT