UE4の勉強記録

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

「Unreal Engine 4.xを使用してRPGを作成する」の足りない部分を作成する RPGのStoryの作成と推敲 9

<前文>

<次々と改宗するトランプ信者たち>

Capitol riot の聴聞会が開かれましたが、どうやらトランプ前大統領のこの暴動への関与がほぼ明らかになって来ました。

この聴聞会の結果、トランプ前大統領は、クーデターを起こして次の大統領への平和的な権力の移行を阻止しようとした犯罪者として認定される可能性も出て来ました。

その結果、今までトランプ前大統領の支持者というか信者だった人達が、次々にトランプ前大統領の支持を止める宣言をしています。しかし彼等は、自分達まで犯罪者になってしまうという恐怖からの行動で、本音では全く反省していません。

私がこの前文で繰り返し述べていますが、以下にもう一度記しておきます。

自由な競争と公平な評価。

この二つがあって初めて先進国の発展は始まるんです。共和党の支持者たちは、推薦状で本来なら競争で勝ち取る役職を全部、コネで埋めてしまいました。

だから、テキサス州のように産油国並みに石油を持っていても大停電を起こして住民が凍死寸前まで追い込まれてしまう事態、しかも知事がメキシコに逃亡するというおまけ付き。な事件を起こしてしまったんです。

本当に、トランプ前大統領の元支持者たちが反省しているのならば、この自由な競争と公平な評価を与えなかった事について反省すべきなんです。

所で、この自由な競争と公平な評価を与えられなかった事で、最も被害を被ったのは他ならぬ我が日本国と日本人です。

何十年前からか知りませんが、日本人がアメリカ市場で勝っているのはズルしているからだ。といういわれのない言いがかりをつけられ、ほとんどの産業が壊滅してしまいました。

これは勿論、その代わりの産業を育てられなかった日本の企業家の責任もありますし、米英のオランダとかへの対応を見ると、まだ日本への言いがかりは可愛いもので、日本側が的確な対応をすれば直ぐに解決出来た程度のものなのに何もしなかった日本政府の責任も勿論あります。

しかし駄目だったものをグチグチ言っても仕方ないので、もしアメリカが急に政策を変更して、自由な競争と公平な評価をするようになった場合、今の日本にあるモノで凄く売れるのは何かについて書いてみたいと思います。勿論、私の独断と偏見です。

  • キングダム(漫画)
  • キューピーマヨネーズ
  • 任天堂のゲーム
  • スバル(車)
  • Pixiv
  • ラーメン

うーん。

あんまり思いつきません。しかし日本国内で、自由な競争と公平な評価を与えられていた分野を考えれば良いんです。となるとやっぱり漫画、ゲーム、B級グルメであるラーメンなんかはかなり良い気がします。

それで思い付いたんですが、IT革命って、色んな利権があって自由な競争と公平な評価がなかった分野に、自由な競争と公平な評価を与えるPlatformを作成する事だったんです。

例えば、

  • 文才があっても賞がないと小説を書かせて貰えない人達に小説を書けるPlatformを作成する
  • 良いビジネスのアイデアがあってもお金がない人に、お金を与えるPlatformを作成する
  • 面白い動画を作成してもテレビが放送してくれない人達に動画が公開出来るPlatformを作成する
  • 販売したい商品があってもデパートでは扱ってくれない人達に商品を販売出来るPlatformを作成する

とかです。

ああ。

インディーゲームを作って売っている人達が、自由な競争と公平な評価を貰えるPlatformってありましたっけ。

ないですよね。

ひょっとしてそのplatformを私が作成したら、凄いお金持ちに成れたりして。

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

<本文>

1.今週の勉強

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

  • Niagara: CGHOW氏のTutorialをやる
  • Materialの勉強
  • RPGStoryの改善
  • Open Worldの検証
  • Gaeaの勉強
  • 雪山のMapの作成
  • UI Designの勉強
  • Blenderの勉強

2.Niagara: CGHOW氏のTutorialをやる

CGHOW氏、最近、初心者向けのNiagaraのTutorialを連発して投稿していてます。

まずこのScratch Pad Module のTutorialです。これはSeries化されていて現在#8まで出ています。

もう一つがNiagara Beginner Courseです。

こっちは一本の動画としてまとまっていますが、2時間以上の超大作です。

この2つをどうしても勉強したい。

Niagaraの勉強を始めてもう一年経ちました。基礎については自分では理解しているつもりです。Scratch Padの実装方法も基礎的な部分は理解しているつもりです。その辺の復習や自分の理解度を確認する事、更にはこれからNiagaraを勉強する初心者に私だったらどう教えるのかについての検討も兼ねて、今週は、これらのTutorialを勉強します。

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

もうイキナリ勉強します。

特に3つの点にフォーカスして勉強します。

  • 自分がその事について何を理解しているのかの確認
  • Tutorialで教えている内容についての考察
  • 自分が初心者に教えるなら付け足す内容

<Create Project

Projectの作成方法について説明してます。

流石にNiagaraを勉強しようと思う人でProjectの作成方法を知らないLevelの初心者はいないと思います。手順の確認のためにやっているんだと思います。

私からのNiagaraの勉強を始める人へのAdviceは

  • Niagaraを理解するためにはMaterialの基礎を先に理解しておく必要がある

これに尽きます。

Niagaraを使用して作成するVFXの内、30~60%はMaterialが占めます。

Materialの基礎が理解出来ていない状態でNiagaraの勉強を始めても何も身に付きません。時間の無駄になります。本当に労力と時間を無駄にしてしまいます。

Niagaraの勉強は必ずMaterialの基礎を理解した後で行うようにしましょう。

それで更に言いますが、Materialの基礎を理解するためにはLinear Algebraつまり線形代数を理解している事が必要になります。

私はあんまり日本の数学教育には詳しくないですが、線形代数は大学レベルの数学なはずです。

つまりそのLevelの学力が無い人は勉強しても理解出来ないので無駄な努力をする事になります。

この辺を最初にはっきり言わないのは私はUnfairだと思います。

その人が勉強したとしても身に付くことが出来ない事を最初に告げる事は厳しすぎる様に感じますが、後で膨大な時間を無駄にしないで済むので本当は優しいんです。

別にLinear Algebraの基礎を勉強した後で、Materialの勉強をすれば良いだけです。

もっとも、これはあくまでも高卒レベルの学力者を対象にしているので、私が大学にいた時の中国人の友達のようにLinear Algebraのクラスを取る前に人口頭脳(自動運転)のクラスを取って宿題が解けなくて滅茶苦茶追い込まれた挙句、自分で行列を編み出してしまうような数学の能力値の高い人は別な話です。

<Create Niagara System and Emitter

ここではNiagara Systemの作成方法についての説明をしてます。

Content Browserの何処かを右Clickすると現れるBoxからNiagara Systemを選択して作成しています。

これって正確に言うとNiagara Systemというクラスを継承したクラスを作成しているんだと思うんですが、みんなNiagara Systemを作成すると言います。

後は、どのOptionを選択するか聞いてくるからそこからどれを選択すべきなのかの説明をしています。

この辺の選択はSystemやEmitterが何なのかを理解出来たら全部理解出来ます。逆に言えばSystemやEmitterが何なのかが分からない内は、ここで何を聞いているのか全く理解出来ません。

ので今はこの部分はTutorialが言う通りに作成して、あまり考えないで先に進むべきです。

いつもFountainを選択するCGHOW氏ですが今回はEmptyを選択しました。

Tutorialはここでは全くSystemとEmitterの関係については説明しませんでした。

私がどうやってSystemとEmitterについて理解出来たのかについての個人的な経験を何処に書こうか迷ったんですが、ここに書きます。

私は、このNiagaraのSystemとEmitterに関して最初、公式のDocumentであるNiagara Overview [2]やNiagara Key Concepts [3]を読んで勉強したんですが、全く何を言っているのか分かりませんでした。(2021-04-26あたりのBlogを読んでもらうと私の苦悩が良く分かると思います。)

せめてこの公式のDocumentに

Systemは以下の部分、

Emitterは以下の部分、

