エフェクト雲水

エフェクト雲水

エフェクトから広げるスキル-Tips

UE4 エフェクト入門 カスケードのエミッター基本操作

UE4 初心者向け】

今回はUE4のカスケードでよく使うエミッター操作について基礎を含め解説していきたいと思います。

 

youtu.be

以下、動画の内容を簡単にまとめてます。

 

目次
1,エミッターの作成、命名
2,エミッターの左右順番入れ替え(描画順について)
3,エミッターの複製
4,ソロ表示と非表示
5,別パーティクルへエミッターを移す方法

 

1,エミッターの作成、命名

 

エミッターとはエフェクトを構成する部品です。
このエミッタという場所に左詰めでエミッターが追加されていきます。
追加の仕方はこのエリアの黒い場所で右クリック、新規ParticleSpriteEmitterを選択します。

f:id:zazami_artsblog:20210926210801p:plain

黒い場所を右クリック

 

2,エミッターの左右順番入れ替え(描画順について)

 

エミッターには描画順というルールがあります。
左側のエミッタが手前に描写されるようになっています。

 

エミッターの左右入れ替えは、そのエミッターを選択した状態でキーボードの矢印キーで移動できます。 

 

 

3、エミッターの複製


エミッターを複製するには、そのエミッターを右クリックから複製を選択します。
複製されたエミッターは複製元のエミッターの右隣に追加されます。

f:id:zazami_artsblog:20210926211238p:plain

エミッタの複製

 

 

4、ソロ表示と非表示


任意のエミッターをひとつだけ表示する場合は、"S"と書かれたところを選択するとソロモードになります。

解除するにはもう一度選択もしくはパーティクルを保存するとすべてのソロモードが強制的に解除されます。


任意のエミッターを非表示にする場合は、チェックのボタンを押します。同様にもう一度押すと非表示が解除されます。

f:id:zazami_artsblog:20210926211501p:plain

エミッタのソロ表示と非表示

 

5、別パーティクルへエミッターだけをコピペする方法


コンテンツブラウザでペースト先のパーティクルデータを選択し、コピーしたいエミッターを右クリック、エミッタ項目にあるエキスポートを選択します。

 

全てエキスポートを選ぶとすべてのエミッターを移植することが出来ます。

 

 

以上です。

 

エフェクト用メッシュの作成~Ring編~

 

 今回作るメッシュは、リング型のメッシュです。

穴が空いた円形とも言えますが、作り方としてはそれなりに独特な気がします。

f:id:zazami_artsblog:20200408183209p:plain

今回作成するメッシュ

 

大まかな作業としては、

①基本となるメッシュを構成

②UVの設定

③頂点カラーの設定

 

①まず、MAYAを立ち上げます。

 

②【環境設定】グリッドを広げて編集しやすくします。

 

基本的にモデリングソフトで作るメッシュの大きさは統一することを推奨します

(インポート先で大きさを合わせるのは面倒なので・・・)

 

MAYAのグリッドは1タイルが1センチだったはずです。
UE4上ではメッシュを1メートルくらいの大きさに統一しておきたいので、MAYAのグリッドは1辺を100センチにしておくと作業しやすいと思います。

 

ディスプレイ>グリッド□

※グリッドと書いてある欄の右端の□を押してグリッド設定をします。

f:id:zazami_artsblog:20200302105510p:plain

グリッドの設定をする

f:id:zazami_artsblog:20200302105848p:plain

これで適用します。

 

ーーー↑どんなメッシュを作る場合でもここまではいつも通りの手順でやってます↑ーーー

 

③基本となるメッシュを構成

作成>ポリゴンプリミティブ>円 □

f:id:zazami_artsblog:20200408184341p:plain

ナーバスからメッシュを作成していく

設定は以下の通り。

半径50と半径15の円を適用して作ります。

f:id:zazami_artsblog:20200408184632p:plain

半径50の円

f:id:zazami_artsblog:20200408184719p:plain

半径15の円

セクション数は36くらいにしておきます。

「滑らかな弧はだいたい36セクション」と覚えています。

f:id:zazami_artsblog:20200408184927p:plain

現在の状態

 

この時点で分かる人はもう分かると思います。

今回のリング型メッシュは、2つの円のエッジ間に面を張るというやり方です。

 

ここから早速、面を張り工程になります。

 

