UE4の勉強記録

UE4の勉強の記録です。個人用です。

「Unreal Engine 4.xを使用してRPGを作成する」の足りない部分を作成する。アニメレンダリングについて3

<前文>

<緊急:Unityに大変な事が起こっています!>

あんまりGame業界に詳しくない私でも知っているくらい英語圏のGameニュースで大問題になっているUnityのNewsがあります。

今週はそれを紹介します。

UnityはUnreal Engineと双璧をなすGame Engineで特に個人でGame開発を行う人達に人気があります。

そのUnity社に新しく赴任した社長が、かなり評判の悪い人でEAの社長を首になった人らしいんですね。(すみませんがあんまりGame業界に詳しくないんで、らしいとしか言えません。)

その人が何かどんでもない事を次々に実行してUnity社を食い物にし始めているみたいなんです。

まず社員の2%だか4%を首にしました。全員技術者で、他に代えられない技術を持っている人達をです。

これってProgrammingの業界ではかなりタブーで、これをやった会社の悪評がすぐにネットで流れて、その会社には絶対に良い技術者が集まらなくなります。

ハッキリ言ってもうこの時点でGame EngineとしてのUnityに終わりが始まっています。

しかも例えば「経営が上手く行ってなくてどうしても給料が払えない。」とか言う理由じゃなくて、本人の給料を上げるためだけだったみたいです。(一説によると22億円位貰っているらしいです。)

この社長は、その後、Game DeveloperでGame内課金に反対している人達を、アホ呼ばわりして業界の怒りを買っています。

これは日本の人にはあんまり良く分からない感情かもしれませんが、アメリカのGamerにとって「Gameは買い取りで売るべきであり、Loot Box(いわゆるガチャ)は子供をギャンブル中毒にするための犯罪で、その犯罪行為に自分達の愛するGameを使用するのは絶対許せない。」という思いがかなり強くあります。

更にアメリカではGameの大会が既にほとんどのプロスポーツの大会よりも興業的な成功を収める事が出来るので、プロゲーマーが子供たちの間で特に人気の職業でもあります。こういう子供たちの憧れを利用して子供たちをギャンブル中毒にするのはどうなのかと言う批判もあります。

まあ、ここまでだったら前文に書くか迷ったぐらいだったんですが、なんとこの社長、今度はMalwareを作成してbrowserに仕込んでいた会社とUnityを合併させてしまいました。

これがどういう事か私は全く理解出来なかったんですが、調べた結果、大体こう言う事の様です。

browserってありますよね。Edgeとか、GoogleならChromeの事です。

これをDownloadする時、普通なら直接その会社からDownloadします。GoogleのホームページからChromeをDownloadするみたいに。ところがGoogleでBrowser Downloadとかで検索すると、何故かGoogleと全く関係のなさそうな会社からChromeがDownload出来たりします。

これって私は単なるMirror配信をしているだけだと思っていたんです。Google自体からDownloadする人が多すぎるから分散してDownload出来る様にしてそのHome pageの負担を軽くします。その代り広告を載せます。位の事だと思っていました。

所が、この会社はそれをやって自社のホームぺ―ジからDownloadしたBrowserにMalwareをくっつけていたんです。

つまり、この会社のホームページから例えばGoogle社のChromeをDownloadするとします。するとなんとMalwareまで勝手にDownloadしてしまうんです。

ええ。

もはや反社じゃないですか。この会社。

このUnity社と合併した会社は、過去にこう言う事をやっていたらしいんです。

はい。

もうUnityで作成したGame全てにこのMalwareが追加されるのは確実でしょう。更に言えばUnityをDownloadしたらこのMalwareが追加される可能性もかなり高いです。

これは大変な事態だと思います。

ので緊急で内容をまとめておきました。

後、緊急でまとめたので細かい点では間違いがあるかもしれません。が大意では間違っていません。

以上です。

それでは今週の勉強を始めます。

<本文>

1.今週の勉強について

今週も以下の内容についてやって行きます。

  1. Niagara: CGHOW氏のTutorialをやる
  2. Materialの勉強
  3. RPGのEventの作成
  4. Open Worldの検証
  5. Gaeaの勉強
  6. 雪山のMapの作成
  7. UI Designの勉強
  8. Anime Renderingの勉強

Fluid Ninja VFX ToolsはMaterialで勉強します。

2.Niagara: CGHOW氏のTutorialをやる

今週もUnreal Engine 5 Niagara Beginner Tutorial - UE5 Niagara Starter Course! [1]の続きを勉強していきます。

2.1 Unreal Engine 5 Niagara Beginner Tutorial - UE5 Niagara Starter Course! [1]の続きを勉強する

<Mesh Renderer

Mesh Renderingについてです。

Mesh Render様に新しいEmitterを追加しました。

Render Sectionに合ったSprite Renderer Moduleを消してMesh Renderer Moduleを追加します。

Mesh Renderer ModuleのMeshesのIndex[0]にMeshを追加します。

Tutorialでは独自のMeshを追加していますが、

これはMeshならどれでも良いのでSphereで代用します。

結果です。

ここからの設定はSpriteと違う部分だけやります。

Particle Spawn SectionのInitialize Particle Moduleです。

今まではそれぞれのParticleの大きさを決定するのにSprite Attributeを使用していましたが、Mesh ではMesh Attributeで指定します。

Mesh のScale ModeのNon-UniformにはSpriteのSize ModeのNon-Uniformとは違いXYZの3つ軸の大きさを調節出来ます。

こんな感じです。

次はMeshの回転です。

Spriteの場合、回転はParticle Spawn SectionのInitialize Particle ModuleにあるSprite Rotation Modeで設定します。

しかしMeshの場合、Particle Spawn SectionのInitialize Particle ModuleにあるMesh AttributesにはRotationがありません。

ではどうやってMeshに回転を追加するのでしょうか?

答えは、Initial Mesh Orientation Moduleを追加します。

以下の様にMeshの初期の回転がRandomになりました。

今度は、このMeshの色を途中で変化させる方法についてです。

まず以下のようにParticle Colorを使用したMaterialを作成します。

このMeshをRender SectionにあるMesh Renderer Moduleの

Override MaterialsのExplicit Matにセットします。

そしてParticle Spawn SectionにあるInitialize Particle Moduleの

Color Modeの色を変えると

以下に示したようにMeshの色が変化します。

途中からの色を変化させる場合は、Particle Update SectionにあるScale Color Moduleの

設定を弄って作成します。

以下の様にすると

Life timeの半分の時に、色が赤から青になるようにします。

結果です。

青く成りません。

これはScale Color ModuleはInitialize Particle Moduleで指定された初期の色にこれらの値を掛けているだけだからです。

Initialize Particle Moduleの色の指定を白に戻します。

すると以下の様に青くなります。

今度はMeshのサイズを変化させます。

これはParticle Update SectionにScale Mesh Size Moduleを追加して行います。

設定方法は以下の様にしました。

やり方はScale Color Moduleの設定方法と全く同じです。

結果です。

時間によってParticleの形状が変化しています。

次に途中でMeshに回転を加える方法です。

これは単にParticle Update SectionにUpdate Mesh Orientation Moduleを追加するだけです。

結果です。

Meshは赤線の示したように回転しています。

色を途中で変化させるScale Color ModuleはParticle Spawn SectionにあるInitialize Particle Moduleの色の設定に影響を受けましたが、

このUpdate Mesh Orientation Moduleは同じくParticle Spawn SectionにあるInitial Mesh Orientation Moduleの影響を受けるんでしょうか?

TutorialではUpdate Mesh Orientation Moduleを使用する時は、Initial Mesh Orientation Moduleは外してしまっていますね。

Update Mesh Orientation ModuleはInitial Mesh Orientation Moduleの上位交換なので、Update Mesh Orientation Moduleを使用する時はInitial Mesh Orientation Moduleは要らないです。

Update Mesh Orientation Moduleを使用する時は必ずInitial Mesh Orientation Moduleを外すようにしているなら、Initial Mesh Orientation Moduleの影響について考える必要な無くなりますね。

地面との衝突を追加する方法についてです。

今は他のMeshをすり抜けています。

Particle Update SectionにCollision Moduleを追加します。

結果です。

確かに地面と衝突して跳ね返っています。が跳ね返る前に地面に少しだけめり込んでいるMeshもあります。

多分、このModuleの設定を弄って直す必要があるんだと思います。思いますがそのやり方はまだ分かりません。

<Stop Mesh Velocity and Rotation on Collusion

