mcpField
L
layer-pixel-art

layer-pixel-art

github.com/layeraiクリエイティブ・メディア73.8k 回インストール4 週間前に更新
リポジトリ

layer-pixel-art について

Layer のツールでピクセルアートを生成し、スプライトシートを扱うスキルです。グリッドとパレットの明示、参照フレームによる一貫性、シートの決定的な結合・分割を重視します。

主な機能

  1. 01ピクセルグリッドとパレットの指定
  2. 02参照画像を使ったフレーム生成
  3. 03フレームをシートに結合
  4. 04シートを個別フレームに分割
  5. 05シームレスなタイル作成の指針

活用シーン

  1. 01一貫性のあるキャラクター歩行サイクルの作成
  2. 02生成フレームをスプライトシートに結合
  3. 03既存シートから編集用フレームを抽出
  4. 04繰り返し使えるピクセルタイルの準備

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/layerai/skills --skill layer-pixel-art

インストール後、Claude Code で/layer-pixel-artを入力して読み込まれたか確認します。

詳細

レイヤーピクセルアート

概要

ピクセルアートは、生成結果が微妙に間違ったものになりやすいタスクです。つまり、ピクセルアートそのものではなく、任意のグリッドに合わせてエッジがぼやけ、アンチエイリアス処理された、ピクセルアートの「画像」ができてしまいます。うまく仕上げるには、主にデフォルトの設定を避ける必要があります。

Layer では、生成機能に加えて、決定論的なスプライトシート用ユーティリティを 2 つ提供しています。pack_sprite_sheet は、個別のフレーム画像を透明な背景上の均一なセルで構成されたシートにまとめ、split_sprite_sheet は、シートを読み取り順にセルへ切り分けます。これらはモデルではなくファーストパーティのツールであり、カタログ内に競合する代替手段がないため、直接名前を指定して使います。

生成の仕組みについては、layer スキルを参照してください。ここで名前が挙がっている関連スキルが利用可能なスキルにない場合は、ユーザーにインストールを依頼してください(npx skills add layerai/skills --skill <name>)。無人で処理を進める場合は、ツールのスキーマをもとに作業し、不足しているスキルがあることを明記してください。

グリッドとパレットを指定する

どちらも、毎回、数値で指定します。

  • グリッド:「32x32 sprite」「16x16 tile」のように指定します。グリッドを指定しないと、モデルは特定の解像度に定まらない、ピクセル風の画像を生成するため、後から整えることはできません。
  • パレット:色数と系統を指定します。「落ち着いたアースカラーの 16 色限定パレット」と指定すれば、「レトロな色」よりも出力を制約できます。
  • 時代:ユーザーがイメージしている場合は指定します。8 ビットの NES 時代のフラットカラー、シェーディングの段階を付けた 16 ビットの SNES 時代、または現代の高解像度ピクセルアートがあります。これらはまったく異なる見た目です。

プロンプトでデフォルトの設定を除外する

欠陥は予測できるため、除外項目として明記します。アンチエイリアスなし、ぼかしなし、グラデーションなし、柔らかい影なし、エッジのはっきりしたピクセルのみ、1 セルにつき 1 ピクセル。モデルが negative_prompt を宣言している場合は、代わりにそこに指定してください。また、背景も指定します。「透明な背景に単独で配置」または「単色のフラットな背景」と指定してください。生成された背景は切り抜く必要があり、雑な切り抜きではピクセルアートが損なわれるためです。

スプライトシートと歩行サイクル

1 回の生成でフレームシートを作らせないでください。モデルは、関連性の低い絵をグリッド状に生成し、セルごとにキャラクターが変わってしまいます。これは、スプライトシートで絶対に避けなければならないことです。

推奨する手順は次のとおりです。

  1. 1 つのフレームを生成して承認します。待機ポーズまたは接地ポーズにし、透明な背景に単独で配置します。
  2. 承認したフレームを reference_image として添付し、残りの各フレームを個別に生成します。変更点だけを説明します。「同じキャラクター、同じパレット、同じ 32x32 グリッド、歩行中に左脚を前へ、右腕を後ろへ」。
  3. フレームを一式として確認し、ブレが生じたものだけを再生成します。
  4. pack_sprite_sheet でフレームを均一なセルのシートにまとめます。引数の形式については入力スキーマが正となるため、引数名を推測せず、スキーマを確認してください。

1 枚目以降のすべてのフレームは、直前のフレームではなく、1 枚目のフレームを参照します。各フレームを直前のフレームに基づいて生成すると、ズレが積み重なり、4 枚目には騎士が別人になってしまいます。

学習済みのピクセルスタイルを使う場合は、reference_sets として添付し、base_model_id は一切指定しないでください。そうすることで、サーバーがそのスタイルを適用できるモデルを選びます。サイクル内のすべてのフレームで、同じセット、同じ重み、同じ参照フレームを使用します。

4 フレームのサイクル(接地、沈み込み、通過、浮き上がり)は動きが伝わりやすく、8 フレームよりはるかに安定します。まずはそこから始め、動きに必要な場合にだけフレームを追加してください。

逆に、ユーザーが既存のシートを持っている場合は、split_sprite_sheet で個々のフレームに切り分けられます。これを使えば、シートの他のフレームに触れずに 1 枚だけ編集できます。

タイル

シームレスに繰り返せるピクセルタイルを作るには、ピクセルの問題より先にタイル化の問題を解決する必要があります。そのため、tileability 機能で絞り込み、スケールの指定方法や目立つ繰り返しを避ける方法については layer-textures を確認してください。このページで説明したグリッド、パレット、エッジの明瞭さに関する内容はすべて当てはまります。

実践例

「騎士スプライトの32x32歩行アニメーションです。」

  1. 接地ポーズを生成します。filter.use_case: "text_to_image"を指定してlist_base_modelsを実行し、最初の結果を選んでから、次のようにプロンプトを入力します。「32x32 pixel art sprite of an armoured knight, side view, contact pose with left foot forward, limited 16-colour palette, 16-bit era shading, hard-edged pixels, no anti-aliasing, no blur, no gradients, isolated on transparent background.」
  2. 1つを承認します。このフレームが、以降すべての基準になります。
  3. 残りのフレームごとに1回、合計3回生成します。承認済みのフレームをそれぞれreference_imageとして添付し、ポーズの変更点だけを指定します。
  4. 4つを並べて、パレット、高さ、鎧のディテールにずれがないか確認します。ずれているものは再生成します。
  5. 4つのfile_id値を指定してpack_sprite_sheetを実行すると、透明背景のシートが返されます。

よくある間違い

  • グリッドサイズを指定せず、ぼやけた画像を後からピクセル化しようとする。
  • 1回の生成でスプライトシート全体を作ろうとする。
  • 除外対象のデフォルト設定であるアンチエイリアスとぼかしを除外し忘れる。
  • 参照フレームなしで各フレームを個別に生成し、キャラクターがぶれてしまう。
  • 4フレームのアニメーションがうまくいく前に、8フレームのアニメーションを生成する。
  • 透明背景を指定せず、生成された背景をそのまま使う。
  • pack_sprite_sheetならセルを均一に再現性よく作成できるのに、シートを手作業で組み立てる。

コメント