2つの円を選択した状態で、サーフェス>ロフト □ でメッシュを張ります。

f:id:zazami_artsblog:20200408185838p:plain

ロフトでメッシュを生成

ロフトの設定は以下の通り。

セクションスパンは2

出力ジオメトリはポリゴン

タイプは四角

f:id:zazami_artsblog:20200410185612p:plain

ロフトの設定

f:id:zazami_artsblog:20200410185826p:plain

現在の状態

 ロフトで生成されたメッシュを選択します。

f:id:zazami_artsblog:20200410190057p:plain

ロフトで生成したメッシュを選択

チャネルボックス/レイヤエディタから、入力の項目にあるnurvusTessellate1のフォーマットをCVに切り替えます。

f:id:zazami_artsblog:20200410190201p:plain

フォーマットをCVに切り替える

 

 

これでポリゴンの並び方などが修正されました。

f:id:zazami_artsblog:20200410190410p:plain

現在の状態

 

④UVを設定する。

UV>UVエディタ

f:id:zazami_artsblog:20200408191723p:plain

UVエディタを開く

 

現在のUVはこんな感じです。

f:id:zazami_artsblog:20200410190503p:plain

現在のUV

これを修正します。

 

UVエディタ内の、修正>正規化 □

f:id:zazami_artsblog:20200410190553p:plain

UVの正規化を行う

正規化の設定は以下の通り。

f:id:zazami_artsblog:20200408192041p:plain

UV正規化の設定

 

正規化を行うと、どこかに消えてしまいました。

f:id:zazami_artsblog:20200410190822p:plain

UVを正規化すると、突然画面外にいってしまうUV

こんなときは、Aキーを押してフォーカスします。

f:id:zazami_artsblog:20200410190938p:plain

Aキーで選択中のUVを画面の中心に持ってこれる


画面を広げると、全体図のどこにUVが行ってしまったのか分かりますね。

こいつを座標の原点に移動させてやります。

f:id:zazami_artsblog:20200408192123p:plain

正規化したUV

まず、選択をUVに切り替えます。

f:id:zazami_artsblog:20200408192242p:plain

UV選択に切り替える

範囲選択でUVを全選択し、Wキーで移動ツールを呼び出して位置を調整します。

f:id:zazami_artsblog:20200408192413p:plain

UVを全選択

f:id:zazami_artsblog:20200408192431p:plain

Wキーで移動ツール呼び出し(Eキーで回転、Rキーでスケール)

原点まで移動します。Jキー押しっぱ移動でカクカク操作できます。

f:id:zazami_artsblog:20200410191343p:plain

厳密に言うと、座標(0,0)と(1,1)の間に埋める感じ

 

位置は適切ですが、角度が適切かどうか分からないので確認します。

確認の仕方は、エッジ選択に切り替えて、UVエディタ内で選択したエッジがメッシュ側でも想定した場所になっていればOK。

今回は適切だったので修正しなくて大丈夫でした。

f:id:zazami_artsblog:20200410191505p:plain

メッシュと照らし合わせてUVの角度を確認する

これでUVの調整が完了しました。

 

⑤頂点カラーを設定する。

このページのトップにある完成図を見ると、メッシュの外縁と内縁が黒くなってます。

つまり、黒いところは不透明度が0ということになります。

 

まずは、すべての頂点を一旦不透明にします。

 頂点選択に切り替えます。

f:id:zazami_artsblog:20200410191936p:plain

頂点選択に切り替える

f:id:zazami_artsblog:20200410191954p:plain

頂点をすべて選択する

メッシュ表示>カラーの適用 □

f:id:zazami_artsblog:20200410192229p:plain

カラーの適用で頂点アルファを設定する

f:id:zazami_artsblog:20200410192348p:plain

アルファ値を1にする

これですべての頂点のアルファ値が1になりました。つまり、まったく透けていない状態です。

ここから、透明にしたい部分の頂点を0にしていきましょうという話です。

 

透明にしたい部分の頂点を選択します。

 

まずは、内側の縁の頂点から作業します。

f:id:zazami_artsblog:20200410193156p:plain

内側の縁の頂点を全選択

カラーの適用から、アルファ値を0にして適用します。

f:id:zazami_artsblog:20200410193248p:plain

アルファ値を0にして適用

これで内側が透明になりました。

 

次に外側の縁の頂点も同じようにしていきます。