ここは何をやるのかと言うと、この地面にぶつかったMeshが跳ね返らないでそのぶつかった位置にそのまま残る様にします。

ここではCGHOW氏が言っているように少し高度は技術を使用します。

Tutorialではこの技術はCurl Noise Force ModuleとDrag Moduleに対して使用されていますが、私のEmitterにはCurl Noize Force Moduleは使用していないのでDrag Moduleにだけ使用します。

ハッキリ言ってDrag Moduleにこの技術を使用してもあまり変化はないです。

ただこの技術のやり方と意味は理解出来ます。

地面にぶつかったMeshが跳ね返らないでそのぶつかった位置にそのまま残る様にするためにはどうしたら良いでしょうか?

Dragに関して言えば、ぶつかるまではDragが0でぶつかった後からDragの値が大きくなってMeshの動きを止めるようになるのが望ましいです。

それをこれからセットします。

まずDrag ModuleはDefaultでは以下の様になっています。

そこにLerp Floatをセットします。

このLerpはBPのLerpノードと全く同じ機能を持っていて、Alphaの値が0だとAの値、Alphaの値が1だとBの値を返します。

このLerp FloatのAlphaの値にMake Custom Float From Boolをセットします。

BooleanなのでTrueの時に1(True Float)、Falseの時に0(False Float)の値を返します。

このBoolの値にParticle Has Collidedをセットします。

このParameterはParticleが衝突したらTrue、衝突していなかったらFalseを返します。

これで、以下のようになります。

Particleが衝突する前は、Particle Has Collidedの値はFalseなので、False Floatを返します。つまり0です。するとDrag にセットされているLerp のAlphaの値は0になるので、Dragの値は0になります。

次に、Particleが衝突すると、Particle Has Collideの値はTrueになり、True Floatの値を返します。これは1です。するとDrag にセットされているLerp のAlphaの値は1になるので、Dragの値は1になります。

はい。

これってどう考えてもProgrammingです。

このModuleのSelection内で限定的といえどもProgrammingが組めてしまうんです。

私はCascadeはあんまり知りませんが、多分Niagaraになって初めて追加された機能でしょう。

凄いです。

それは兎も角として、結果は以下の様になりました。

地面とぶつかったMeshがグルグル回っています。

これはUpdate Mesh Orientation Moduleが地面と衝突した後も機能しているからです。

これを直します。

その前にTutorialでは衝突後の跳ね返りを0にしていますので、それを先にやってしまいます。

Particle Update SectionのCollusion Moduleにある

Bounce欄のRestitutionの値を0にします。

これでBounceは0になりました。

RestitutionってRestitution Coefficientで反発係数って意味だったはずです。これが0になれば反発しない訳です。

結果です。

あんまり変わりません。

はい。Meshの回転を調整します。

まずUpdate Mesh Orientation ModuleをCollusion Moduleの後に移動します。

そしてこのModuleのRotation Rateを以下の様に組みます。

赤線で囲った部分は前の実装と全く同じです。

結果です。

回転は止まっていますね。

Ribbon Renderer

今度はEmpty EmitterからRibbonを作成します。

Emitter Update SectionにSpawn Rate Moduleを足します。

Rateは100位にします。

そしてRender SectionにあるSprite Render Moduleを消してRibbon Rendererを追加します。

結果です。

何もないです。

これはRibbon Rendererには必ずVelocityを追加する必要があるからです。

Particle Spawn SectionにAdd Velocity Moduleを追加します。

何か見える様になりました。

Level上に配置してみます。

小さくて良く分かりません。

Particle Spawn SectionにあるInitialize Particle Moduleの

Ribbon Attributesの中のRibbon Widthの値を変更します。

その結果です。

因みにRibbonはNSを動かすと

こんな感じになります。

TutorialではCurl Noize Force ModuleをParticle Update Sectionに追加していました。

結果です。

特に意味はないみたいです。

後、Ribbon Renderでは、Particle Spawn SectionのInitialize Particle Moduleの

Lifetime ModeはRandomには出来ません。

はい。

途中でリボンの幅を変化させるには、Particle Update SectionでScale Ribbon Width Moduleを使用します。

Scale Ribbon Width Moduleの設定を以下の様にして

Ribbonの長さを微調整すると

こんな風になります。

Ribbon Material

Ribbonに使用するMaterialの作成方法についてです。

以下の様なMaterialを作成します。

特にRibbon用のMaterialの設定とかは内容です。上記のようなMaterialは透明な部分が存在しているので

Result Nodeの設定は以下の様になっています。

実装は以下の様になっています。

Render sectionにあるRibbon Renderer Moduleの

MaterialにこのMaterialをセットすると

こんな結果になりました。

Particle Update SectionにColor Moduleを追加する事で

以下の様に色を追加する事も出来ます。

何でColor Moduleを追加する事で上記の様な色になるのか分からない人は、ぜひ2021-07-04のBlogRibbon Renderの項を読んで下さい。

以下の図は私が作成したものですが、Ribbon の仕組みを完璧に解き明かしています。

もう一年前になるんですね。このBlogを書いたのが。この時から比べたらかなりNiagaraを理解していますね。今は。

次はRibbonの形状についてです。

Ribbonの形状はRender SectionにあるRibbon Renderer Moduleの

Shapeで決定します。

上記の設定は形状はTubeで、そのTubeは7角形で構成されています。

Multi Planeこんな感じです。

キリが良いので今週のNiagaraの勉強はここまでとします。

3.Materialの勉強

Ben Cloward先生のPost Process Seriesの続きを勉強します。その後で、Fluid Ninja VFX Toolsについて勉強します。

3.1 Fullscreen Masks - Shader Graph Basics - Episode 50 [2]を軽く見る

今週はFullscreen Maskについてです。

3つのやり方を勉強するそうです。

先週作成した画面がグラグラ揺れるPost Processの右端をよく見ると画面の右端を無理に引き伸ばしたみたいな線が出来ています。

これは汚いです。のでまずこれを直します。

これが起きている原因は以下の実装部で0から2までの値をSaturationしているからです。これが-1から1 の間だったら起きません。

のでSaturationノードをSubtractノードに変えて1を引く事にします。

ここの理屈は今一理解出来ません。

後で考える事にします。

結果です。

確かに直っています。

しかしよく見るとたまに局所的にですが引き伸ばしが発生しています。

これを直すにはFullscreen Maskを使用する必要があります。

<Square Mask

まず以下の実装を組みます。

この実装は画面の端の黒い部分を追加します。

この実装を利用して歪みが生じると線が引き伸ばされるように見える端には歪みが適応されないようにします。

実際の実装は以下の様になります。

Saturate ノードが追加され0.02と掛けた後で追加されています。

結果です。

確かに端は歪みがなくなりその結果、線の引き伸ばしも無くなりました。

<Round Mask

Square Maskと似ていますが、形状を丸に変えています。

丸い形状を作成するための実装です。

結果です。

ふーん。

昔、MMDのEffectでテレビのブラウン管そっくりの枠を追加するのがあったんですが、それと同じ実装方法ですかね。

後、Ben Cloward先生がここで大切な事言っていたので記録しておきます。

上記の形状(四角や丸)のTextureを作ってそれを読み込ませたら簡単なのに、何でわざわざ計算して上記の様な形状を作成しているのか?に対する答えです。

この疑問は私がMaterialが何をやっているのか始めて本当に理解した時に感じた疑問で、実際このBlogの何処かにそう書いています。ので私からしたら非常に全うな疑問です。

それに対するBen Cloward先生の答えは「計算Costが凄く低くなる。」からです。

まあ、この答えは予想していました。

でもこれ深く考えると、Noiseに対しても同じ事言える気がします。Perlin NoiseやCurl NoiseもTextureから読み込むよりも、一々計算した方がCostが低くなる気がします。

しかしNoiseは計算しないでTextureから読み込む、しかし他の単純な図形は計算から求めたのを使用するのは、実際はそういう習慣だからだと思います。

<中心からの距離>

中心から離れる程、画面が黒くなる実装です。

結果です。

あんまり良く分かりませんね。

Tutorialではvignette effectに使用出来ると言っていますがvignette effectって何でしょうか?

調べたら、vignette effectって写真で真ん中が明るくて四方の角が暗い丁度、今実装した形状の事でした。

この後からはUnityの実装になるのでここで終わりにします。

3.2  Fullscreen Masks - Shader Graph Basics - Episode 50 [2]を実装する

それでは実装します。

まず先週作成した画面を歪ませるPost Processを見てみます。

