ドット絵 水・炎エフェクトの描き方｜32x32で再現

32x32の小さなキャンバスでも、水しぶきと炎はきちんと描き分けられます。
この記事では、4〜8色のパレットに絞りながら、「水しぶき1種」と「炎1種」を静止画から2〜4フレームの簡易アニメまで手順通りに組み立てる方法を、ゲーム用エフェクト前提で具体化します。

実際に32x32で色を足していくと、きれいにしたつもりの1pxがすぐノイズに変わるので、少色設計のほうが形の意図が前に出ます。
私も水と炎にそれぞれ2フレームだけ差分を足して動かしたとき、静止画との差は全体の描き直しではなく、流れる向きと明るい場所の移動だけで十分だと掴めました。

PNGで止め絵を仕上げ、GIFで最小限の動きを付けるところまで見据えて進めるので、ドット絵のエフェクトをこれから覚えたい人にも、ゲーム向けの小さな素材を自作したい人にも、そのまま使える内容です。

このサイトには現時点で関連記事はありません。内部リンクはまだ設置していないため、関連記事が公開された際に該当記事をこちらで案内します。

ドット絵で水・炎エフェクトを描く前の準備

座標と拡大確認のルール

最初のキャンバスは 32x32 で始めるのが基準です。
1,024ドットの中で形を整理する癖がつくので、水しぶきも炎も「何を見せたいか」がぶれません。
細部を増やしたくなったら 64x64 に上げます。
64x64は4,096ドットあり、32x32の4倍の情報量を持てるぶん、曲線の丸みや先端の揺れまで描き込めます。
ただ、水と炎のエフェクト練習では、最初から広いキャンバスに行くより、小さい面積でシルエットを詰めたほうが上達が早いです。

座標は左上を原点にして考えます。
つまり左上が x=0, y=0 で、右へ行くほどxが増え、下へ行くほどyが増えます。
このルールを先に固定しておくと、後で「水しぶきの接地位置を1px右へ」「炎の先端を2px上へ」といった修正が迷いません。
私は最初の下書き段階で、32x32なら y=24 に薄い灰色の1pxラインを仮置きします。
これは完成絵には残さない補助線で、水なら地面や水面との接触位置、炎なら根元の高さをそろえるための目印です。

さらに、真ん中下の接地感を早い段階で作るために、x=16, y=25 に1pxだけ仮置きしておく方法が効きます。
水しぶきなら「ここから跳ね上がる」、炎なら「ここから立ち上がる」という芯になります。
たった1pxでも、基準があると上下の広がりを決めやすく、重心がぶれません。
後で輪郭に吸収する前提なので、この段階では見栄えより位置決めを優先します。
表示倍率も準備の一部です。
高精細ディスプレイではピクセルの境目が見えにくいので、十分に拡大して、1px単位で置いた点が読める状態で描きます（例: 作業環境によっては200〜400%程度の拡大が使われます）。
グリッド表示は常にONで構いません。
ドット絵はピクセルが識別でき、グリッドに沿って意図的に置かれていることに価値がある表現なので、作業中に境界が曖昧なままだと判断を誤ります。

少色数設計と保存形式の注意

色は最初から増やしすぎないほうが、形の意図が前に出ます。
水も炎も 4〜8色 でスタートし、必要が出た場所だけ足す流れが安定します。
歴史的にはファミコンの1パレット4色という制約がドット絵文化に強く影響していて、この感覚を借りると「明るい色」「中間色」「暗い色」「輪郭か背景抜き」の役割を切り分けやすくなります。
今の制作環境では256色まで扱える場面が多いですが、それは技術上の上限の話で、32x32の練習ではその広さをそのまま使う必要はありません。

私自身、32x32で水しぶきに青を何段も足し、白の反射や半端な中間色を増やして 8色を超えた あたりで、急に輪郭が甘く見えたことが何度もあります。
描いている最中は情報量が増えて気持ちいいのですが、1歩引いて見ると、水滴の外形より色の差ばかりが目に入ります。
そこから5色前後まで削ると、飛沫の粒と大きな流れが一気に読み取れるようになりました。
Beforeでは「きれいに塗ったつもりなのに散らかって見える」状態で、Afterでは「どこが主役のしぶきかすぐ分かる」状態になります。
小サイズでは色数そのものがディテールではなく、ノイズ源にもなるわけです。

ここで関わるのが、アンチエイリアス（Anti-Aliasing: 輪郭の段差を中間色で緩和） と ディザリング（Dithering: 2色の交互配置で中間の見え方を作る） です。
どちらも便利ですが、32x32では入れた瞬間に実効色数が増えます。
斜め線をなめらかに見せるための手打ちアンチエイリアスは有効でも、広い面積に撒くと輪郭が溶けます。
ディザリングも境界をなじませる用途には使えますが、水面や炎の腹に広く敷くと、柄が先に見えて形が後ろに下がります。
準備段階では「あとで必要なら限定的に使う」くらいに留めるのがちょうどいいです。
作業中は背景と見分けがつく色を別レイヤー相当で置いておくと、輪郭の欠けや透過漏れを見つけやすくなります。
Asepriteのようにパレット管理やタイムライン、レイヤー保存をサポートするツールはこの工程と相性が良いです。
一方で dotpictなどモバイル寄りのツールは作業中に「レイヤー風」の管理が可能でも、エクスポート時にレイヤー情報がフラット化される場合があるという報告があります。
永続的にレイヤーを保持したいワークフローでは、Aseprite 等のレイヤー保存が明確なツールの併用を推奨します。

水・炎のスターターパレット

