日記8/24(火)

明日、SESの面談が二個入ってる。ひとつめはflutterとかのwebアプリケーション開発で(Flatter、web作れるのはしってたけど ネイティブのイメージが強かったので意外)、二つ目はサーバーよりのところ。契約の時に「どっちかって言うとwebの方いじる方がいいすね」みたいなこといってたから、こういう案件が来てるのかな

 

ひとつめは長期想定の現場で、二つ目は特に記載なし

 

二つ目は面談の前に会社のスタッフが「対策」のために打ち合わせしてくれるみたい。所感とか知れるのかな?

 

対策ってのがなにかわからんけど、できることむやみに大きくしたりするのは嫌だなあ

一回目のは打ち合わせなしで「上位会社」が同席してくれるみたい。会社の形態とか詳しく把握しきれてないのでちょっと怖いかも。早寝します

【UE4 .26】音とパーティクルを連携させてみる

この記事でわかることです。

  • グニョグニョ動く球に使ったマテリアルの作りかた
  • ワイヤフレームのみを描画するマテリアルの作りかた
  • Wavファイルから流れる音量値をパーティクルに伝える方法

今回の記事内で解説した内容で作ったパーティクルが下のツイート内の動画になります。十字部分やクルクル回るエミッタの所等の作成方法については、過去の解説記事で作ったものを流用してたりするので 今回は書きません(要望があったら詳しく書きますが、基本的には他の書かれた記事を参照していただけるといいかと思います)。

 

グニョグニョ動く球に使ったマテリアルの作りかた

"SimpleGrassWind"ノードを使います。

f:id:ten0313:20210702183246p:plain

本来、葉っぱや旗等に使うマテリアルに起用して 風に揺れるオブジェクトを表わしたりするものです。これを球に使うことで、グニョグニョ動くようにさせます。


繋げ方はこんな感じです。"WindIntencity"と"WindWeight"ノードに与える値の変化でグニョグニョの強さを変えます。

 

これでグニョグニョするようになります。

f:id:ten0313:20210702183949p:plain

Niagaraからグニョグニョの強度を変えられるようにDynamicParameterノードに繋げておきます。

 

ワイヤフレームのみを描画するマテリアルの作りかた

f:id:ten0313:20210702184421p:plain

これを作る方法です。
色んな方法があると思うんですけど、一番簡単な方法で僕はやりました。

f:id:ten0313:20210702184536p:plain

マテリアルの詳細から、"Wireframe"にチェックを付けます。以上です。

さっき作ったグニョグニョマテリアルの"Wireframe"をチェックしてみると

f:id:ten0313:20210702184710p:plain

こんな風になりました。

 

Wavファイルから流れる音量値をパーティクルに伝える方法

音に応じて動くパーティクルに絞って作ります。

 これを作ります。

使用するマテリアルはなんでも良いです。

f:id:ten0313:20210702185520p:plain

自分はコレを使いました。"RadialGradientExponential"ノードを使用して二重丸を描画したマテリアルです。

f:id:ten0313:20210702185640p:plain

システムの概要です。"Empty"を基に作りました。重要な所を説明していきます。

 

f:id:ten0313:20210702185727p:plain

Spawn Burst Instantaneous

10個のパーティクルを一気にスポーンさせます。

 

f:id:ten0313:20210702185823p:plain

パーティクルのスポーン

ここは特に特別な事はしていません。"(パーティクル) SpriteFacingを設定"でスプライトパーティクルの向きを上向きにして、"(パーティクル) SpriteAlignmentを設定"でカメラに対する角度を固定させます。

後は色を赤にしました。

 

最初の二つのパーティクルに関しては、モジュールに含まれていないので

f:id:ten0313:20210702190056p:plain

パラメータの中のパーティクル属性にあるのをみつけて、システムの概要の方にドラッグ&ドロップします。

 

パーティクル属性の中になかったら、右上の+ボタンを押して

f:id:ten0313:20210702190254p:plain

検索して追加します。

 

f:id:ten0313:20210702190331p:plain

"パーティクル更新"にパーティクルの動きをつけるモジュールを追加します。
"NMS_MoveDepthPosition"です。

これは最初から用意されているものではない、自作したものです。

作っていきます。

 

f:id:ten0313:20210702190829p:plain

NMS_MoveDepthPosition

マップ取得で、パーティクルの移動を受けとるVector型のピンと パーティクルシステムの位置を取得する"(エンジン)(オーナー)Position"を +ボタンを押して追加します。

その後、写真の通りにノードを組みます。

内容はコメントの通りです。入力されるVector型にパーティクルのインデックスを表わす"Execution Index"を乗算して新しいパーティクル程位置の差が大きくなるようにします。

それとパーティクルをスポーンさせた座標である"(エンジン)(オーナー)Position"と加算させます。 "Map Set"ノードに"(パーティクル)Position"を追加してそこに加算した内容を繋げて完成です。

 

NiagaraSystemの方に戻ります。

f:id:ten0313:20210702191744p:plain

公開されたユーザーにfloat型の値を追加して"VoicePower"と名付けておきます。

パーティクルと音を流すアクターを後で作成するのですが、そこからこのfloat変数を操作することになります。

f:id:ten0313:20210702192140p:plain