の事を指しているとScreenshot入りで説明されていたらもう少し理解出来たと思います。

今、私がNiagaraの初学者からSystemとかEmitterの意味が分かりません。と聞かれたら以下の様な説明をします。

簡単にするためにNiagaraの初学者の名前を鈴木君とでもします。

まず、鈴木君にこう聞きます「SpawnとUpdateが何をやっているのか理解出来ていますか?」

鈴木君はまあこう答えるでしょう。「うん。あんまり良く分かりません。」

そこで私はこう説明します。

「Particleつまり粒を一つだけ作成する場合を考えてみましょう。もし鈴木君が粒を一つ作成するとしたらどうしますか?恐らく最初に粒の形や色を決定すると思います。次にその粒が時間毎にどんな変化をするかを考えるでしょう。例えば花火のように空を飛んだり、色が途中で変わったりします。もしかしたら粒の形も時間によって変化するかもしれません。」

この粒が生成される一番最初の時に決定しなければならない事(粒の形や色など)、これを管理するのがSpawn なんです。ここでは特に粒が生成されるときの管理を任されているのでParticle Spawnと呼ばれています。それに対してその生成された粒が時間毎にどう変化しているのかを管理するのが、Updateです。ここでは特に粒に関するUpdateを管理しているのでParticle Updateになります。

これで鈴木君はParticle Spawn とParticle Updateが何を管理している箇所なのかおぼろげながらImageが出来ます。

そこで次の説明に入ります。

「鈴木君は、Niagaraを使用して花火のEffectを作成したいとするよね。そうするとParticle、つまり粒を沢山生成する必要があるよね。しかも時間毎に生成する必要もあるよね。つまりParticleの生成を管理する何かが必要になってくるんだ。それがEmitter。」

Emitterは沢山のParticleを何個、何処に、どれくらいの頻度で生成するのかを管理するんだ。」

そしてこう質問します。

「そしてこのEmitterにもSpawn とUpdateがあるんだ。鈴木君はこのParticleの生成の管理、つまりParticleを何個、何処にどれくらいの頻度で生成するのか、はEmitterのSpawnとUpdateのどっちで管理すると思う?」

鈴木君は、自信満々でこう答えます。

「そりゃ、EmitterのSpawnでしょう。なんせ生成するんですから。生成するのがSpawn、その時間経過による変化を管理するのがUpdateですから。Emitter Spawnで指定するはずです。」

はい。違います。

しかしこれもNiagaraの初学者によくある間違いです。

私はこう説明します。

「違うよ鈴木君。Emitter SpawnはEmitterの生成に関して指定する所だよ。鈴木君はEmitterの生成に関して指定する所でParticleの生成に関する指定をしようとしているよ。」

鈴木君は、きょとんとしています。

「ここは、Emitter Updateで指定するんだ。Particleの生成される数、場所、その頻度はEmitter Updateで管理するんだ。」

鈴木君はここで理解の範囲を超えてしまいました。頭がパンクしていました。

そこで私はこう説明します。

「うん。じゃあ、EmitterのUpdate とSpawnについて理解出来なくてもEmitterがParticleをどれくらいの量を、何処に、どれくらいの頻度で生成するのかを管理しているのは理解出来たよね。そのEmitterなんだが、実は何個も使用出来る。以下に示した様に。」

「となるとこのEmitterを管理する何かが欲しいよね。それがSystem。以下に示したヤツがSystem。

これもSpawn とUpdateで構成されている。」

すると鈴木君の目が突然、光ってこう答えました。

「ああ、分かりました。三国志で例えたら、王様がSystem、将軍がEmitterで、それぞれの兵士がParticleになるんですね。ParticleのSpawnとUpdateに関してはしっくり理解出来たんですが、EmitterのSpawnとUpdateの関係はまだ良く分かりません。でもそのEmitterの管理をするのがSystemってのも分かりました。要は王様がSystem、将軍がEmitter、そしてそれぞれの兵士がParticleに該当するとイメージするとSystemとEmitterとParticleの関係性は良く理解出来ました。」

となり、鈴木君は今まで良く理解出来なかったSystemとEmitterとParticleの関係性のImageが頭の中にスッキリと出来ました。

あんまり上手くまとまらなかったですね。

Niagara UI

一体何の説明をするのかと思ったら、NSのLayoutについての説明でした。

CGHOW氏はNSのLayoutを自分が使いやすいように変更しているのでそれについて解説していました。

私はNSのLayoutは以下に示した様なDefaultのままです。

それでもCGHOW氏のTutorialを勉強して不便を感じた事はないのでLayoutはそのままにしておきます。

<Difference between Emitter and System

EmitterとNiagara Systemの違いについて解説しています。

TutorialではEmitterにFountainを追加して新しいEmitterを作成しています。

それを開くとNSとほぼ同じような内容のEditorが開きます。

しかしEmitterはNSとは違いLevel上に配置する事は出来ません。

Emitterを配置するためにはそのEmitterを右クリックして以下のBoxを開き、Create Niagara Systemを選択するか

元々あるNSにDrag and Dropで追加してそのNSを使用するかします。

CGHOW氏のTutorialで勉強する限り、Niagara Emitterから作成する事はほとんどありません。

全部Niagara Systemから作成します。

この部分は忘れて大丈夫です。

<Basic of Emitter

以下のEmptyなEmitterからParticleを発生させるにはどうしたら良いのかの基礎を教えています。

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

このSpawn Rate ModuleのParameterであるSpawn Rateに10をセットすると

Preview上に以下の様なSpriteが現れました。

うーん。

この説明の仕方は。

AやってBやってCやってDやって、はい出来ました。

出来たけど全然理解出来ません。となる典型的なPatternですね。

とは言ってもEmitterの仕組みを理解するのはNiagaraの初心者にとってはそれなりに大変ですし、それを初心者にわかるように説明するのはもっと大変です。

私の先程書いた、鈴木君に対しての説明はそういう意味では初心者にも分かる説明だと自負しています。

この後で、Tutorialでは生成されるParticleの数が50個から増えない理由は、

Spawn Rateに10がセットされているから、

1秒間に10個のParticleが生成されていて、更にEmitter Update SectionのEmitter State Moduleの

Life Cycle ModeがSystemにセットされていて

そのSystem のSystem Update SectionにあるSystem State Moduleの

Loop Durationが5.0にセットされているから

5*10で50になっているとありました。

うーん。

違うと思います。

Particleの数が50まで増えて50で一定になるのは、Spawn Rateに10がセットされているから、

一秒間に10のParticleが生成されて、それぞれのParticleの寿命がParticle Spawn SectionにあるInitialize Particle Module内で

5秒にセットされているため、

開始、5秒まではどんどんParticleの数が増えていき、5秒後から消滅するParticleと生成されるParticleの数が同じになるからです。

試しにInitialize Particle ModuleのLife timeを3に変更すると、

Totalで生成されるParticleの数は30に変わります。

これをSystem Update SectionのSystem State Moduleの

Loop Durationの値を3に変更しても、

生成されるParticleの数に変化は出ません。

ほら。

とは言ってもSystem State ModuleにあるLoop Durationの値が何を指しているのかは不明のままでした。

今度はParticleの生成する場所を指定する方法についてです。

Shape Location ModuleをParticle Spawn Sectionに追加しました。

結果です。

あれParticle の生成される位置はEmitter Update Sectionで生成されるんじゃなかったっけ。

試しにEmitter Update Sectionを開いて見たらSuggest にShape Location Moduleがあります。

Emitter Update SectionにShape Location Torus Moduleをセットしました。

結果です。

あれ。

なんでこうなるの?

あ。分かりました。

Emitter Update Sectionにセットした場合はEmitterで一個の設定しか出来ません。ので全ての生成されるParticleの位置は同じ場所になります。

それぞれのParticleによって生成される場所を変更するためにはParticle Spawn Sectionで指定する必要があります。

うーん。納得。

まだまだ勉強途中ですな。

先程の鈴木君にEmitterの機能を教える所で、

何処にと言っていますが、これは全部のParticleの生成する場所が同じ時だけで、それぞれのParticleの生成する場所が違う時は、Particleの生成場所はParticle Spawn Sectionで管理するんでした。

