LoginSignup
3
2

UnityのShaderGraphを使って2D映像制作

Posted at

概要

Unityを作って動画を作ろうとすると、基本的には3Dモデルを用いた動画をイメージするかもしれない。
参考サイト。MMDのようなこういう動画を作ってみるのも味なのだが、今回はShaderGraphをメインに使用して、
2Dのスライドショーのような動画を作成していく。

手順

今回は、以下のような動画を作成する。

Uniyプロジェクト・ShaderGraphの作成。

ShaderGraphは、URPのプロジェクトであれば、作成時に自動的に付属されてくる。
そのため、作成するときはURPのプロジェクトを選択すること。今回は、2D(URP)を選択して、プロジェクトを作成する。

スクリーンショット 2023-06-26 0.01.14.png

その後、Project / Create / ShaderGraph / URP / Lit Shader Graphを作成し、任意の名前を入れる。

スクリーンショット 2023-06-27 23.20.02.png

以下のような形で、ShaderGraphを作成する。

スクリーンショット 2023-07-17 15.03.26.png
左端

スクリーンショット 2023-07-17 15.04.06.png
中央

スクリーンショット 2023-07-17 15.04.54.png
右端

本当は、じわーって表現するためにマテリアルを透明、半透明にできる機能があるとよいのだが、今はまだうまく調べられていない。

マテリアルへの適応

Create / Material を作成し、任意の名前を指定する。

スクリーンショット 2023-06-27 23.32.15.png

その後、inspectorを開き、マテリアルのShaderから、先ほど作成したShaderGraph(画像ではShader_Graph1)を選択する。

スクリーンショット 2023-06-27 23.30.28.png

これでプレイしてみると、スプライトが動いているのがわかる。

  • Scrollspeedで動く速度が、
  • spriteCountで縞の数
    を調整する事ができる。

マテリアル.gif

他の柄を作りたい場合は、shaderGraphはそのままに、マテリアルを新しく作って、Shaderを適応させる。

スクリーンショット 2023-07-16 18.03.15.png

スクリーンショット 2023-07-16 18.04.45.png

そんな感じで3つほど作ると、以下のように配置できる。

スクリーンショット 2023-07-17 14.48.01.png
ちなみに、ただ角度を変えて置いただけである。
スクリーンショット 2023-07-17 14.48.10.png

インクがつく表現(できなかった。)

インクの素材は、以下のリンク先からダウンロードできる。

このインクがじわじわくる表現は、自分では再現できなかった。また調べてみよう。。

動画っぽくする

Unityの映像制作では、Chinemachineを使うイメージがすごい強いかもしれないが、
今回は使用しない方向で。

プロジェクトwindowから+で、TimeLineを選択する。

スクリーンショット 2023-07-17 17.24.44.png

timeLineを選択すると、TimeLineのタブが出てくる。また、ヒエラルキーに作ったTimeLine`をD&Dする。

スクリーンショット 2023-07-17 17.27.43.png
スクリーンショット 2023-07-17 17.28.22.png

タイムラインの中に、動かしたい画像をD&Dする。
スクリーンショット 2023-07-17 17.42.25.png

そして、レコーディングボタンを押して、レコーディングする。
スクリーンショット 2023-07-17 17.43.12.png

この時に、動かしたい画像を任意のタイミングで移動させる事で、アニメーションを作成する。

*キーを削除するときは、レコーディングの場面で右クリック、Removekey
スクリーンショット 2023-07-17 17.38.14.png

これを、黒色部分のやつの方でも追加してやる。

その後、これを録画するため、UnityRecorderをインストール。

スクリーンショット 2023-07-17 18.16.51.png
PackageManagerからUnityRegistoryを選択肢、recorderをインストール。

その後、window-> General -> Recorder Window を選択する。

スクリーンショット 2023-07-17 18.19.55.png

その後AddRecorderからmovieを選択し、START RECORDINGを押す。

スクリーンショット 2023-07-17 18.22.34.png

すると、以下のような感じになる。この後にも動画を組み合わせて作っていけたらよい。

movie.gif

参考サイト

3
2
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
3
2