さっき作ったNiagaraモジュールをパーティクルシステムに追加します。
今回は高さを動かしたいので、Z軸の場所にさっき作ったユーザー変数を追加します(少し値を大きくしたかった(動きを大きくしたかったので)MultiplyFloatで2を乗算しています)

これでパーティクルの方は完成です。

パーティクルと音量を連携させるのを作っていきます。

 

f:id:ten0313:20210702195123p:plain

アクターを作成し、NiagaraSystemComponentとAudioComponentを追加します。

 

f:id:ten0313:20210702200347p:plain

NiagaraのNiagaraSystemAssetにさっき作ったパーティクルをセットします。

 

f:id:ten0313:20210702195108p:plain

AudioComponentに使いたいWavファイルを設定します。自分は文章の読み上げがわかりやすいと思ったので(楽曲よりも、単純な読み上げ音声とかの方が音量の抑揚が大きくビジュアライズ化した時にわかりやすいと思います)

coefont.studio

ここを使いました。とても自然な読み上げ音声を作成して、簡単にWavファイルにしてダウンロードできるので便利でした。

f:id:ten0313:20210702195642p:plain

AudioComponentの詳細内にある"On Audio Single Envelope Value"を追加します(緑の+ボタンを押します)。

 

f:id:ten0313:20210702195819p:plain

このイベントノードからは、現在流れている音の大きさがEnvelopeValueから出てくるようになっています。

それを"Set Niagara Variable(Float)"に繋げて、NiagaraComponentのユーザー変数である"VoicePower"に渡します。

 

これで完成です。

 このようにできたでしょうか。

 

なにかわかりにくい事があったり、間違いがあればTwitterのDMとかにおねがいします。


[ この記事はブログ投稿者の憶測や考えによりつくられています。

よって書いてある内容に誤りや言い間違いがあるかもしれません。もし修正したほうがいい場所や「こういった言い方のほうが”ソレっぽい”よ」などがありましたら後に記載してあります、リンク先のツイッターアカウントに教えてくださると嬉しいです:) ]

【UE4 .26】警告アラート的なHUD風パーティクルをNiagaraで作る

 コレを作ります。

 

まず、このパーティクルを作る上で要素を分けます(作成する過程が一緒で少し中の数値をいじったものをまとめます)。

 

 パーティクルを単純に回転させているものです(使っているマテリアル等に関しては後述します)。

 

 丸い円が広がりながら上昇してフェードアウトしていくものです。

 

 「緊急」の文字のついたパーティクルがランダムにスポーンされアニメーションするものです。

 

ひとつめから説明していきます。

 

 パーティクルを単純に回転させているもの

 

f:id:ten0313:20210626085932p:plain

やっている事は、真四角の平面メッシュに表示させたいマテリアルを張りつけて回転させているだけです。

基本はEmptyからエミッタを作成してMeshパーティクルを設定し、設定を少しいじっているだけなので特別なことはしていません。最低限、必要なモジュールを説明すると

 

f:id:ten0313:20210626100421p:plain

Initialize Particle

PositionMode内のPositionOffsetのZ軸を変更させ、高さを変えています。
また、MeshAttributesのMeshScaleModeをUniformに設定して数値を1.2にしてサイズを変更しています。

f:id:ten0313:20210626090711p:plain

SpawnBurst_Instantaneous

SpawnCountに1を設定することで、パーティクル生成時にひとつだけスポーンされます。(このモジュールと設定は今後説明するエミッタ達でも基本共通して追加してあります)

 

f:id:ten0313:20210626091044p:plain

Color

色の設定をしています。今回作るパーティクルでは、共通する色を持ったエミッタが複数存在しているので ひとつの場所から一括で変更できるようにした方が、調整が楽です。ユーザー属性の場所に色の情報の値を保持させてそれぞれのエミッタに設定しています。(システム属性で良いとも思いましたが、後々ゲーム内などで扱う際に外部から変更できた方が使い勝手が良さそうだなと思ったので...)


ユーザー属性にパラメータを追加する方法を書きます。

f:id:ten0313:20210626092026p:plain

「パラメータ」ウインドウから「公開されたユーザー」の横の+ボタンをクリックしてcolorと入力し、「Liner Color」を選択します。設定した値をエミッタに適用させたい場合は、追加した値をエミッタ内のモジュールにドラッグアンドドロップすればOKです。

 

各エミッタで共通する色の情報等の変数を持たせておくと、一括で変更できるので 調整、後々の変更などがしやすくて便利です。

f:id:ten0313:20210626093614p:plain

Particle State

一定時間でエミッタが消えてしまわないように設定しました。

 

f:id:ten0313:20210626093150p:plain

Update Mesh Orientation

「パーティクル更新」に追加します。メッシュパーティクルにZ軸を基とした回転を加えています。

数値を正の値にしたり負の値にすることで回転の方向を変更できます。

 

f:id:ten0313:20210626101001p:plain

メッシュとマテリアルの設定の概要です。使うマテリアルは好きな物を使うといいと思います。

ten0313.hateblo.jp今回使ったマテリアルはこの記事内で作ったものを流用しています。

 

 輪状のパーティクルがサイズを変えながら上に上がっていくエミッターです。

