火炎を再構築した8ビットファイアスプライト
fire-sprites スキルでレンダリングされた動きが必要です。このスキルはフラットな動画ではなく、moves/NAME/ 内の個別の body レイヤーと fire レイヤーから動作します。$KIT はキットルート(このファイルから2階層上)、py は $KIT/.venv/bin/python で、プロジェクトディレクトリから実行します。
py $KIT/tools/retro.py # すべてのレンダリング済み動き
py $KIT/tools/retro.py "breath_*" # または一部(名前またはグロブ)
open retro.html
火炎を再構築する理由(縮小しない理由)
ファイアスプライトを縮小してパレットにスナップすると、白くぼやけた塊になります。カメラでは炎が白にクリップされるため、中に保持する色がありません。代わりに:
- ボディ(身体):ダウンスケール、ハードアルファエッジ、固定8色の肌と革パレットにマッピング(明度で重み付けされ、陰影が残る)、1ピクセルの暗い輪郭線。
- ファイア(火炎):実際の炎の形状はフレームごとに保持しますが、色は再描画されます。ピクセルが炎の内部にどの程度深く入っているかによって、7色のヒートランプ(エッジの暗赤色、オレンジ、黄色を経て白色のコア)の段階を選択し、段階間は4x4のオーダードディザリングでなめらかにします。深さはその炎の厚さに対する相対値で測定されるため、細い剣の炎でも高温のコアが得られ、巨大なブレス雲でも広いグラデーションが得られます。小さな開口処理により、ファイアレイヤーに漏れ込んだ壁の細い線を除去します。
retro.html は各動きを4通り表示します:再構築火炎と直接量子化、それぞれボディ高さ64pxと40px。直接量子化版はパフォーマーが違いを確認できるように表示されており、出荷するのは再構築火炎の方です。
アニメーションは「on twos」(マスターフレームレートの半分)で実行され、レトロ感を演出するとともにスプライトシートのサイズを半減します。
出力:retro/NAME_B64.png、NAME_B40.png(再構築版)、NAME_A64.png、NAME_A40.png(直接量子化版)、およびフレームグリッド、fps、足のアンカーを含む retro/atlas.json。整数倍のみの最近傍スケーリング(CSSで image-rendering: pixelated)で描画します。
パフォーマーへの伝え方
結果を説明する前に、まず見せてください。よく見られる所見:
- ブレス雲は非常によく表現されます。再描画により、映像にはない構造が与えられます。
- フレーム端、窓、または白飛びした壁に接触した雲は、このスケールでは角張った形になります。
- ブレスのピーク時にボディがほぼ白にフラッシュし、シルエットフレームではダークネイビーにマッピングされます。これはパレットが映像の明るさに追従するためです。それが気になる場合は、肌の色調を一定に保つことを提案してください(まだ実装されていません)。
見た目の変更
tools/retro.py の先頭にある定数を編集します:BODY_PAL(ボディパレット、最も暗い色から)、FIRE_RAMP(エッジからコア)、for B in (64, 40) のサイズ、および heat = 行の深さ曲線。同じパフォーマーのすべての動きでパレットを固定し、アニメーションが互いに一致するようにしてください。