ドット絵の炎と光エフェクトの描き方

ドット絵の炎と光は、どちらも中心が最も明るく、外周に向かうほど暗く薄くなる同じ発光ロジックで描けます。
ゲーム会社でドット絵を担当していた頃、松明の炎を8フレームで作り込んだら動きが破綻し、3フレームのループに作り直した途端に馴染んだことがあり、順番を間違えないだけで仕上がりは大きく変わると実感しました。
色設計では白から暗赤までのランプを組み、明部を黄側、暗部を紫赤側へ寄せるヒューシフトを入れると、少ない色数でも一気に発光感が立ちます。
形、色、動きの順で組み立てれば、炎も光も同じ考え方で安定して作れるでしょう。

完成イメージと発光の基本原理

炎と光の表現は別々に見えて、実際には「中心が最も明るく、外周へ向かうほど暗く、薄くなる」という同じ発光ロジックで組み立てられます。
ここを先に共有しておくと、色をどこで切るか、どの範囲まで光を広げるかの判断がぶれません。
ドット絵では連続したグラデーションが使えないぶん、2〜4段階の差をどう置くかが見え方を決めます。

炎と光は同じ『中心が明るい』ロジックで描ける

新人時代は影から塗り始めてしまい、中心が暗くなったせいで「光って見えない」と指摘されたことがあります。
そこから最明部を先に置く癖に変えた途端、同じ色数でも一気に発光して見えるようになりました。
発光表現は暗い部分を足す作業ではなく、最も強い光をどこに置くかで成立するのだと体で覚えた瞬間です。

炎も光も、中心に白や淡い黄を置き、外周へ行くほど黄、橙、赤、暗赤へ落としていくと安定します。
さらに明るい色ほど黄側、暗い色ほど赤や紫側へ寄せるヒューシフトを入れると、同じ色数でも熱と輝きが乗りやすいです。
白・淡黄・黄・橙・赤・暗赤の5〜7色を軸にすると、見た目と編集負荷の両方を整えやすくなります。

ドット絵では段階的なグラデーションで光を表す

ドット絵は写真のような連続グラデーションがそのまま効かず、明部から暗部へ段階的に切り替わる表現になります。
だからこそ、色の境目をどこに置くかが輪郭の硬さや発光の強さを左右します。
色を増やせば滑らかになるわけではなく、むしろ4〜8色に絞ったほうがノイズが減って、アニメーションでも破綻しにくいのが実感として大きいです。

背景の暗いダンジョン用の篝火を、外周まで明るく塗りすぎて「光が滲まない」状態になったこともありました。
そこで外周を薄く透かし、背景に溶ける余白を残すように直したところ、ようやく光が空気に乗って見えるようになりました。
光は塗り足すより、どこを薄く抜くかで強くなる。
おすすめの考え方です。

この記事で作る完成形のゴールイメージ

完成形のゴールは、中心が白く強く光り、外周がふわっと薄れて背景に溶ける状態です。
ここまで見えていると、塗りすぎて重くなる失敗も、逆に光らなすぎて沈む失敗も避けやすくなります。
最終的に欲しいのは派手な色数ではなく、視線が自然に中心へ集まる明暗の設計でしょう。

以降の章は色、形、動き、仕上げの順で積み上げますが、その判断軸はずっと同じです。
どの段階でも「今の配置は中心の明るさを際立たせているか」を見れば、迷いが減ります。
まずこの原理を持ってから手を動かしてみてください。

炎・光のカラーランプの作り方

炎のカラーランプは、白から暗赤までを段階的につないだ5〜7色で組むと、中心の熱と外周の冷えが自然に読めます。
白、淡黄、黄、橙、赤、暗赤を並べるだけでも骨格は作れますが、各色の置き方を少しずらすだけで、同じ色数でも発光体としての説得力が変わるのです。
まずは色を増やすことより、熱の流れを見せる配列を作ってみてください。

白から暗赤までの5〜7色カラーランプを組む

炎の基本は、中心の最明部に白を置き、外周へ向かって淡黄、黄、橙、赤、暗赤へ落としていく階段を作ることです。
ドット絵は連続グラデーションが使えないので、各段階が見えるぶん、どの色を隣り合わせるかがそのまま熱の説得力になります。
白から暗赤までを5〜7色でまとめると、燃えている核と冷めていく縁の差が読み取りやすくなり、炎らしい輪郭が立ちます。

最初に12色も使って炎を描いたときは、見た目は細かいのに、どうしても汚く見えました。
そこで6色に絞り、白・淡黄・黄・橙・赤・暗赤を軸に並べ直すと、色数は減ったのに前より発光して見えて驚いた。
情報量を増やすほど良くなるわけではなく、熱の段階が破綻なく読めることのほうが、炎ではずっと効くのです。

