LoginSignup
7
5

More than 3 years have passed since last update.

【VFX Graph】連番アニメーションを使ってみた

Posted at

はじめに

Visual Effect Graphでスプライトシートを使った連番アニメーションを使ってみました。

1.gif

環境

【Unityバージョン】
Unity2018.3.14f1

【パッケージ】
Hight Definition RP - Version 4.1.0(Preview)
Visual Effect Graph - Version 4.10.0(Preview)

【OS】
Windows 10

Visual Effect Graph 完成図

今回作成したVisual Effect Graphは以下になります。

STEP0. スプライトシートの用意

今回のエフェクトでは、以下のテクスチャを使用しました。
Photoshopを使って手描きで作成しました。

スプライトシート(透過png)

STEP1. UV Mode = Flipbook に設定

Output系ノードのUv ModeFlipbookに設定し、スプライトシートのテクスチャとスプライトシート分割数を設定します。

image.png

ただし、これだけではまだテクスチャは動きません。

STEP2. Flipbook Playerを追加

UpdateノードにFlipbook Playerブロックを追加することで、アニメーションが動くようになります
frameRateの部分にフレームレートを指定します。 今回は24を指定しました。
image.png

以上でエフェクトは完成です。

完成したエフェクト

1.gif

炎が光っている感じはPost Processing StackのBloomを使って作っています。

7
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
5