右端を見てみたら、Tutorialほどはっきりしてはいませんがやっぱり線上に引き伸ばされているのが確認出来ました。

以下の様に画面を移動してFloorの端と画面の端を合わせると端の線が引き伸ばされているのが良く分かります。

Tutorialの通りにSaturate ノードをSubtract ノードに変えてみます。

結果です。

確かに線上に引き伸ばされているのが無くなりました。

<Square Mask

Square Maskの実装です。

Previewはこんな感じです。

あんまり黒い箇所がはっきりしませんね。

掛ける値を50から10に変化します。

結果です。

これならはっきりしています。

Square Maskを掛けます。

結果です。

これは分かり易い。

Floorの端の部分だけ歪みが生じていません。

でもこの結果で少し変な気がします。

<Round Mask

Round Maskの実装です。

Previewで確認しました。

昔のテレビのブラウン管みたいですね。

実際の結果です。

結果自体はSquare Maskと全く変わりませんね。

<中心からの距離>

これ自体は揺らぎのPost Processに生じる画面端の線上の引き伸ばしを直すためにやっているのかは不明ですが、兎に角実装します。

結果です。

思ってたほどは端が黒くないです。これだと端も結構歪みそうです。

TutorialではこのMaskを使用してvignette effectを作成していました。

こんな感じになりました。

正直、元々の画面が暗いのでvignette effectが効いているのか不明です。

以下の様にして元の画面の明るさを2倍にしました。

結果です。

うーん。

まあvignette effectが有るといえばありますね。

3.3 色々なMaskの実装方法の理論を検証する

今までのMaterialの勉強でもTexCoord[0]ノードに色々な計算をしていろんな形状のGradientを作成してきました。

これまでは、これらの実装から何故そう言う形状が作成出来るのかをReverse Engineeringして検証して来ましたが、結局分かりません。

そしてやるだけ無駄と言う結論に達しました。

ので今回は計算方法を軽く追うだけにします。

<Square Mask

これは以下の様なparabolaな値を作成します。

オレンジの部分のもっとも高い部分のYの値が1で最も低い部分のYの値は0になります。

Saturateすると

こんな感じになります。

多分、こんな感じの理論を使用して作成しているのだと思います。

そんな予測をしながら実装を読んでみます。

読みました。

これは簡単でした。

全部理解出来ました。

のでここで解説します。

まずTexCoord[0]ですが以下の様な数字を保持しています。

左上が(0.0)です。右上は赤くなっていますので(1,0)になります。同様に左下は緑で(0,1)です。最後の右下は(1,1)で黄色になります。

次に1からTexCoord[0]の値を引いた場合です。

左上の(0,0)の値を1から引きます。(1,1)になりますので黄色くなります。右上は(0,1)になりますので緑色になります。左下は赤で(1,0)です。最後の右下は(0,0)で黒になります。

この二つを掛けます。

すると左上は(0,0)x(1,1)になります。答えは(0,0)です。右上は(1,0)x(0,1)なので(0,0)です。同様に全ての端は(0,0)になります。

正しこの状態だと以下のように四隅では端はxかyの値のどちらかが0~1の間になっています。

のでXとYで掛けた値を出します。

すると端の値は全て0になります。

後は、それぞれの値に数字を掛けたり、Saturateしたりして1から0への変化の具合を都合の良いようにしているだけです。

<Round Mask

Round Maskも基本的な実装はSquare Maskと全く同じで、理論的な違いは最後の以下の赤線で囲った部分だけです。

これは簡単に言えばSquare Maskの結果を2乗しただけです。

今までのBlogに何度も書いていますが、2乗すると以下の様にContrastが激しくなります。

その結果、ブラウン管のようになります。

<中心からの距離>

これは典型的は中心から徐々に明るくするImageの作成方法です。

この結果を逆にしたりPower をかけてContrastを激しくしたりして適切なImageに調節しています。

3.4 他のTexCoord[0]の計算もここにまとめておく

こういうTexCoord[0]を色々計算して色々なImageを作成する方法は前にもまとめておいたのでそれと今回のやり方を比較します。

2022-01-24のBlogにまとめてありました。枠抜き、円形、そして三角形の3つがありました。

枠抜きの実装方法です。

今回のやり方と微妙に違いますね。RとGを掛けるのは同じですが、今回のやり方はOne Minusノードを使用しています。がこれはSineノードを使用しています。

どっちが計算Costが低いんでしょうか?

円形の実装方法その1です。

そうこれだ。Radial Gradient Exponentialノードです。これを使用すればほぼ望みの円形が作成出来ます。

円形の実装方法その2です。

このやり方と今回のやり方を比較すると

Vector Lengthノードを使用しているかどうかで理論的には全く同じ事をしています。

三角形の実装方法です。

これは今回は使用しませんでしたが、2021-12-06のBlogに実装方法がまとめてあります。

今回は、TexCoord[0]からの計算で作成したImageは全て簡単なやり方で作成していたので直ぐに理解出来ましたが、普通は無理だと思います。

後、VRAMやTextureのPipelineの発展、もしくは上記の計算をVideo Card内のHardに前もって組み込んでしまう事によって、Textureから読み込んだ方が速い時代がその内やってくると思います。のでこう言う事は理解しておくに越した事はないですが、これだけ理解しておけばMaterialの他の部分は知らなくてもやって行けると言う事はないと思われます。

ので何事もバランスを大切にして勉強するのが良いと思われます。

3.5 Fluid Ninja VFX Tools for Unreal - 01 - Overview [UE4] [3]を最後までやる

<先週作成したMaterial Instanceが動かなかった件について>

新しくLevelを作成してその上でStatic Meshに追加したら普通に動いていました。

<Materialは有りました>

先週、以下の様にまとめたんですが、

今週、復習のためにFluid Ninja VFX Toolsで作成したMaterial Instanceを開いたら

普通にありました。

何で先週はこれに気が付かなかったんでしょう。

実装も見てみます。

うわ。

これは後で見ます。

<先週の続き>

先週の勉強しなかった部分をやって行きます。

Introについてです。

Manualと大体同じと言っています。

1~6まであってそれぞれ何かについて解説しています。

1です。

これは作成出来るVFXのTemplateについて解説しているみたいですね。

それぞれのEffectを見たんですが、何か平凡です。

2番です。

Fluid Ninja VFX Toolsの作業の流れについて解説していますね。

先週やった流れを赤線で囲んでみました。

デザインが凄いんで何か高尚な事を書いてあるような気がしますが、書かれている内容は単なる作業表です。

3と6はまだ何についての解説なのか分かりません。

4と5はあんまり重要な内容ではない気がします。

Configについてです。

Saveする場所の指定などをここでやるみたいです。

これの使い方が知りたいですね。

Defaultの設定から変更した場合、ここでSaveしておくんでしょうか?

Ninja Fluidです。

ここは、Velocity MapからVector Field Dataを作成するためのモノだそうです

そう説明されても今一良く分かりません。

私が唯一作成した先週のヤツにもVelocity Mapが一個ありますがこれからVector Field Dataを作成出来るんでしょうか?

Input見たら確かにありました。

しかし使い方は分かりません。まあTutorialを順当にやって行けばいずれ理解出来るでしょう。

Ninja Flowです。

3つのTexture、Density、Velocity、そしてFlowを入れてOutputを作成しています。

それ以上の事は分かりません。

Fluid Ninja VFX Tools for Unreal - 01 - Overview [UE4] [3]を最後まで見て

一応、最後まで見ました。

先週よりは色々理解出来ました。まあ大体こんな事をこれから勉強していくんだな。と言う事が分かりました。

で、時間が少しだけあるのでもうちょっとだけ勉強します。

3.6 FluidNinja VFX Tools for Unreal - 02 - Basics [UE4] [4]を軽く見る

このTutorialは以下の部分のUIの説明でした。

以下に簡単にまとめます。

まず青い文字が表示されている部分です。

TutorialではPreset Selectorと言っています。

これは多分ですがTemplateみたいなもんだと思っています。

因みにCurl Noiseがこの中にあります。

これを選択した後に、下矢印を押すと次のSelectorが選択出来ます。

以下の3つのボタンについてです。

左からSave、Duplicate、そしてDeleteだそうです。

この人Duplicateをダプリケイトって発音しています。イギリス人なんでしょうか?

Youglishで確認したんですが、UKでDuplicateをダプリケイトって発音して発音している人が一人だけいました。

うーん。

まあ良いです。先へ行きます。

ToolTipです。

これにCheckを入れると以下の様にCursorを載せると解説が表示されます。