Particle Spawn SectionにあるInitialize Particle Moduleの

Parameterの機能について解説しています。

Tutorialでは色の値を変えたり、ParticleのサイズをRandomにしたりしていました。

CurveをセットしたりDynamic Inputをセットする方法についての説明は無かったです。

今度はそれぞれのParticle に速度を追加します。

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

するとErrorになりますが、TutorialではFix Issueボタンを押して解決していまいました。

Solve Forces and Velocity Moduleについての解説は無しでした。

Add Velocity Moduleを追加するとParticleが一定速度でZ軸上を移動するようになりました。

思ったよりかなりつまらない動きでした。

ここでAdd Velocity ModuleのVelocityにRandom な値をセットする方法を説明します。

これですね。

私は、ここにセット出来るのは全部、Dynamic Inputと言うと思っていたんですが、Link Inputsとか違うのもあるんですね。でもまあ便宜上、Dynamic Inputを追加します。と言っています。

はい。Random Range Vectorをセットしました。

値はZに-50、50をセットしました。

結果です。

Particleが上下に散るようになりました。

これで、ModuleのParameterにDynamic Inputをセットする方法も勉強できました。

まだTutorial始まって10分しか経ってないですが、既にかなりの内容を勉強しています。

最後にRender SectionにあるSprite Renderer Moduleについて説明しています。

Sprite Renderer Moduleについてと言うより、Sprite一般についての説明でした。

Spriteが板に貼った絵で常にカメラに向かって正面を向いている事を説明しています。

うーん。

色々な資料を読んだり勉強したりして、私がこれを理解するのに2週間以上掛かったというのに、CGHOW氏のTutorialで勉強している人達は一瞬で教わって理解してしまうのか。

後は、以下のRenderingも出来るみたいな説明もしています。

これらの内、Component RenderとGeometry Chache Renderは試した事はありません。

Light Renderは使用するMaterialのEmissive Colorの値を大きくした場合とどう違うのか良く分かりません。Lumen登場以降、地面に写る反射光はEmissive Colorの値を大きくした場合でもLightのようになったはずです。

<Instance Parameter in System

Fountain Emitterを二つ加えて

以下の様な2つのParticle が噴き出すNSを作成しました。

TutorialのFountainは一寸見にくいので更に改良しました。

これのそれぞれのSpawn Rateは

にセットされています。

これをInstance Parameter を使用してSystem から管理する事で同じ値にする方法を説明します。

まず、Spawn RateにRead From new System Parameterをセットします。

こんな風にです。

すると以下の様なErrorが表示されます。

Parameterの中からSYSTEM SpawnRateを探して

DragしてSystem Spawn Sectionにセットします。

すると上記のようにSet: System Spawn Rateと言う名前のModuleが現れます。(更にErrorも消えます)

これは初心者にはハードルが高すぎでしょう。

まずParameterが何なのか全く説明がないです。更にSystem のSystem Spawn Sectionの機能が何なのかまだ良く分かっていないのに使用しています。

まあ、私自身の復習と考えるならこのTutorialは非常に良いです。

今まで勉強した内容を全て叩き込んでくれています。

後は、もう片方のEmitterのSpawn RateにもSpawn Rateをセットして

最後にSystemのSet System Spawn Rateの

値を90にセットします。

これで両方のEmitterのSpawn Rateの値を同じにする事が出来ました。

うーん。段々難しくなってきました。

これもまだ初心者のLevelなんでしょうか?

18分しか終わっていない。後2時間ありますが、もうNiagaraの勉強に使える時間が無くなってしまいました。

残りは来週やる事にします。

2.2 Unreal Engine 5 Niagara Beginner Tutorial - UE5 Niagara Starter Course! [1]を勉強してみて

まだ最初の20分しか勉強していませんが、これ残り2時間もあります。一週間で20分だけ勉強するとなると、このTutorialを終わらせるのに後2カ月かかります。

うわー。

でも内容は凄いしっかりしていて勉強のやりがいはあります。

この内容にプラスして分かり易い説明を追加したら、Niagara初心者向けの物凄く勉強になるTutorialになるはずです。

やっぱりきちんと勉強する事にします。

3.Materialの勉強

Ben Cloward先生のProcedural Hex Grid - Shader Graph Basics - Episode 46 [4]を勉強します。

更にBen Cloward先生が新しいTutorialでPost Processについての動画を出しています。

これも見てみる事にします。

PPLineDrawingの実装でOutlineを作成している部分の検証の続きも何かしらします。

3.1 Procedural Hex Grid - Shader Graph Basics - Episode 46 [4]を軽く見る

今週は以下のHex Gridを作成するそうです。

要するに、先週やったTextureのBlend方法より上記のようなHex GridによるBlendの方が継ぎ目が目立たないと言う事でしょう。

このHex Gridを使用したTextureのBlendは次のTutorialで勉強するそうです。

今週はこのHex Gridを作成する所までだそうです。

Ben Cloward氏のTutorialは最後までやるととんでもなく凄くなりますが、途中は結構ショボい事が多いです。今週も最後の凄い結果のための貯め回みたいなものでしょう。

Comment欄を見ると綺麗なHexagonを得る為にどんな数字を入れるのがBestなのかで議論しています。

Hexagonが変な形になった場合、この数字を検討します。

このTutorialは残念な事にUnityを使用して解説していて、UEは実装方法の解説のみになっているようです。

頑張って理解するしかないですね。

理論以前にUnityのMaterialの構造で詰まってしまいそうです。

Sub Graphから作成します。と言っていますがSub Graphって何なんでしょう。

Unreal の実装を見たらUnity のSub GraphってUnreal のMaterial Functionの事みたいでした。

はあ。安心しました。

UV NodeにMultiplyノードそしてSwizzleノードを接続しました。

この辺は理解出来ますね。

UVノードがTexCoord[0]ノードでそれにMultiplyノードを掛けたのと同じですね。

SwizzleノードはMultiplyノードを掛けた結果、Vector4になっているから、Vector2に戻すために使用しています。UnrealではMultiplyした結果もVector2だったはずです。のでSwizzleノードに当たるノードは要らないでしょう。

うん。

普通に理解出来ます。どんどんいきます。

Comment欄で問題になっていた値の実装部が出て来ました。Tutorialでは以下の様な値を使用していました。

これは実装する時に検討します。

その後も計算を続けて以下の様な形状になりました。

ここまでが第一ステップだそうです。

次のステップではHex Gridを作成するそうです。

以下の方法で実装していました。

これは一個ずつの実装を追うのは不可能です。なんでそうなるのかをそれぞれのNode毎に考えていたら永遠に終わりません。

ここでは全体像を理解するに留めます。

次のStepでぼやけているHex Gridをはっきりさせるそうです。

以下の実装で直しました。

今度のStepではこのHex Gridの歪みを直します。

以下の実装をしていました。

この実装の一個ずつの機能を追うのは不可能です。

結果だけ追います。

はい。

Unityの実装を勉強しましたが、特に理論的な説明は無かったです。Step1からStep4に分けてやっていると言う事、それぞれのStepで何をしているのか位の理解しか出来ません。

でもそれで十分のようです。

  • Step1: 赤、緑、青のGridを作成
  • Step2: Hex Gridに変形
  • Step3: Hex Gridのぼやけの直し
  • Step4: Hex Gridの歪みの直し

です。

ではUnrealで実装してみます。

3.2 Procedural Hex Grid - Shader Graph Basics - Episode 46 [4]を実装する

まずMaterial Functionを作成します。

ここに実装していきます。

取りあえずこれだけ作成します。

結果です。

勿論、1以上の値は全部黄色で表示されているので区別がつかないだけで12までの値が配置されています。

<Step 1:赤、緑、青のGridを作成する>

Floorノードを追加します。

結果です。

FloorノードはRound Offつまり小数点以下切り捨てを行うNodeです。

その通りになっていますね。

MaskしてRからGの値を引きます。

結果です。

はい。

一応計算してみます。

赤の値です。

緑の値です。

赤から緑の値を引いた値です。

はい。

今度は(0,1,2)を足します。

