Community画像github.com

OpenScaleOrg/pixel-dithering

Aseprite のMCPツールで既存のピクセルアートを洗練・仕上げする際に使用 — ディザリング(順序/Bayer、パターン、グラデーション)、アンチエイリアス曲線、色相シフトのシェーディング、カラーランプ、限定・レトロパレット、コントラストと可読性、金属・石・木材・布・ガラスなどのマテリアルテクスチャ。

pixel-dithering とは?

このスキルは、AsepriteのMCPツール群と連携して、既存のピクセルアート作品を洗練・仕上げするための総合的なガイドを提供します。主な機能は、順序ディザリング(Bayer 4×4)を使用したグラデーションやパターン生成、アンチエイリアスによる曲線や斜め線のジャギー軽減、色相シフト(15〜30度)を伴うシェーディングのためのカラーランプ生成、レトロパレットへの量子化、そして金属・石・木材・布・ガラス・肌といった多様なマテリアルの質感表現手法をカバーします。Claude CodeなどのAIエージェントがAsepriteのMCPツール(`apply_dither_gradient`、`generate_color_ramp`、`adjust_hsl`など)を呼び出す際の判断基準とベストプラクティスを提供し、`lint_sprite`や`get_color_stats`による最終的な品質チェックも推奨します。これにより、初心者から熟練者まで、ピクセルアートの仕上げ工程を効率的かつ高品質に行えるようになります。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/OpenScaleOrg/Aseprite-Plugin/tree/HEAD/plugins/aseprite/skills/pixel-dithering

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

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

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

ドキュメント

ディザリング、アンチエイリアス、色

ディザリング

ディザリングは、2色のピクセルパターンを混ぜて第3の色やグラデーションを偽装する手法です。

使用すべき場合:

  • 大きな平坦な領域(48px以上):空、大きな影、背景など。
  • 4~16色の限られたパレットで、より多くのトーンが必要な場合。
  • テクスチャ: 石、砂、布。

使用すべきでない場合:

  • 32px未満のスプライト。 ノイズとして認識されます。
  • キャラクターの顔、または動くもの。 フレーム間でちらつきが生じます。
  • 第3のパレット色で十分に代用できる場所。 ディザリングよりもランプステップを優先してください。

ツール:

目的ツール
2色間のグラデーションapply_dither_gradient(..., color_start, color_end, horizontal)。これは順序Bayer 4×4です。
均一なテクスチャまたは混合apply_dither_pattern(..., color_a, color_b, density)。density 0.5はチェッカーボード、0.25と0.75は疎なドットです。
手動配置パターンdraw_rows でパターンを明示的に指定。patterns.md のパターンリファレンスを参照。

ルール:

  • 隣接するランプ色間でのみディザリングを行う。 離れた2色はブレンドではなくグリッドのように見えます。
  • トランジション帯は狭く(2~6px)保つ。 塗りつぶし領域が形状を担います。
  • 輪郭線やシルエットのエッジを横切ってディザリングしない。

アンチエイリアス(AA)

AAは、曲線や斜め線の段差部分に中間色を配置し、ジャギーを和らげます。

  • 内部の線と大きな曲線にのみ、32px以上で使用する。 透過背景に対する外側のシルエットは硬いままにしておきます。AAを施したエッジは、他の背景でハローを生じます。
  • 各段差の内側の角に1pxのAAピクセルを配置し、線と塗りの間の色にします。長い段差には2px(明るい方と暗い方)を使用します。
  • view_sprite(領域ズーム)で結果を確認する。 AAによって線が太く見える場合は間違いなので削除します。

色を用いたシェーディング

  • すべてのマテリアルのランプを generate_color_ramp(base, steps=3-5, hue_shift_degrees=15-30) で構築する。 影は青または紫に、ハイライトは黄または橙に傾けます。
  • マテリアル間のコントラストは色相だけでなく明度で強調する。 簡易チェックとして、コピーに対して adjust_hsl(saturation_shift=-1) を実行すると、アートがグレースケールでどう読めるかが分かります。
  • ムードの変化(夜、毒、被弾フラッシュ)には、 レイヤーに対して adjust_hsl を使用するか、フレームをまたいで replace_color / remap_colors_in_cel_range を使用します。
  • レトロパレットへの適合: apply_palette_preset で適用し、次に quantize_to_palette を実行します。濁った部分は同じランプの色を使用して手動で修正します。

マテリアル

マテリアル見え方
金属高いコントラスト。深い影の隣に硬く鋭いハイライト。影のエッジに反射光。
石低いコントラスト。密集したテクスチャ、疎なディザまたは2~3pxの塊、欠けたエッジ。
木材板目に沿った木目線(濃い色のステップ)。節は小さな楕円形。
布柔らかいグラデーション、曲線状の暗い帯としてのひだ、織り目を示す縦線テクスチャ。
ガラス / 水大半は背景が透けて見える。明るいスペキュラーのドット、エッジのハイライト、わずかな色合い。
肌3~4段階の暖色ランプで、影は赤みがかる。ディザリングなし。

仕上げパスの後は、get_color_stats を呼び出してパレットをタイトに保ち、lint_sprite で浮きピクセルを検出します。

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

関連スキル