f:id:zazami_artsblog:20200410193409p:plain

外側の縁の頂点もアルファ値を0にしていく

 

完成です!

f:id:zazami_artsblog:20200410193500p:plain

完成

エフェクト用メッシュの作成~Sphere編(半球)~

 今回作るメッシュは、半球状のメッシュです。

形状は単純なので容易に作れそうな感じですが、UVの工程が少し複雑かと思います。

f:id:zazami_artsblog:20200401120840p:plain

今回作成するメッシュ

Youtubeでも解説してみました。

www.youtube.com

 

大まかな作業としては、

①基本となるメッシュを構成

②UVの設定(ここが大変)

 

 

①まず、MAYAを立ち上げます。

 

②【環境設定】グリッドを広げて編集しやすくします。

 

基本的にモデリングソフトで作るメッシュの大きさは統一することを推奨します

(インポート先で大きさを合わせるのは面倒なので・・・)

 

MAYAのグリッドは1タイルが1センチだったはずです。
UE4上ではメッシュを1メートルくらいの大きさに統一しておきたいので、MAYAのグリッドは1辺を100センチにしておくと作業しやすいと思います。

 

ディスプレイ>グリッド□

※グリッドと書いてある欄の右端の□を押してグリッド設定をします。

f:id:zazami_artsblog:20200302105510p:plain

グリッドの設定をする

f:id:zazami_artsblog:20200302105848p:plain

これで適用します。

 

ーーー↑どんなメッシュを作る場合でもここまではいつも通りの手順でやってます↑ーーー

 

 

③基本となるメッシュを構成

作成>ポリゴンプリミティブ>球 □

f:id:zazami_artsblog:20200401121649p:plain

ポリゴンプリミティブで球を作成(□編集ツールを開く)

以下のように、半径や分割数などを設定します。

f:id:zazami_artsblog:20200401121928p:plain

球の大きさやポリゴン数を指定する

 

元となる球が作れました。

f:id:zazami_artsblog:20200401122501p:plain


次に、下半球を削除しようと思います。

削除しやすくするために視点を変えます。

現在のパースビューから左面ビューに切り替えます。

f:id:zazami_artsblog:20200401122815p:plain

左面ビューに切り替える

f:id:zazami_artsblog:20200401122847p:plain

左面ビューの視点

面を削除するため、フェース選択に切り替えます。

f:id:zazami_artsblog:20200401123044p:plain

フェース選択に切り替え

削除したいフェースを範囲選択します。

下半球だけを上手く範囲選択してください。

f:id:zazami_artsblog:20200401123104p:plain

下半球を範囲選択

視点を近づけて正確に半球になっているか確認しておきます。

f:id:zazami_artsblog:20200401123506p:plain

上手く半分に出来ました。

 

 

視点をパースビューに戻します。

f:id:zazami_artsblog:20200401123609p:plain

f:id:zazami_artsblog:20200401123624p:plain

パースビューに切り替え

 

④UV設定

試しに今の状態でUVを見てみると、上がノコギリ状になっていて、当然ですが下半分も無くなっています。

f:id:zazami_artsblog:20200401124005p:plain

未調整のUV

今から行う調整は、

①このノコギリ状の三角形を四角形にする

②消えた下半分の帳尻を合わせるために、縦方向にスケールを伸ばす

この2点です。

 

 

視点を上面ビューに切り替え、さらにエッジ選択モードに切り替えます。

f:id:zazami_artsblog:20200401125450p:plain

上面ビュー、エッジ選択モードに切り替え

 

メッシュツール>エッジループを挿入 □

f:id:zazami_artsblog:20200401125703p:plain

エッジループを挿入

エッジループのツール設定は以下の通り。

(デフォルトから弄った記憶がない)

f:id:zazami_artsblog:20200401125733p:plain

エッジループの設定

中心の円の外側にエッジループを挿入します。

下図の通りにマウスカーソルを当ててダブルクリックすると緑色の円が表示されます。

(ダブルクリックしたエッジに対して垂直方向にエッジループが挿入されます)

f:id:zazami_artsblog:20200401130044p:plain

中心の円を囲うようにエッジループを挿入

Enterキーでエッジループを確定します。

オレンジ色になれば確定完了。

f:id:zazami_artsblog:20200401131045p:plain

エッジループを確定

  