え!

これってVector3だったの?

結果です。

うーん。

結果から見るとFloat+VectorVectorと言う計算しているみたいです。

1/3で掛けます。

うん?

こんな事したっけ。と思ったらここがComment欄でみんなが議論している箇所でした。

結果です。

取りあえずTutorial通りの値でやります。

次に1.6667を足します。

うん。

こっちか?確認します。

こっちでした。

後、1.732はこの部分の話ではなさそうですね。

Fracノードを追加してRoundします。

結果です。

赤、緑、青のGridが出来ました。

<Step 2:Hex Gridに変形する>

まずFracノードを追加します。

結果です。

これの手順の全てを追って計算結果がどう変わったのかを記録する事は出来ますが、それがどうしてHex Gridに変化したのかを理解する事は出来ません。

ので結果だけ記録する事にします。

以下の実装を作成します。

結果です。

この計算結果と先程のStep1の計算結果を使って以下の計算を行います。

結果です。

Hex Gridが出来ました。

うん。

Unityと向きが逆ですね。

後、Unityのはもっと青いですね。

Output Result ノードに繋いでみたら青はありました。

さっきのImageはAppendManyノードのRGを示していたようです。

<Step3:Hex Gridのぼやけの直し>

Step2の結果に以下の計算を行います。

結果です。

この部分の計算は非常に単純ですが、どうやってこの計算を導いたのかは全く分かりません。

というかTutorialでもこの計算方法を自分で導く事は全く期待していませんね。

コメント欄でオリジナルな計算方法を書いている人も完全に無視されています。

でもMaterialの勉強って本当はそういう計算方法を自分で考えるもんだと思うんですが。

ここで議論しても益がないので先に行きます。

<Step4:Hex Gridの歪みの直し>

これもどうしてその計算を導いたのかは全く分からないので実装方法だけ記録しておきます。

結果です。

3.3 Procedural Hex Grid - Shader Graph Basics - Episode 46 [4]を勉強して

HexにしたってTexture同士の境目ははっきり見えてしまう訳で、あんまり実用上の意味はないんじゃないの。と思いながら見てましたが、自分で実装したら、何故Hex Gridを採用したのかかなり理解出来ました。

Hexにすると3つの利点があるんです。

それについて以下にまとめます。

まずHexにする事でTexture同士のつなぎ目がどう変わったのか見て下さい。

上下左右の境目が無くなっています。

Textureの下の部分です。

Textureの上の部分です。

見事に繋がっています。

これで四角が並んで見える様なTilingは無くなります。

また先週のBlogから持ってきましたが、以下のImageの様にTexture同士の繋ぎ目がはっきり見えてしまって四角が並んでいるのが丸わかりです。

これが無くなります。

次の利点です。

Hex同士の繋ぎ目ですがBlendしてぼやかせる事が出来ます。

先週のやり方だとTexture同士の境界はかなりはっきりしていてBlendしてぼやかす方法は使用出来ません。

以下にStep3のPowerの値を6から3にした例を示しておきます。

3つのHex Gridの境界が微妙にBlendされています。

最後の利点です。

TextureのPatternが3種類で足ります。

これって誰も述べていませんが、地味に凄い事です。Tilingを消すためにHexを採用した場合、TextureのPatternは3つで済むんです。

先週のやり方の場合、Tilingを消すために以下の数だけTextureのPatternを作成しました。

正確なTextureのPatternの数は分かりませんが、違う色の数から考えて7~8種類はありそうです。

これがHex Gridを採用すると3つのPatternで済むんです。

Hex Gridを採用する事でこれらの利点を得る事が出来るのを知っているのは、数学者だけでしょう。

Ben Cloward先生がここで紹介しているTextureのtilingを消す方法は、かなり大きなGame会社のProjectで開発された、もしくは大学の研究所で開発されたMethodのような気がします。

ひょっとするとこのBlendの仕方は、何処かの会社が特許を取っていて勝手にGameに使用してはいけない技法なのかもしれません。

まあ、それは冗談ですが、そう疑いたくなるくらいの高度な研究成果かこの技法には込められています。

これは残りを勉強するのが楽しみになって来ました。

後、思ったのはQuixelはこのTilingについてどう考えているかです。

あれだけ精密なTextureを大量に保持している会社がTiling問題について何も対策を取っていないとは思えません。先週知ったんですが、Quixelも独自のTutorialを作成しています。これも後で調査する事にします。

3.4 Ben Cloward先生のBasic Post-Processing Effects - Shader Graph Basics - Episode 49 [5]を軽く見る

このTutorialを勉強する時間を取る事は出来ませんので、軽く見て感想をまとめるだけにします。

まずこのTutorialで紹介されているPost Processですが、画面を揺らして水面に写ったような映像に変換する物でそれ自体はそんなに興味深いものではないです。

まず、UnityのPost Processのやり方が説明さえていますが、何をやっているのか全く理解出来ません。

のでUnityの説明はSkipしてUEの方を見ます。

Unrealの方が普通に分かりました。

Post Processに使用するためのMaterialをセットしています。

そのMaterialの実装です。

特に難しい処はないです。

出来ればこのTutorialでScene TextureノードとG Bufferの関係やDeferred Shadingについての解説もやって欲しかったですがそう言うのは無かったです。

今気が付いたんですが、Ben Cloward先生HLSLのTutorialも載せていて、G BufferやDeferred Shadingはこっちで勉強しろって事かもしれません。

こっちのTutorialも後で見てみます。

Basic Post-Processing Effects - Shader Graph Basics - Episode 49 [5]を軽く見た感想ですが、中々勉強しがいのあるTutorialシリーズになりそうです。Post Processについて総括的に学べるTutorialが見つからないと言っていた矢先なのでとても有り難いです。

3.5  PPLineDrawingの実装でOutlineを作成している部分の検証の続き

本当は今週のMaterialの勉強はもう十分なんですが、先週あんなに線の抽出は重要と宣言したのに今週全く線画についての勉強をしなかったら、何か口だけな感じになってしまうので一寸だけ勉強する事にしました。

この分野の勉強は、本当に重要なので来週からMaterialから独立してAnime Renderingとして独自に勉強するようにします。

例えば公式のDocumentにStylized Rendering [6] がありますが、4.25を持って公式のSupportが終了してしまっています。

こういうLegacy化してしまった技術も勉強して組み込んでいきたいです。

Post ProcessやLandscapeそして普通のMaterialにおけるStylizedの手法がまとめられていて勉強し甲斐がありそうです。

PPLineDrawingの勉強ですが、Material全体の勉強に使える時間も無くなってしまったのでParameterを変化させると線画がどう変化するかをNormal Lineで見る事にします。

まずDefault値だとこんな感じです。

Lineを太くしてみます。

Normal Line Widthの値を2にしました。

線に強弱が生まれました。

まるで筆で描いたようです。非常に興味深いです。

同様のテストをDepth Lineで試してみます。

Default値のDepth Lineの結果です。

Depth Line WidthのDefault値は2なので倍の4にしてみます。

結果です。

Depth Lineだと線全体が太くなっています。

うーん。面白い。

何かこれだけでも今週の学びとしては十分ですね。

Line Widthの値は何処に使用されているのか確認したら以下のLineのShapeを決定している部分じゃなくて

以下の部分でした。

うーん。

これってサンプルを取る点を広げたって事ですよね。

なんでこういう結果になるんでしょう。

良く分かりません。

もうMaterialを勉強する時間が無くなってしまいました。来週からAnime Renderingの勉強として別枠で時間を取る事にしたのでその時じっくり勉強する事にします。

4.RPGStoryの改善

今週考える必要がある内容は、

です。

4.1 どうやってアポロン王国の王女のキャラを立たせるのか?

まず言えるのが名前を考える事です。

王族の名前はどこから取りますか?

王族らしく宝石の名前から取る事にします。

アポロン王国の王女と王様の名前は、アレキサンドライト王と琥珀姫にしましょう。ゼウス王国の王と3人の王子の名前は、ダイヤモンド王とルビー王子、サファイア王子、エメラルド王子にしましょう。

琥珀姫ですが全くキャラが立っていません。