f:id:ten0313:20210626102638p:plain

エミッタの概要です

かいつまんで解説していきます。

 

f:id:ten0313:20210626102947p:plain

Spawn Rate

SpawnRateを3に設定して、たえまなく連続的にスポーンしつづけるようにします。

 

f:id:ten0313:20210626103354p:plain

GravityForce

Z軸に正の値を入れて重力を上向きにかけました。コレで上昇するようになると思います。

 

f:id:ten0313:20210626105425p:plain

Scale Color

パーティクルの更新にScaleColorを追加しました。透明度を表わすalphaにカーブで数値を入力して色がフェードイン・フェードアウトするようにしました。

 

f:id:ten0313:20210626110151p:plain

Scale Mesh Size

パーティクルのサイズをカーブで更新するようにしています。写真ではスポーンしてから徐々に大きくなるようにしています。

 

 「緊急」の文字がポップアップするものです。

f:id:ten0313:20210626112723p:plain

使ったマテリアルです

内容は画像作成ソフトで作ったものをTextureSampleとか使って動かしたりしています。

どんな形でも大丈夫です。好みのを作ってください(なんならtextureSampleとParticleColorで繋げるだけでもそれらしくなるとは思います)

 

f:id:ten0313:20210626113011p:plain

エミッタの概要です。

内容を説明していきます。NiagaraEmitterのFountainを基に作成します。

f:id:ten0313:20210626113154p:plain

Spawn Rate

スポーンさせる量をこれで設定します。数値を調整することで、スポーンされる量等を変更できたりします。

 

f:id:ten0313:20210626113353p:plain

Cylinder Location

円柱状の場所を指定してパーティクルをスポーンさせるものです。
CylinderHeightとCylinderRadiusで平たい円柱(高さ10、直径100の円柱)を作って、その中にスポーンさせるようにしました。

OffsetでZ軸の数値を変更して、少し高い位置にパーティクル群が出るようにしました。

 

f:id:ten0313:20210626113713p:plain

Scale Sprite Size


Y軸方向の大きさをCurveで指定して、スポーンしてからキルされるまでに パーティクルがピコンと動くようにしました。キー補完を「ユーザー」にして

f:id:ten0313:20210626113832p:plain

出現した時と消える際に少し大きくなるようにすることでちょっとかっこよくしました。

 

f:id:ten0313:20210626113918p:plain

Scale Color

パーティクル上部にこのエミッタが多数出現するので、下にあるパーティクル達は重なって見えにくくなってしまいそうです。対策として、Alphaを少し小さくすることで半透明にしました。このエミッタ同士が重なった時にも効果を発揮するはずです。

 

f:id:ten0313:20210626114157p:plain

Sprite Renderer

最後に表示方法の選択です。AlighnmentとFacingModeを設定することで、プレイヤーのカメラの位置に依存することなく、一定の方向を向き続けてくれるようになります。

 

 これで完成です。

 

なにかわかりにくい事があったり、間違いがあればTwitterのDMとかにおねがいします。


[ この記事はブログ投稿者の憶測や考えによりつくられています。

よって書いてある内容に誤りや言い間違いがあるかもしれません。もし修正したほうがいい場所や「こういった言い方のほうが”ソレっぽい”よ」などがありましたら後に記載してあります、リンク先のツイッターアカウントに教えてくださると嬉しいです:) ]

 

東京高速戦術@VRゲーム制作 (@kousoku_tactics) | Twitter

【UE4 .26】Niagaraでサイバー風のパーティクルを作る方法

 これを作ります。

 

・角度の範囲を指定してマテリアルを減算する

UE4小ネタ : 円形ゲージの作り方 - ぼっちプログラマのメモ

 

・平面のメッシュをパーティクルにする

【UE4】4.25でNiagaraを使って魔法陣エフェクトを作ってみよう - アルゴンUE4&アプリ開発日記

 

・メッシュパーティクルの回転

www.youtube.com

 

今回作るパーティクルですが、Niagaraの方でやることはほぼないです。マテリアルで円を書いたり線を引いたりする事の方が多いです。

 

まずはNiagaraEmitterの方を作っていきます。
NiagaraEmitter、NiagaraSystem等がよくわからない方は

www.youtube.comこの解説動画がすごいわかりやすいのでオススメです。

 

今回作るパーティクルに使うNiagaraEmitterは4種類です。

 

NE_RotateLockArrow

 

NE_RotateArrowSquiz

 

 

NE_BorderCircle

 

 

NE_CoolUINumber

f:id:ten0313:20210611041548p:plain

 

 

今回のParticleには共通して平面状のメッシュを利用します。

f:id:ten0313:20210611043630p:plain

正方形のひとつの面を持ったメッシュを作成しておきます。UV展開等はそのまま正方形でやっておきます。
僕はBlenderで作成しましたが、シンプルな形状なのでなんのツールでも作れると思います。

23.gigafile.nu

一応GigaFile便でダウンロードできるようにしました。他ツールを使うのがめんどくさい時は使ってください。

 

作っていくエミッタ達は、ほぼ全て

  1. マテリアルを作成する
  2. 平面メッシュにマテリアルを張りつける
  3. エミッタ内でMeshRendererとしてスポーンさせて動かす(色を調整する)