最初の1本として使いやすいのは、役割がはっきりした 5色構成 です。
水は外周の反射と内部の深さ、炎は中心の明るさと外縁の暗さを分けられれば成立します。
色を選ぶ段階で「何を描いている色か」が説明できるかどうかを基準にすると、後の修正が速くなります。

水用のスターターパレット（練習用の一例）として次の5色を例示します。
#ffffff をハイライト、#9fdcff を明部、#3fa7f5 を主色、#1e5aa8 を濃色、#0e2a47 を最濃色として使います。
これらは練習やチュートリアル向けの一例であり、"公認パレット"を意味するものではありません。
配布元や作者が提供する公式パレットを使用する場合は。

水エフェクトの基本 — 形は流れ、色は透明感で作る

流れの方向と言語化のコツ

水を水らしく見せるとき、最初に決めるのは色ではなく流れの方向です。
右から左へ流れるのか、下へ落ちるのか、斜めに跳ねるのか。
この向きが決まっていないまま粒を置き始めると、同じ青でも「雨」「ゼリー」「ガラス片」が混ざったような形になります。
32x32のような小さな画面では、1pxの向きの差がそのまま質感の差になるので、最初の判断がそのまま見た目を支配します。

言葉で先に整理すると、形の迷いが減ります。
たとえば「右から左へ流れる、中央は速い、端は遅い」と決めれば、中央には細長い流線やシート状の面を置き、端には丸い粒を残す、という組み立てが自然に決まります。
遅い水は表面張力が見えやすく、丸い粒になりやすいのが利点です。
反対に速い水は引き伸ばされるので、細長い線や薄い帯に寄ります。
ここを逆にすると、勢いのあるはずのしぶきが止まって見えます。

私は下書きの段階で「どこがいちばん速いか」を一度文章にしてから打ち始めます。
右から左へ払う水なら、先端は細く、根元はやや太く、飛沫は左側へ散る、と頭の中で言語化しておくわけです。
この一手間があると、描いている途中で粒を足したくなっても、流れに逆らう1pxを置かずに済みます。
Asepriteでフレームをまたいで確認するときも、この文章が基準になって、どのピクセルを動かすべきかがぶれません。

具体例として、速い流れを1本入れるなら、x=22〜26の範囲でy=10から13へ落ちる斜めの線を考えると組み立てやすいのが利点です。
主色の #3fa7f5 を2px幅で斜めに置くと、水がまとまって流れている芯ができます。
さらに外縁の上側に #9fdcff を1px沿わせると、進行方向に光が滑る感じが出ます。
この「主色の帯」と「上側の明るい縁」がそろうと、ただの青い線ではなく、水が前へ走っている印象になります。

外明内暗で作る透明感

水の色は、ただ明るく塗れば透明になるわけではありません。
透明感を作る基本は外周が明るく、内側ほど濃いという配置です。
外側に光が乗り、内側に深さがあるから、「中が透けて見える」印象になります。
水用パレットなら、外周に #9fdcff や局所的な #ffffff、内部に #3fa7f5、さらに厚みがある場所へ #1e5aa8 を入れる順番です。
最も暗い #0e2a47 は、小さな水滴ではほぼ使わず、深い影や重なりだけに絞ると濁りません。

この配色は、ガラスのように輪郭だけが光るわけではなく、水の厚みを見せるためのものです。
外明内暗が崩れて、内側が白く外周が暗い形になると、透明な液体ではなく色付きの固形物に寄って見えます。
とくに32x32では、白の面積が少し広がるだけで「発光」か「泡」に読まれやすく、水の軽さが消えます。

丸い粒を打つときは、この原理がそのまま使えます。
中心 x=12, y=12 に #3fa7f5 を置き、上下左右にも同色を足して十字形にすると、3x3の中に芯ができます。
四隅を塗らないことで、正方形ではなく2.5px相当の丸に見えます。
そこへ上側の外周だけ明るさを乗せると、水滴らしい反射が生まれます。
指示通りに置くなら、右上の x=13, y=11 と左上の x=11, y=11 に #9fdcff を1pxずつ入れる形です。
上側が少し明るく、中心が主色のまま残るので、粒の内部に透明な厚みが出ます。

ここで白を使いすぎると失敗します。
私も以前、輪郭をきれいに見せたくて外周を白でぐるりと囲ったことがありますが、その瞬間に水滴が「泡の塊」にしか見えなくなりました。
水というより、洗剤の泡が何個かくっついた塊です。
修正するときに効いたのは、ハイライトを途切れさせることでした。
白や明色の縁を一周つなげず、1〜2pxだけギャップを作ると、光が回り込みすぎないので透明感が戻ります。
輪郭全部が同じ強さで光る状態は、水よりプラスチックや泡に近い見え方になります。

ディザリングもこの段階では控えめで十分です。
水は面が濁ると一気に鈍く見えるので、#3fa7f5 と #1e5aa8 の境界に1行だけ、1pxおきに間引く程度が上限です。
広い面に市松模様を入れると、なめらかな液体ではなく、柄のついた素材に見えてしまいます。
透明感は色数の多さではなく、外周の明るさと内部の深さの差で作る、と考えたほうが崩れません。

飛沫サイズの作り分けと例ドット

水しぶきが単調に見える原因のひとつは、飛沫の大きさが全部同じということです。
大粒と微粒を混ぜると、手前と奥、勢いの強い部分と散った部分が分かれ、スケール感が出ます。
大きい粒だけだと重く、細かい点だけだと霧に寄ります。
水らしい散り方にするには、主役になる粒と、その周囲の小さな破片を同じ画面に置く必要があります。