何にもしないで塔に幽閉されているからです。

琥珀姫が行方不明になっていて、噂では毒蛇に殺された事にします。っでPlayerの前に現れる謎の美少女です。

これで琥珀姫のキャラが立ちます。

もしくは塔に幽閉されていましたが、Playerの助けを借りて逃げ出す事に成功します。

そしてPlayerと共に12使徒アンドレを探す旅にでるのはどうでしょうか?

琥珀姫は天の声を聞く事が出来て、アンドレの居場所を知る事が出来ます。

後、7つの大罪の一人である毒蛇ですが、名前はもっと具体的な方が良い気がします。コブラにしましょう。

琥珀姫は塔から救出された後、アポロン王国には戻らずに、Playerと一緒に12使徒の一人であるアンドレを探す旅に出ます。

これなら琥珀姫のキャラも立ちそうです。

4.2 魔法の習得方法に関して

ここはいい加減な感じにしてLevelが上がった時に覚える魔法と、それ以外にEventをクリアした時に覚える魔法に分けるのが第一の方法です。

第2の方法としては魔法の習得システムを一から構築する必要があります。

例えば、魔法の紋章を作成してその紋章を手に入れると魔法が使用出来るようになるとかです。

4.3 壺を探す旅について

まずここで考えないといけないのは、ゼウス王国のダイヤモンド王に無限に水の湧き出る壺の話を聞いたときに、直ぐに小さな島の世界にある禁断の沼地を思い出せるような下地を作って置く事です。

つまり、端っこの世界のヤマメ村で小さな島の世界についての噂を流す必要があります。

次に、黄色い砂漠の世界から小さな島の世界に移動する方法です。端っこの世界に戻って、そこから小さな島の世界に行くのか、直接小さな島の世界に移動できるのか?その辺についても考える必要があります。

小さな島の世界に着いたら、ほとんどのPlayerは直接、沼地に向かうはずです。その場合は強力なMonsterを配置しておいてBad Endで終わらせるのか、それともヒントを与えて前村長の息子の住む山の洞窟に先に向かわせるべきなのかについて考える必要があります。

5.RPGStoryの改善2

実際のStoryについて最初から書き直して行きます。

どのカードをどこで切るのか、つまりどの情報をどこでPlayerに教えるのかについても考える必要があります。

と思ったんですが、実際書き直す前に今まで書いた話を忘れてしまっています。

結構重要な内容も忘れてしまったりして抜けがありそうです。

のでもう一回今まで書いた話を読み直します。

ただし今回は後ろから読み直します。

5.1 2022-06-12Blog

先週のBlogですが内容全部覚えているでしょうか?

イキナリ忘れている話がありました。アポロン王国の摂政に12使徒の一人であるバルトロマイが就いています。

しかもこの話、

端っこの世界にあるヤマメ村で聞いています。

ヤマメ村にいる時に12使徒の存在なんて知らない設定だったはずです。

うーん。

やっぱり今まで考えた設定、穴だらけです。

これも忘れていました。黄色い砂漠の世界じゃなくて、竜と黄色い砂漠の世界でした。

5.2 2022-06-05Blog

ほら、このBlogを読むと美しい青い世界のアポロン王国の王様、つまりアレキサンドライト王と会って、Playerは初めて七つの大罪の存在を知る事になっています。

5.3 2022-05-30のBlog

まず世界の名前がありました。

こっちの方が断然格好いい。

森と泉の青い世界。

うーん。こっちの方が断然カッコイイです。

砂漠と竜の黄色い世界。

これも格好良いです。

この設定をどう生かすかについても考えてなかったです。

もしこの通りに世界を構築したらそれだけで面白いゲームになります。

今週はここまでです。

でも前に作成したBlogを読み直すのが必要だと分かりましたので来週はそれをやります。

6.Open Worldの検証

Virtual TextureにTri-planar Projectionを組み合わせて

以下の歪みを直せるのか検討します。

6.1  How to Blend Objects with Your Landscape - UE4 Runtime Virtual Texturing (RVT) Tutorial [7]作成した実装を上記の歪みがある状態に戻す

まずHow to Blend Objects with Your Landscape - UE4 Runtime Virtual Texturing (RVT) Tutorial [7]で作成された部分はProjectされないように直されているのでそれを元に戻します。

2022-05-23のBlogを見ると

上記の部分が歪みのある部分を消しているようです。

上記の部分を外しました。

結果です。歪みのあるProjectionが戻りました。

<Normal Mapの変換について>

How to Blend Objects with Your Landscape - UE4 Runtime Virtual Texturing (RVT) Tutorial [7]ではLandscapeのNormal MapをWorld Spaceに変換してVirtual TextureにPassしています。

更にそれを受け取ったStatic MeshのMaterial内では、そのMaterialのNormal MapをWorld Spaceに変換してVirtual TextureからパスされたNormal MapとBlendします。

その後でそのBlendしたNormal Mapの座標をTangent Spaceに戻します。

私はこの部分は上記のTextureの歪みを取るためにやっているとずっと思っていたんですが、これを実装してもTextureの歪みは取れませんでした。

更にMR3D-Dev氏のUnreal Engine 4: Blend Megascan Assets with the Landscape Using Runtime Virtual Texturing (RVT) [9]ではNormalの座標をTangent SpaceからWorld Spaceに変換してはいません。そのままPass してTangent SpaceのままBlendしています。

ここで幾つかの疑問が出て来ます。

  • Unreal Sensei氏はこのNormal Mapの座標軸の変換をTextureの歪みを直すためにやったのか?
  • Textureの歪みを直すためでないのなら何故、Normal Mapの座標軸の変換を行ったのか?
  • その理由は正しいのか?

今回、問題になるのはNormal Mapの座標軸の変換をTextureの歪みを直すためにやったのか?どうかです。もしTextureの歪みを直すためにやったとしたら、外す必要があります。そうでないのなら今回はそのままにしておきます。

How to Blend Objects with Your Landscape - UE4 Runtime Virtual Texturing (RVT) Tutorial [7]を見ると

LandscapeのMaterialのNormal MapをTangent SpaceからWorld Spaceに変換した所では

単にNormal MapをBlendしたいからと言っています。

つまりこの部分の説明では私の記憶と違いTextureの歪みについては何も言っていませんでした。

Static MeshのMaterial内でVirtual TextureからパスされたNormal MapとStatic MeshのMaterial本来のNormal MapをBlendする時には

としか言っていません。

Textureの歪みを直すためとかは全く言っていませんでした。

うーん。

今回はこのNormal Mapはそのままにしておきます。

6.2 Triplanar Projection - Shader Graph Basics - Episode 28 [8]を復習する

本当は全部のTriplanaer Projection Seriesの復習をした後で、どのTechniqueを使用すべきなのかについて検討すべきなのですが、私の頭の中にはこの問題はTexture のTri-planar Projectionで解決出来るはずとの強い信念が存在しているので、それから試してみます。

TextureのTri-planar Projectionについて教えているのはTriplanar Projection - Shader Graph Basics - Episode 28 [8]です。更に2022-03-07のBlogTriplanar Projection - Shader Graph Basics - Episode 28 [8]の勉強内容がまとめられています。

これらを見て気が付いたんですが、結局、このTutorial seriesの最初のTutorialである Using Position Data - Shader Graph Basics - Episode 26 [10]を勉強しないといけませんでした。

逆にこの一番最初のTutorialの方法が使用出来なければVirtual Textureの歪みをTri-planar Projectionで取る事は出来ません。

のでこのTutorialを復習します。

結論から言うと以下の方法でZ軸に向かってTexture をProjection出来る様になります。

こんな感じです。

うーん。

これは想像していたのと大分違いました。

これじゃVirtual Textureの歪みの矯正には使用出来ないかもしれませんね。

6.3 歪みの矯正の検討

まず考えた方法が以下のやり方です。

Static MeshのMaterial内にあるVirtual Texture SampleノードにはUVsをパス出来るInputがあります。

ここに先程勉強したZ軸に向かってTexture をProjectionするための実装を繋げたらProjectionの状態が変化するのではないか?

と思いました。

結果です。

