VFXアーティストブログ

VFXアーティストが気になったことを好きに書いていくブログ

UE4セミナー

お久しぶりです
先日UE4セミナーに登壇させていただきました
そこでまたMaterialのことについてお話ししました
その時の資料がこちらです

www.slideshare.net

 

ほとんどエディターを見ながらの説明なので資料にはあまり書いていないですが
今回使用したマテリアルを公開します

OverwatchMaterial.zip - Google ドライブ

 

GodofWar4のマテリアルはMokoさんのほうがスマートなのでそちらをぜひご覧ください

フローマップとは_公開版.pptx - Google ドライブ

 

登壇した側もとても勉強になったセミナーでした

主催のalweiさんも本当にお疲れ様でした

ありがとうございました

 

Osaka Creative Meeting

お久しぶりです
何と先日セミナーに登壇させていただきました

セミナーではUE4を使ったマテリアルエフェクトのお話をさせていただきました

みんなに楽しんでもらえるかとっても不安でしたが

意外とエフェクトっておもしろいという意見を頂いて

やってよかったなと思えた一日でした

 

当日のスライドをアップしておきます

www.slideshare.net

 

Substance Designerのデータも上げておきます

Rain.sbs - Google ドライブ

 

動画の方はまた後日アップしますね

 

そしてチュートリアルのリクエストを頂いたので

作りますー

これ↓

www.youtube.com

 

 

では

メッシュにアルファ情報を付けてUE4に出す方法

ご無沙汰しています
仕事が忙しくてなかなか書けていませんでした

 

前回のUVスクロールの記事にコメントで質問を頂いていたので書いてみます

 

Mayaとかでメッシュに適当にアルファ情報を書いてみました

f:id:kapunn:20171119014339j:plain

 

そしてUE4にインポートするときの注意点ですが
Vertex Color Importのところ

最初はIgnoreになっているのでReplaceにします

f:id:kapunn:20171119013948j:plain

 

まぁ後からでもMeshの詳細で変えられますf:id:kapunn:20171119014801j:plain

 

あとはマテリアルでTranslucentにして

VertexColorをオパシティにつなげるだけです

f:id:kapunn:20171119014212j:plain

 

こんな感じになります

f:id:kapunn:20171119014154j:plain

 

マスクをグラデーションにしたりするときれいにフェードアウトした感じで消えてくれますよ

 

簡単な記事でもうしわけないですが

これでできるはずです

 

ではー

遊戯王のカード演出真似してみた

お久しぶりです

なかなか時間が取れずやっと10月の更新ができました

最近会社で1人で遊戯王のアプリで遊んでいたら周りの人も始めて

一気に社内で流行りだしました
カード演出がきれいで好きなので

今回それを真似して作ってみました

ゲーム内の演出は下のGIFです

f:id:kapunn:20171030000413g:plain

 

今回作ったのがこれ

youtu.be

カード周りに入っているエッジの光り方

周りの光彩のフェクトなど

まぁまぁ真似出来ているでしょうか

 

 

メッシュはこんな感じ

カード自体のメッシュ

f:id:kapunn:20171029222048p:plain

カード周りの光彩のメッシュ

UVを長方形にすることでテクスチャーをスクロールしたとき

カードの周りを光彩が回転しているようになります

f:id:kapunn:20171029222042p:plain

エッジのメッシュ

これも上と同じようにUVを長方形にすることで
テクスチャーをスクロールするとカードのエッジに沿って動いてくれます

f:id:kapunn:20171029222046p:plain

 

エッジのマテリアル

f:id:kapunn:20171029230354p:plain

f:id:kapunn:20171029230510p:plain

最後にSmoothStepでDissolveEffectのように使っているTextureによって

設定しているMaxとMinの範囲内でグラデーションをつくり

エッジが欠けているている感じを出しています

f:id:kapunn:20171029222810j:plain

 

光彩のエッジはただ単に2枚のテクスチャーをそれぞれ反対方向にスクロールさせているだけです

そしてPowerなどでコントラストを調整できるようにしています

またDynamicParameterを接続することによって

Cascade上でスクロールの調整をおこなっています

f:id:kapunn:20171029225944p:plain

f:id:kapunn:20171029225946p:plain

最後にCascade上でそれぞれの要素を配置して完成です

f:id:kapunn:20171029230043p:plain

 

今回使ったテクスチャーはこんな感じです

f:id:kapunn:20171029225315j:plain

f:id:kapunn:20171029225317j:plain

 意外と光彩をきれいに出すのが難しかったです

 

ではまた

 

 

 

 

UV Scroll Mesh Effect シュルッと解けるようなエフェクト

どうも

以前ある方に初心者向けにやってほしいと言われまして

今回はUVスクロールを使ったエフェクト作りを紹介しようと思います

制作したのはこれ↓

ブレイクダウンすでに入れてますが

youtu.be

 

細かく紹介します

