luisfer-cli/pixel-art-pix-skill

pixでピクセルアート

ユーザーがピクセルアート、スプライト、アイコン、ロゴ、ゲームアセット、アニメーションフレーム、スプライトシート、GIF、または.pixファイルを要求した場合にこのスキルを使用します。

不可譲の原則

• 詳細よりも可読性を優先します。
• ネイティブ解像度で作業します。高解像度でデザインしてから頭の中で縮小しないでください。
• ハードエッジ、整数座標を使用し、アンチエイリアスは使用しません。
• アウトライン、影、ベース、ハイライト、アクセントという明確な役割を持つ限定パレットを使用します。
• 散在するピクセルではなく、意図的な色のクラスターを構築します。
• アセットとすべてのアニメーションフレーム全体で一貫した光の方向を維持します。
• 構文検証のみで完了を主張しないでください。レンダリングし、視覚的に結果を検査します。

アンチノイズルール

ユーザーが明示的に要求しない限り、浮遊する星、きらめき、ほこり、パーティクル、コーナーアクセント、または孤立した装飾ピクセルを追加しないでください。

ロゴ、アイコン、UIアセット、透明背景のスプライトの場合：

• デフォルトで接続されていない装飾コンポーネントはゼロにします。
• 被写体の周囲にきれいなセーフマージンを維持します。
• 1つのコンパクトな主要シルエットを優先します。
• 空のキャンバススペースを装飾追加の招待状として使用しないでください。
• 要求された場合、または被写体に不可欠な場合を除き、sparkles、stars、dust、particlesなどのグループを追加しないでください。

すべての可視クラスターは、少なくとも1つの明確な目的を果たさなければなりません：

1. シルエットまたは構造。
2. 形状、照明、または素材。
3. 識別特徴。
4. 要求された環境装飾。

クラスターを短い文で正当化できない場合は、削除します。単一ピクセルは、瞳孔、スペキュラーハイライト、斜めの端、または必要な顔の特徴など、機能的である場合にのみ許容されます。

必須ワークフロー

1. 概要を明確にします。 キャンバスサイズ、被写体、アセットタイプ、スタイル、パレットの制約、背景、エクスポートを確立します。装飾が要求されていない場合は、ないものとします。
2. 承認基準を設定します。 アセット固有の基準から関連するルールを選択します。
3. 描画前に計画します。 シルエット、主要な形状、パレットの役割、光の方向、焦点、アニメーションのキーポーズを定義します。
4. .pixソースを作成または編集します。 グループには意味的な機能に基づいて名前を付けます。オプションの雰囲気は被写体から分離しておきます。
5. ソースを検証します。 pix checkを実行します。
6. ネイティブスケールでレンダリングします。 ネイティブ出力が信頼できる視覚的チェックです。
7. 拡大プレビューをレンダリングします。 最近傍整数スケーリングを使用します。通常は--scale 8です。
8. 視覚的に検査します。 アセットがさまざまな表面に表示される可能性がある場合は、透明、明るい、暗い背景に対してネイティブと拡大の両方のレンダリングを確認します。
9. クリーンアップパスを実行します。 接続されていないすべてのコンポーネントと疑わしい小さな色のクラスターを分類します。意図しないものはすべて削除します。
10. 可能な場合は監査します。 ネイティブPNGでscripts/audit_png.pyを実行します。警告は、エラーの自動証明ではなく、レビュープロンプトとして扱います。
11. 修正して再度レンダリングします。 新しいアートワークを確定する前に、意図的なクリーンアップの反復を少なくとも1回完了します。
12. 最終成果物をエクスポートします。 要求されたPNG、アニメーションフレーム、GIF、スプライトシート、メタデータを生成します。

コアコマンド

検証とレンダリング：

pix check asset.pix
pix render asset.pix -o asset-1x.png
pix render asset.pix -o asset-8x.png --scale 8

名前付きフレームのレンダリング：

pix render asset.pix --frame frame-name -o frame-1x.png
pix render asset.pix --frame frame-name -o frame-8x.png --scale 8

スキルリポジトリルートからネイティブPNGを監査：

python3 skills/pixel-art-pix/scripts/audit_png.py asset-1x.png

アニメーション成果物のエクスポート：

pix anim asset.pix -a animation-name --out-dir frames/
pix sheet asset.pix -a animation-name -o sheet.png --json sheet.json
pix gif asset.pix -a animation-name -o animation.gif

アセット固有の基準

ロゴとアイコン

• 1つの支配的なシルエットと強いネガティブスペースを使用します。
• 浮遊コンポーネントとアンビエントパーティクルはデフォルトでゼロにします。
• 1ピクセルのコーナーアクセントは、1xでマークを明確にする場合を除き避けます。
• 透明、明るい、暗い背景でテストします。
• ネイティブサイズおよび意図されたUI表示サイズでの認識を確認します。

キャラクターとオブジェクトのスプライト

• 黒く塗りつぶされたシルエットは認識可能でなければなりません。
• 目、武器、手足、その他の識別子は1xで判読できる必要があります。
• 焦点となる特徴と競合するテクスチャは避けます。
• コンタクトシャドウは、意図的に分離したシャドウでない限り、被写体に付着させるか、明確に整列させます。

シーンと背景

• 前景、中間、背景の階層を確立します。
• アンビエントパーティクルは、設定、奥行き、または動きをサポートする場合にのみ許可されます。
• 繰り返しテクスチャパターンを意図的に使用し、均一なランダムな点描は避けます。

アニメーション

• 小さな任意のピクセル変更ではなく、明確なキーポーズを使用します。
• フレーム間でパレット、照明、ボリュームの一貫性を保ちます。
• ループ遷移を確認し、すべてのフレームを個別に検査します。
• 装飾パーティクルがフレーム間で誤ってちらつかないようにします。

必須クリーンアップチェックリスト

すべての回答が満足のいくものになるまで、作業を完了とマークしないでください：

• 被写体は1xで認識可能ですか？
• シルエットは内部の詳細なしで被写体を伝えていますか？
• 接続されていないすべてのコンポーネントに明確な目的がありますか？
• すべての単一ピクセルのマークは、フィラではなく機能的ですか？
• 要求されていないきらめき、星、ほこり、コーナーアクセントは省略されましたか？
• ハイライトはグループ化され、1つの光源に合わせられていますか？
• 影とコンタクトポイントは意図的ですか？
• パレットは限定的で役割ベースですか？
• アセットに誤ったクリッピングのないきれいなマージンがありますか？
• 1xと拡大スケールで検査されましたか？
• 適切な背景色でチェックされましたか？
• 最初のレンダリング後に少なくとも1回のクリーンアップ修正が完了しましたか？
• アニメーションの場合、キーポーズは読みやすく、ループはきれいですか？
• スプライトシートの場合、フレームは順序付けられ、明確に名前が付けられていますか？

視覚的レビューレポート

完了を報告する際は、以下を簡単に述べてください：

• ネイティブキャンバスサイズ。
• 生成されたエクスポート。
• 実行された視覚的チェック。
• 分離されたコンポーネントまたは小さな色のクラスターが残っているかどうかとその理由。
• 意図的に要求された装飾。

pix checkを視覚的検証として説明しないでください。それはソースを検証するものであり、レンダリングと検査がアートワークを検証します。

参考文献

より深いガイダンスが必要な場合に読む：

• ピクセルアートの概念
• ビジュアルQAとアンチノイズ
• pix DSLリファレンス

アセット例

• きれいなアニメーションスライム
• ノイズの多いバッジアンチパターン
• きれいなバッジ修正