エッジループの作業はこれで終わりなので、編集ツールをもとに戻します。

矢印カーソルのマークをクリック。

f:id:zazami_artsblog:20200401131428p:plain

編集ツールを戻す

 

次に、UVで見たときノコギリ状だった部分の面を削除したいと思います。

フェース選択モードに切り替えます。

 

f:id:zazami_artsblog:20200401131710p:plain

フェース選択に切り替え

範囲選択で中心を削除します。

f:id:zazami_artsblog:20200401131731p:plain

範囲選択でフェースを削除

f:id:zazami_artsblog:20200401131849p:plain

f:id:zazami_artsblog:20200401131903p:plain

削除完了

次に、空いた穴を塞ごうと思います。

やり方としては、穴のエッジを一周選択して、スケールで調整すれば良さそうです。

 

まず、穴の外周をエッジ選択で選択していきます。

f:id:zazami_artsblog:20200401134552p:plain

Shiftキーを押しながら外周を選択していきます

一周選択が出来たら、Rキーを押してスケールの調整に移ります。

f:id:zazami_artsblog:20200401134733p:plain

Rキーでスケール調整の準備

調整棒を引っ張って穴を塞ぎます。

f:id:zazami_artsblog:20200401134803p:plain

スケールを小さくして穴を塞ぐ

 これでギザギザのUVが四角形に統一されたはずです。

 

UVエディタを開いて最終調整を行います。

f:id:zazami_artsblog:20200401192112p:plain

UVエディターを開く

現在のUVはこんな感じです。

f:id:zazami_artsblog:20200401192305p:plain

現在のUV

 UVは、原点から(1,1)の範囲に満遍なく貼らなくてはいけないので、

まずは縦方向に大きくします。

 

UV選択に切り替えます。

f:id:zazami_artsblog:20200401192601p:plain

UV選択に切り替える

UVを全選択します。

f:id:zazami_artsblog:20200401192635p:plain

全体のUVを範囲選択

スケールの調整をします。

JキーまたはXキーを押しながら縦に伸ばします。

f:id:zazami_artsblog:20200401192758p:plain

スケール調整をする

上側のUVの面積を均一になるように調整します。

f:id:zazami_artsblog:20200401192940p:plain

上側のUVを微調整

UVをピッタリ範囲内に合わせれば完成です。

f:id:zazami_artsblog:20200401193128p:plain

UV調整完成

UVエディタはそのまま閉じても大丈夫です。

 

これで半球型メッシュの完成です。

エフェクト用メッシュの作成~Spiral編~

 

 今回作るメッシュは、風や衝撃波によく使われる形状のものです。

Spiral(スパイラル)と呼ぶことにします。

作り方の特徴は、アニメーション遷移でメッシュを構成するという方法です。

f:id:zazami_artsblog:20200327185311p:plain

今回作成するメッシュ

動画でも解説しています!

www.youtube.com

大まかな作業としては、

①基本となるメッシュを構成(今回はここが大変)

②UVの設定

③Pivotの設定

※④頂点カラーの設定(ここでは省略しますので、やり方については他ページを参照してください。)

 

①まず、MAYAを立ち上げます。

 

②【環境設定】グリッドを広げて編集しやすくします。

 

基本的にモデリングソフトで作るメッシュの大きさは統一することを推奨します

(インポート先で大きさを合わせるのは面倒なので・・・)

 

MAYAのグリッドは1タイルが1センチだったはずです。
UE4上ではメッシュを1メートルくらいの大きさに統一しておきたいので、MAYAのグリッドは1辺を100センチにしておくと作業しやすいと思います。

 

ディスプレイ>グリッド□

※グリッドと書いてある欄の右端の□を押してグリッド設定をします。

f:id:zazami_artsblog:20200302105510p:plain

グリッドの設定をする

f:id:zazami_artsblog:20200302105848p:plain

これで適用します。

 

ーーー↑どんなメッシュを作る場合でもここまではいつも通りの手順でやってます↑ーーー

 

 

③基本となるメッシュを構成

 作成>カーブツール>cvカーブツール □

f:id:zazami_artsblog:20200329234929p:plain

CVカーブツールを使う

CVカーブ設定は下の通り。

f:id:zazami_artsblog:20200330000036p:plain

CVカーブツールの編集

 

④点を2つ打ち、辺にする。