まずメッシュはこういう感じのものです

板ポリをベンドで少し膨らみをつけてカーブに沿って変形させただけです

f:id:kapunn:20170926233557j:plain

これがUV

f:id:kapunn:20170926233629j:plain

 

これでメッシュの用意は完了

次はマテリアルです

全体図

f:id:kapunn:20170927004003j:plain

上のグループ

ここではテクスチャーの角度を変えられるようにしていますがなくてもいけます

スクロールさせるにはいろいろ方法がありますが今回はカスケードで速度をいじれるようにDynamicParameterを使っています

f:id:kapunn:20170927003651j:plain

下のグループ

ここでは上のグループのテクスチャーに表情に変化をつけるために組んでいます

f:id:kapunn:20170927003729j:plain

最後のつなぐところ

ここではカラーをCascadeでいじれるようにParticleColorをカラーとオパシティの部分をmultiplyでかけています

これでエフェクトのColor Over Lifeなどで変えられます

f:id:kapunn:20170927003830j:plain

 

Cascadeでの設定です

ますはMeshDataの設定

Roll Pitch Yaw Rangeにこのように数値を入れると

傾きながらローカル軸で回転させられます

どういうことかはこれを見てください

youtu.be

f:id:kapunn:20170927004742j:plain

Lifeは好きな感じに設定してください

Initial Sizeの設定

Uniformにすることで

MaxとMinの数値の幅からランダムに取ってくれます

Use Extremesにチェックを入れるとMaxかMinの数値どちらかだけになります

f:id:kapunn:20170927005012j:plain

Color Over Life

カラーではAlphaのところで

フェードインしながら最後フェードアウトするようにしています

f:id:kapunn:20170927005025j:plain

Size by Lifeの設定

最初は高さを持って出現し

最後はぺったんこになりつつ円の半径がじわっと広がって行くように設定しています

f:id:kapunn:20170927004950j:plain

Inital Mesh Rotationの設定

ここではある程度の角度の範囲で角度をつけて出現するようにしています

マイナスの値をMinに入れることで反転して出現するようになり

よりランダム性が増します

f:id:kapunn:20170927004852j:plain

Inital Mesh Rotation Rateの設定

傾きを保ったままローカル軸で回転させています

f:id:kapunn:20170927004909j:plain

DynamicParameterの設定

Y方向のみスクロールさせています

ポイントはDynamicParameter使う時

InValが1.0のとき(アニメーション終わりのとき)

1にせず0.99にしたほうがいいみたいです

f:id:kapunn:20170927004935j:plain

 

これで今回作ったようなエフェクトになります

メッシュの形状を今回のような形にすることで紐がシュルシュルっとほどけたような面白いエフェクトになります

Size by Lifeで高さを持った状態からすぐにぺったんこにして

円が広がるように半径をじわっと大きくしていくと

メリハリがついた見てて気持ちのいいアニメーションになります

いろんなメッシュを作って試してみてください

もちろんテクスチャーを変えることでもっと表現の幅が広がります

 

 今回は以上ですー

では

ハーフトーンのグラデーションの作り方

ハーフトーングラデーションってジャンルで合ってるのかわからないですが

普通のグラデーションというわけではなく

ドットでできたグラデーションをイメージしてもらったわかると思います

まぁこういうやつです↓

f:id:kapunn:20170923005915j:plain

これをパラメーターで調整かけられるようにして

アニメーションさせようというものです

 

今回作成したのがこれ

youtu.be

 

マテリアルはすごいシンプルです

はてなブログはなんか画像が圧縮されるのか

少し小さくなって表示されてしまうみたいで

もし見にくかったらYoutubeの方をみてください

f:id:kapunn:20170923010449j:plain

 

ポイントは「Floor」ノードです

これは最小の整数へ切り捨てするもので

例えば2.6なら2.0になります

これを利用することでドットのグラデならドットのサイズを変化させながらグラデを作ることができますし

前回の記事のラインがだんだん太くなって現れるアニメーションも作れます

その際テクスチャーを1-0の完全な白黒じゃなく

すこしブラーがかかったというか中間トーンが入っていると面白い表現になります

f:id:kapunn:20170923011044j:plain

 

いろいろテクスチャーを変えて遊んでみてくださいー

Mirror's Edge2のエフェクト再現してみた

FaceBookの方ではいろいろ上げているのですが

最近Mirror'sEdge2を今更はじめましてデザインの美しさに惚れ惚れしております

そこできになったエフェクトを再現してみようと作ってみたのがこれです

www.youtube.com


元ネタがこれです

 

www.youtube.com

ただのUVスクロールに見えるかもしれないですが

線がちぎれつつ消えていく表現やだんだん太くなって現れる表現などを入れています

意外と手間がかかってしまったエフェクトでした

 

マテリアルの全体図はこんな感じです

また解説できたらと思います

f:id:kapunn:20170923000932j:plain