これ試してみたいけどUpdateされたら元のDefaultの設定はきえてしまうんでしょうか?

それが分からないと一寸やりたくないですね。

Canvasについてです。

左の四角を選択すると右にOutputだけが表示されます。

右の4つの四角を選択するとDefaultの4つのImageが表示されます。

Bakeです。

これは先週使用したので覚えています。

赤いボタンがRecordです。

Recordを押すと以下の様なBoxが表示されます。

Texture Uassetを押すとTextureとしてSaveされます。

残りは後で説明するそうです。

Velocityです。

こいつの条件を変化させます。

試しにOffset Xの値を変えてみます。

こうなりました。

Densityです。

この値を弄るとOutput DensityのImageが変わります。

Tutorialではこれらの値に対して少しだけ解説していますが、あんまり良く分からないのでここには書きません。

Cursorを乗せたら詳しい解説が表示されました。

一寸だけ読んだんですが、こっちは意味が良く分かりました。ので必要になったらこれを読んでやる事にします。

Inputについてです。

これは先週も勉強しましたが、Fluid Ninja VFX Toolsでは3つのInputがあります。Particle 、Bitmap、そしてFree Drawingです。

それらをここで表しています。

これはPS_DryIce2と言うParticleがInputとして使用されています。

Export FGAです。

Velocityに関するDataをExport出来るみたいです。

それ以外は良く分かりません。

Noticesです。

UserがオリジナルなVFXを作成した時にここに、Copyrightなどの情報を書き込めるようになっているそうです。

以上でした。

こんな感じでFluid Ninja VFX Toolsは軽く勉強する事にしました。

4.RPGEventの作成

今週からRPGにEventを追加していきます。

何から作成すべきなのかまだ良く分かっていません。今週はEventが発生した時のWidgetを作成します。

4.1 Event開始を知らせるWidgetを作成する

以下の様に作成して見ました。

Level上で開くとこんな感じです。

うーん。

まあ。Designは取りあえずこれで良いです。

今度はこれをどうやって表示するかを考えます。

4.2 Eventの開始について

この会話が終了したらさっきのWidgetを表示するようにしたいんです。

久しぶりにCh4_3 を開いたんでどうやって作成したのかすっかり忘れてしまいました。

うーん。強引に機能を追加する事はやろうと思えば出来るんですが、今週は無理をしないでこのGameで遊んで色々思い出す事にします。

最初の番人に話しかけたらこんな事言っています。

この話自体は矛盾してないのでこのままでいいですね。

そうだ。

NPCの会話をチェックしてみます。オカシなセリフをここに抜き出します。

奥の村じゃなくてヤマメ村ですね。この奥にあるヤマメ村と言った方が分かり易いかもしれません。

この人との会話は何も作っていませんでした。

別な人の会話が表示されています。

この人の会話も作成していませんでした。

村長にこの村について質問しました。

この説明は今の設定からすると完全に間違っています。

この村の名前は今ではヤマメ村です。しかも世界最古の村とかの設定ももうないです。

村長の腰巾着も同じ様な返答をしています。

ここでは、この世界についてと隣の世界についての説明でもさせますか。

旅人に話しかけたらこんな事を言っています。

この人の会話は面白いのでそのまま残しておく事にして、追加で森と泉の青い世界にあるアポロン王国の話と大きな世界と小さな世界があって、小さな世界から小さな世界に移動するには普通の切符、大きな世界から大きな世界に移動するには特別な切符が必要な事もここで説明させようと思います。

起業家に成りたいNPCとの会話です。

ここで薬草を拾ったら道具屋に売れる事、薬草はこの村の回りや山のふもとに沢山生えている事を説明させます。

吟遊詩人の歌には、後で登場する国の話をさせます。

今のところ、これ位です。

これらのセリフは来週直します。

5.Open Worldの検証

5.1  Unreal Engine 5 Beginner Tutorial - UE5 Starter Course 2022 [5]を軽く見るの続きをやる              

今週は城の作成です。                                                                                                 

今週でこのTutorialの勉強は終わりにしたいです。

<Modular Castle

これで作成するそうです。

と言う事は城の中身は作成しないみたいですね。

上記に示した様な城の一部のPartsがMeshになっていてそのMeshをLegoの様に組み合わせて何かを作成する方法を、Modular Designと呼ぶそうです。

このやり方で作成した城の例を以下に示します。

同じBlogを使用しているにも関わらず全く違う形状の城が作成されています。

このような事が出来るのがModular Designの特徴です。

ここにある城を丸Copyして配置する方法についても説明してありました。

さすがにそれをしたらCheatingだろうと思いましたが、一応そのやり方もまとめておきます。

まず丸Copyしたい城のMeshがまとめられているFolderを選択しSelect、Immediate Childrenを選択します。

Folderの中を開いて見るとその城を構成する全てのStatic Meshが選択されています。

確認のためにFolderの目のIconをClickすると

城全体が消えます。

この城に関する総てのStatic Meshが選択されている状態でctrl+Cを押して、Copy先のLevelを開きます。

ここが驚きだったんですが、新しいMapを開いてもCtrl+CでCopyした内容は保持されるんですね。

しっかりCopy出来ました。

しかしこれでは勉強にならないので一からの作成方法を見せるそうです。

あーよかった。

まず壁から並べます。当然サイズを比較するためにMannequinを配置します。

ここからは個々Techniqueで重要だと思われるものだけを記録します。

以下の様に窓のある壁だけ色が微妙に違います。

これを直します。

隣の壁のMaterialを選択してそれをこの壁にセットします。

あるいは使用しているMaterial Instanceの設定をいじってそのMaterial Instanceを使用しているMeshの色を変更します。

後、Meshを動かすにはLocal Spaceにセットしておく必要があります。

壁のがれきは以下の様な利用方法もあります。

最後に城に使用したMeshをFolder内で一括で管理したい時のやり方です。

Folder内に移したいMeshを全部選択して右Clickします。

そしてMove to を選択して作成したFolderを選択します。

後、城を作成している途中で、Backupを作成するのもありです。

後はひたすら作成していくだけでした。

完成図です。

以上でした。

<Small Details

最後に細かい点を修正していきます。

まず追加するAssetはQuixel BridgeからImportします。

ここで追加するAssetはPebble(小石)、Rock(岩)、Twig(枝)そしてShrub(低木)などです。

実際には以下のAssetを追加していました。

草です。

芝生です。

岩です。

これらのAssetの内、比較的大きいものを以下の様に配置していきます。

GrassをPaintしていますが、見れば分かる通りGrassの色が明るすぎます。

これを直します。

Material Instanceを開いてColor Overlayの値を弄ります。

更にTranslucencyの値を弄ります。

結果です。

おお、凄い。と思いましたが、これではまだ足りないそうです。

それは遠くに移動した時に、別なLODが採用された時に以下の様になるからです。

これはLODの最も単純なMeshに採用されているMaterialが別なヤツだからです。

このMaterialの設定も直します。

やり方は前のMaterialと全く同じです。

Tutorialでは触れていませんが、このGrass、こちらから見た時はかなり暗い色になっていますが、

反対側から見ると、設定を弄る前のような明るい色になっています。

これは地味に気になります。

ここから更に微調整をして以下の様になりました。

確かにこれはかなり良いです。

これでこのTutorialは終わりです。

5.2  Unreal Engine 5 Beginner Tutorial - UE5 Starter Course 2022 [5]を勉強した感想

2022-07-10から勉強を始めて今週でやっと終わりましたが、中々勉強になりました。

特に植物の配置に関してはこんなに細かい点まで気を使わないといけないの?

と言うくらい細かい点まで詰めていてビックリしました。

Landscapeに関しても、細かい調整を常に追加していて、Third Partyで作成したHeight Mapを単にImportしただけじゃ足りない部分が沢山ある事が分かりました。

城の作成に関して言えば、正直物足りなかったです。城の中身の作成方法についても知りたかったです。

ここで重要なのが、このTutorialの実装をやるかどうかです。

うーん。Gaeaで作成したLandscapeをImportしてやるのなら有かなと思っています。

ここでの最終的な目的というのは、先週のGaeaの勉強でもまとめましたが、

16km^2のOpen WorldをWorld Partitionを使用して作成する事です。

所が、既に判明している事ですが、このために使用する1 Pixelが1mのHeight Mapは無料版のGaeaでは無理で有料版を買う必要があります。

さすがに今有料版を買う気はないので、しばらく練習を兼ねて無料版のGaeaでLandscape用のHeight Mapを作成します。

良い事を思い付きました。