といった流れで作っていきます。

 

ひとつめのNiagaraEmitterから説明していきます。

NE_RotateLockArrow

 

くるくる回る細い線です。
まずはマテリアルから作っていきます。

f:id:ten0313:20210611050400p:plain

やっていることとしては、真ん中に丸の穴の空いた図からその丸より大きい丸の形状を引いて 出来た円の線から角度を指定して切りとっています。

参考にしたもの:
・丸を描く

[UE4] [UMG] はじめてのマテリアル、円を描く|GiRAFFIC ARTS ジラフィックアーツ|note

・角度を指定して切りとる

UE4小ネタ : 円形ゲージの作り方 - ぼっちプログラマのメモ

 

作ったマテリアルをエミッタに利用します。

f:id:ten0313:20210611052528p:plain

エミッタの概要です。

基本的にエミッタの内容は使用するマテリアルを除いて、ほぼ共通した内容なので 詳しく説明します。

f:id:ten0313:20210611060410p:plain

Emptyを開始点に作ります。

エミッタの更新からです。

f:id:ten0313:20210611061011p:plain

SpawnBurstInstantaneousで最初に一度エミッタをスポーンさせています。

パーティクルのスポーン

f:id:ten0313:20210611062302p:plain

PositionModeをSimulationPositionに設定、PositionOffsetを有効化します。
Z軸を調整します。これはパーティクル上でエミッタをどの位置にスポーンさせるか(表示位置)を指定しています。

エミッタの色を指定するColorは後でNiagaraSystemの方にエミッタを追加した際に複数のエミッタに対してまとめて色の変数を追加して管理するので、今はいじらなくて大丈夫です。

 

パーティクル更新

f:id:ten0313:20210611063245p:plain

ParticleStateのKillParticlesWhenLifeTimeHasElapsedのチェックを外します。ライフタイムを無効化して時間経過でエミッタの表示が消滅しないようにするためです。

エミッタの永続化についてはこの記事が参考になります。
UE4 NiagaraのLifetimeを無制限にする方法 - PaperSloth’s diary

UpdateMeshOrientationではメッシュのZ軸の回転を制御しています。NiagaraSystemにエミッタを追加した後で個別に回転を調整(回転の速度を変えたり、逆回転にしたり...)するので、スクショでは-0.3を指定していますが 実際は数値を入れなくても大丈夫です。

 

f:id:ten0313:20210611063721p:plain

レンダリングのタブの"SpriteRenderer"を削除して"MeshRendere"を追加します。
PartickeMeshには最初につくった平面のメッシュを設定します。
"OverrideMaterials"を有効化してさっき作ったマテリアルを設定します。

これでこのエミッタに関しては完成です。

f:id:ten0313:20210611064444p:plain

左回りするエミッタが作れているでしょうか

 

次にこのエミッタを作ります。さっき作ったものの、伸び縮みする版みたいな感じです。
エミッタの方はさっきのと共通ですが、伸ぼ縮みするマテリアルを作る必要があります。

f:id:ten0313:20210611065319p:plain

マテリアルのノードの概要です。円を作るところは、伸び縮みしないモノを作ったのとほぼ同じです(円の大きさを少し大きくしましたが)。

f:id:ten0313:20210611065701p:plain

ここで伸び縮みさせています。Timeの小数点以下を取りだし、sine波にかけて動きをなめらかにします。
出力された数値を角度に変換して円から一部の線を取りだしています

できたマテリアルからエミッタを作ります。

f:id:ten0313:20210611070032p:plain

さっき作ったエミッタを複製して作ります。

f:id:ten0313:20210611070129p:plain

マテリアルを変更しておきます。

この要領でもうひとつ作ります。

 回転する点線のマテリアルを作ります。

f:id:ten0313:20210611070830p:plain

ノードの概要です。

 

f:id:ten0313:20210611071034p:plain

放射の図を作ってそこに円状の図を掛けて点線上の円を作りました。

さっきと同じく

f:id:ten0313:20210611070032p:plain

作った既存のエミッタを複製して

f:id:ten0313:20210611071630p:plain

マテリアルをセットします。

これで今回使うエミッタ、主要な4つのうち3つができました(回転するモノです)。

次に文字を表示するマテリアルを利用したカウントアップしてくれるエミッタを作っていきます。

 

f:id:ten0313:20210611073728p:plain

使用するマテリアルです
この中の"DebugScalarValuesSegment" ノードなのですが、既存のノードを解像したものになっています。
マテリアル上で数値を確認する"DebugScalarValues"ノードを複製します。

f:id:ten0313:20210611074542p:plain

DebugScalarValuesの中身

使いたい数字反転させ 縦に配置したテクスチャを用意します。

f:id:ten0313:20210611074754p:plain
複製したマテリアルノードの中の"Composite"というコメント内のTextureSampleのTextureをさっきの画像のものに設定します

f:id:ten0313:20210611074911p:plain
マテリアル内に数値を表示させる方法を色々やったんですけど(実際ある程度上手くいってたんですけど)既存のをいじった方が楽だって気付いちゃいました。

f:id:ten0313:20210611075723p:plain