大粒は3x3を基準に考えると整理しやすいのが利点です。
実際には9マス全部を埋めず、角を1px削って丸みに寄せます。
先ほどの x=12, y=12 を中心にした十字形は、そのまま使える基本形です。
中心と上下左右を #3fa7f5 にして、四隅を空けるだけで、四角いブロック感が抜けます。
さらに上側や進行方向側に #9fdcff を1px置くと、粒ごとの向きまで読めます。
主役の飛沫はこのくらいの密度があると、32x32でも「粒」と認識されます。

微粒は1pxか2pxで十分です。
ここで大事なのは、均等に散らさないということです。
速い流れの後ろに尾を引くように、進行方向へ向かって密度を変えます。
右から左へ流れるなら、主役の帯の少し左に1px点を数個、さらに離れた位置に2px未満の小さな破片を混ぜると、勢いでちぎれた飛沫に見えます。
全部を同じ間隔で置くと、装飾のラメのような見え方になります。

速い流れ本体と飛沫をつなぐときは、本体が細長く、周囲の粒が丸い、という対比が効きます。
x=22〜26、y=10→13 に置いた #3fa7f5 の斜め2px帯が主流なら、その周囲に置く飛沫は1pxや3x3未満の小粒にして、形を明確に分けます。
本体まで全部丸粒にすると、流れではなく粒の集合に見えます。
逆に飛沫まで全部細線にすると、金属片や火花に寄ります。
水の中には、速く伸びる部分と、ちぎれて丸く戻る部分が同居しています。

配置を詰めるときは、主役の流線を先に置いてから飛沫を散らす順番が安定します。
私も飛沫から先に打ったときは、粒の配置に引っ張られて流れの芯が曖昧になりました。
主線を決め、そのあとで大小差をつけながら周辺を埋めると、1px単位の情報が全部「同じ価値」にならず、画面の中に強弱が生まれます。
水は青い点を増やすほど水になるのではなく、流れる形と透ける色、それを補強する大小の飛沫がそろったときに、水として読めるようになります。

炎エフェクトの基本 — 上昇感と温度差をドットで作る

上昇感のシルエット設計

炎をそれらしく見せる第一歩は、色より先に上へ流れる形を決めるということです。
水が横や斜めの運動で読ませる表現なら、炎は縦方向の引っ張りで成立します。
赤い三角を置いただけでは、熱で揺れているというより、記号としての「火」に見えます。
そこで、根元を太く、上へ行くほど幅を削り、先端だけを細く尖らせて、空気に引かれて立ち上がるシルエットを作ります。

32x32の中で基本形を組むなら、根元の幅8pxを基準に置くと芯が決まります。
たとえば x=12〜19、y=24 に #d94c3a を敷き、そこから y が1段上がるごとに左右を1pxずつ削っていく構成です。
y=23 は6px、y=22 は4pxという具合に絞り、y=16 で2px、y=12 で1pxまで細くすると、上昇の勢いが自然に出ます。
最上部は #ff9b3f で1pxだけ尖りを作ると、固い頂点ではなく、抜けていく熱の先端に見えます。

このとき、左右をきれいに対称へ寄せすぎないほうが炎らしくなります。
片側だけ1px残す段を混ぜたり、途中で舌のような小さな出っ張りを作ったりすると、燃え方の揺れが出ます。
ただし広げる方向は横ではなく上です。
横に膨らませると、火柱ではなく布や葉のような形に寄ってしまいます。
炎は上方向への流れが主役で、揺らぎはその中に入る副次的な変化として扱うとまとまります。

中心明・外側暗の温度差

炎の色設計では、中心が明るく、外側が暗いという温度差がそのまま立体感になります。
外周まで明るくしてしまうと、熱の中心がどこにあるのか消え、面全体が同じ温度に見えます。
そうなると発光体ではなく、赤やオレンジの紙片のような見え方になります。
炎を「燃えている形」にするには、最明部を内側へ押し込み、外炎は暗く残す必要があります。

基本の外形を #d94c3a で作ったら、その内側に #ff9b3f を差し込み、さらに中心へ #ffd06a と #fff2a8 を絞って入れていきます。
具体的には、x=15〜17、y=21〜18 に #ffd06a → #fff2a8 を縦2〜3pxで差し込み、根元寄りをやや太く、上へ行くほど細くすると、内炎だけが立ち上がる構造になります。
明るい色が外周に触れないので、火の中心だけが高温に見えます。

この配色では、炎用簡易パレットの明度差がそのまま効きます。
#fff2a8 は内炎の最明色、#ffd06a はその周辺、#ff9b3f は主たる炎色、#d94c3a は外側の暖色、#6b1e28 は外縁の締め色です。
外側まで #ff9b3f や #ffd06a を広げると、炎が太って見えて輪郭も甘くなります。
私は以前、明るいほうが火らしいと思って外側までオレンジを回したことがありますが、画面の中で炎が膨張して見え、熱源ではなく発光したゼリーのようになりました。
修正では、外縁に #6b1e28 を1pxだけ点在させたところ、輪郭が一気に締まり、中心の明るさも前に出ました。
暗色は面で塗るより、所々を被せるだけで効きます。

ディザリングを使う場合も、役割はグラデーションの代用ではなく揺らぎの補助です。
#ff9b3f と #d94c3a の境界に、1px間隔の点を2〜3箇所だけ置くと、熱で縁が崩れている印象が出ます。
ここを広い市松模様にすると、炎の面がざらついて見え、燃焼ではなくテクスチャの柄になります。
炎は色の多さで見せるより、中心明・外側暗の差を崩さないほうが読めます。

火の粉の配置と量感

