ドット絵の雨

ドット絵のゲームで雨を表現する要素は、通常2つあります。画面全体に降る雨筋と、雨粒が地面に当たるときのしぶきです。以下のオーバーレイはタイル状に並べられるため、小さなループ1つでどんなサイズの画面も覆えます。しぶきは雨粒が落ちた場所で再生できます。

ここにあるエフェクトはすべて無料です。各エフェクトのページには、アカウント登録なしで使えるDOWNLOAD GIFとPNG SHEETボタンがあります。ファイルは背景が透明で、エフェクトに合わせてトリミングされており、毎秒30フレームで再生されます。先にエフェクトを変更するには、OPEN IN THE STUDIOを押してください。無料アカウントでは1日に3個のエフェクトをエクスポートできます。

雨のループとオーバーレイ

ドット絵の雨オーバーレイドット絵の雨ループピクセルの雨ドット絵の雪降るオーバーレイ

しぶきと嵐

ドット絵の雨粒と水しぶき落雷ドット絵の落雷ドット絵の滝ループ

1つのタイルで画面全体を覆う

ドット絵の雨オーバーレイは縦横どちらにもタイル状に並べられ、時間的にもループするため、端がつながり継ぎ目ができません。画面全体にテクスチャとして繰り返し配置するか、視差レイヤーとしてゆっくりスクロールさせましょう。GodotではTextureRectに配置し、Stretch ModeをTileに設定します。UnityではDraw ModeをTiledに設定したスプライトを使います。GameMakerではタイル状の背景レイヤーを使います。詳しくはタイル状に並べられる雨と雪のガイドをご覧ください。

自然に見える雨にするには

• 2つのレイヤー。手前に速く明るい雨筋、奥に遅く暗い雨筋を配置すると、ほとんど負荷をかけずに奥行きを表現できます。
• 傾きをつける。数度傾けると風があるように見え、真下に降らせると穏やかに見えます。雨筋の角度はすべて揃えましょう。ばらばらだとノイズのように見えます。
• 短い雨筋。ドット絵では、長い線よりも3～6ドットの長さの雨筋のほうが自然に見えます。
• しぶきで説得力を出す。地面にしぶきを少し加えると、細い雨でも強く降っているように見えます。ドット絵の雨粒のしぶきを床のランダムな位置に出しましょう。
• 嵐には光を。数秒ごとに雷鳴や稲妻を発生させ、画面を一瞬明るくすると、雨が嵐に変わります。

スタジオで調整する

1. ドット絵の雨オーバーレイをスタジオで開きます。
2. Quick tweaksのMoreまたはFewerで雨の強さを調整し、FasterまたはSlowerで降る速さを調整します。
3. ステージツールバーのShow tiledを押すと、キャンバスの周囲に複製が表示され、継ぎ目がないか確認できます。
4. Exportを押して、SpritesheetまたはGIFを選びます。タイル状のエフェクトは常にタイル1つ分だけを書き出します。