16km^2のOpen Worldを作成する前段階として、Gaeaで作成した1009 x 1009 PixelのHeight MapをImportしてWorld Partitionを使用したOpen Worldの作成を行います。

これで行きます。

来週からこれをやります。

6.Gaeaの勉強

6.1 1009 x 1009 Pixelのheight Mapについて

まず、今ある問題をはっきりさせておきたいので先週書いた内容をもう一度書きますが、UEでImportするHeight MapのPixelのサイズは1009 x 1009です。通常これを100倍にして(UUは1cm)1009 x 1009 mのLandscapeを作成します。

これに対して今私が知っている範囲ですがGaeaでは作成したTerrainを1009 x 1009 PixelでExportする事は出来ますが、その元のTerrainは5000m x5000mになっています。

これを100倍でUEでセットするとGaeaでは作成したTerrainは5分の1のサイズになってしまいます。

ので495.540138751倍でUEでセットすると今度はGaeaで作成したTerrainと全く同じサイズになりますが、UE内のLandscapeはかなりデコボコになってしまいます。

この問題の解決策として一番良いのは、GaeaのTerrainのサイズを5000mから1009mに変更する事です。

今週は、これが出来ないか検討します。

6.2 GaeaのTerrainのサイズの設定について

GaeaのBuildにTerrain DefinitionのScaleに1009mをセットしました。

しかし下のコメントにReal Scale 493m/pxと書かれています。

と言う事はここでScaleを変更しても意味ないんでしょうか?

うーん。

そう言えばTutorialの何処かでこの部分について解説していた箇所があったはずです。

今までのBlogを見直して見ましょう。

2022-04-11Blog

この週で初めてGaeaの勉強を始めました。

何と此処でKlaus氏のUnreal Engine 5 : How to Create a MASSIVE Open World Landscape (100 km2 map) - UE5 Tutorial [6]を勉強しています。

これはKlaus氏が100Km^2のLandscapeをGaeaで作成する方法をまとめたTutorialです。

これを見直せば、以下の部分の設定の意味が直ぐに分かりそうです。

ただしこのBlogには

と書いてあってGaeaの部分は全く勉強していません。

ので今からこのTutorialを見てどうやって100km^2 のTerrainをGaeaで作成しているのか確認します。

Unreal Engine 5 : How to Create a MASSIVE Open World Landscape (100 km2 map) - UE5 Tutorial [6]におけるGaeaの設定

はい。

このTutorialのNon-destructible Terrain Sizeの最初の部分で

このLandscapeのサイズを10,000mに変更しました。と言って以下の図を見せています。

しかもこの後に実際に作成したLandscapeの高さを確認する方法が解説されていました。

これは後で勉強します。

その後のLandscape Tiles in UE?で

Scaleを10 kmにセットした場合のHeight Mapの作成方法における設定の仕方で一枚のHeight Mapにセットするのではなく、多数のHeight Mapに分けて設定するやり方が解説されていました。

MethodをSplitにしてResolutionを1009にしてNumber of Tileを4にしています。

Number of Tileは一辺のTileの数でTotalでは16枚になるそうです。

ああ。

ほとんど問題が解決してしまった。

更に私が忘れていた、複数のTileを作成した時のそれぞれのTileの名前の付け方についても解説されていました。

なのでFilename Formatの設定は以下の様に変更する必要があります。

はい。全部知りたい事が分かりました。

後は、高さの設定で、512mより高いLandscapeを作成する時、512m以下と以上で分けてExportしたりImportしたりする方法が知りたいですね。

これは来週調べる事にします。

6.3 Unreal Engine 5 : How to Create a MASSIVE Open World Landscape (100 km2 map) - UE5 Tutorial [6]をもう一回勉強する

それで予定を変更してUnreal Engine 5 : How to Create a MASSIVE Open World Landscape (100 km2 map) - UE5 Tutorial [6]をもう一回勉強する事にします。

と言っても流石に全部やるのは時間が足りないので、今週はTutorialを見てまとめる部分だけやる事にして実際の実装は来週やる事にします。

<Mountain

何故か、Klaus氏はGaeaでLandscapeを作成すると最初に必ずMountainノードを置きます。

私の高校生の時の友人に、漫画の絵を描く時に何故か目から書き始める人がいました。その人、絵は上手いんですが、どうして目から書き始めてCharacterの全体のバランスが取れるの不思議でならない。と言うかその描き方がとても奇妙な感じがしました。

このGaeaでLandscapeを作成する場合ですが、何故かKlaus氏は最初に山を作成します。まるで私の高校生の時の友人のようです。

しかもこのやり方だと山がLandscapeの真ん中に現れます。

正直、ほとんどの人はLandscapeの真ん中に山を作成したくはないはずです。実は山の位置は後で移動出来るんですが、そんなの初心者には分かりません。ので初心者にはそのまま追従するのに非常に抵抗のあるTutorialになってしまっています。

このTutorialでもやっぱり山の作成から始まっています。とっても奇妙な気がしますが、じゃあどこから始めるのかと言われるとそれは分かりません。

以下のNodeを追加してMountainの形状を更にRealにしました。

結果です。

<Base Shape and Erosion

今度は更にErosionを追加します。ただしWizardノードで追加するそうです。

RidgeノードにWarpノードを追加して

Wizardノードに繋ぎます。

そして以下の様にMountainノードからのWizardノードとCombineします。

結果です。

このやり方とErosion ノードを使用した場合の違いについて解説してほしかったです。

Transform ノードをMountain ノードの最後に追加しました。

このNodeにあるPositionの値を変更する事で山の位置を移動させる事が出来ます。

以下の様にです。

移動した結果です。

ここでErosionを追加しました。

この後も色々やっていますが、今回はNodeの勉強ではないので残りは省略します。

<Texture and Masks

Textureについてです。

Set Mapノードの使用方法の説明とかしています。

Maskに関してはLakeやRiverのMaskの作成方法についての解説をしていました。

正直この辺はまだあんまり理解していないので良く分かりません。

<Water Mask vs Unreal Water System

Unreal Water Systemを使用する場合のMaskについてです。Unreal Sensei氏のTutorialで、UE5のWater Systemには問題があると言って使用を中止していましたが、Klaus氏のWater Systemに対する見解はどうなんでしょう。

正直、今のGameで川に入れないのは手抜きな気がします。

ここではUnreal Water Systemを使用する場合のExportの設定方法についての説明がありました。

細かい点は見ただけじゃ分からないです。

<Export Settings

Pngの設定は8 bitじゃなくて16 bitで出力せよ。

と何処かで言っていた気がしますが、この設定のpng8ってのが8 bitのPngなんでしょうね。

ただ調べたらPng は16 bitは無いですね。

後、設定で忘れていたのが以下のRangeです。これはNormalizedにセットする必要があるそうです。

<Non-Destructible Terrain Size

ここで作成したLandscapeの実際の高さを調べる方法が解説されています。

以下にまとめます。

まず以下の様なNodeを接続します。

CombineノードのMethodをMaxにします。

次にConstantのHeightに指定したい高さをセットします。

するとその高さ以上のGeometryだけViewportに描かれます。

ここで512m以上の部分を別なMapにしてExportする方法も解説してほしかったです。

<Landscape Tiles In UE5?

ここの設定については既にまとめていますのでここはSkipします。

<How to Avoid Landscape Artifacts?

ここでは特にHeight Mapの高さの設定について述べています。

516m以上の高さを作成する時は別なMapを作成した方が良い。とかHeight MapにPngの8 bitは使用するなとかです。

後、Importした後で、手動でおかしな所を直すのもありだそうです。これは思ったほど時間は取られないそうです。

別な解決策としては以下の様にBlurノードを追加するのもありだそうです。

このNodeを追加すると滑らかになってUEにImportした時にArtifactが少なくなるそうです。

<Importing Single Height Map vs Tiles

先週、悩んでいたWorld Partitionの設定方法ですが、ここで以下のOpen Worldを選択すれば後は勝手にやってくれるのでProject Settingで何かをする必要はないと解説されていました。

やっぱりみんな同じところで悩むんですね。

ここでEmpty Open Worldを選択して空の作成をしていますが、私が今まで勉強したやり方と一寸だけ違う方法で作成しています。

以下にそのやり方をまとめます。

WindowをClickしてEnv.LightMixerを選択します。

すると以下のBoxが表示されます。

Create Sky LightをClickします。

Create Atmosphere Light 0をClickします。

Create Sky Atmosphere をClickします。

Create Volumetric CloudをClickします。

Create Height FogをClickします。