上面ビューに切り替えると点が打ちやすいです。

16センチほどの長さにします。グリッド1単位=1センチです。

f:id:zazami_artsblog:20200330001723p:plain

CVカーブツールで2点を打つ

右クリック長押し>ツール完了

これで辺が完成しました。

 

⑤辺を複製して、90度回転させる。

f:id:zazami_artsblog:20200330013737p:plain

辺を複製する

f:id:zazami_artsblog:20200330013801p:plain

90度回転させて十字型にする

※Jキーを押しながら回転させると、ピッタリ編集できます。

 

⑥2つの辺を1つのグループにまとめる。

2つの辺を選択する。

f:id:zazami_artsblog:20200330014628p:plain

2つの辺を選択

Ⅽtrl+Gキーでグループ化にする。

f:id:zazami_artsblog:20200330014745p:plain

グループ化にする(左の+ボタンでグループ階層を表示できる)

グループ化にすることで、親と子の関係性を持たせることが出来ます。

 

⑦グループ内の2つの辺を下図のように移動する。

f:id:zazami_artsblog:20200330021017p:plain

2つの辺の座標を編集する

f:id:zazami_artsblog:20200330021253p:plain

座標の大体の目安

これでアニメーションの始点となる座標のセットが出来ました。

 

⑧アニメーションのキーフレームを打つ。

まず、フレームレートを60fpsに切り替えます。

滑らかなカーブを作りたいので、30fpsよりも60fpsの方が適しています。

f:id:zazami_artsblog:20200330023410p:plain

フレームレートを60fpsに切り替える

次にタイムラインの幅を1から60にセットます。

(下のバーの両端の数値を1と60にする)

f:id:zazami_artsblog:20200330023736p:plain

タイムラインの幅を1から60に設定する

 

2つの辺を選択状態のまま、カーソルをタイムラインの1フレーム目に合わせてSキーを押します。

f:id:zazami_artsblog:20200330024639p:plain

Sキーで座標を登録すると赤く表示される

すると、上図のように赤色の印が1フレーム目に表示されます。これで現在の座標が1フレーム目に登録されてますよという証になります。

 

 

次に終点となる座標を設定します。

f:id:zazami_artsblog:20200330022658p:plain

終点となる座標の設定

高さを-9から30に上げました。

f:id:zazami_artsblog:20200330022720p:plain

終点座標の目安(高さだけ変えただけ)

始点と同じ要領で、60フレーム目に目盛を合わせて現在の座標を登録します。

f:id:zazami_artsblog:20200330025229p:plain

60フレーム目に終点座標を登録

 

次は、大きさの設定をします。

完成形は、先っぽが細くて中腹が太くなっています。

 

つまり、30フレーム目にそのままキーを打ち、始点と終点のスケールを小さく設定すれば良さそうです。

 

始点と終点のスケールは0.3程度に設定しました。

30フレーム目はスケール1のままです。

f:id:zazami_artsblog:20200330030625p:plain

スケールの設定

現在、8フレーム目を見てみるとスケール値が0.4くらいになってますが、もう少し太くしたいので0.5くらいに編集します。

8フレームを編集したことで、同じように太くしなければいけないのが52フレーム目です。

52フレーム目もスケール値を0.5くらいにしておきます。

f:id:zazami_artsblog:20200330042243p:plain

8、52フレーム目にスケールを登録

 

次に、グループのアニメーションを設定します。

 

グループを選択します。

f:id:zazami_artsblog:20200330032012p:plain

グループを選択する

アニメーションの1フレーム目はそのまま登録します。

終点の60フレーム目は、角度を-360に設定して登録します。

f:id:zazami_artsblog:20200330032307p:plain

終点座標を-360度に設定

 

これでアニメーションのキー登録が完了しました。

 

実際にタイムラインの目盛りをスライドさせてみると、十字が回りながら拡縮してるはずです。

 

⑨アニメーションスイープでメッシュを生成する。

スペースキー長押しで視覚化を選択

f:id:zazami_artsblog:20200330033022p:plain

視覚化(スペースキー長押し)

アニメーションスイープの作成 □(ツール編集)

f:id:zazami_artsblog:20200330033217p:plain

アニメーションスイープの作成□

オプション設定をする(下図参照)

f:id:zazami_artsblog:20200330033401p:plain

アニメーションスイープ ツールの編集

こんな感じになればOK