火の粉は飾りではなく、炎の周囲に熱が抜けている証拠として置きます。
本体だけだと、上昇する塊には見えても、燃焼の余韻までは出ません。
1px〜2pxの小さな点を上方や周囲へ少量散らすと、炎の温度と空気の流れが補強されます。
ここでも優先順位は上方向です。
左右均等にまくのではなく、炎の先端やや上、あるいは片側へ流れるように置くと、熱が上へ逃げている印象になります。

色は本体より少し抑えて考えるとまとまります。
近い位置には #ff9b3f、やや離れた位置には #d94c3a を使うと、飛び出した直後の熱い粒と、冷え始めた粒の差が出ます。
内炎と同じ #fff2a8 を火の粉に多用すると、本体より周辺が目立ってしまいます。
火の粉はあくまで補助なので、数は絞ったほうが炎本体のシルエットが保てます。
数個の1px点と、ところどころ2pxのまとまりを混ぜるだけで十分です。

配置は「本体から切り離された距離」で強弱を作れます。
先端のすぐ上に1pxを2つ、そのさらに上に1pxを1つ、横には離して1pxを1つ、といった具合に密度を薄くしていくと、上へ消えていく流れになります。
周囲へ均一に散らすと、火の粉ではなくノイズのリングに見えます。
逆に、本体に近い場所へ少し偏らせると、燃えている勢いが画面の中に残ります。

火の粉を打つときも、炎本体の根元が太く、先端が細い構造は崩さないことが前提です。
本体の上昇感が曖昧なまま粒だけ増やすと、熱が上がっているのではなく、赤い点が浮いているだけになります。
炎は本体の流れ、中心と外側の温度差、その周囲に漂う小さな粒が揃って、ようやく「燃えている」状態として読めます。

実践ステップ：32x32で水しぶきを描く

下地塊と腕のシルエット作成

32x32では、最初に水の「模様」を考えるより、どこで地面に当たって、どこへ跳ねるかを塊で決めたほうが形が安定します。
ここでは5色だけを使います。
簡易パレットは #ffffff、#9fdcff、#3fa7f5、#1e5aa8、#0e2a47 です。
役割は、白が最強の反射、#9fdcff が明部、#3fa7f5 が主色、#1e5aa8 が内部の濃色、#0e2a47 が最も深い影という並びで考えると組み立てやすくなります。

まず、基準線を y=24 に置き、接地点の塊を #3fa7f5 で作ります。
横一直線に x=13〜19,y=24 を7px、その1段上の y=23 には x=14〜18 を5px、その上の y=22 には x=15〜17 を3px置きます。
下が広く、上が狭い三段の台形にすると、落下して地面にぶつかった直後の厚みが出ます。
この時点では細部を入れず、中央に重さがあることだけを優先します。

次に左右へ飛沫の腕を伸ばします。
右腕は x=21,y=23 を起点に、右上へ2段、各段2px幅で置きます。
たとえば x=21〜22,y=23、x=22〜23,y=22 のように、少し上がりながら外へ逃がす形です。
左腕は x=11,y=23 から左上へ同じ考え方で2段、x=10〜11,y=23、x=9〜10,y=22 と置くとバランスが取れます。
左右を完全対称にすると記号っぽくなるので、角度は揃えても、長さや空き方に1pxの差が残るくらいでちょうど水っぽく見えます。

この段階では、シルエットから外れた孤立点をまだ置かないほうがまとまります。
水しぶきは飛沫も含めて水ですが、最初から粒を散らすと中心の塊が弱くなります。
私はここで先に粒を打ってしまい、あとから本体を足して濁らせることがよくありました。
先に「接地した塊」と「左右へ逃げる腕」を決めると、その後の影や反射の位置も迷いません。

外周ハイライトと内側の濃色

シルエットができたら、順番通りにベース色から内部の濃色、そこからハイライトへ進めます。
まずベース色の整理として、中核部の x=15〜17,y=23〜22 を #1e5aa8 に置き換えます。
外側が #3fa7f5、中心寄りが #1e5aa8 になるだけで、水の外周が薄く、内部に深みがある構造ができます。
水は炎と逆で、光が外周に乗りやすく、内側に濃色を抱えたほうが透明感が出ます。

そのうえで影を入れます。
接地点のすぐ上、x=15〜17,y=23 を #0e2a47 の1px帯にして締めると、着水の厚みが出ます。
さらに腕の根元も各1pxだけ #0e2a47 を置きます。
右なら x=21,y=23、左なら x=11,y=23 のように、塊と腕のつなぎ目を暗くすると、薄い膜が横へ伸びたのではなく、中心から勢いよく飛び出した形として読めます。
影を広げすぎると水全体が重くなるので、最濃色は帯か点で止めます。

明るい側は外周の上側に置きます。
右腕の上縁には x=22,y=22〜21 に #ffffff を2px、左腕には x=10,y=22 に1px、中核の上縁には x=16,y=21 に1px入れます。
白を線で囲うのではなく、反射が乗る場所だけに点在させるのがコツです。
さらに必要なら、その周囲に #9fdcff を薄く添えて、白へ向かう明部の準備をします。
白と主色の間に1段だけ明色があると、反射が突然浮かずに馴染みます。

ここで外周ハイライトを連続させると、水滴の輪郭ではなく白い縁取りに見えます。
以前、腕の上辺を白でつないだことがありますが、その時はガラス片のように固く見えました。
途中を1px抜いて破線にしただけで、反射が面に散った印象へ変わり、急に軽い水へ戻りました。
水のハイライトは「輪郭線」ではなく「拾った光」なので、つながりすぎたら切る判断が効きます。

飛沫の追加とノイズ整理