以上だそうです。

Directional Lightは?と思ったんですが、普通に追加されていました。

このやり方で空を作成した場合、それぞれのLightの設定を自分で弄る必要がないみたいです。

だからと言ってどっちのやり方が楽なのかは人それぞれですね。

それぞれのActorの設定を知らないで空を作成してしまった場合、問題が起きた時にどうやって直して良いのかも分からない訳ですから。

<Unlimited Import of Paint Layer Masks

次にTileのHeight MapのImport方法についてです。

Height MapにはTileの最初のHeight Mapだけ指定すれば良いそうです。

Height Map Resolutionには全部のTileの合計値が表示されるそうです。

Scalingの設定については既に勉強したのでSkipします。

Material Layerの設定ですが、UEではLandscapeを作成した後でセットする事が出来るので後でセットします。

え。

そうなの?

先週、Landscapeを作成した後でMaterial Layerの設定をしようとしてやり方が分からなかったので、Landscapeをもう一度作成し直しました。

Landscapeを作成した後でMaterial Layerの設定をする方法は非常に知りたいです。

Landscapeを作成し、更にそれぞれのLayerのWeight-Blended Layer(normal)を作成します。

何とLayerの上で右ClickするとImport From/Export To File…が表示されるので

すると以下のBoxが表示されます。

LayerをClickします。

以下の様にそれぞれのLayerが表示されるのでそれぞれのLayerに指定のMaskをセットします。

以下の様なErrorが現れる事、それの直し方についての解説もありました。

<Fixing Remaining Sharp Edges

これは手動で直していました。

本当に100km^2のLandscapeを作成した時も手動で直せるんでしょうか?

<Creating 10,000 km^2 Map

ここはUEでImportする時にScalingの値を変更しただけです。

後、さっきまで100km^2のLandscapeと言っていましたが、10,000 km^2になっています。どっちが正解なんでしょうか?

勿論、GaeaのScaleも100,000 mに直してはいます。

GaeaのScaleが100kmならばLandscapeの大きさは100km  x 100 kmで10,000 km^2です。

これ、私もずっと間違えていたのであまり大きな声で批判は出来ませんが、一辺の大きさが100kmならその正方形の面積は10,000 km^2です。100km^2ではありません。小学生Levelの計算ですがLandscapeをImportするTutorialでは結構間違えています。気を付ける事にしましょう。

ただ1009x1009 pixelのHeight Map一枚でこれを作成しているので、まあ精度は推して知るべきでしょう。

<Texturing

10,000 km^2 MapにLayerを貼り付けているだけです。

結果です。

なんだかんだ言っても100kmの広さがあるのは圧巻です。

7.雪山のMapの作成

今週はBen Cloward 先生のVolumetric Cloud Materials - Building Worlds In Unreal - Episode 33 [7]を勉強します。

7.1 Volumetric Cloud Materials - Building Worlds In Unreal - Episode 33 [7]を軽く見る

まず、軽く1回全部見たのでですが、以下に示した通りBase Shape、Noisy Shape、そしてHeight Gradientの3つに分けて解説していました。

先々週、勉強したWorldofLevelDesign社の UE4: Step-by-Step to Creating Your First Volumetric Cloud Material [8]とは大分違う分類をしている気がします。

一寸確認します。

ここでCloud Texture Mask、Falloff Function、そしてCould Volume Detailの3つに分けています。

Cloud Texture Maskではどの部分の青空が見えるのかを指定します。

Falloff Functionでは雲の厚さを調節します。

Cloud Volume Detailではその先のDensityに繋ぐ事で雲の濃度を調節します。

これに対してBen Cloward 先生のこのTutorialではBase Shape、Noisy Shape、そしてHeight Gradientの3つに分けています。

Height Gradientに関しては、WorldofLevelDesign 社のFalloff Functionと被る部分もあるかもしれませんが、残りは全く違うように思えます。

Ben Cloward 先生のVolumetric Cloudに対する認識は、WorldofLevelDesign 社のVolumetric Cloudに対する認識と全く違うのかもしれません。

うん。

兎に角勉強してみましょう。

<Result Nodeの設定>

まずResult Nodeの設定からです。

Material DomainにVolume、Blend ModeにAdditiveをセットしました。

これはVolumetric Cloudの標準的な設定みたいですね。

因みにBen Cloward先生はこのNodeの事をRoot Nodeと呼んでいました。公式のTutorialだとMain Node、Cursorを合わせるとResult Nodeと表示されるこのNodeの正式な名称はどれなんでしょう。

<Base Shape

Base Shapeの実装です。

ここでTexture Samplerに使用されているTextureは3D Textureです。

使用されているTextureです。

因みに、この3DのTextureは以下の設定を弄る事で

3Dで見る事が出来るそうです。

これだと中身は見えないですね。

Tutorialではイジっていませんが下の方にOpacityのBarがあります。

ひょっとするとこのBarを弄る事で中身も見れるのかもしれませんね。

今度はBase Noise Scaleの値を変化させると雲がどう変化するのかについてです。

Default値の場合です。

Base Noise Scaleの値を大きくしました。

細かい雲が発生しています。

Base Noise Expです。

これはPowerノードに繋がっているので直ぐに雲のcontrastを調節しているのだと分かります。

この値を小さくすると雲の細かい点が全く見えなくなりました。

雲のContrastが無くなったと解釈出来ますね。

逆にこの値を大きくすると以下の様に雲が散り散りになりました。

この結果も雲のContrastが非常に強くなったと解釈すると理解出来ます。

次はVolumetric Advanced Inputノードです。

このNodeは実は別のVolumetric Advanced OutputノードのConservative Densityの値をOutputしています。

うーん。これのOutputをここで使用しているのか!

WorldofLevelDesign社の UE4: Step-by-Step to Creating Your First Volumetric Cloud Material [8]の時はどうだったのか?

確認したら以下の様にConservative Densityの値は使用していませんでした。

Ben Cloward先生のTutorialに戻ります。

Conservative Density inputには以下の実装がされています。

このConservative Densityが何をしてるのかを確認するため、それ以外の実装を外してみます。

結果です。

雲の形状を決定していますね。

この実装の解説を聞いて分かりました。

この部分がWorldofLevelDesign社の UE4: Step-by-Step to Creating Your First Volumetric Cloud Material [8]の実装のCloud Texture Maskと同じ役割をしているんです。

ただその仕組みはこちらの方がかなり複雑です。

まず最初のTexture SampleにセットされているTextureのRですが、これが雲の下層の形状を指定しています。

次にTexture SampleにセットされているTextureのGの値が、雲の上層の形状を指定しています。

そして2個目のTexture SampleにセットされているTextureが今度は縦方向の雲の形状を指定しています。

<Noisy Shape

この部分の実装が何をやっているのかを知るために一端この部分を外しました。

結果です。

戻しました。

雲の上層には更なるNoiseが追加され雲の下層はSoftな感じがするようになりました。

実装を見て行きます。

Texture Sampleがあります。

Texture SampleにセットされているTextureです。

こっちも3DのTextureでした。

今度はParameterを見て行きます。

まずはErosion Strengthです。

値を上げてみます。

結果です。

雲が細かくちぎれちぎれに成りました。

Erosionが強化され雲を引きちぎったと解釈出来ます。

次はErosion Scaleです。

0の時です。

値を上げます。

MushyとTutorialでは表現していますが、あんまり良く分かりません。

ErosionのScaleが小さくなっているんでしょうか?

次はErosion Expです。

これは雲の影がはっきりするんでしょう。

値を大きくしました。

小さくすると

Erosionが大きくなり雲を細切れにします。

うーん。なんで想像しているのと逆になるんでしょう?

これは実装した時に確認します。

<Height Gradient

これは高さに応じて0から1を返す実装です。

WorldofLevelDesign社の UE4: Step-by-Step to Creating Your First Volumetric Cloud Material [8]のFalloff Functionとは全く違う機能でした。

Noise Height RangeとNoise Height Expの値を変化させてみます。

Noise Height Rangeの値を大きくするとNoiseの適応される範囲が大きくなります。

Noise Height Expの値を変化させるとFalloffが変化します。

両方が混じっている部分の幅が小さくなると言う事でしょうか?

<Density>

最後の実装の部分で雲の濃さを管理している所です。

以上です。

実装は来週やる事にします。

8.UI Designの勉強

8.1 Start画面の作成

こんな感じにしました。

Directional Lightの位置を変えてみました。

久しぶりにGameを開始したらParticle Effectが表示されません。

調べた所、このParticleに使用していたMaterialが消えてしまっていました。