何らかの色は抽出されていますが、全体の模様は消えてしまいました。

0.01を掛けたのが駄目なのかもしれません。以下のやり方で試してみます。

駄目ですね。

Virtual Texture SampleノードのUVsの役割が今一分かりませんね。

TexCoord[0]を付けてみます。

結果です。

あれ?

歪みがなくなっていない。

確認のためにTecCoord[0]を外してみます。

ほら、全然違っています。

近づいたら理由が分かりました。

TecCoord[0]を使用した場合、使用されるTextureの位置が元のLandscapeのTextureと全然違う場所になるんです。それで歪みも無くなるんです。

つまりVirtual Texture Sampleノードの内部で

Tri-Planar Projectionで使用している以下の部分の計算は既にやってしまっていたんです。

うーん。

World Positionの方から何か出来ないのかと以下の様にしたらErrorになりました。

Errorを見たら、UVsとWorld Positionはどちらかしか使用出来ないとありました。

そりゅあそうだ。

確認のためにWorld Positionだけ接続すると何も接続しない状態と同じProjectionになりました。

うーん。

成程。良く分かりました。

6.4 歪みの矯正の検討をしてみて

今回、初めてTri-Planar Projectionの実装をVirtual Textureの歪みを隠すために使用出来ないのか検討してみました。

その結果は、そのまま使用するのはかなり難しいと言う結果になりました。

残念ですが、そうなってしまったのでどうしようもないです。

しかしその検討の過程である事実を知りました。

Virtual TextureにTexCoord[0]を追加すると

以下の様に歪みのないTextureを貼る事が出来ます。

この歪みのないTextureをUnreal Senseiの歪みのある部分を消したVirtual TextureとBlendしたらどうでしょうか?

結構良いアイデアのように思えます。

来週はこれを検討する事にします。

7.Gaeaの勉強

今週は、先週勉強したGaea Beginner Tutorial Series : Part 4 - Advanced Texturing [11] で使用したMaskの方法を整理します。

7.1 大地のTextureに変化をつける為のMask

<川に沿ったMask

Erosionノードに作成したPortalを利用して作成します。

実装です。

CombineノードはMultiplyを使用しています。

結果です。

単に、

だけでもあんまり変わらない気がします。この違いに付いては後で検討します。

<Voronoi ノードを使用したMask

川の回りだけでなく、地形全体に別のTextureを混合させるようなMaskを作成したい時に使用します。

Voronoiノード単体を使用します。

こう言うのです。

正しTutorialでは設定を以下のようにしています。

Scaleを54%にして

ClipをCheckしてClip Minの値を30%しました。

その結果、

となりました。

更に人みたいなMarkにもCheckを入れて

Shaperの%を上げました。

こんな感じです。

これをMaskに使用する事で、この地形で平らな部分より高い場所は新しく選択したTextureが貼られる事になります。

<侵食されて発生した汚れのためのMask

以下の様な実装でした。

以下に示した様なMaskを作成出来ます。

SlopとHeightの値を調節する事で、角度や高さに制限を設ける事が出来ます。

2つの条件を満たすためにはCombineノードの設定はMultiplyでRatioを100%にする必要があります。

ただし設定は以下のようにします。

SnowLineを下げる事で生成される雪の位置を変化させ、SCALEのVerticallyの値を変化させる事で雪の位置を下げます。

Baseに使用されているMaskはこの4つでした。

7.2 川や湖のTextureに変化をつける為のMask

<川につけるMask

川に付けるMaskの実装です。

TutorialではBlurノードの設定をかなり弄っていました。

Maskの作成方法だけでなく使用しているNodeの設定方法も重要ですね。

<湖の使用するMask

湖のMaskは以下の様にしていました。

ただLakeの場合、これをMaskに使用するのではなく、元々作成していたCLUTerノードの前に付けてしまいました。

そういう意味ではLakeのMaskは無しです。

8.雪山のMapの作成

Virtual Textureを使用するので4.24での実装が可能かどうかは別問題ですが、先週で一応、雪に足跡を残すEffectの作成方法も実装出来ました。

足跡だけの場合(2022-05-23のBlogより)

窪みが出来る場合(2022-06-12のBlogより)

2022-04-11のBlogを見ると以下のEffectを追加したいと書いています。

足跡のEffectまで作成が完了したので、次は天気を曇りにする方法の検証です。

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

8.1 曇りの空を作成するための方法を検証する

まずはYouTubeにあるTutorialを検索してみました。

一番上のTutorialを一寸だけ見たんですがこれを勉強すれば曇りの空、作れそうです。

Ue4 Tutorials - Deathscyp Factory S03E07 - Simple cloudy sky Material in Ue4 [12]です。

こんな空を作成していました。

後、私Empty Levelから空の作成方法、つまりDefaultの設定方法を知らないんです。

ので曇りの空の作成方法も分からない可能性があります。

その辺を勉強する事にします。

Tutorialを見つけました。Adding a sky to your blank UE4 Level[13]です。

これを見つつ自分でも勉強する事にします。

空を作成するために使用するActorの公式のDocumentも読む事にします。

今週はこんな感じで勉強してみます。それで得た情報を元にまた考える事にします。

8.2 Empty Levelから空を作成する

Adding a sky to your blank UE4 Level[13]を見ながらEmpty Levelから空を作成します。

ただこのTutorial3分しかないんで、勉強した後、色々自分でやってみます。

まず、Sky Sphere BPを追加しています。

TutorialだとSky Sphereを追加するのにわざわざEngine Contentを表示させてBP Sky Sphereを表示させてそれをDrag and DropでLevelに追加しています。

Comment欄でわざわざそんな事しなくてもSide BarにSky Actorと打てばBP Sky Sphereありますよ。と皮肉られています。

Side Barってこれの事ですよね。

ありました。

まあ。

この指摘は本当にその通りで、そんな基本的な事も知らん人がTutorialを作っているのと思ってしまいます。

しかしですね。

本当にそう言ってしまうとTutorialを作成する人が委縮してしまって、必要なTutorialも作成されなくなってしまいます。

現実に私はEmpty Levelから空を作成する方法を教えてくれるTutorialを探しているにも関わらず、このTutorialしか見つからなかったです。

更に言えば、UEは勉強する内容が膨大なので全部を知っておく事は不可能です。ある人にとっては常識過ぎるやり方でも別な人にとっては全く知らないやり方である事は頻繁に起こるでしょう。

その時に鬼の首を取ったように間違いを指摘したら喧嘩になるのは火を見るより明らかです。

しかしだからと言って明らかな間違いを指摘しないでそのまま放っておくのもの問題ありです。

だから、私の考え出したルール、

  • お互いに先生と呼ぶ

が大切になるんです。

先生、この部分、こうやった方が良いんじゃないでしょうか?

と言う事で、喧嘩にならないで技術の間違いを指摘出来ます。

更に追加で以下の効果も生み出します。

まずお互いに先生と呼ぶ事で、間違いを指摘するふりをしてその人の批判をしたり、マウントしたりする人達を除外出来ます。

これはあんまり知られていない事ですが、文の構成の関係で、相手を先生と呼びながら、その人を批判したりその人に対してマウントを取ったりする事は無理なんです。

次に、お互いに先生と呼ぶと純粋な技術の議論に集中出来ます。

最後にこれはおまけですが、議論の内容が理解出来ない第三者には、とても偉い先生が何か非常に高度な内容について語っているように映ります。周りの人からも先生として扱われるようになります。

話がそれました。

Tutorialの続きをやります。

BP Sky Sphereを追加しました。

Levelが以下の様になりました。

この時点で太陽が生成されるんですね。

驚きです。

次にDirectional Lightを以下のDirectional Light Actorにセットします。

いや、Directional Lightは配置してないんですが?

Tutorialみたら何か最初からDirectional Lightがある

どうやらこのTutorial、BP Sky Sphereをどうやって見つけるかを教えているだけみたいです。

もうここまで見ちゃったので最後までやる事にします。

Directional Lightを配置してBP Sky SphereのDirectional Light Actorにセットしました。

結果です。

空が青くなりました。

この後、Directional Lightの角度を変化させ