表示する内容を入力するNumberのピンにDynamicParameterのひとつ目のピンに繋ぎます(DynamicParameter側のピンを"Number"とかにしておきます)。
MaximumNumberOfDigitsは表示する小数点以下の桁数を入力しておきます。

文字を表示するエミッタを作ります。"Empty"を元に作成します。

f:id:ten0313:20210611080827p:plain
基本的にはさっきまで作ったエミッタと共通ですが、UpdateOrientationで回転を加えることはことはしません。
「パーティクル更新」のタブに

f:id:ten0313:20210611080932p:plain

"DynamicMaterialParameter"を追加します。描画した数字のパーティクルの数値を変更するためです。
直接数値をFloat型で指定してもいいと思いますし、僕はfloat from curveで目紛しく数値が変わるようにしました。

f:id:ten0313:20210611082241p:plain

マテリアルを数値を表現するマテリアルにしておきます。

NiagaraSystemを作成します。

f:id:ten0313:20210611082835p:plain
さっきまで作っていたエミッタを好きなだけ追加します。

 

f:id:ten0313:20210611082956p:plain基本的には追加するだけでいいのですが、InitializeParticleのPositionOffsetのZ軸をそれぞれ設定します。
要は高さを変えます。

f:id:ten0313:20210611083154p:plain

MeshScaleModeをUniformに設定、Scaleをそれぞれ設定します(エミッタのおおきさを変えます)。

f:id:ten0313:20210611083409p:plain

UpdateMeshOrientationのRotationVectorのZ軸を変更します(回転量を変えます)。負の数を指定する事で逆回転ができます。

これでNiagaraSystemの完成です。出来たパーティクルをレベルに配置してみてください。

f:id:ten0313:20210611083848p:plain

できていますか?

 

ポストプロセスで露出を少し上げることでもっと「映え」させることができます!

f:id:ten0313:20210611084014p:plain

 

なにかわかりにくい事があったり、間違いがあればTwitterのDMとかにおねがいします。


[ この記事はブログ投稿者の憶測や考えによりつくられています。

よって書いてある内容に誤りや言い間違いがあるかもしれません。もし修正したほうがいい場所や「こういった言い方のほうが”ソレっぽい”よ」などがありましたら後に記載してあります、リンク先のツイッターアカウントに教えてくださると嬉しいです:) ]

 

東京高速戦術@VRゲーム制作 (@kousoku_tactics) | Twitter

【UE4 .26】スケルタルメッシュのモーションに合わせてパーティクルを発生させる【Niagara】

 これを作ります。


スケルタルメッシュの形に合わせてパーティクルをスポーンさせる

www.youtube.com
ほぼコレの通りにしたんですけど、パーティクルの各種設定とか UnrealEngineのバージョン違いで詰まった所もあるのでそういう所も含めて全部書いていきます。

 

作成の流れとしては

  1. 指定したスケルタルメッシュの形にパーティクルをスポーンさせるNiagaraModuleScriptを作る
  2. 「パーティクルのスポーン」に作ったNiagaraModuleScriptを追加する
  3. メッシュをセットする

です。ところどころ詰まった箇所はあるんですけど、youtubeの解説が丁寧だったので楽にできました。

 

NiagaraModuleScriptを作っていきます。
持たせる役割としては「スケルタルメッシュの形にパーティクルをランダムにスポーンさせる」ってものです。

最初に「スクリプトの詳細」タブからModuleUsageBitmaskを写真の様にします。

f:id:ten0313:20210608201551p:plain

これってどこでこのScriptを使うかを指定するモノって認識なんですけど合ってますか?
とりあえず今回はスポーンの時に使用するので(「メッシュの形に沿ってスポーンさせる」って機能を作りたいので)、"ParticleSpawnScript"を指定しています。

 

f:id:ten0313:20210608201403p:plain

NiagaraScriptModuleの概要です

 ノードの方を説明していきます。

 

基本的にスクショの通り組んでいって貰えればいいんですけど、自分の使っている4.26バージョンでは左下の"GetRandomInfo"のノードが検索しても出てきませんでした。過去のバージョンでは存在するノードだったのですが 、いつのまにか表示されないようになっちゃってるみたいです

f:id:ten0313:20210608203120p:plain

検索しても出てこない...


エディタ内には存在しているようなので、表示されるように設定します。

f:id:ten0313:20210608203248p:plain

コンテンツブラウザ内の「Niagaraコンテンツ」内で「Get Random Info」を検索するとでてきます。

f:id:ten0313:20210608203427p:plain

スクリプトの詳細」内の「LibraryVisiblity」を"Exposed"にセットして、コンパイルしてから適用させます。

f:id:ten0313:20210608203617p:plain

でました!

これで自分の作るModuleScript内でも"Get Random Info"が使えるようになりました。

ModuleScriptを作成する上で詰まるところはこれでもう無いと思います。

やってることの内容としては

f:id:ten0313:20210608204131p:plain

スケルタルメッシュをマップ取得で受けとって、"RandomTriangle"でポリゴンメッシュでメッシュ上のポリゴンをランダムで取得します。("RandomInfo"は乱数の生成に関する設定を扱かってるんだと思う)

 Calculates info needed by other RNG functions about seeds and determinism,

 "Get Random Info"ノードのDescriptionより

 