f:id:zazami_artsblog:20200330033634p:plain

アニメーションスイープで構成したメッシュ

⑩メッシュのフォーマットをCVに切り替える。

現在のメッシュは下図のように2つあります。

f:id:zazami_artsblog:20200330034149p:plain

両方選択した状態で、nurvusTessellateのフォーマットをCVに切り替えます。

f:id:zazami_artsblog:20200330034159p:plain

 

⑫UV展開する。

2つのメッシュを結合する前にUV展開を済ませておきます。

1つのメッシュを選択した状態で、UV>UVエディタを選択

f:id:zazami_artsblog:20200330034535p:plain

UVエディタを開くと、下図のような感じになってるので正規化をする必要があります。

f:id:zazami_artsblog:20200330034652p:plain

UVエディタウィンドウの

修正>正規化 □を選択

f:id:zazami_artsblog:20200330034742p:plain

修正>正規化

正規化ツールを編集

f:id:zazami_artsblog:20200330034829p:plain

正規化を適用し、Aキー押します。

すると、選択中のUVにフォーカスされます。

f:id:zazami_artsblog:20200330035018p:plain

こいつを適切なUV座標に移動させます。

 

視野を広げるとUVがどこにいるのか分かると思います。

UV選択に切り替えます。

f:id:zazami_artsblog:20200330035208p:plain

 

選択するときは、範囲選択するとやりやすい。

f:id:zazami_artsblog:20200330035344p:plain

 

適切な場所に移動させます。

f:id:zazami_artsblog:20200330035428p:plain

 

f:id:zazami_artsblog:20200330035452p:plain

Aキーを押してフォーカスします。

下図のように、原点と(1,1)の範囲にはめ込みます。ここがUVの適切な位置です。

f:id:zazami_artsblog:20200330035531p:plain

 

今の状態だと、おかしなUVの角度になってるので90度半時計周りに回転させます。

(なぜ、角度が間違っているの?と思う方は別のページで解説してるのでご参照ください)

f:id:zazami_artsblog:20200330035942p:plain

UV角度を合わせる

これでUVの設定が完了しました。

もう一つのメッシュも同じ要領でUV設定を行います。

 

⑬メッシュを結合させる。

2つのメッシュのUV展開が終わったら、メッシュを2つ選択した状態で結合します。

メッシュ>結合

f:id:zazami_artsblog:20200330040616p:plain

2つのメッシュを結合する

f:id:zazami_artsblog:20200330040724p:plain

 

⑭Pivotを編集する。

今回は、Pivotを原点に設定します。

Insertキーを押しっぱなしでPivotを編集できます。

f:id:zazami_artsblog:20200330040920p:plain

現在のPivot

左面ビューに切り替えて、編集しやすく。

f:id:zazami_artsblog:20200330041008p:plain

視点切り替えすると、原点に合わせやすくなります。

 

f:id:zazami_artsblog:20200330041343p:plain

完成

これで完成です。

頂点カラーを編集してもいいかもしれないですね。やり方は他ページを参照してください。

 

エフェクト用メッシュの作り方 ~Cylinder編~

今回は汎用性の高いシリンダー状のメッシュを作ってみます。

そのままビームなどに使えると思うので是非チャレンジしてみてください!

 

YouTubeの方でも解説してみました。

www.youtube.com

f:id:zazami_artsblog:20200327181458p:plain

完成形

 

大まかな作業としては、

①基本となるメッシュを構成

②Pivotの設定

③UVの設定

④頂点カラーの設定

 

という感じです。 

 

①まず、MAYAを立ち上げます。

 

②【環境設定】グリッドを広げて編集しやすくします。

 

基本的にモデリングソフトで作るメッシュの大きさは統一することを推奨します

(インポート先で大きさを合わせるのは面倒なので・・・)

 

MAYAのグリッドは1タイルが1センチだったはずです。
UE4上ではメッシュを1メートルくらいの大きさに統一しておきたいので、MAYAのグリッドは1辺を100センチにしておくと作業しやすいと思います。

 

ディスプレイ>グリッド□

※グリッドと書いてある欄の右端の□を押してグリッド設定をします。

f:id:zazami_artsblog:20200302105510p:plain

グリッドの設定をする

f:id:zazami_artsblog:20200302105848p:plain

これで適用します。

 