BP Sky SphereのRefresh Materialボタンを押すと

空の色が変化しました。

今度はSky Lightと追加します。

Sky Lightは影の形状に影響するそうです。

影をみるためにFloor Meshを配置してその上にCubeを乗せました。

Sky Lightが有りの時です。

Cubeの直接光が当たっていない箇所の影(陰と言うべきかも)の色が薄くなりました。

これだけでした。

使用したActorは

  • Sky Sphere BP
  • Directional Light
  • Sky Light

の3つだけです。

一寸確認します。

Third Person Example Mapを開いて空の生成に関係してそうなActorを調べます。

うーん。この3つが主みたいですね。後、Atmospheric FogというActorがありますね。

Sky Sphere BPで検索していたら以下のTutorialが表示されました。

How to change Sky in Unreal engine (in 4 minutes) [13] です。

このTutorial、軽く見たんですがGood SkyのTutorialでした。

それでGood Skyを使用していますが、

以下の様な曇りの空を作成しています。

どうせ、最終的にはGood Skyを使用するんだからこっちで勉強した方が効率は良いですね。

これやってみます。

8.3 How to change Sky in Unreal engine (in 4 minutes) [13]を勉強する

Good SkyをProjectに追加し、BP Good SkyをLevelに配置します。

結果です。

背景が変なのはSky Sphere BPが2つLevel上に配置されているからだそうです。

BP Good SkyってSky Sphere BPの一種だったんですね。知りませんでした。

はい、変な背景は直りました。

けど夜になっているのに太陽が見えます。

Tutorialを見たらまずBP Good SkyのEnable Time of DayにCheckを入れてTime Of Day( for Custom Mode)の値をいじってみろと書かれています。

これで昼と夜を操作するはずです。知っていますが一応、やってみます。

朝5時です。

朝焼けです。

10時です。

この雲の後ろにあるはずの太陽を消したいです。どう考えても雲の前に太陽があるのはおかしいです。

18時です。

あれ、太陽が西に沈んでいる。

私が前Good Skyを使用した時は太陽が東に沈んでいて直せなかったです。

Tutorialで太陽の沈む高さの調節方法を解説していました。

Screenshotのように遠くまで下がってBP Good Skyの高さを変えます。

これ、実際にやってみたんですが、変わらなかったです。

Tutorialで以下の辺りをいじっています。

兎に角、雲を濃くしてみました。

更にSky EffectをNoneにしました。

これをNoneにしたら太陽が消えました。

こんな感じです。

この後、雷を追加したりしていますが、雲はこれ以上ないです。

何故かTutorialの雲は私の雲より真っ白です。

8.4 Sky Sphere BPのParameterを弄る

通常のSky Sphere BPに戻しました。

Sun Brightnessを0にしたら太陽が消えました。

更にCloud Opacityの値を15にしたら

以下の様になりました。

ただし空を見上げると円のTopには雲がありません。

Override Settingにある色を全部黒にしてみましたが、あんまり変化無かったです。

8.5 Ue4 Tutorials - Deathscyp Factory S03E07 - Simple cloudy sky Material in Ue4 [12]を勉強する

これを勉強するのを忘れていました。

見たらUE4 - Simple Cloud Projections + Textures [14]のTutorialを元にしていると言っています。

なんかデジャブ感があります。前にこのTutorial見た事あるかもしれません。まあいいです。やって見ましょう。

なのでUE4 - Simple Cloud Projections + Textures [14]を先に勉強します。

UE4 - Simple Cloud Projections + Textures [14]を勉強する>

指定されたTextureをImportして

Materialを作成しました。

Result NodeのMaterial DomainをLight Functionにしました。

Light Functionを使用するのは初めてだと思います。

Light Source、つまりDirectional LightのLight Function Materialにセットしました。

テストします。

床に雲の影のようなモノが投影さえる様になりました。

Light Function MaterialからMaterialを外した状態です。

うーん。これは重要ですが、空の雲を増やす訳ではないですね。

うーん。この後、Ue4 Tutorials - Deathscyp Factory S03E07 - Simple cloudy sky Material in Ue4 [12]を見たのですが、曇りの空は前に既に作成していました。前のTutorial Seriesを遡って見たのですが、空の雲を作成していそうなのは無かったです。

今週はここまでとします。

別なTutorialを見ていたらSky Atmosphere とかVolumetric Cloudと言うのもある事が分かりました。

更に、WindowのBoxにEnv.Light Mixerがあって

それを開くと以下の様にLightに関するActorのParameterを一辺に整理出来る事も分かりました。

Sky Atmosphere とかVolumetric Cloudに関しては来週勉強する事にします。

8.6 曇り空の作成についての考察

今週は軽く勉強したんですが、それなりには分かりました。

Sky Sphere BPを遠くで見るとSphereなんです。

これって結局、Sphere Mapでしょう。

となると使っているSphere Mapに青い空がある限り曇り空の作成は無理な気がします。

Sky_SphereのBPを見ると

T_Sky_Sphereと言う名前のTextureがあります。

うん。

これが空の色を付けているじゃないの?

M_Sky_Panning_Cloud2の

Cloud Textures内で

使用しています。

Sky Sphere BPを開くと

Sky Sphere Meshの

MaterialにこのM_Sky_Panning_Cloud2が使用されています。

正直こっちから深堀した方が雲った空を作成出来そうな気がしています。

9.UI Designの勉強

今週は、Gameが始まる前のMain Screenを作成します。

9.1 Main Screenに必要なもの

まずイラストです。

Gameのイラストが必要です。

そして

  • New Game
  • Login
  • Option
  • Exit

の4つのボタンが必要です。

うん。

これで作成してみます。

9.2 ボタンのイラストを考える

以下のイラストを作成しました。

これでButton を作成してみます。

うーん。

後ろが黒いと線が見えませんね。

改良します。

うん。

何か良い感じがします。

これでやってみましょう。

サイズを小さくしたら以下の様にへんな収縮します。

あ、2の倍数じゃないから?

良く分からないから最初から小さいサイズのを作成します。

以下の様になりました。

こんな感じです。

9.3 題を考える

良く考えたら題をまだ考えていなかったです。

題は分かり易いのが良いです。

HxHとポケモンの良い所を混合したGameだと言う事はアピールしたいです。

以下に候補を書いていきます。

  • Hunterと151匹の召喚Monster
  • Hunter x Monsters
  • Hunter x 召喚Monsters
  • ハンター x召喚モンスター
  • ハンター xモンスター
  • ハンターと151匹の召喚モンスター

うーん。

一週間考えます。これは。

10.Blenderの勉強

今週も夏森轄(なつもり かつ)先生の【Blender】セルルック講座 ~ノード、輪郭線、法線転写、RGB分離~ [15]の続きを勉強していきます。

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

<セルルックの表現方法>

以下の3つのNodeを理解する必要があるそうです。

  • カラーランプ
  • シェーダーからRGB
  • ディフューズBSDF

TutorialでそれぞれのNodeについて解説してくれるのは分かっていますが一応、自分でも調べて見ます。

<<Color Ramp>>

先週、教わったShift + Aで以下のBoxを表示します。Color RampはConverterの欄にありました。

LampじゃなくてRampでした。

Lampは所謂ランプで以下のようなヤツを指します。

それに対してRampは

From https://nationalramp.com/

のような車椅子の人が利用するスーパーなどの入り口に作られた坂道を指します。

こういうのがあるので私はComputerの専門用語を安易にカタカナで訳すのに反対なんです。

そのまま英語で書くようにすれば要らぬ誤解を生み事が非常に少なくなります。

以下のNodeが表示されました。

このGradientの事をRampと呼んでいるんでしょうか?

このNodeの解説を読もうとしたんですが、UEのBPのNodeと違い、Cursorを合わせても何も表示されません。

Googleで「Blender Color Ramp」で検索したら公式のDocumentであるColor Ramp Node [16] がありました。

これ読んだら大体使用方法を理解しました。

このFacにImageを繋げます。Imageの白い所がGradientの1の部分で指定した色になり、黒の部分が0の部分で指定した色になるはずです。

試してみます。

うーん。