シードと決定論について他の RNG 関数が必要とする情報を計算します。

Google翻訳の結果


RNG関数ってのはRandomNumberGeneratorについての事であることから、RandomTriangleノードで扱う乱数の設定をしているんだと思いました。

 

f:id:ten0313:20210608205143p:plain


ModuleScriptの後半です。

"RandomTriangle"で取得したポリゴンメッシュの情報を"Get Skinned Triangle WS"でワールド基準のものに変換します(ノード名の"WS"とは"WorldSpace"の略です)

その中の"Position"のピンをひっぱって"Map Set"のパーティクルの位置を指定する"Position"に繋ぎます。

 

これでパーティクルの位置がメッシュの形にセットされるようになります。
"NMS_SetPositionSkeletalMesh"って名前で保存します。

 

NiagaraSystemを作成して設定をいじっていきます。

f:id:ten0313:20210608211438p:plain

Emitterも含めての概要です。「パーティクルのスポーン」にさっき作ったModuleScriptを追加しています。

 

"Empty"を元にエミッタを追加します。

f:id:ten0313:20210608212107p:plain

基本的に これで追加したエミッタそのままで、いくつかモジュールを追加していったのでそれらを説明します。

f:id:ten0313:20210608212317p:plain

「エミッタの更新」に"Spawn Rate"を追加しました。ベースとなるスケルタルメッシュがモーションさせている間も連続してパーティクルに出てきてもらいたいので設定しました。"SpawnRate"は100000にしました。正直ここまで要らないと思うんですけど、ゲームに組みこむわけでもないし、多い方がSNS映えするかな~って魂胆です。

 

f:id:ten0313:20210608213248p:plain

「パーティクルのスポーン」の"Initialize Particle"です。ライフタイムを短かくして、スプライトのサイズを小さくしています("Sprite Size Mode"を"Random Uniform"にしている部分です)

 

f:id:ten0313:20210608213441p:plain

NMS Set Particle Position

さっき作ったモジュールです。今回はグレイマンにモーションを付けてパーティクルをつけようと思っているので、"SK_Mannequin"を指定しました。

 

f:id:ten0313:20210608213602p:plain

Color

男の子なので青くしました

 

f:id:ten0313:20210608213639p:plain

GravityForce

「パーティクル更新」の欄です。重力を適用させました。

 

f:id:ten0313:20210608213735p:plain

Scale Sprite Size

スプライトのサイズをスポーン後、徐々に小さくするようにしました。今回はスプライトのライフタイムが比較的短いので、地面に達する前に徐々に消滅するようにしました。

 

これでNiagaraSystemは完成です。"NS_BurstMesh"って名前で保存しました。

 

次に踊らせるグレイマンの方でNiagaraパーティクルをセットしていきます。

 

UnrealEngineのに用意されているThirdPersonテンプレート内の"ThirdPersonCharactor"のイベントグラフに↓を追加します。

f:id:ten0313:20210608214406p:plain

これでパーティクルをセットします。

これで大体は完成なのですが、このままではグレイマン自身のメッシュが見えてしまっています。パーティクルのスポーンでグレイマンの形を表現したいので、グレイマンのマテリアルに透明なのを適用させます

f:id:ten0313:20210608221008p:plain

透明マテリアル

メッシュのvisibleとかHidden in Gameをオンオフにしたらいいのかなって最初は思ってたんですけど、それをするとパーティクルがメッシュのモーションに追従してスポーンしてくれないのでこの方法をとりました。もっと良い方法が探せばあると思います。

 

これでグレイマンのメッシュに沿ってパーティクルが発生するようになっています。

 

こんな感じです。

 

ダンスを踊らせると

 こんな感じになったでしょうか。

なにかわかりにくい事があったり、間違いがあればTwitterのDMとかにおねがいします。


[ この記事はブログ投稿者の憶測や考えによりつくられています。

よって書いてある内容に誤りや言い間違いがあるかもしれません。もし修正したほうがいい場所や「こういった言い方のほうが”ソレっぽい”よ」などがありましたら後に記載してあります、リンク先のツイッターアカウントに教えてくださると嬉しいです:) ]

 

twitter.com

 

f:id:ten0313:20210608221738p:plain

 

【UE4 .26】Niagaraで音の波形をパーティクルで表示する

 これを作ります。

 

音の波形を取得
[UE4]新機能「Audio Synesthesia」でサウンドの非リアルタイム解析!|株式会社ヒストリア

Niagaraについて

コンテンツサンプルを楽しむ”超”初心者の為のNiagara - YouTube

この二つを参考にしました。
特に、Niagaraの解説動画の方は 先に見てもらえると後の解説がわかりやすくなると思います(とっても易しくわかりやすいように解説されています)

 

作成の流れとしては

  1. AudioSynesthesiaの定Q解析で音源を解析して48個のバンド毎に数値を取り出す
  2. Niagaraで48個(バンド数分)スプライトを円形に配置して、それぞれを外側に(放射状に)回転させておく
  3. 音源のアクターを作ってパーティクルを再生。解析で取り出したバンド毎の数値をパーティクルにNiagara Set Float Arrayで配列ごと渡す
  4. パーティクル側で渡された配列を分解して、48個それぞれのスプライトに大きさ(長さ)として渡す