ヒューシフトでくすみを消し発光感を出す

明度だけを上下させると、炎はすぐにくすみます。
そこで使うのがヒューシフトで、明るい側ほど色相を黄側へ、暗い側ほど紫・赤側へ寄せると、同じ段階数でも色が生きて見えます。
中心の白は少し黄味を帯びた淡黄に受け、暗部は赤そのままで止めずに赤紫へ振ると、光が前に出てくる。
色相が動くことで、ただ明るいだけの平板さから抜け出せるわけです。

HSVで考えると、この調整はさらにやりやすくなります。
明部はSをやや下げてVを上げ、暗部はHを赤紫側へ回しつつVを下げる、という順番で触ると、くすみを抑えながら立体感を保てます。
クライアント案件で「くすむ」と差し戻された炎も、暗部の色相を赤紫へ回しただけで通ったことがあり、形よりもこのヒューシフトが効いた場面でした。
色相を動かすだけで発光感が戻るので、調整の入口としておすすめです。

色数を絞ってアニメーションを軽くする

炎は派手に見えるほど色を足したくなりますが、アニメーションにすると色数の多さがそのままノイズになります。
4〜8色程度に絞れば、フレームごとの塗り直しも軽くなり、輪郭の揺れを追いかける作業に集中しやすい。
色が増えるほど各フレームの対応関係が複雑になり、チラつきの原因も増えるため、少ない色で段階を作るほうが管理しやすいのです。

実際、細部を詰める前に少数フレームでループを組むと、どの色が動きの中で浮くかがすぐ見えます。
炎は派手さよりも連続性が命なので、まずは色数を絞って安定させ、そこから必要な段階だけ足していく流れが扱いやすい。
おすすめです。
オニオンスキンで前後フレームを重ねて確認しながら進めると、くすみや破綻の原因も早く見つかるでしょう。

静止画の炎を描く手順

炎は、まず箱で占める範囲を決めると描きやすくなります。
丸や複雑な形から入ると輪郭が団子になりやすいので、四角・箱で大づかみに取ってから、丸みと尖りを削り出す流れが安定します。
静止画でも揺らぎを感じさせるには、中心から外側へ明るさを重ね、左右対称を崩して芯を少しずらすのが近道です。

箱・四角でシルエットを単純化する

炎を描くとき、いきなり揺らぎを追うより先に、箱ラフで「ここに炎が立つ」という占有面積を押さえるほうが破綻しにくいです。
丸を並べて形を作ろうとした時期は、輪郭がまとまりすぎて団子のようになり、炎の勢いが消えました。
そこから四角・箱でアタリを取り、後で角を削る手順に変えると、短時間でも見た目が整いやすくなります。
アニメ化の前に1枚を描き切るなら、まず形の土台を単純化しておくのが効きます。

箱で取るのは、炎の外周を几帳面に描くためではありません。
むしろ、複雑な揺れをあとから乗せる余白を残すためです。
最初に輪郭を細かくしすぎると、内側の光を置いた段階で全体が窮屈になり、燃え上がる感じより装飾的な塊に寄ってしまいます。
大きな四角の中に炎の範囲を置いてしまえば、その後の調整は「どこを崩すか」に集中できるでしょう。

中心から外側へ明部を重ねて塗る

明るさは内側から外へ段階を切って重ねると、炎らしい温度差が出ます。
最明部の白〜淡黄を中心の細い芯に置き、その外側へ黄、橙、赤を広げ、最外周には暗赤を薄く回すと、熱が内部に集まっている見え方になります。
内側ほど明るく塗るのは理屈だけではなく、視線を中心へ引き込み、炎の核を一目で伝えるためです。

この塗り順に変えたあと、輪郭だけで炎を作ろうとしていたときより、少ない手数でも説得力が出ました。
明度差が中心から外へ流れると、静止画でも熱が抜けていく向きが感じられます。
逆に外側を先に強くすると、火の塊というより発光した飾りに寄りやすいです。
まず芯を立て、そこから周囲を包むように色を置いてみてください。

丸みと尖りを併用して炎らしさを出す

炎らしさは尖りだけでは決まりません。
根元に丸みを残し、先端は尖らせる「丸みと尖りの併用」にすると、硬さとやわらかさが同居して、火特有の揺れが出ます。
尖りだけを増やすとトゲの集合に見えやすく、丸みだけだと熱気はあっても炎の切れ味が弱くなるので、両方を同じ輪郭の中で使い分けるのがコツです。

