Community画像github.com

火炎スプライトのレトロ8ビット化(再構築版)

fire-sprites スキルでレンダリングした動き(ボディレイヤーとファイアレイヤー)を元に、8ビット/ピクセルアート風のファイアパフォーマンススプライトを生成します。火炎を再構築するため、ファイアスピニングやファイアブリージングのアニメーションにレトロゲーム風の見た目を与えます。

火炎スプライトのレトロ8ビット化(再構築版) とは?

このスキルは、`fire-sprites` スキルで生成されたボディレイヤーとファイアレイヤー(個別のPNG/画像として `moves/NAME/` に保存)から、8ビットまたは16ビットゲーム風のピクセルアートアニメーションを生成します。 特徴は、元の動画から単に解像度を落とすのではなく、**火炎の形状のみを抽出し、色と質感を一から再構築**することです。これにより、暗い色表現しか残らないレトロパレットでも、鮮やかで階調豊かな炎が実現します。 具体的な処理は以下の通りです。 - **ボディ(身体)**:縮小、ハードアルファエッジ、8色固定パレット(肌・革)へのマッピング、1ピクセルの暗い輪郭線。 - **ファイア(火炎)**:各フレームの炎の形状を保持し、内部の深さ(炎の厚みに対する相対位置)に応じて7色のヒートランプ(暗赤→橙→黄→白)で色付け。4x4のオーダードディザリングで階調をなめらかにし、ファイアレイヤーに漏れ込んだ壁の細い線を開口処理で除去。 出力は `retro/` ディレクトリに、再構築版と直接量子化版の両方(64px と 40px の2サイズ)、および `atlas.json`(フレームグリッド、fps、足のアンカー情報)が含まれます。アニメーションはマスターフレームレートの半分(on twos)で再生され、レトロ感を強調します。 パフォーマーには、結果を直接説明する前にまず見せることが推奨されています。また、`tools/retro.py` の先頭定数を編集することで、ボディパレット、ファイアランプ、サイズ、深さ曲線などを変更できます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Luan-vP/fire-sprite-kit/tree/HEAD/skills/fire-sprites-retro

Installed? Explore more 画像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

火炎を再構築した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 = 行の深さ曲線。同じパフォーマーのすべての動きでパレットを固定し、アニメーションが互いに一致するようにしてください。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

関連スキル