です。

 

まずはAudioSynesthesiaからです。

プラグインをのメニューから、有効化させます。

エディタを再起動して「追加/インポート」を開くと、サウンドの欄に「解析」とかが増えているので、その中から「Synesthesia NRT」を選択します。

f:id:ten0313:20210601134648p:plain

ConstantQNRTを選択

f:id:ten0313:20210601135036p:plain


作成された解析用のアセットを開いて、流したい音楽ファイルをSoundの欄に設定します。

f:id:ten0313:20210601135421p:plain

 

次に音を再生するアクターを作成します

f:id:ten0313:20210601140336p:plain

コンポーネントの配置はこんな感じ。Audioにはなにも設定していません。

 

変数です。

f:id:ten0313:20210601140648p:plain
Durationは曲の長さを入れておきます。後で設定します。
ConstantQNRTとSoundWaveについては以下の通りです。

f:id:ten0313:20210601140813p:plain

ConstantQNRT

f:id:ten0313:20210601140920p:plain

SoundWave

ここで詰まったことがありました。変数ConstantQNRTなのですが(型はConstantQNRTにしてください)デフォルト値を選択しようとしても、さっき作成した解析用のアセットが出てこない時があります(海外の解説動画とか見てたら"Bug! Bug!"って騒いでいたのでありがちな事らしい...?) エディタの再起動とかアセットの作りなおしとかしてたらいつのまにか候補の一覧に出てきました。

SoundWaveは 型はSoundWaveを デフォルト値は流す音源を選択してください。

 

アクターのイベントの方を設定していきます。

f:id:ten0313:20210601144002p:plain

全容はこんな感じ。

各場所を拡大します。

f:id:ten0313:20210601144025p:plain

BeginPlayでNiagaraParticleSystemを追加、アクタのシーンルートにアタッチします。その後、変数にパーティクルをセットしておきます(後程、解析した値を渡すためです)(セットするパーティクルは後程作成するので今は空っぽで大丈夫です)

f:id:ten0313:20210601144205p:plain

次の場所です。最初に 変数DurationにSoundWave、音源の長さを取得してセットします。

その後スクショの通りにノードを組みます。

f:id:ten0313:20210601144357p:plain

StartPlayではこういう事をしています。Audioコンポーネントに音源を設定して、再生しています。

 

この後に、パーティクルに解析した内容を渡す処理が続くのですが そのためにはパーティクルの方が必要なので 一旦アクターは置いておいて Niagaraを開いていきます。

 

f:id:ten0313:20210601150003p:plain

これが出来たNiagaraSystemです。
Emitterの方では特に特別な事はしていませんが、スプライトを円形に並べる・それぞれの大きさを変える処理をNiagaraModuleScriptで自作したので それも含めて設定内容を解説していきます。
自作したModuleScriptは「パーティクル更新」の中にある「NS Set Position Circle」です。それ以外の場所は、パーティクルのライフタイムを永続的に変更する・色を変更する・スプライトの向きを上に設定する(カメラの向きにしない)を設定しているだけです。慣れた人はここから少し読み飛ばしていいと思います。

 

まず、パーティクルのライフタイムを永続させます。普通にライフタイムを設定すると、その秒数の間しか表示されないので それをなんとかします。
参考にしたのは

UE4 NiagaraのLifetimeを無制限にする方法 - PaperSloth’s diary

この記事です。

1.
「Particle State」Moduleの「Kill Particles When Lifetime Has Elapsed」フラグをOffにして
同Moduleの「Loop Particles Lifetime」にチェックを入れるだけです。

2.
「Particle State」Moduleの「Kill Particles When Lifetime Has Elapsed」フラグをOffにして
Lifetimeに「Normalized LoopAge」を割り当てる

3. 「Initialize Particle」と「Particle State」を使用しない

でした。

 

色を変更します。
「パーティクルのスポーン」に「Color」を追加して好きな色を設定します。

 

スプライトの向きを上に固定します

f:id:ten0313:20210601150736p:plain
SpriteRendererでFacingModeをCustomFacingVectorにします。

f:id:ten0313:20210601151014p:plain

次に「パーティクルのスポーン」にOrientMeshToVectorを追加して写真の通りに設定します。

スプライトをスポーンさせます。

f:id:ten0313:20210601151137p:plain

今回は最初からスプライト達に存在してもらってほしいので、SpawnBurstInstantaneousを利用して、48個のスプライトを同時にスポーンさせます。ここの48個とは、音源の解析で得られるバンドの数です。

次に、スプライトを円形に配置して、かつそれぞれの大きさを動的に変えられるModuleScriptを作っていきます。

f:id:ten0313:20210601151735p:plain

コンテンツブラウザで選択して新規作成します。

f:id:ten0313:20210601151841p:plain

全容としてはこんな感じです。それぞれ見ていきます。

f:id:ten0313:20210601152202p:plain

最初のマップ所得です。ここはスクリプトの引数というか、エミッタで設定した数値とかを要求したりできる箇所って考えたらいいんでしょうか。

ParticleNumは生成しているスプライトの数です。今回はSpawnBurstInstantaneousで設定した48個を使うので、デフォルト値に48を設定します。