対称に整えすぎた炎は、どうしてもロウソクの作り物っぽく見えました。
そこで芯を少し片側へ寄せ、先端の高さもそろえずに崩したところ、静止画なのに動いて見える感触が出ます。
左右対称を避けるのは、単なる癖の問題ではなく、揺らぐ火の性質を形に落とすためです。
芯の位置、先端の傾き、輪郭の丸みを少しずつずらして、自然な非対称に仕上げてみましょう。

炎をループアニメーションにする

炎をループアニメーションにするときは、細部より先に動きの骨格を決めるのが近道です。
最初から描き込みに入るより、炎が下から上へ昇る流れを小さく試し、3〜4フレームで自然に戻るかを見たほうが破綻しにくいでしょう。
松明の炎を8フレームで作り込んだのに動きが散ってしまい、3フレームのループに組み直したら一発で馴染んだことがあり、フレームは多ければ良いわけではないと痛感しました。

ラフで動きの当たりを先に取る

ラフ段階では、炎を雑なシルエットのまま2〜4フレーム回して、揺れ方の方向だけ先に確認します。
ここで見るべきなのは見た目の完成度ではなく、先端がどこへ流れ、芯がどれだけぶれずに保たれるかです。
細部を描き込んでから違和感に気づくと手戻りが大きくなりますが、ラフで当たりを取っておけば、横滑りや重心のズレを初期の段階で止められます。

ラフを飛ばして本描きから始めたフレームが、回してみたら炎が横滑りして見えたこともありました。
そこから工程を戻し、薄い形で動きを確かめてから描き進めるようにすると、一度で決まりやすくなります。
まず揺れを見て、あとから描き足しましょう。

3〜4フレームのループを組む

炎ループは、3〜4フレームから始めると破綻が少なく、動きも軽く見えます。
フレーム数が増えるほど各コマの差分管理が難しくなり、芯や外形のつながりが少しずつずれて、かえって止まり気味に見えることがあるためです。
少数フレームのほうが変化がはっきり出るので、「ガンガン動く」印象を作りやすいのも利点です。

動かし方の基本は、炎を下から上へ昇らせることです。
各フレームで芯と先端を少しずつ上方向へずらし、最後のフレームが最初のフレームへ自然に戻るように調整すると、ループの継ぎ目が目立ちません。
形を大きく変えるより、上昇の流れを保ったまま小さな差を重ねるほうが安定します。

オニオンスキンで動きの連続性を確認する

オニオンスキンは、前後フレームを薄く重ねて見ることで、炎の流れが途切れていないかを確かめるのに向いています。
芯の位置、先端の傾き、外側の揺らぎが前後で噛み合っていれば、ちらつきは出にくいです。
逆に、どこか1カ所でも急に跳ねると、回したときに不自然な引っかかりとして見えてしまいます。

薄い重なりで連続性を追うと、どのコマでズレたかがすぐ分かるので、修正点を絞り込みやすくなります。
炎のアニメは一見シンプルでも、先端だけが先に伸びたり、根元が横にずれたりすると違和感が強く出ます。
オニオンスキンで前後を見比べながら、揺らぎの飛びを一つずつ潰していきましょう。

光・グローエフェクトの描き方

光・グローは、本体、インナーグロー、アウターグローの3層で考えるとまとまりやすいです。
中心の光源を本体に置き、そのすぐ外側に明るい滲み、さらに外へ薄い滲みを重ねると、ただの白い丸ではなく発光体として読めるようになります。
魔法の光を本体1層だけで描いたときは「ただの明るい丸」になりましたが、インナーとアウターを足しただけで見え方が一気に変わりました。
層を分ける発想が、そのまま説得力になるのです。

本体・インナー・アウターの3層に分ける

本体は光の芯、インナーグローはその熱を受けてにじむ近距離の光、アウターグローは背景へ逃げていく遠距離の薄い光だと捉えると整理しやすいでしょう。
3層を分ける理由は、明るさを足すためだけではありません。
発光の強弱、輪郭の硬さ、空気中に広がる感じを別々に扱えるので、平面的なベタ塗りから抜けやすくなるからです。
見た目の差は小さくても、読み取りやすさは大きく変わります。

この分け方は、火の描写に近い考え方でもあります。
中心がもっとも明るく、外側ほど温度も彩度も落ちていく流れを作ると、光源としての納得感が出るのです。
光の色も炎と同じくヒューシフトさせ、中心は白〜淡い光源色、滲みは彩度を上げた光源色へ寄せていくと、輪郭が生きたまま発光できます。
色と明度を同時にずらすことが、3層構造を活かす近道です。

アウターグローを外周へ薄く広げる