本体の明暗が決まったあとで、飛沫を足します。
順番を逆にすると粒だけが先に目立つので、シルエット→ベース色→影→ハイライト→飛沫追加の流れは崩さないほうが仕上がりが安定します。
ここでは1px粒を3つ、2px粒を1つだけ足せば十分です。
例として、1px粒は x=23,y=20、x=20,y=18、x=9,y=20 に置き、縦2pxの粒は x=7,y=22〜21 に置きます。
粒の色は本体の主色である #3fa7f5 を基本にし、各粒の上側へ #9fdcff を1pxだけ添えると、粒の上面に光が当たっているように見えます。

たとえば x=23,y=20 に主色を置いたなら、その上側か斜め上に明色を1pxだけ寄せます。
縦2px粒も同じで、x=7,y=22〜21 の本体に対して、上端側へ #9fdcff を触れさせると、小さくても立体感が出ます。
ここで白を使うと粒だけが強く光りすぎるので、孤立した飛沫には #9fdcff までで止めたほうが本体との主従が崩れません。

仕上げでは、余分な線を消す意識で眺めます。
外周ハイライトは連続させず、1〜2pxのギャップを必ず残します。
もし #3fa7f5 と #1e5aa8 の境界を少しだけ馴染ませたいなら、ディザリングは境界の1列だけにとどめます。
小さな水しぶきで市松模様を広げると、透明感ではなく表面の柄に見えてしまいます。
1列だけなら、境界の硬さを少し崩しつつ、塊としての読みは保てます。

見た目の確認も描画の一部です。
拡大表示では1px粒が密集していないかを見て、等倍では全体がひとつの青い塊に潰れていないかを見ます。
32x32は初心者の練習サイズとして扱いやすい一方、1pxの置き忘れや置きすぎがそのままノイズになります。
中心の塊、左右の腕、少量の粒という三層だけに整理すると、水しぶきとしての読みが崩れません。

実践ステップ：32x32で炎を描く

根元太・先端細のシルエット

炎も水しぶきと同じで、最初に細部へ入るより、読みやすい塊を先に決めたほうが形が安定します。
今回は 32x32 に、暖色5色の #fff2a8, #ffd06a, #ff9b3f, #d94c3a, #6b1e28 を使います。
色数をこの程度に絞ると、炎の温度差と輪郭の揺れが整理され、1pxの意味がはっきり残ります。

描き始めは根元の塊からです。
まず #d94c3a で x=12〜19,y=24 を横8px、その上の y=23 は x=13〜18 の6px、さらに y=22 は x=14〜17 の4pxにします。
下で広く、上に行くほど絞るだけで、発生源を持った炎の基本形が立ちます。
ここで先端まで一気に尖らせようとすると、下の重心が弱くなって、赤い三角形に見えやすくなります。
根元に厚みがあると、上へ抜ける勢いが後から乗せやすくなります。

その次に、外炎の輪郭を #6b1e28 で所々1pxだけ重ねます。
輪郭を全部なぞるのではなく、左右の外縁に欠けや張り出しを作る感覚です。
たとえば左側なら y=21 で外へ1px張り出し、y=19 で1px内側へ戻すと、直線ではない揺らぎが出ます。
右側も同じように、上下で位置を少しずらすと炎の舌が波打って見えます。
外縁が同じ厚みで続くと、熱ではなく切り紙の輪郭になります。
私はこの段階で整えすぎて、炎というより赤いアイコンに見えてしまうことがありました。
左右どちらかに1pxのムラを残すだけで、静止画でも揺れが読み取れます。

先端もこの時点では太く残しすぎないほうがまとまります。
以前、先端を3px幅のまま止めたことがありますが、そこで形が止まって見えてしまい、炎が上へ昇るというより棒の先が丸まったような印象になりました。
そこから最頂部を1px尖りへ直すと、視線が上へ抜けて、炎らしい上昇感が一気に戻ります。
炎は根元の量感と、先端の細さの差で動きを見せる表現です。

内炎（最明）と外炎（暗）の役割

シルエットができたら、順番通りに 根元の塊 → 外炎 → 内炎 と進めます。
炎は中心ほど熱く、周囲ほど冷えて暗く見えるので、色の配置は内明外暗が基本になります。
中心を最明色にする理由は単純で、熱源が中央にあり、そこがいちばん強く発光しているからです。
周囲へ行くほど温度が下がるため、暗い赤や焦げた色が外側に回ると、温度勾配がそのまま絵として読めます。

内炎は中心の x=16 付近に差し込みます。
まず #ffd06a を y=22〜20 に縦3px、その上へ #fff2a8 を y=19〜18 に縦2px置きます。
下側に明るい色の面積を少し残し、上へ向かうほど細く見えるようにすると、根元で燃え上がり、先端で消えていく流れが作れます。
ここで明るい色を横に広げすぎると、炎全体が平たく発光して見えてしまいます。
明部は中央に集め、外側の #d94c3a と #6b1e28 に対して芯を通すほうが、火としての厚みが出ます。

先端の整理では、最上部を #ff9b3f → #ffd06a → #fff2a8 の順で1pxずつ連ね、最頂点を1pxにします。
たとえば x=16,y=13 を #fff2a8 にすると、視線がそこへ集まり、炎の抜けが明確になります。
中腹の主色として #ff9b3f を1px挟むと、急に白へ飛ばず、温度が上がりながら細くなった印象になります。
明るい2色の差は外縁の暗色同士ほど大きくないので、面で使うより点と短い列で効かせたほうが埋もれません。
32x32では、最明部は「広い光」ではなく「芯の輝き」として置くとうまくまとまります。

火の粉と外縁の不規則性