多分、消してしまったんでしょう。

取りあえず別のParticleをセットしておきます。

8.2 Scoreboardの作成について

UIで絶対必要なものにScoreboardがあります。

2022-06-12のBlogで少しだけ考察しましたが、

元々、このGameではScoreboard以前に戦闘で勝っても何も報酬を与える予定がなかったんです。

これについて今週はもう少し考える事にします。

まず確認しておきますが、報酬は貰ってうれしい物でなければなりません。いくら金貨や経験値を貰っても使い道がなければ貰ってもうれしくないです。

その辺を忘れずに考察します。

<経験値>

まずこの中でもっとも簡単なのが経験値です。

経験値が増えると、魔術師の使用出来る魔法が増えるようにします。

これなら経験値が報酬として貰ったらうれしくなります。

<Monster

ここに書かれていませんが、Monsterを報酬として貰えるのはうれしいです。

しかしMonsterを報酬として貰えるようにするためには他のMonsterとの差別化が必要です。

<Monster復活薬>

Monsterが一体でも負けたら戦闘終了なのにMonster復活薬を貰ってもどうしょうもないです。これが役に立つには今まで作成した戦闘システムを全て作り直す必要が出て来ます。

<Monster回復薬>

今は戦闘が終わるとMonsterのHPはMaxに回復します。このMonsterの回復薬を報酬として出す為には、戦闘が終わってもMonsterのHPが回復しないようにする必要があります。

これも今まで作成した戦闘システムを全て作り直すとは言わないまでの結構作り直す必要が出て来ます。

<金貨>

金貨が報酬として成立するためには、金貨で購入出来るItemが売っているお店を作成する必要があります。これは今まで作成した戦闘システムを作り直す必要はないですが、新たにお店を作成する必要が出て来ます。

<まとめ>

これらの事を考慮すると、今回追加するのは経験値とMonsterの二つが良いと思われます。

9.Anime Renderingの勉強

今週もアニメレンダリングの勉強をしていきます。

9.1 Anime Renderingについて

暫くの間、以下の文は毎回貼らせて頂きます。

こっちもです。

9.2 今回の予定

今回、初めてのAnime Renderingの勉強として、10回程度ここで勉強する予定です、

以下に勉強する予定の内容を書いておきます。

それではそれぞれの勉強をして行きます。

9.3 PPLineDrawingの検証

PPLineDrawingはUnreal Engineでイケてるイラストを描くためのノウハウ大放出! | UE4 Manga Anime Illustration Dive Online [11] で紹介されています。

今週はDepth Lineについて検証します。

<Default値>

Depth LineはScene Depthの差からOutlineを作成していると思われます。

不思議なのはMannequinの足はしっかり輪郭線が出ているのにMannequinの頭には輪郭線が出てない部分があります。

回りに空しかない頭の部分の線が抽出出来ないのは何故なんでしょうか。

以下のようにMannequinの回りに空しかないようにします。

結果です。

見事に空と接している部分の線が消えました。

これは、2022-05-09のBlogで詳しく説明されていますが、Unreal CG氏のToon Shader & Custom Shadow - UE4 Postprocess Tutorial [12]のScene Depth を利用したOutlineの抽出ではMannequinの頭はしっかり抽出されています。

しかしこのやり方では、足が綺麗に抽出出来てません。

PPLineDrawingでは同じScene DepthからOutlineを抽出していますが、足のOutlineはしっかり抽出出来ています。

同じScene DepthからOutlineを抽出したのにも関わらず、こんなに結果が違うのは興味が湧きます。

実装の勉強をする時はこの違いが実装の何処から発生するのか検証する事にします。

今回はMannequinのOutlineが見えないと困るので、以下の様にMannequinの後ろにCylinderを置きました。

結果です。

これを参考にしてそれぞれのParameterを弄って行きます。

後、Scene Depthはやはり、細かい違いからOutlineを抽出するのは苦手の様です。

先週、勉強したCrease Lineと比較すると一目瞭然です。

<Depth Line Bias

Depth Line Biasの値を変化させます。

Default値です。

Depth Line Biasの値を大きくしました。

うーん。変化がない?

Cursorを重ねたら以下の解説が出て来ました。

線が細くなっていると言えばなっているように見えなくもないですが。

10000にしてみました。

あんまり変わらないですね。

今度は値を小さくしてみます。

1にしてみました。

結果です。

おお、今度は変化が現れました。

今まで拾えなかったMannequin表面のScene Depthの違いも線として現れています。

0.5にしました。

今度はもっとはっきりしてますね。

Mannequin表面のScene Depthの違いが線として抽出されています。

0.1にしました。

ここまで来ると、昔のEuropeで見られたようなインクで描いた絵のようです。

0.01にしました。

0.01は0.1と比較するとあんまり変化がないです。このParameterの線を変化させる値のRangeは0.1~3までのようです。

後、このParameterの機能は、解説に有るように線を太くするのではなく、Mannequin表面のScene Depthの違いを線として拾えるかどうかだと思います。

<Depth Line Max Weight

Depth Line Max Weightについて調べます。

Default値です。

値を大きくします。とりあえず1000にしてみました。

結果です。

何と、Mannequinの結果は全く変化しませんでしたが、背景の山の線が抽出されました。

解説を見ると以下の様に書かれています。

これから推測するにカメラからどの程度の距離まで線を抽出するのかをここで決めている様です。

今回は主にMannequinの線の抽出について検討しているので、このParameterの機能はあまり関係ないですね。

はい。次に行きます。

<Depth Line Sampling Scale

値を大きくしました。

これもDepth Line Biasと同じ様にMannequin表面のScene Depthの違いを線として抽出しています。

今度は値を小さくしています。

結果です。

ああ。足の先の線が消えています。

これか。

このParameterが足の線を抽出するかどうかを決定しているようです。

一寸だけこの部分の実装を見てみます。

何と、Scene Depthから線を抽出している部分の実装ではなくその後の線のShapeを決定する箇所にあるParameterでした。

しかもPowerしてMultiplyっていう基本中の基本の計算です。

えーと。

ここではまだ白黒が逆で線が白いはずです。ここで1以上の値を掛けてその後Clampしていると言う事は、今まで切り捨てられていたScene Depthの僅かな違いが線として認識されていると考えられます。

この考え方で合っていると思いますが一応Graphにして確認しました。

元の値がXです。掛けた後の値がYです。

Yの値が1以上の場合は線として抽出されます。

掛けた値が1以上の時は線として抽出される部分が多くなります。逆に1以下の場合は線として抽出される部分は少なくなります。

分かり易いようにClampした後の値のGraphも以下に作成しました。

分かりやすさはあんまり変わらなかったです。

<Depth Line Width

最後のParameterです。

言葉通りに読めば、線の太さが変化するParameterですがどうなんでしょうか?

値を大きくします。

結果です。

線が太くなっています。

今度は値を小さくします。

Default値が2なので1で試してみます。

細くなっています。

しかもこれ線は細くなっていますが、足のように線が消えやすい部分の線は消えていません。

あ。でも凄く近づくと消えてしまいました。

でも以下に示したようにDefault値でも消えています。

これ見るとやっぱりScene DepthではなくCustom Depthで線を抽出するのが一番な気がします。

後、1以下の値の場合はどうなるのかも試しておきます。

0.5を入れました。

結果です。

これはこれで綺麗ですが、線の太さの管理と言う本来の機能からは外れた結果になっています。このParameterは1以下の値は入れない方が良いみたいです。

9.4 公式のDocumentStylized Rendering [9] の勉強

今週はStylized Rendering Post Processing [13]を勉強します。

<NoteとWarning

また警告が書いてありました。

順番に読んでいきます。

まずNoteですが、平たく言えばMaterial Instanceを使用しろって事です。その理由は、もう私には常識になっていますが、Real timeでParameterの調整が出来るからです。

次のPost Process Materialは、Post Process のParameterにない事を実装する時だけ使用してPost ProcessのParameterにあるものはそっちで調整した方が速く更に計算Costもかからないそうです。

これは知らなかったです。

最後のは、Material Instanceを作成しないとParameterは作成出来ないよ。と言うまあ本当の初心者向けのアドバイスですね。

でもMaterial Instanceが何故必要なのかを知らない人は、ずっとMaterialだけを使用している場合もあるかも知れないので、そういう人はこの警告も必要になってくるのかもしれません。

そう言えば、マテリアルデザイン入門でも、8章のマテリアルインスタンスの作成で、何故Material Instanceを作成する必要があるのかを説明していますが、大量のデータの扱いに強いからと言っています。

