Communitygithub.com

hanamorix/image-to-animated-pixel-art

画像やイラストをAsepriteで詳細なドット絵に変換し、アイドルループ、呼吸、瞬き、髪や布の揺れ、軟体の揺れ、手足の動き、輝き、水などのアニメーションを施すスキル。Aseprite MCPを利用します。

image-to-animated-pixel-art とは?

このスキルは、静止画やイラストを元に、Aseprite上で高品質なドット絵アニメーションを生成するためのものです。画像をピクセルサイズに縮小する過程で失われた細部を補完し、原典に忠実な結果を維持することに重点を置いています。アニメーションにおいては、「ブレーク」(ピクセルの跳び、破れ、ポップ、ちらつき)が敵であり、厳密なチェックを経て品質を保証します。ワークフローは、まずユーザーとの対話で計画を立案し、その後、静止画の作成、瞬きポーズ、アニメーションフレーム、エフェクト、追加要素を順に実装します。各フェーズでは、変更前後の比較画像(ソース|変更前|変更後)と各チェック(ゼロオフセットレンダリング、リジッドパーツの一致、ワンフレームポップ、ジャンプ、ヒートマップなど)を通過する必要があります。スクリプト群(still, local_rerender, animation_frames, deflicker_metrics, heatmap, effects など)が用意されており、Aseprite MCPを介して実行します。このスキルは、Claude CodeなどのAIエージェントがAsepriteと連携して作業することを想定しており、開発者やアーティストが詳細なドット絵アニメーションを効率的に制作するのに役立ちます。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/hanamorix/hana-pixel/tree/HEAD/skills/image-to-animated-pixel-art

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

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

ドキュメント

画像からアニメーションドット絵へ

結果は原典に忠実でなければなりません:ピクセルサイズに縮小する過程で損なわれた部分を修正し、決して細部をでっち上げてはいけません。動きにおいて敵はブレークです:跳んだり、破れたり、ポップしたり、ちらついたりするピクセルです。ClaudeはGIFを見ることができないため、表示のたびに測定されたチェックが先行し、「静止画では問題ないように見える」という判断はしません。

もしユーザーがドット絵の設定を(CLAUDE.mdやそこから参照されるファイルに)保持している場合は、最初にそれを読んでください。それらがここでのデフォルト設定より優先されます。Aseprite MCPが必要です:references/aseprite-mcp.md。該当する段階になったら、以下も読んでください:references/still-recipe.md、references/motion-and-breaks.md。

ワークフロー

各チェックインは1つのメッセージです:並べた画像(ソース | 変更前 | 変更後、またはGIFとトリミングされたフリップブック)と1つの質問。変更のたびに、現在のファイルを _vN にコピーし、拒否されたラウンドはそこから復元できるようにします。各ラウンドでは、要求された変更だけを正確に行い、他は何もしません。

  1. ブリーフィング。 計画を立てる前に、何が欲しいかを尋ねます:どの部分が動くか、どの程度、どのくらいの速さで、何が静止し、何が保護されるか。短い計画ファイル(半ページ程度)を書き、承認を得ます。ユーザーが計画を承認したら完了です。
  2. ソース。 ソースをトリミングまたはリサイズして、サイズがターゲットスプライトのちょうど3倍(約200~260px幅)になるようにします。スクリプトは3倍を前提とします。
  3. 静止画(1_still.lua、次に 2_local_rerender.lua、3_join_outline.lua で修正)。この画像用に still-recipe.md のパラメータを測定します。チェックインの順序:手、次に顔と目、次に輪郭、金属、背景。各部分が承認され、静止画が *_still_FINAL として保存されたら完了です。
  4. 瞬きポーズ(4_blink_poses.lua、目の範囲は14倍で手動トレース)。4つのポーズをすべて並べて表示し、さらに motion-and-breaks.md の手順で構築した瞬きGIFを、1つのチェックインで表示します。承認されたら完了です。
  5. モーション(5_animation_frames.lua)。静止画での測定値からSETTINGSブロックを埋め、最初に BF_ZERO = true で実行し(0px変更する必要があります)、次に実際の実行、その後 6_deflicker_metrics.lua を実行します。以下のチェックを通過したら、完全なGIFと、動く部分のトリミングされたフリップブックを表示します。
  6. エフェクト(8_effects.lua、色のみ、デフリッカー後)。チェックし、表示します。
  7. 追加要素 1リクエストずつ(腕、水など)、それぞれ独自のチェックインで対応します。
  8. 最終。 *_FINAL(.aseprite + 3倍GIF)にコピーし、以前の最終版は保持します。