本体の明暗と先端が決まったあとで、火の粉を足します。
順番を逆にすると、散った点だけが先に目に入り、肝心の炎の芯が弱く見えます。
ここでは #ffd06a で x=15,y=10、x=20,y=12、x=12,y=14 に1pxずつ置きます。
配置は落下ではなく上昇を意識して、炎の上方へ散らします。
火の粉は重力で落ちる灰ではなく、熱で持ち上がった小さな明部として置いたほうが、炎の勢いとつながります。

1つだけ縦に伸ばすと、火の粉の動きに差が出ます。
x=18,y=11〜10 を2px縦にすると、短い軌跡のように見えて、他の点とのリズムが生まれます。
全部を同じ1px粒にすると整いすぎて、飾りの点列に近づきます。
逆に数を増やしすぎると、炎より周辺ノイズのほうが強くなるので、このくらいの密度で十分です。
火の粉は本体の延長として考え、主役ではなく上昇感の補助に回します。

仕上げでは、外縁が均一な厚みになっていないかを見ます。
もし #6b1e28 の帯が上下で同じ幅に並んでいたら、どこか1か所を1px抜きます。
上側を抜けば燃え途中の軽さが出て、下側を抜けば根元の熱で輪郭が揺らいで見えます。
炎の外縁は、閉じた線ではなく、熱で崩れ続ける境目です。
きれいに囲うほど炎から離れていくので、少し崩れている状態がむしろ正解です。

ここまでを通すと、手順は 根元の塊を置く、外炎を作る、内炎を差し込む、先端を整理する、火の粉を足す という流れになります。
工程ごとに役割が分かれているので、途中で形が迷子になりません。
32x32の炎は情報量で押すのではなく、根元の量感、中心の明るさ、外縁の揺れの3つを揃えると、小さくても温度と動きが伝わります。

2〜4フレームで動かす水と炎のアニメーション

水：2フレームと4フレームの設計

静止画の水しぶきが作れたら、次は輪郭の一部だけを動かしてループにします。
水は形そのものを描き替えるより、波形や飛沫を横や斜めにずらしたほうが自然です。
水面やしぶきは一瞬ごとに別物へ変形しているように見えますが、ドット絵ではその印象だけ拾えば十分で、差分は1〜2pxで足ります。
むしろ小さな差分のほうが、32x32の中では流れとして読めます。

2フレームで組むなら、静止画を複製して片方だけ少し崩します。
たとえばフレーム1では右腕の上端を1px右上へ、左腕を1px左上へずらし、飛沫を1粒だけ消して別の位置へ1px足します。
これだけで左右へ張る水の圧が出ます。
フレーム2ではその差分を元位置へ戻します。
往復運動なので構造は単純ですが、上端が交互に持ち上がるだけで波打ちの周期が見えます。
水は「増やす」より「ずらす」が効きます。

4フレームに増やすと、往復よりも循環の印象を作れます。
このとき基準点をひとつ決めて、そこは動かしません。
たとえばしぶきの接地点が y=24 にあるなら、その列を固定したまま、腕の先端だけをフレームごとに右上、右、右下、元位置へ1pxずつ回します。
接地点まで動かすと、しぶき全体が地面から浮いて見えるからです。
先端だけをサイン波のように巡回させると、水圧でしなる動きになります。
Asepriteのタイムラインで並べると、この種の差分はオニオンスキン越しでも把握しやすく、どこを固定したかが崩れません。

以前、静止画を動かそうとして水の輪郭を毎フレーム描き直し、飛沫の数まで変えたことがありました。
そのときは勢いを出したつもりでも、実際には輪郭がチカチカして、水の透明感よりノイズが先に立ちました。
そこから先端の移動と飛沫1粒の出入りだけに絞ると、同じ2フレームでもぐっと滑らかに見えました。
水のアニメーションは、情報量ではなく周期の一致で見せるものです。

炎：2フレームと4フレームの設計

炎は水と逆で、横へ流すより上へ昇らせる意識が中心になります。
輪郭全体を揺らすのではなく、先端が上昇しながら細く崩れ、外縁が交互に痩せる流れを作ると火らしく見えます。
前の静止画で作った根元の量感はそのまま残し、上側だけを少し崩すと温度差が保てます。

2フレームの炎は、先端と側面だけ触る設計が扱いやすいのが利点です。
フレーム1では先端の #fff2a8 を1px上へ上げ、側面の外縁にある #6b1e28 を数か所だけ1px内側へ寄せます。
これで火が上へ吸われながら、外側が燃え崩れる形になります。
フレーム2では同じ崩しを反対側で行います。
右を痩せさせたら次は左、左を尖らせたら次は右という交互運動にすると、炎がその場で点滅するのではなく、揺らぎながら立ちのぼって見えます。

4フレームでは循環の順番をはっきり作ると破綻しません。
1から2で先端を1px上げ、2から3で左右どちらかへ1px寄せ、3から4で先端を1px下げながら内炎の縦長を1px短くし、4から1で元の形へ戻します。
こうすると上昇、偏り、収縮、復帰の流れが1周します。
具体的には、x=16,y=13 の #fff2a8 をフレーム2で y=12 へ、フレーム3で x=15,y=12 へ斜め移動し、フレーム4で x=16,y=13 に戻すと先端の揺れが素直に出ます。
頂点がただ点滅するのではなく、熱で位置を変えながら戻るので、短いループでも単調になりません。

炎でありがちな失敗は、全体を同じ幅で上下させるということです。
これをやると、火ではなく赤いゼリーのような動きになります。
根元は重く残し、変化は上へ行くほど細くする。
先端と外縁だけが先に崩れる構造にすると、上昇感と温度差が同時に立ちます。