でもそれなら大量のDataを扱わないならMaterialをそのまま使っていいよね。ってなってしまいます。

Material Instanceを作成するのが絶対必要な最大の理由は、Materialのままだと値を変更するたびにCompileする必要がありReal Timeで変化を確認出来ないからです。

Level上に配置されたActorを見ながら、値の微調整を行って最適な値を見つける事がMaterialのままだと出来ないんです。

だからMaterial Instanceを作成する必要があるんです。

また話が少し脱線してしまいましたが、続きを読んでいきます。

<Stylized Post Process Material

もうイキナリPost Process用のMaterialの作成についてです。

このMaterialに持たせる機能を以下に示します。

まずOutlineです。これは当然中の当然です。

「Ambient Occlusionがある所の線は消す。」と書いてあります。これはあんまり重要じゃないと思います。

線の彩度を上げるのは、うーん。私は線は黒一択しか考えてないので、これもあんまり重要じゃない気がします。

画面の端の彩度を上げる。と書かれています。彩度を上げる事自体には賛成ですが、これもあんまり重要じゃない気がします。

うーん。

やっぱりこういうStylized Shadingは、超有名な作家の真似をしないと高評価に繋がらないですね。

上記の条件はこのTutorialの著者が考える最高の絵を真似る方法で、それはそれで技術的には凄いんですが、その絵自体が世間一般から評価されていないと、それ出来たからと言ってどうなの?となってしまいます。

残り2つの機能は、聞いた事がないです。

The Artist Tape EffectとPaperの様に見せる方法だそうです。

これらのやり方がアニメ レンダリングを作成する時に役に立ちそうです。

<Toon Outline

ここではどうやってOutlineを作成しているのか見てみると

やっぱりScene Depthですね。

以下の解説にあるAmbient Occlusionの内容がわかりません。

私は、てっきりこれがMaterial内で実装されているんだと思ったんですが、それらしい部分は見つかりませんでした。

<Paper Effect

これって画面の枠を作っていたんですね。

この枠はWidgetで作成しているのかと思っていました。

実際のMaterialである

を見たのですが、以下のScreen Aligned UVsノードは始めてみました。

これは以下の解説によるとScreen一杯にTextureを貼る機能がある様です。

残りの細かい点に関しては、後で実装を読むときにじっくり解明していきます。

9.5 夏森轄(なつもり かつ)先生のBlender】セルルック講座 ~ノード、輪郭線、法線転写、RGB分離~ [10] を勉強する

<輪郭線の幅を変える>

今週は、輪郭線の幅の変え方を勉強します。

以下にTutorialのやり方をまとめます。

以下の中から赤線で囲った頂点Groupを選択します。

これです。

これの名称なんですがObject Data Propertiesって出て来ていますね。

この色々並んでいるTool群全体の名称は、Active Tool and Workspace settingみたいですね。

また本筋からずれてしまいました。

Tutorialに戻ります。

以下の頂点グループの+ボタンを押す事で新しい頂点グループを作成します。

この辺はTutorialを見るだけでは分かりませんね。

実際にやってみましょう。

Tutorial通りにやってVertex Groupの+を押しました。

Groupと言う名前が現れました。

次に編集モードに移ってAを押して頂点を全部選択します。

Tutorialではどうやって編集モードに移ったのか写していませんが、単純に以下の場所から変更しました。

これって既に選択されているの?

以下のButtonで透明にして

みると選択されています。

ウェイトを1にして割り当てを押すと

選択されている頂点のウェイトが全部1になると言っています。

やってみます。

Weightは元々1になっているのでAssignボタンを押します。

Tutorialの言っている通りにWeight Paint Modeに変更しました。

すると球が真っ赤になっています。

成程、それぞれの頂点のWeightが1だと真っ赤になるんですね。となると多分ですが、Weightが0の時は青くなるんでしょう。

次にTutorialでは以下のToolを開いてWeightの設定を0にしています。

右側のToolを押したら開けました。

これは確かBlenderの勉強した時にこのBoxを表示させるShortcutを習った気がします。Nだった気がします。

試したら、Nで表示出来ました。

Tutorial通りに塗ってみました。

やっぱりWeightが0の箇所は青くなっていますね。

でも輪郭線は消えませんね。

何処か間違えているんでしょうか?

と思ったらTutorialの方でも輪郭線は消えていませんでした。

Object Modeに戻ります。

そしてModifierを選択します。

そのVertex Groupに先程作成したGroupを追加します。

すると以下の様にWeightを0に指定した輪郭線が

細くなっています。

出来ました。

<輪郭線の幅を変える。をやってみた感想>

今回はObject Data Propertiesと言うToolを新しく使用しました。

このToolは頂点に重さの値を保持させる事が出来る機能を持っているみたです。

その重さに応じて、ModifierのSoliderのOffsetの大きさが決まるように設定する事で輪郭線の太さを調節しているようですね。

よく分からないのがSoliderのFactorです。

このFactorってWeightの値に掛けてどの程度Weightの値を使用するのかを決定していると思ったんですが、0だとWeightの値が100%使用されて1だと0%使用されているみたいです。

想像しているのと逆でした。

10.まとめと感想

今週は時間配分を間違えてしまって最後の節をやる時間が足りなくなってしまいました。

11.参照(Reference

[1] CGHOW. (2022, June 12). Unreal Engine 5 Niagara Beginner Tutorial - UE5 Niagara Starter Course! [Video]. YouTube. https://www.youtube.com/watch?v=NcJ1ZP7tFUk

[2] Cloward, B. [Ben Cloward]. (2022, June 16). Fullscreen Masks - Shader Graph Basics - Episode 50 [Video]. YouTube. https://www.youtube.com/watch?v=HcMFgJas0yg

[3] Ketzer, A. [Andras Ketzer]. (2019, November 12). FluidNinja VFX Tools for Unreal - 01 - Overview [UE4] [Video]. YouTube. https://www.youtube.com/watch?v=HBjP3YeOH2k&list=PLVCUepYV6TvPnVELcyGoSDhpoLO7PyT6_&index=2

[4] Ketzer, A. [Andras Ketzer]. (2019, November 12). FluidNinja VFX Tools for Unreal - 02 - Basics [UE4] [Video]. YouTube. https://www.youtube.com/watch?v=q7tp0gH1ynE&list=PLVCUepYV6TvPnVELcyGoSDhpoLO7PyT6_&index=3

[5] Unreal Sensei. (2022, June 30). Unreal Engine 5 Beginner Tutorial - UE5 Starter Course 2022 [Video]. YouTube. https://www.youtube.com/watch?v=k-zMkzmduqI

[6] Klaus. (2022b, March 24). Unreal Engine 5 : How to Create a MASSIVE Open World Landscape (100 km2 map) - UE5 Tutorial [Video]. YouTube. https://www.youtube.com/watch?v=JNNizdQ4JvY

[7] Cloward, B. [Ben Cloward]. (2021, June 3). Volumetric Cloud Materials - Building Worlds In Unreal - Episode 33 [Video]. YouTube. https://www.youtube.com/watch?v=rEYojMx26T0

[8] WorldofLevelDesign. (2021b, February 16). UE4: Step-by-Step to Creating Your First Volumetric Cloud Material [Video]. YouTube. https://www.youtube.com/watch?v=aYxvN5cs-EU

[9] Epic Games. (n.d.-a). Stylized Rendering. Unreal Engine Documentation. Retrieved June 19, 2022, from https://docs.unrealengine.com/4.27/en-US/Resources/Showcases/Stylized/

[10] 夏森轄(なつもり かつ). (2022, May 21). 【Blender】セルルック講座 ~ノード、輪郭線、法線転写、RGB分離~ [Video]. YouTube. https://www.youtube.com/watch?v=e1tFq5OoSY0

[11] Epic Games Japan. (2022, February 21). Unreal Engineでイケてるイラストを描くためのノウハウ大放出! | UE4 Manga Anime Illustration Dive Online [Video]. YouTube. https://www.youtube.com/watch?v=QuYIkSozV6w

[12] UnrealCG. (2020, June 25). Toon Shader & Custom Shadow - UE4 Postprocess Tutorial [Video]. YouTube. https://www.youtube.com/watch?v=mx_AvrZK3TA

[13] Epic Games. (n.d.). Stylized Rendering Post Processing. Unreal Engine Documentation. Retrieved July 24, 2022, from https://docs.unrealengine.com/4.27/en-US/Resources/Showcases/Stylized/PostProcessing/