アウターグローは、広ければ広いほど良いわけではありません。
大きい絵で約24px、小さい絵で約6pxを目安に、外周へ薄く広げると、光が背景へ自然に溶けます。
外へ行くほど透明度を上げ、輪郭を弱めていくと、発光の存在感は残したまま画面の圧迫感を抑えられるでしょう。
逆に濃く広げすぎると、光が面として残ってしまい、画面全体が白っぽく潰れます。

実際、アウターグローを強くしすぎて背景まで白くなったことがあります。
そこで外周の透明度を上げ、広がりを薄くしたところ、滲みと背景の境目が急に自然になりました。
ポイントは、光そのものを増やすのではなく、どこで消えていくかを設計することです。
滲みの終わり方が決まると、光源の位置も読み取りやすくなります。
おすすめです。

放射状の線と光条で輝きの強さを出す

強い発光を見せたいなら、中心から放射状の線や同心円を重ねると効果的です。
光は丸く広がるだけでなく、勢いよく外へ押し出される形でも感じられるため、放射のリズムが入ると一気に「強い光」に見えます。
さらにギラギラした印象を出したいときは、とげとげした光条を複数足すとよいでしょう。
光のトゲが入ることで、発光のピークがどこにあるかが明確になります。

この処理は、単に派手さを足すための装飾ではないのです。
放射状の線は中心の位置を示し、同心円は広がりの距離を示し、光条は瞬間的なエネルギーを示します。
つまり、どれも発光の性質を別の角度から補強しているわけです。
強さを上げたい場面では、明度を上げるだけでなく、形の情報も足してみてください。
すると、同じ明るさでも「強く光っている」印象が生まれます。

Aseprite機能と仕上げのコツ

Asepriteではレイヤーごとに合成モードを切り替えられるので、グロー用のレイヤーをAdditionやScreenに置くだけで、下の絵に光を足したような見え方へ寄せられます。
暗い背景の上で光が沈んでいたときも、合成モードをNormalからAdditionに変えた瞬間にぱっと発光が立ち上がり、仕上げの印象が一段変わるのを実感しやすいでしょう。
ただし、グローは合成モードが必須ではありません。
Normalのままでも描けますが、光をどう馴染ませたいかで使い分けるのが。

合成モードで光を加算して馴染ませる

合成モードの利点は、発光の「置き場所」を分けられる点にあります。
主線や本体の色をいじらず、上のレイヤーだけで光を足せるため、修正しやすく、あとから強さも調整しやすいのです。
Additionは光を足し込む方向に向き、Screenは明るさを保ちながら柔らかく重ねやすい。
どちらも、グローを背景と切り離したまま自然に馴染ませるのに向いています。
もっとも、合成モードを使えば必ず上手く見えるわけではありません。
明るさを盛りすぎると白っぽく飛びやすいので、まずは小さく重ねて輪郭だけを整えると扱いやすくなります。
Normalで作った光が物足りないなら、合成モードを切り替えて見え方を比べてみてください。
仕上がりの差がつかみやすいはずです。

補色の影で発光体の立体感を出す

発光体を平面的に見せないコツは、黒で締めることではなく、光の色に対して補色の影を置くことです。
光がオレンジなら影は紫、という半透明の影を重ねると、暗い側がただ潰れるのではなく、空気を含んだ奥行きに変わります。
以前、影を黒で塗ってしまい絵全体が濁ったことがありましたが、補色の紫へ切り替えた途端、発光が輪郭の内側から持ち上がるように見えて、仕上げの方向がはっきり定まりました。
この考え方は、周囲も照らしているような錯覚を作るのにも効きます。
影を不透明にせず、少し透けた色として置くと、光源がそこにある説得力が出るからです。
発光体そのものだけでなく、隣接する地面や装飾にも同じ発想を広げると、画面全体の温度がそろいやすくなります。
黒を足す前に色を見直す、という順番が役に立ちます。

色がくすむ・動きがカクつくときの対処

色がくすむときは、色数を増やすより先にヒューシフトを見直すのが近道です。
暗部の色相を赤紫側へ回し、明部を黄側へ寄せると、同じ配色でも温度差がついて色が生き返ります。
明暗の差を単に濃淡だけで処理すると、発光と影の境目が鈍くなりやすい。
そこで色相を少し動かすだけで、面の向きや光の回り方が読み取りやすくなります。
動きがカクつくときも、フレームを増やす前に整える順番があります。
各フレームの移動量を均等にする、最終フレームから先頭へのつながりを直す、色数を減らす。
この順で確認すると、枚数を増やさずに軽さを保ったまま改善しやすいです。
フレーム追加は最後で十分です。
まずは今あるコマを滑らかにすること、ここが仕上げの差になります。