ーーー↑どんなメッシュを作る場合でもここまではいつも通りの手順でやってます↑ーーー

 

③円柱を作成します。

作成>ポリゴン プリミティブ>円柱□

f:id:zazami_artsblog:20200302110057p:plain

円柱の作成

作成する円柱の設定ですが、高さは100で決定です。

前述した通り、ゲームエンジン上で1メートルをデフォルトにするためです。とりあえず、作るメッシュの一番長い部分を100センチにするといいです。

半径は適度に30センチ。

軸の分割数は、円周が滑らかに見えればいいので25くらい。

f:id:zazami_artsblog:20200302110128p:plain

円柱の設定

これで適用します。

 

④上と下の面を削除する。

このエフェクト用メッシュは筒状にしなくてはいけないので、両底の不要な面は削除します。

1、メッシュを選択した状態で、右クリック維持>フェース

f:id:zazami_artsblog:20200302110431p:plain

メッシュを選択する

f:id:zazami_artsblog:20200302110502p:plain

面(フェース)モードに切り替える

 これでメッシュの面を選択できる状態になりました。

 

 

2、スペースキーを押した状態から右クリック維持>上面ビュー 

f:id:zazami_artsblog:20200302110745p:plain

視点を真上からに変える

f:id:zazami_artsblog:20200302110828p:plain

上面ビューにした状態

 

これで真上からメッシュを見下ろした状態になります。面を選択しやすくするために視点を変えました。

 

3、範囲選択で面を削除する

 ※全部を囲うように選択すると側面まで消えてしまうので注意!

f:id:zazami_artsblog:20200302111244p:plain

削除する面を選択する

f:id:zazami_artsblog:20200302111308p:plain

Deleteキーで削除する

削除すると、上面と下面の両方が消えているはずです。

確認できたら、パースビューに戻してください。

(スペースキー押したまま右クリックでパースビューを選択する)

f:id:zazami_artsblog:20200302111523p:plain

パースビューに戻す

 

⑤Pivotを調整する。

1.編集しやすいようにメッシュの位置をグリッド上部へ移動させます。

 メッシュを選択>移動Yを50にする

f:id:zazami_artsblog:20200302111803p:plain

f:id:zazami_artsblog:20200302111833p:plain

 

 

2、Pivotを底面の中心に移動させます。

 wキーを押して、移動ツールを表示させます。

f:id:zazami_artsblog:20200302112137p:plain

wキーを押して移動モードに切り替える

 Insertキーを押したまま矢印を動かすとPivotを移動できます。

f:id:zazami_artsblog:20200302112307p:plain

Insertキーを押したままにするとPivotが編集できる

 Jキーを押したまま矢印を動かすとグリッド単位で編集できます。

 また、左面ビューに切り替えて真横から見れば編集しやすくなります。

f:id:zazami_artsblog:20200302112653p:plain

左面ビューに切り替えてPivotを底面に移動させる(Jキー押しっぱでカクカク移動)

 ※即座にPivotを合わせたいときは、メッシュの頂点、辺、面にカーソルを合わせると赤く表示されるのでそれにピッタリ合わせることもできます。

 

これでPivotの設定が完了しました。

パースビューに戻します。

 

④UVを設定する

1、メッシュを選択した状態で、UV>UVエディタ

f:id:zazami_artsblog:20200302113031p:plain

f:id:zazami_artsblog:20200302113055p:plain

 UV編集ウィンドウが出てきます。

 

2、UVエディタのウィンドウから、修正>正規化□

f:id:zazami_artsblog:20200302113248p:plain

f:id:zazami_artsblog:20200302113322p:plain

UVの正規化の設定

 

 

 座標(1,1)の範囲にピッタリはまれば成功です。

もし、位置がずれていたら移動モードで正確な位置に手動で合わせてください。

Aキーで選択中のUVをフォーカスできます。見失ったときに便利です。

f:id:zazami_artsblog:20200302113523p:plain

正規化を行ったUV

3、UVの向きが合っているか確認する

 エッジ選択に切り替えて、メッシュ側でカーソルを滑らせてみると、UVエディタの方も連動して確認することができます。

f:id:zazami_artsblog:20200302113828p:plain

f:id:zazami_artsblog:20200302113843p:plain

UVとメッシュが一致しているか確認中

 メッシュ上下のエッジがUVエディタ側でも上下になっていればOKです。

 

 UVエディタは適用など無いのでそのままウィンドウを閉じても問題ありません。

 