Color Ramp Node [16]の例で使用されているViewer Nodeが見つかりません。

ので結果を表示出来ませんでした。

うーん。まだBlenderの使用方法はよく分からないですね。

<<Shader to RGB>>

Shader to RGBノードです。

これもConverterの欄にありました。

公式のDocumentのShader To RGB [17]も見つかりました。

これ読むと先程のColor RampとのPairでToon ShadingをするためのNodeと書かれています。

そしてその後にToon Shadingを使用した場合の弊害についてかなりの量の解説がありました。

これは結構真剣に勉強する必要がありそうです。

まずはTutorialの説明をしっかり聞きましょう。

<<Diffuse BSDF>>

これはShift + Aで表示されるBoxのShaderの欄にありました。

これです。

公式のDocumentであるDiffuse BSDF [18]を見ると

とありました。

Oren-Nayar diffuse reflectionは知りませんが、Shader Languageで直接実装する訳じゃないので、知らんでも問題ないでしょう。

公式のPageでもOren-Nayar diffuse reflectionの反射については白紙になっていました。

<<Tutorialに戻ります>>

予習は終わりです。

それではTutorialの説明を聞いていきます。

まずはColor Rampノードの説明です。

マジで。

ここまで説明してくれてんの!

うーん。

凄いと思いつつ一寸過保護な気もします。

ここは厳しく生徒に予習をする習慣を付けさせて、予習しないと理解出来ないような授業も有りな気もします。しかし指導方法についての考え方は人それぞれですし、夏森轄(なつもり かつ)先生がそういう指導が正しいと思うのならそれに対して他人がどうこう言う事ではないです。

続きを見て行きます。

物凄く詳しくそれぞれのNodeの機能について解説していました。

凄い勉強になりました。

Tutorialの説明通りにNodeを組みました。

結果です。

なにこれ?

全然、Smoothじゃない。

球をIso SphereにしてSub Divideを4で試してみます。

結果です。

うーん。前よりはマシですがそれでもギザギザです。

TutorialのImageとは全然違います。

Tutorialを見るとLightを当てる事で、と解説しているので、ひょっとするとLightの設定が関係しているのかもしれません。

Lightに関してはまだ勉強していないのでどうすれば良いか分かりません。

更に良く見たら、TutorialのColor Rampの設定は以下の様になっていました。

同じようにすると

球は真っ黒になってしまいました。

うーん。

これはLightの勉強が必要な気がします。

実際、TutorialのLightを見ると黄色い点が乗っている白い線が表示されています。

私のLightは以下の様な円が表示されるだけです。

うーん。予定変更してLightの勉強をする事にします。

10.2 LightのTutorialを探す

色々、Tutorialを見たんですが、BlenderのTutorialは初心者向けのがあんまりないです。

それでどれで学んだとは言えないんですが、色々なTutorialからつまんで、分かった点だけをまとめておきます。

まずLightですが、Lightの所からSunを選択すると

以下の様なTutorialと同じ種類のLightになります。

このSunというLightはUEで言う所のDirectional Lightと同じ機能を持ってそうです。

次に以下の部分です。

右端のやつを選ぶとTutorialと同じような影が映ります。

球の影がギザギザになるのですが、以下のShade Smoothを選択すると

影もSmoothにはなりました。

この時にColor Rampノードの設定を以下の様にしていても真っ黒くなる事も無くなりました。

うーん。

まあいいです。

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

11.まとめと感想

先週と先々週は用事があってまとまった時間が取れなかったので、その分、今週はかなり集中して勉強しました。

NiagaraはCGHOW氏のTutorialを上げる速度が凄すぎてどんどん勉強しないといけないTutorialが増えてしまっていますが、ゆっくりマイペースで勉強していきます。

Materialに関してはHex Gridを使用したTilingを消す方法の勉強を続けていきます。これはかなり凄い技術のような気がします。Post Processの勉強もMaterialから出来そうです。

アニメ風のRenderingに関しては、来週から別な節を作ってそこで勉強する事にします。

後、UE4の公式のDocumentに載っていたStylized shadingはかなり深堀した内容みたいなので後で読む事にします。

Virtual TextureとTri-planar Projectionを組み合わせて使用する事は無理そうです。

これは何週間も前から考えていた事なので一寸残念でした。

雪国の作成で今週から曇り空の作成の勉強を始めました。こんなの簡単に出来ると思ったら結構手こずりそうです。

UE以外の勉強に関してですが、Gaeaは順調に進んでいます。Blenderは一寸躓いているかもしれません。

以上です。

12.参照(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] Epic Games. (n.d.-b). Niagara Overview. Unreal Engine. Retrieved June 19, 2022, from https://docs.unrealengine.com/5.0/en-US/overview-of-niagara-effects-for-unreal-engine/

[3] Epic Games. (n.d.-a). Niagara Key Concepts. Unreal Engine. Retrieved June 19, 2022, from https://docs.unrealengine.com/5.0/en-US/key-concepts-in-niagara-effects-for-unreal-engine/

[4] Cloward, B. [Ben Cloward]. (2022, May 12). Procedural Hex Grid - Shader Graph Basics - Episode 46 [Video]. YouTube. https://www.youtube.com/watch?v=hc6msdFcnA4

[5] Cloward, B. [Ben Cloward]. (2022b, June 9). Basic Post-Processing Effects - Shader Graph Basics - Episode 49 [Video]. YouTube. https://www.youtube.com/watch?v=ipKQt0BxQSA

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

[7] Unreal Sensei. (2021, April 23). How to Blend Objects with Your Landscape - UE4 Runtime Virtual Texturing (RVT) Tutorial [Video]. YouTube. https://www.youtube.com/watch?v=xYuIDFzKaF4

[8] Cloward, B. [Ben Cloward]. (2021b, December 23). Triplanar Projection - Shader Graph Basics - Episode 28 [Video]. YouTube. https://www.youtube.com/watch?v=sjpszGetM40&list=PL78XDi0TS4lEBWa2Hpzg2SRC5njCcKydl&index=28

[9] MR3D-Dev. (2020, September 10). Unreal Engine 4: Blend Megascan Assets with the Landscape Using Runtime Virtual Texturing (RVT) [Video]. YouTube. https://www.youtube.com/watch?v=OP3m-LY6BZA

[10] Cloward, B. [Ben Cloward]. (2021b, December 9). Using Position Data - Shader Graph Basics - Episode 26 [Video]. YouTube. https://www.youtube.com/watch?v=Rm4ubzc-6Q4&list=PL78XDi0TS4lEBWa2Hpzg2SRC5njCcKydl&index=26

[11] Klaus. (2022, January 20). Gaea Beginner Tutorial Series : Part 4 - Advanced Texturing [Video]. YouTube. https://www.youtube.com/watch?v=vHqTqrkjQVA&list=PLyNtvXvNIFMMHnW1_-hXO3RNPp_Z5CExF&index=4

[12] Casual Gamers. (2019, January 15). Ue4 Tutorials - Deathscyp Factory S03E07 - Simple cloudy sky Material in Ue4 [Video]. YouTube. https://www.youtube.com/watch?v=uD6DbQyy-tk

[13] Sir_Fansi Gamedev. (2021, October 15). How to change Sky in Unreal engine (in 4 minutes) [Video]. YouTube. https://www.youtube.com/watch?v=dL08XUunLKQ

[14] Nuckelavee. (2015, November 25). UE4 - Simple Cloud Projections + Textures [Video]. YouTube. https://www.youtube.com/watch?v=sqghLhABi-4

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

[16] Blender. (n.d.-a). Color Ramp Node — Blender Manual. Retrieved June 19, 2022, from https://docs.blender.org/manual/en/latest/modeling/geometry_nodes/color/color_ramp.html

[17] Blender. (n.d.-c). Shader To RGB — Blender Manual. Retrieved June 19, 2022, from https://docs.blender.org/manual/en/latest/render/shader_nodes/converter/shader_to_rgb.html

[18] Blender. (n.d.-b). Diffuse BSDF — Blender Manual. Retrieved June 19, 2022, from https://docs.blender.org/manual/en/latest/render/shader_nodes/shader/diffuse.html