ループを壊さない差分の作り方

2〜4フレームのループは、描き足す力より戻す設計のほうが効きます。
フレームを増やしたのにぎこちなく見える原因の多くは、途中の差分が大きいことではなく、1周したときに位置や形の周期が噛み合っていないということです。
最初と最後のフレームで別の絵になっていると、再生が頭へ戻る瞬間に段差が出ます。
水なら先端の軌道、炎なら頂点の位置が円や波の一部として循環しているかを見ます。

運用としては、元の静止画を複製してから毎回1か所だけ動かします。
複製したフレームで輪郭、内側の色、飛沫、火の粉をまとめて変えると、どの差分が効いたのか追えなくなります。
1フレームにつき1テーマだけ動かすほうが、失敗しても戻しどころが明確です。
水なら先端の移動と飛沫1粒の出入り、炎なら先端の移動か外縁の痩せのどちらかに絞ると、動きの意味が濁りません。
差分が多すぎると、アニメーションではなくノイズ列になります。

書き出しは GIF でまとめるのが手軽です。
再生速度は環境や表現意図に依存するため固定の正解はありませんが、例として 6〜12fps を試してみると、水はゆるく、炎はやや速く見せる調整がしやすいことが多いです。
最終的には実機や共有先で再生確認して調整してください。

よくある失敗と修正方法

配色の統合とコントラスト

初心者の段階でまず起こりやすいのが、物足りなさを色数で埋めようとしてしまうということです。
Asepriteでもdotpictでも、並んだ色を見ていると1色ずつ足したくなりますが、32x32ではその判断が逆効果になりやすく、形より色の散り方が先に見えてしまいます。
ドット絵全体では256色まで扱える形式も一般的ですが、このサイズの水や炎なら 4〜8色 に収めたほうが意図が通ります。
ファミコン時代の少色文化が今も通用するのは、制約があるほどシルエットと明暗の役割が明確になるからです。

修正の順番も決めてしまったほうが崩れません。
まずやるのは似た色の統合です。
水なら明るい青を何段も並べるより、主役になる中間色と影色を残したほうが透明感が出ます。
炎も橙と赤の間に中途半端な色を増やすより、中心の明るさと外縁の暗さを分けたほうが熱が伝わります。
そのうえで、内外の明暗差をはっきりさせると見た目が締まります。
水は外周に明るさ、内部に濃さを置く。
炎は中心を明るく、外へ行くほど暗くする。
この骨組みが見えた時点で、絵は急に読みやすくなります。

水面反射も、描き込みすぎると失敗しやすい部分です。
反射を全体に敷くと、液体の面ではなく模様に見えます。
実際には、演出的においしい部分だけに絞ったほうが水らしさが残ります。
反射帯を入れるなら、上縁に #9fdcff を1pxだけ走らせると光を拾った感じが出ます。
下縁まで囲うと帯が固まり、金属片のように見えやすいので省きます。
水は全部を説明しないほうが、抜けのある光になります。

炎で多いのは、明るい色を外側まで広げてしまう失敗です。
これをやると燃えているというより、発光した色の塊になります。
最明色の #fff2a8 は中心の2〜3pxにとどめ、外縁は #6b1e28 を点在させて締めると、内側の熱と外側の冷えが分かれます。
炎の輪郭がぼやけたときほど、明色を足すのではなく暗赤を置いたほうが温度差が戻ります。

輪郭の不規則性の作り方

輪郭は整っているほど良い、と思い込みやすいのですが、水と炎はその感覚をいったん外したほうがうまくいきます。
以前、私は水しぶきの輪郭をきれいに囲めば完成度が上がると誤解して、外周を均一な1px線でそろえたことがありました。
その結果、水なのに透明感が消えて、薄いプラスチック片のような見え方になりました。
解決したのは描き足しではなく、輪郭の一部を1pxだけ抜いたことでした。
閉じすぎた輪郭を少し壊すだけで、急に液体の軽さが戻ります。

水では、外周ハイライトを連続線で囲わないのがコツです。
明るい縁を全部つなぐのではなく、破線状に置くと表面が揺れて見えます。
とくに上辺や流れの先端は、1px置く、1px空ける、形に応じて2pxつなぐ、といった小さなムラが効きます。
均一な縁取りは人工物に近づきますが、途切れた縁取りは水面の反射に見えます。
輪郭の内側に濃色を詰め、外側の明色をところどころ切ると、硬さが抜けます。

炎は逆に、外縁の暗さを揺らして不規則性を作ります。
外縁を #6b1e28 で1pxずつ出し入れし、右は少し張る、左は少し痩せる、と交互に崩すと舌状の揺れになります。
ここが均一だと、炎が上へ昇らず、三角形の赤い塊に見えます。
先端だけ尖らせても火にならないのは、外側の削れ方に変化がないからです。
根元は太く残し、上へ行くほど輪郭を細く乱すと、熱で崩れる形が自然に出ます。

ディザリングも輪郭の補助として使えますが、入れ方を誤るとただのノイズになります。
水では境界に1列だけ置くくらいで十分で、面全体に散らすと濁ります。
炎では隣り合う2色の間だけに限定し、点を間引きながらつなぐと温度差の橋渡しになります。
明るい黄と暗い赤を直接まだらにつなぐと粒が暴れるので、必ず隣接色同士で扱います。
小さいキャンバスでは、ディザリングは質感ではなく移行の補助として使ったほうが破綻しません。

ループ継ぎ目とノイズ除去のチェック