SoundVolumeは、後で解析した値を設定するためのfloat型の配列です。

 

f:id:ten0313:20210601152844p:plain

スプライトを円形に配置するようにした所です。
下から伸びているのはマップ取得から伸ばしたParticleNumです。Sinで横軸を、Cosで縦軸を出して円形に配置します。「ExecutionIndex」は処理しているスプライトが何個目のなのかを返してくれるノードです。便利だと思います。

 

www.youtube.comModuleScriptに関して解説されているこの動画がオススメです。英語で、ちょっと訛りがあって聞き取りにくいんですけど、翻訳字幕つければ理解できると思います。
5:30くらいにExecutionIndexの説明がされています。動画で実際にうごかされている内容を見る方がわかりやすいと思います。

 

f:id:ten0313:20210601154451p:plain
今のままでは、スプライトの向きが一定なので全てがそれぞれ円の外を向くように設定しました。

 

f:id:ten0313:20210601154525p:plain

スプライトそれぞれの縦の幅を変更する所です。マップを取得から取ってきたfloatの配列から、ExecutionIndexで数値を取り出してvector2Dに変換します。Yはスプライトの幅の値です。SpriteSizeに設定します。
これでNiagaraModuleScriptは完成です。名前はNMS_SetPositionCircleにしました。

 

f:id:ten0313:20210601155602p:plain

作ったModuleScriptをエミッタのパーティクル更新に追加して 数値を写真の通りにします。SoundVolumeには「新しいUserパラメータから読み取る」を設定してください。

f:id:ten0313:20210601155708p:plain

パラメータのウィンドウから作った値を選んで、名前をSoundVolumeにします。

パーティクルの方はこれで設定完了です。

 

音楽を再生するアクタの方に戻ります。

 

f:id:ten0313:20210601160108p:plain

SpawnSystemAttachedのSystemTemplateに忘れずにさっき作ったパーテイクルを設定します。

パーティクルに解析の内容を渡していく処理を作っていきます。

 

f:id:ten0313:20210601160345p:plain

最初の方に作ったブループリントのノードの先にこういう風に繋げます。
やっている内容としては、カスタムイベントのPlaybackPercentから返される値に 音源の長さを乗算して計算の結果を同期させます。その内容をNiagaraSetFloatAttayでパーティクルのユーザー変数であるSoundVolumeにセットしています。

 

これでアクタをレベルに配置するだけで完成です。

f:id:ten0313:20210601160747p:plain

 動画のように動いているでしょうか

なにかわかりにくい事があったり、間違いがあればTwitterのDMとかにおねがいします。


[ この記事はブログ投稿者の憶測や考えによりつくられています。

よって書いてある内容に誤りや言い間違いがあるかもしれません。もし修正したほうがいい場所や「こういった言い方のほうが”ソレっぽい”よ」などがありましたら後に記載してあります、リンク先のツイッターアカウントに教えてくださると嬉しいです:) ]

 

twitter.com



【日記】HKKB Lite2にCherryMX軸用ののキーキャップを付けるためにやったこと

先日、秋葉原にある遊舎工房に行きました。

 前から行きたい行きたいと思ってたんだけど、なかなか機会が無くて(最近はハードの工作とかもしてなかったからそもそも秋葉原に行ってなかった)タイミングが無かったんすよね。 良い感じにTwitterで遊舎工房に明日行くよって友達に絡んで着いていった。

 これを買いました。肉球のやつ。

 

最初からキーボードの自作ってちょっとハードル高いけど、今使ってるHHKBのキーをワンポイントつけかえるのって手出しやすいし オシャレじゃん!? って目論んだ

 

んで

なんかよくわからんけど、肉球キーボードはCherry軸っていうキースイッチの規格で、HHKBにセットするには専用のアダプタが要るみたい。

 

なので

中華サイトでアダプタを買った。

 多分これと同じやつ。さすがにひとつ分だけ海外から取り寄せるのは無理だったのでフルセット買った。めちゃくちゃ余ってるので欲しい人は言ってください。着払いか会った時にあげちゃいます。

 

なんだけど

どうやらこのアダプタ、HHKBのProfessionalとかに使えるだけで僕の使っているLite2って機種には使えないみたい。

 

アダプタ自体に手を加えながらやっていくことにした。

f:id:ten0313:20210522134115j:plainまず、アダプタの形がLite2のしかくい穴に通らないので

 

f:id:ten0313:20210522134247j:plainやすって通るようにした

f:id:ten0313:20210522134409j:plainアダプタ両脇にくっついているカサの部分とツメみたいな部分をカッターで切り落として円柱状にしたあと、ケシゴムを接着剤でくっつけて高さを上げた

 後はキーボードの本来キーキャップがあったところに、それの代わりにアダプタを通して肉球キャップをつけたら完成

 

結果

まあ上手くいった。でもやっぱり打鍵感は変わったし(悪くなったというよりも、ちょっと茶軸っぽくなったって感じかな)(にょきにょき押す感じ)、キャップを支えてるものが、四角からアダプタの円柱状になったことでちょっとグラつきがでてる。コレ、Lite2用にモデリングして3Dプリントして自作アダプタ作ってもいいな