上下にシームレスなイメージを使った雨のループアニメーションです。
上下方向にシームレスなイメージを用いて、キーフレームでループさせた雨のアニメーションです。作成したアニメーションレイヤーフォルダをそのまま素材にしています。(一部フレームバイフレームがあります)
![](//assets.clip-studio.com/ja-jp/description/2035873/img/2e01d841f2-f941-48b4-34cc-120e4a7abf.png)
![](//assets.clip-studio.com/ja-jp/description/2035873/img/5a751d16bb-3140-d590-518f-52c2bdc2a7.png)
![](//assets.clip-studio.com/ja-jp/description/2035873/img/56a1f9efdd-4644-d4a7-3c82-e0aa7dc9d2.png)
![](//assets.clip-studio.com/ja-jp/description/2035873/img/81fd05f24b-894e-8d8d-11e8-57933e94bd.png)
![](//assets.clip-studio.com/ja-jp/description/2035873/img/9fe207d38a-7642-c7ac-f482-f315beaa5c.png)
![](//assets.clip-studio.com/ja-jp/description/2035873/img/e40d208125-9e48-4a8c-c043-7d1cb1985d.gif)
![](//assets.clip-studio.com/ja-jp/description/2035873/img/7356cb4928-df41-2dbb-1821-5135994e1a.gif)
![](//assets.clip-studio.com/ja-jp/description/2035873/img/ffa6ceb773-704d-57af-9633-86aea435d5.gif)
![](//assets.clip-studio.com/ja-jp/description/2035873/img/5132e891d9-0840-f2b1-4e8b-824cbb39f3.gif)
![](//assets.clip-studio.com/ja-jp/description/2035873/img/c72d04a4a9-5843-64ac-7269-746703529a.gif)
![](//assets.clip-studio.com/ja-jp/description/2035873/img/c29c643d02-fd40-629a-96a2-babe7c38c3.gif)
![](//assets.clip-studio.com/ja-jp/description/2035873/img/6749890a5c-3342-79a3-1172-aa70afda88.gif)
![](//assets.clip-studio.com/ja-jp/description/2035873/img/f7a19b5e19-3541-2cbf-86c8-3ad214e05f.gif)
![](//assets.clip-studio.com/ja-jp/description/2035873/img/fbea664d7d-bb4e-76aa-0a4f-450dc56ccb.png)
![](//assets.clip-studio.com/ja-jp/description/2035873/img/e697301d42-8f4c-30a8-a34b-ace879458f.gif)
![](//assets.clip-studio.com/ja-jp/description/2035873/img/058206ec37-2843-de9d-d24b-51e421a0f9.png)
![](//assets.clip-studio.com/ja-jp/description/2035873/img/aeff44f3cd-5f44-b7aa-39d6-4d9db19ab4.png)
![](//assets.clip-studio.com/ja-jp/description/2035873/img/c8d7034a84-784c-8197-a0ac-6b0e40043b.png)
![](//assets.clip-studio.com/ja-jp/description/2035873/img/87f2d5bb3d-b44a-1497-aa1a-d80061ab04.gif)
新規アニメーションファイル
初期設定の新規アニメーションファイルをご用意ください。画像枠は1280px X 720px、解像度が144dpiでフレームレートは24fpsです。
![](http://assets.clip-studio.com/ja-jp/description/2035873/img/2e01d841f2-f941-48b4-34cc-120e4a7abf.png)
![](http://assets.clip-studio.com/ja-jp/description/2035873/img/5a751d16bb-3140-d590-518f-52c2bdc2a7.png)
雨粒を白色で描いていますので、用紙は黒っぽい色のほうが見やすいと思います。ベタ塗りレイヤーを置いてもOKです。
![](http://assets.clip-studio.com/ja-jp/description/2035873/img/56a1f9efdd-4644-d4a7-3c82-e0aa7dc9d2.png)
ファイルの設置
現時点で7種類の雨パターンを用意しています。ダウンロードしたフォルダをアニメーションファイルのレイヤーに直接ドラッグ&ドロップします。
![](http://assets.clip-studio.com/ja-jp/description/2035873/img/81fd05f24b-894e-8d8d-11e8-57933e94bd.png)
フレーム数は24フレームに自動設定されますので、開始フレームを1、終了フレームを24に合わせてください。アニメーションフォルダのスタート位置がズレている場合は、フレーム1の位置に合わせてください。
![](http://assets.clip-studio.com/ja-jp/description/2035873/img/9fe207d38a-7642-c7ac-f482-f315beaa5c.png)
各雨素材について
それぞれのアニメーションフォルダを表示、非表示を切り替えることで、単体、あるいは組み合わせて用います。
【中降りの雨】雨粒が大きめ、密度が低めの雨です。移動スピードが表示枠上端から下端まで1秒です。
![](http://assets.clip-studio.com/ja-jp/description/2035873/img/e40d208125-9e48-4a8c-c043-7d1cb1985d.gif)
【霧雨】細かく、密度の高い雨です。移動スピードは中降りの雨の半分で、上端から下端まで2秒です。
![](http://assets.clip-studio.com/ja-jp/description/2035873/img/7356cb4928-df41-2dbb-1821-5135994e1a.gif)
【中降り+霧雨】2つのレイヤーを同時に表示すると、かなり密度の高い雨になります。また奥行き感も出ます。
![](http://assets.clip-studio.com/ja-jp/description/2035873/img/ffa6ceb773-704d-57af-9633-86aea435d5.gif)
【斜めに降る雨】左上から右下に向かって降る雨です。移動スピードは上端から下端まで1秒です。
![](http://assets.clip-studio.com/ja-jp/description/2035873/img/5132e891d9-0840-f2b1-4e8b-824cbb39f3.gif)
【空を見上げたときの雨】3コマ撮りのフレームバイフレームです。シャワーを見上げた場面などにも使えそうです。
![](http://assets.clip-studio.com/ja-jp/description/2035873/img/c72d04a4a9-5843-64ac-7269-746703529a.gif)
【末広がりに降る雨】こちらも3コマ撮りのフレームバイフレームです。雨や嵐に向かって進む場面などで使えそうです。
![](http://assets.clip-studio.com/ja-jp/description/2035873/img/c29c643d02-fd40-629a-96a2-babe7c38c3.gif)
【細い雨】ゆっくりと降る細く鋭い雨です。
![](http://assets.clip-studio.com/ja-jp/description/2035873/img/6749890a5c-3342-79a3-1172-aa70afda88.gif)
【目の前を通り過ぎる雨】大粒の雨を高速(3倍速)で落下させました。軒下からこぼれる雨滴のような効果を狙いました。
![](http://assets.clip-studio.com/ja-jp/description/2035873/img/f7a19b5e19-3541-2cbf-86c8-3ad214e05f.gif)
使い方、応用
雨のシーンの演出用に、主に背景の前に置くことを想定して作りました。「目の前を通り過ぎる雨」は奥行き感を出すために、キャラの前に置いてもいいかも知れません。
リサイズ(1)
リサイズに関して質問をいただきました。デフォルトの雨は画面いっぱいに表示していますが、例えば、窓から外を見ているような場面では、小さな窓の中に雨を降らせたいと思うことでしょう。
雨の密度、速度がそのままでいい場合は、雨を降らせたい部分にだけレイヤーマスクをかけます。例えば「中降りの雨」を約600X600pxのエリアに降らせたい場合、約600X600pxサイズの暗色のボックスを作り、雨のレイヤーをマスクします。
![](http://assets.clip-studio.com/ja-jp/description/2035873/img/fbea664d7d-bb4e-76aa-0a4f-450dc56ccb.png)
画面枠いっぱいに降る雨の一部を切り取っているのですが、切り取ったとしてもシームレスな状態は維持されます。この方法はすべての雨の素材に適用できます。
![](http://assets.clip-studio.com/ja-jp/description/2035873/img/e697301d42-8f4c-30a8-a34b-ace879458f.gif)
リサイズ(2)*お勧めできない方法です
表示エリアのリサイズと同時に雨のサイズを変えたい場合もあるかも知れません。「中降りの雨」の例をご紹介しますが、調整が大変なのであまりお勧めしません。
例えば雨のサイズを半分にしたい場合、雨のパターンのサイズを50%にします。アニメーションレイヤーのセルに貼り付けている画像素材が雨のパターンになります。
![](http://assets.clip-studio.com/ja-jp/description/2035873/img/058206ec37-2843-de9d-d24b-51e421a0f9.png)
「中降りの雨」のパターンのオリジナルサイズは1280X1440pxです。これを640X720pxにします。一旦キーフレームを解除してから変形ー拡大縮小で50%にします。
キーフレームの開始点を任意の位置にした場合、終了点は任意の位置からグラフィックの縦半分上の位置になります。(終了点の位置は雨のパターンによって異なります)
開始点に雨のパターンの下端を合わせ、フレーム1にキーを打ちます。
![](http://assets.clip-studio.com/ja-jp/description/2035873/img/aeff44f3cd-5f44-b7aa-39d6-4d9db19ab4.png)
フレーム25(*)に移動し、雨のパターンの上端を終了点に合わせます。
![](http://assets.clip-studio.com/ja-jp/description/2035873/img/c8d7034a84-784c-8197-a0ac-6b0e40043b.png)
雨を表示したいエリアでレイヤーマスクをかけると、以下のようなアニメーションになります。
![](http://assets.clip-studio.com/ja-jp/description/2035873/img/87f2d5bb3d-b44a-1497-aa1a-d80061ab04.gif)
(*)クリスタPROの場合フレーム数が24に制限されているため、この方法は難しいかも知れません。EXを使用しているため現在検証ができません。
**************************
ループイメージの作成自体さほど難しくはありませんが、品質の善し悪しには偶然性が伴います。今回アップした素材は出来成りのため、品質的には改善が必要と考えています。今後品質アップを図るとともに、少しずつ種類を増やしていきたいと思います。
アニメーション素材
更新履歴
10月3日13時 素材4点追加、および追加に伴う説明のアップデート
10月7日22時 雨の降るエリアのサイズを変更する方法について追記