⑤頂点カラーを設定する。

1、まず、メッシュ全体の頂点アルファを1にする。

 頂点選択モードに切り替えて、メッシュ全体の頂点を選択します。

f:id:zazami_artsblog:20200302114345p:plain

頂点選択モードに切り替える

f:id:zazami_artsblog:20200302114417p:plain

全部の頂点を選択した状態

 メッシュ表示>カラーの適用□

f:id:zazami_artsblog:20200302114641p:plain

アルファ値を1にします。

f:id:zazami_artsblog:20200302114703p:plain

頂点カラーを設定する

 これで適用します。メッシュ全体の不透明度が1になりました。

 

2、次にメッシュの両端の頂点を選択し、カラーの適用でアルファ値を0にします。

 

f:id:zazami_artsblog:20200302115425p:plain

円柱の両端頂点をすべて選択する

f:id:zazami_artsblog:20200302115458p:plain

頂点カラーを0に設定する

 メッシュ表示>表示カラー アトリビュートの切り替え

f:id:zazami_artsblog:20200302115659p:plain

表示カラー アトリビュートの切り替え

f:id:zazami_artsblog:20200302115745p:plain

頂点カラーのアルファ値が0なら透明、1なら不透明

 これでメッシュの頂点カラーを色で確認することができます。アルファ値が1の場所は白く、0は透明になっているはずです。

 

これをExportすれば完成!

 

 

 

エフェクト用メッシュの作り方 ~基本概念~

 

 ウェブで調べてもメッシュの作り方を紹介してるサイトがないので記事にしたいと思います。

 使用ツール:MAYA

 

 Cylinder(円柱)メッシュの作り方

youtu.be

 

 Circle(円)メッシュの作り方

youtu.be

 

 Spiral(風)メッシュの作り方

youtu.be

 

 Sphere(半球)メッシュの作り方

youtu.be

 

 【メッシュを作る上で気を付けているポイント】

 以下の3点はUE4にインポートした後では変更が効かないので、MAYAの段階で正確に設定しておくべきです。

 

 ■Pivot

 そのメッシュの原点座標(中心)となる場所です。

 同じ形のメッシュでも、Pivot位置が異なるものが数種類…なんてことよくあります。

 用途に合わせてPivotを設定しましょう。

 UE4上でPivotの位置を確認することは可能です。

 

 ■UV

 一言でいうと、テクスチャを投影した時の座標。テクスチャにも上下左右があると思うので、それを正しく貼り付けるためにメッシュ側で設定しようという話です。

 

 ■頂点カラー

 頂点に色って意味わかんねと思うかもしれないですが、エフェクト用メッシュにおいてはアルファ値(透明度)しか考えなくていいです。

 メッシュの端の頂点カラーをアルファ値0にすることで、テクスチャを投影したときに端が透明になります。ポケモンで例えるとドラパルトの尻尾が分かりやすいですね。

 ビームのエフェクトは先端の色が徐々に薄くなってるイメージがありますが、シリンダー状のメッシュの端が頂点アルファ0になってる場合が多いんじゃないでしょうか。

 要はテクスチャで透明度を設定しなくても、メッシュ側で透明にする設定出来ますよってことです。

About this Blog

 

 ◆このブログってどんなことを書くの?

 基本的にはゲームのエフェクトに関すること全般を書く予定です。

 

 ◆どうしてブログを始めようと思ったの?

 日々の学習のアウトプットとして活用したいと思ったのが主な理由です。

 また、自分が学生時代調べても分からなかったことや理解が及ばなかったことを掲載することで、同じように悩んでる方のサポートになればいいなと考えています。

 

 ◆誰?

 20代♂エフェクトデザイナーです。

 Unity出身ですが、UE4でハイエンドなエフェクトが作りたかったので家庭用ゲーム機の開発をしている会社に就職しました。

 

 ◆好きなものは?

 コンテンツで言えばポケモンFateですかね...。ファンアートやりたいなあ。

 

 ◆ブログの更新頻度どうなってんの?

 週に1回は更新したい。

 

 ◆悩みある?

 絵が描けません助けてください。

 

 ◆質問とか受け付けてますか?

 お気軽にどうぞ。Twitter@tt_zazamin)でも受け付けますよ!