動かしたときの違和感は、描いている最中より書き出して再生した瞬間に出ます。
中でも多いのが、ループの継ぎ目で先端が跳ねる症状です。
これは感覚で見ても気づけますが、短いアニメほど座標で見たほうが早いです。
1フレーム目と最終フレームを並べて、先端の位置が同じ座標に戻っているかを確認します。
炎なら、先端の #fff2a8 が x=16, y=13 に戻るかを見るだけで、周期のズレがすぐ分かります。
水でも、飛沫の先端や接地点が別位置に残っていると、再生の切り返しで一段跳ねます。

ノイズ除去では、1pxの迷子ドットが厄介です。
飛沫や火の粉を散らしたあと、そのまま気分で残した点が背景の上で孤立していると、意図した粒ではなくゴミに見えます。
こういう点は拡大表示で探すとすぐ見つかります。
とくに水しぶきの周囲にある孤立1pxの白、炎の横に残った暗赤1pxは、情報ではなく視線の引っかかりになります。
形から独立している点だけを掃除すると、同じフレーム数でも画面の落ち着きが変わります。

水面反射の描きすぎも、アニメーションにすると目立ちます。
静止画ではきれいに見えても、反射帯が毎フレーム広く点滅すると、水の流れではなく表面の模様が明滅しているように見えます。
反射は常に全部を動かす必要はなく、見せ場の列だけに残したほうがループが素直です。
炎でも同じで、外側まで明るくした状態で揺らすと、火柱ではなく発光物体の点滅になります。
明るい場所を中心に閉じ込め、周囲は暗く締めておくと、2〜4フレームでも熱の芯がぶれません。

自然現象表現を広げる次の一歩

題材別の着眼点

水と炎を描き分ける練習は、そのまま他の自然現象へ広がります。
核になるのはどちらも流れの設計だという点です。
形がどこから生まれ、どこへ抜け、どこで崩れるかを先に決めると、小さな画面でも現象の方向性が立ちます。
差が出るのは質感と光り方で、水は透明感や反射をどう抜くかが効き、炎は自分で光る面積と温度勾配の置き方で印象が変わります。

この見方を持つと、雷、煙、波紋、マグマも整理できます。
雷は鋭いジグザグの流れを先に立て、中心を明るく、枝分かれを細くすると電気らしい緊張感が出ます。
煙は上昇しながら広がるので、炎より輪郭を崩し、外側を暗くするだけでなく、内側に薄い明るさを残して明暗が反転する場面も拾うと、熱が抜ける途中の感じが出ます。
波紋は同心円の広がりが主役なので、丸の正確さより、どの輪が先に消えるかを決めるほうが画面が落ち着きます。
明るさは外側が少し明るく、内側が沈む配置にすると水面の段差として読めます。
マグマは炎に近い発光体ですが、流れが遅く重いので、内側の高温を明るく見せつつ、冷えた縁を暗く固めると、液体と岩の中間の重さが出ます。

私がゲーム用の攻撃エフェクトで「炎から煙へ移る瞬間」を詰めたときも、足したのは派手な描き込みではなく2フレームだけでした。
そこで効いたのは、中心明の面積を少し詰めたということです。
黄色や橙を外へ広げるのではなく、明るい芯を小さくして周囲の暗さを増やすだけで、燃焼が落ち着き、温度が下がって煙へ渡る感じが自然に出ました。
題材が変わっても、観察した特徴を全部入れるのではなく、「流れ」と「光の規則」に絞って制約にするほうが、画面は締まります。

次のアクションチェックリスト

応用に進むなら、いきなり新題材へ飛ぶより、水しぶきか小さな炎をもう一度描き直すのが近道です。
Asepriteでもdotpictでも、まずは32x32の中で4色前後に絞り、流れだけで読ませる一枚を作ってください。
色数を抑えると、どのドットが形を支え、どのドットがただの飾りかが露骨に見えてきます。

そのあとで2フレームを追加し、静止画を動きのある設計へ変えます。
ここで見るべきなのは枚数の多さではなく、1フレームごとに流れの方向が維持されているかです。
水なら粒の移動先、炎なら明るい芯の上昇先がぶれていないかを追うと、短いループでも説得力が残ります。

仕上げでは、拡大表示だけで満足せず、100%の見え方にも戻って確認します。
1pxの白や暗赤は、拡大では演出に見えても、等倍では単なる引っかかりになることがあります。
逆に、等倍だけ見て整えたドットは、拡大すると役割のない点として浮きます。
両方の倍率でノイズを整理してから書き出すと、静止画ならPNG、アニメならGIFのどちらでも破綻しません。
GIFは256色までなので、少色で組み立てるこの記事のやり方と相性が良いです。
共有するときは拡大表示のプレビューも添えると、1px単位でどこを意図したのかが伝わります。

比較リストの要点整理

水と炎の比較をもう一度短く掴むなら、水は流れ方向を優先して、外周のハイライトで軽さを見せ、遅い部分は丸く、速い部分は線で処理します。
炎は上昇を優先して、中心を明るく外側を暗くし、根元を太く先端を細くして熱の抜け方を見せます。
どちらもシルエット先行ですが、水は透明体としての抜け、炎は発光体としての芯が判断の分かれ目です。

この2つを並べると、共通点と違いがはっきりします。
共通点は、どちらも模様ではなく流れを描くということです。
違いは、質感と光り方にあります。
水は反射と透過のバランスで成り立ち、炎は自発光と温度差で成立します。
ここを入れ替えると、水は金属片に寄り、炎は色付きのゼリーのように見えます。

次の題材へ進むときも手順は同じです。
観察して、現象の特徴を制約として切り出し、1px単位で検証する。
この順番を守れば、雷でも煙でも波紋でもマグマでも、表面だけを真似た絵ではなく、動きの理由があるドットに育っていきます。