アニメーションチェックイン前のチェック

チェック合格条件該当スクリプト
ゼロオフセットレンダリングがポーズと一致BF_ZERO で0px変更5
リジッドパーツ(手)が正確各フレームのボックスを、その整数ピクセルのリフト分だけ戻したものが静止画と一致:0px独自Lua比較
1フレームポップ(A→B→A)瞬きとエフェクト以外に存在しない6で表示
ジャンプBA_STEPS にリストされたステップフレームは除外。それ以外のフレームはすべて中央値の変更ピクセル数の約2倍以下で、それを超えるフレームには名前付きの原因がある6で表示
ヒートマップ輪郭、ストラップ、まつげ、目に赤(ループあたり8以上の変更)がない7_flicker_heatmap.lua
エフェクトすべてのエフェクトピクセルが2フレーム以上保持。変更ピクセル数が0より大きい(弱いブレンドが同じパレット色に戻る可能性がある)8でカウントを表示
閉じた目閉じたフレームに虹彩の色が残っていないview_sprite を12倍で確認
フリップブック手、顔、およびすべての動くエッジの8~16フレームを6倍以上で見たときに連続的に見えるview_sprite の領域+フレーム指定

スクリプト(scripts/)

すべてのスクリプトは、最初に PA_DIR(プロジェクトフォルダ、パス区切り文字で終わる:Windowsは 、macOSは/)と PA_SRC(ソース画像ファイル名)を設定し、さらにヘッダーにリストされた自身のグローバル変数を設定する必要があります。run_lua_script で短いランチャーと共に実行します。<skill> はこのスキルのベースディレクトリで、スキル読み込み時に与えられます。

PA_DIR, PA_SRC = [[/path/to/project/]], "reference.jpg"
BF_POSES, BF_OUT, BF_PUSH = "blink_poses.aseprite", "frames", true
dofile([[<skill>/scripts/5_animation_frames.lua]])
スクリプト機能
1_still.lua3x3ライン保存縮小、k-meansパレット+アクセント、そばかすパス、孤立マージ
2_local_rerender.lua別のライン閾値または追加色(手、唇)でボックスを再レンダリング
3_join_outline.luaソースに細い線がある場合、点線の輪郭を結合
4_blink_poses.lua開き、半開き、近い、閉じたポーズ(ファイル内の目の範囲は画像ごと)
5_animation_frames.lua全フレーム;すべての座標はSETTINGSブロックに格納(例の値を含む)
6_deflicker_metrics.luaデフリッカー、ポップ、ジャンプチェック(BA_SKIP リジッドボックス、BA_STEPS ステップフレーム)
7_flicker_heatmap.luaヒートマップPNG
8_effects.lua押しつぶしライト、きらめき、海のきらめき、砂のきらめき(画像ごとにSETTINGSブロック)
checkin_sheet.lua領域のソース/変更前/変更後シート
example_metal_rerender.lua実例のみ:金属をソースからシェードバンドで再レンダリング

5_animation_frames.lua は、これまでに遭遇したモーションタイプ(呼吸バンド、ソフトドーム、スウェイボックス、リジッド整数ピクセルプッシュ、リムセグメント、海)を保持します。異なる動く部分を持つ新しい画像は、そこにフィールドを追加します。

関連スキル