mcpField
C
character-sprite

character-sprite

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

character-sprite について

character-sprite は、Nano Banana MCP と ImageMagick を使い、Claude Office Visualizer 向けのキャラクタースプライトシートを作成するスキルです。ピクセルアートの仕様やシート配置を定め、全素材の生成前に基本デザインの確認を行います。

主な機能

  1. 01待機・歩行などのシート生成
  2. 028方向のキャラクターアニメーション
  3. 03グリッド・フレーム寸法・マゼンタ背景の指定
  4. 04全生成前に基本デザインを確認

活用シーン

  1. 01Claude Office Visualizer 用オフィスキャラクター素材の作成
  2. 02多方向の待機・歩行アニメーション制作
  3. 03タイピング・書類受け渡し・コーヒー動作の作成

MCP 対応

画像生成に Nano Banana MCP を使用します。README では ImageMagick による素材処理も説明されています。

インストール

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

$npx skills add https://github.com/paulrobello/claude-office --skill character-sprite

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

詳細

キャラクタースプライト生成ツール

Nano Banana MCP と ImageMagick を使用して、Claude Office Visualizer のエージェント用の、完全なアニメーション付きキャラクタースプライトシートを作成します。

プロジェクトの概要

キャラクターはレトロな16ビットのピクセルアートスタイルで描画されるオフィスワーカーです。各キャラクターには、さまざまなアクションや方向に対応する複数のアニメーションスプライトシートが必要です。

アートスタイル:レトロな16ビットのピクセルアート(SNES/Genesis時代)、鮮明なピクセル、限られた色数。

重要 — アンチエイリアス禁止:すべてのスプライトは、アンチエイリアス、スムージング、ピクセル間のブレンディングを一切行わず、シャープでくっきりしたピクセルのエッジにする必要があります。各ピクセルは、エッジがはっきりした単色である必要があります。アンチエイリアス処理されたスプライトは、ゲーム内でぼやけて不鮮明に見えます。

キャラクターの制約:

  • 最大幅:60px(現在のエージェントの半径 × 2 に合わせます)
  • 最大高さ:75px(幅の25%増しまで可)
  • マゼンタ(#FF00FF)のクロマキー背景

スプライトシートの技術仕様

重要:グリッドレイアウトの要件

ゲームエンジンは、画像全体を固定グリッドに分割してスプライトシートを解析します。すべてのセルは均一で、セル間の余白や間隔は一切ありません。

┌──────────────────────────────────────────────────────────────────────────────┐
│  NO gaps, borders, or padding between cells. Cells are calculated as:       │
│  cell_width = sheet_width / columns                                          │
│  cell_height = sheet_height / rows                                           │
│  Frame at (col, row) starts at pixel (col × cell_width, row × cell_height)  │
└──────────────────────────────────────────────────────────────────────────────┘

禁止事項:

  • 目に見えるグリッド線やセルの境界線を追加しない
  • セル間に余白や間隔を設けない
  • セルサイズを不統一にしない
  • 空のセルを残さない(マゼンタの背景色で塗りつぶしてください)
シートの寸法とフレーム仕様
シートの種類全体サイズグリッドセルサイズフレーム数
待機928 × 1152 px8列 × 8行116 × 144 px合計64
歩行928 × 1152 px8列 × 8行116 × 144 px合計64
タイピング928 × 144 px8列 × 1行116 × 144 px8フレーム
フォルダー受け渡し928 × 1152 px4列 × 1行232 × 411 px*4フレーム
コーヒー928 × 1152 px4列 × 1行232 × 699 px*4フレーム

*フォルダー受け渡し/コーヒーのシートにはコンテンツのオフセットがあります。下記のフレーム位置マップを参照してください。

フレーム位置マップ

グリッドシート(待機/歩行)— 8列 × 8行:

Row 0 (y=0-143):    South (front-facing)     - Frames 0-7 at x: 0, 116, 232, 348, 464, 580, 696, 812
Row 1 (y=144-287):  South-West               - Frames 0-7
Row 2 (y=288-431):  West (left profile)      - Frames 0-7
Row 3 (y=432-575):  North-West               - Frames 0-7
Row 4 (y=576-719):  North (back view)        - Frames 0-7
Row 5 (y=720-863):  North-East               - Frames 0-7
Row 6 (y=864-1007): East (right profile)     - Frames 0-7
Row 7 (y=1008-1151): South-East              - Frames 0-7

ストリップシート(1行):

Typing:  Row 0, 8 frames at x: 0, 116, 232, 348, 464, 580, 696, 812 (y=0-143)
Handoff: Row 0, 4 frames at x: 0, 232, 464, 696 (content y=343-753)
Coffee:  Row 0, 4 frames at x: 0, 232, 464, 696 (content y=0-698)
アニメーションの要件
アニメーションフレーム数再生時間ループ備考
待機8フレーム × 8方向2000msはいさりげない呼吸や重心移動
歩行8フレーム × 8方向800msはい腕を振る完全な歩行サイクル
タイピング8フレーム400msはい後ろ向き、キーボードに手を置く
フォルダー受け渡し4フレーム600msいいえ横向き、フォルダーを手渡す
コーヒー4フレーム400msはい正面向き、飲む動作

8方向(行の順序):S、SW、W、NW、N、NE、E、SE

ワークフロー

ステップ1:キャラクターの基本デザインを生成する

キャラクターの外見を決めるため、正面向きの待機ポーズを作成します。

mcpl call nanobanana generate_image '{
  "prompt": "16-bit pixel art game sprite of a [CHARACTER DESCRIPTION], front view facing camera, [CLOTHING DESCRIPTION], simple friendly face, small character suitable for top-down office game, retro SNES/Genesis style pixel art, standing idle pose with arms at sides, isolated on solid magenta background #FF00FF, SHARP CRISP PIXEL EDGES WITH ABSOLUTELY NO ANTI-ALIASING NO SMOOTHING NO BLENDING, each pixel is a solid color with hard edges, centered composition, no text, no shadows on background, 64x80 pixels scale",
  "output_path": "/Users/probello/Repos/claude-office/frontend/public/sprites/[NAME]_front_idle_raw.png",
  "model_tier": "pro"
}'

プロンプトの変数:

  • [CHARACTER DESCRIPTION]:例:「男性のオフィスワーカー」、「女性の開発者」、「ロボットアシスタント」
  • [CLOTHING DESCRIPTION]:例:「青いドレスシャツとネクタイ、茶色のズボン、黒い靴、短い茶色の髪」
  • [NAME]:キャラクター識別子(例:「agent1」、「agent2」、「boss」)
ステップ2:検証して調整する

重要:すべてのスプライトシートを生成する前に、ユーザーの承認を得てください。

  1. 生成した画像をコピーします:

    cp "/Users/probello/nanobanana-images/[FILENAME].png" \
       "/Users/probello/Repos/claude-office/frontend/public/sprites/[NAME]_front_idle_raw.png"
    
  2. Read ツールを使用して画像を表示し、ユーザーに提示します

  3. 次の項目についてユーザーに確認します:

    • キャラクターデザインがイメージに合っている
    • アートスタイルが適切(16ビットのピクセルアート)
    • プロポーションがゲームに適している
    • 色や細部に問題がない
  4. 却下された場合:フィードバックに基づいてプロンプトを調整し、再生成します

  5. 承認された場合:ステップ3に進みます

ステップ3:すべてのスプライトシートを生成する

生成ごとに、両方の参照画像を使用します:

  • 参照1:承認済みのキャラクターデザイン(一貫した外見にするため)
  • 参照2:既存のAgent #1のスプライトシート(一貫したフレームレイアウトにするため)
3a. アイドルアニメーションシート

技術要件:

  • 全体サイズ:928 × 1152 ピクセル
  • グリッド:8 列 × 8 行(合計 64 セル)
  • セルサイズ:各 116 × 144 ピクセル
  • セル間に境界線、パディング、間隔を設けないでください
  • フレームでセル領域全体を埋めてください
mcpl call nanobanana generate_image '{
  "prompt": "16-bit pixel art sprite sheet, EXACTLY 928x1152 pixels total, divided into 8 columns and 8 rows grid, each cell is EXACTLY 116x144 pixels with NO borders NO padding NO gaps between cells, character is [CHARACTER DESCRIPTION] (EXACTLY as shown in first reference image), 8 DIRECTIONS IN EXACT ORDER from top to bottom: ROW 0 south facing toward camera, ROW 1 south-west diagonal, ROW 2 west facing left profile, ROW 3 north-west diagonal, ROW 4 north facing away back view, ROW 5 north-east diagonal, ROW 6 east facing right profile, ROW 7 south-east diagonal, each row has 8 frames of subtle idle breathing animation, cells touch edge-to-edge with no visible grid lines, retro SNES Genesis 16-bit pixel art, SHARP CRISP PIXEL EDGES WITH ABSOLUTELY NO ANTI-ALIASING NO SMOOTHING NO BLENDING, each pixel is a solid color with hard edges, consistent character in every cell matching reference, solid magenta #FF00FF background fills all empty space in each cell, game sprite sheet asset, no text no watermarks",
  "input_image_path_1": "/Users/probello/Repos/claude-office/frontend/public/sprites/[NAME]_front_idle_raw.png",
  "input_image_path_2": "/Users/probello/Repos/claude-office/frontend/public/sprites/agent1_idle_sheet.png",
  "output_path": "/Users/probello/Repos/claude-office/frontend/public/sprites/[NAME]_idle_sheet_raw.png",
  "model_tier": "pro",
  "aspect_ratio": "4:5",
  "negative_prompt": "blurry, 3D, realistic, anti-aliasing, anti-aliased edges, smoothing, blending, soft edges, gradients, shadows on background, inconsistent character, different characters, text, watermark, grid lines, cell borders, padding between frames, gaps between cells"
}'
3b. 歩行アニメーションシート

技術要件:

  • 全体サイズ:928 × 1152 ピクセル
  • グリッド:8 列 × 8 行(合計 64 セル)
  • セルサイズ:各 116 × 144 ピクセル
  • セル間に境界線、パディング、間隔を設けないでください
mcpl call nanobanana generate_image '{
  "prompt": "16-bit pixel art sprite sheet for WALKING animation, EXACTLY 928x1152 pixels total, divided into 8 columns and 8 rows grid, each cell is EXACTLY 116x144 pixels with NO borders NO padding NO gaps between cells, character is [CHARACTER DESCRIPTION] (EXACTLY as shown in first reference image), 8 DIRECTIONS IN EXACT ORDER from top to bottom: ROW 0 walking south toward camera, ROW 1 walking south-west diagonal, ROW 2 walking west left profile, ROW 3 walking north-west diagonal, ROW 4 walking north away back view, ROW 5 walking north-east diagonal, ROW 6 walking east right profile, ROW 7 walking south-east diagonal, each row has 8 frames of walk cycle with alternating legs and natural arm swing, cells touch edge-to-edge with no visible grid lines, retro SNES Genesis 16-bit pixel art, SHARP CRISP PIXEL EDGES WITH ABSOLUTELY NO ANTI-ALIASING NO SMOOTHING NO BLENDING, each pixel is a solid color with hard edges, consistent character in every cell matching reference, solid magenta #FF00FF background fills all empty space in each cell, game sprite sheet asset, no text no watermarks",
  "input_image_path_1": "/Users/probello/Repos/claude-office/frontend/public/sprites/[NAME]_front_idle_raw.png",
  "input_image_path_2": "/Users/probello/Repos/claude-office/frontend/public/sprites/agent1_walk_sheet.png",
  "output_path": "/Users/probello/Repos/claude-office/frontend/public/sprites/[NAME]_walk_sheet_raw.png",
  "model_tier": "pro",
  "aspect_ratio": "4:5",
  "negative_prompt": "blurry, 3D, realistic, anti-aliasing, anti-aliased edges, smoothing, blending, soft edges, gradients, shadows on background, inconsistent character, different characters, text, watermark, standing still, static pose, grid lines, cell borders, padding between frames, gaps between cells"
}'
3c. タイピングアニメーションシート

技術要件:

  • 全体サイズ:928 × 144 ピクセル(1 行)
  • グリッド:8 列 × 1 行
  • セルサイズ:各 116 × 144 ピクセル
  • セル間に境界線、パディング、間隔を設けないでください
  • キャラクターのみ — 机、椅子、キーボードは含めないでください(それらは別のゲームアセットです)
mcpl call nanobanana generate_image '{
  "prompt": "16-bit pixel art sprite sheet for TYPING animation, EXACTLY 928x144 pixels total, horizontal strip with 8 equal cells of EXACTLY 116x144 pixels each with NO borders NO padding NO gaps between cells, character is [CHARACTER DESCRIPTION] (EXACTLY as shown in first reference image), character seen from behind (back view) in seated typing pose with arms extended forward making typing motions, CHARACTER ONLY no desk no chair no keyboard no furniture, 8 frame typing animation showing hands and arms making typing movements, frames show subtle arm position changes as if typing, cells touch edge-to-edge with no visible grid lines, retro SNES Genesis 16-bit pixel art, SHARP CRISP PIXEL EDGES WITH ABSOLUTELY NO ANTI-ALIASING NO SMOOTHING NO BLENDING, each pixel is a solid color with hard edges, consistent character across all 8 frames matching reference, solid magenta #FF00FF background fills all empty space in each cell, game sprite sheet asset, no text no watermarks",
  "input_image_path_1": "/Users/probello/Repos/claude-office/frontend/public/sprites/[NAME]_front_idle_raw.png",
  "input_image_path_2": "/Users/probello/Repos/claude-office/frontend/public/sprites/agent1_typing_sheet.png",
  "output_path": "/Users/probello/Repos/claude-office/frontend/public/sprites/[NAME]_typing_sheet_raw.png",
  "model_tier": "pro",
  "aspect_ratio": "21:9",
  "negative_prompt": "blurry, 3D, realistic, anti-aliasing, anti-aliased edges, smoothing, blending, soft edges, gradients, shadows on background, inconsistent character, different characters, text, watermark, front view, standing, grid lines, cell borders, padding between frames, gaps between cells, desk, chair, keyboard, furniture, computer, monitor"
}'
3d. フォルダー受け渡しアニメーションシート

技術要件:

  • 全体サイズ:928 × 1120 ピクセル(ただし、コンテンツは 1 行)
  • グリッド:4 列 × 1 行(使用可能なコンテンツ領域)
  • セルサイズ:各 232 × 411 ピクセル
  • コンテンツの開始位置:y=343(垂直オフセット)
  • セル間に境界線、パディング、間隔を設けないでください
mcpl call nanobanana generate_image '{
  "prompt": "16-bit pixel art sprite sheet for HANDING FOLDER animation, EXACTLY 928 pixels wide, horizontal strip with 4 equal cells of EXACTLY 232 pixels wide each with NO borders NO padding NO gaps between cells, character is [CHARACTER DESCRIPTION] (EXACTLY as shown in first reference image), character seen from side profile holding and handing over a manila folder document, 4 frame animation sequence: frame 1 holding folder at waist, frame 2 extending arm with folder, frame 3 arm fully extended offering folder, frame 4 releasing folder hand open, cells touch edge-to-edge with no visible grid lines, retro SNES Genesis 16-bit pixel art, SHARP CRISP PIXEL EDGES WITH ABSOLUTELY NO ANTI-ALIASING NO SMOOTHING NO BLENDING, each pixel is a solid color with hard edges, consistent character across all 4 frames matching reference, solid magenta #FF00FF background fills all empty space in each cell, game sprite sheet asset, no text no watermarks",
  "input_image_path_1": "/Users/probello/Repos/claude-office/frontend/public/sprites/[NAME]_front_idle_raw.png",
  "input_image_path_2": "/Users/probello/Repos/claude-office/frontend/public/sprites/agent1_handoff_sheet.png",
  "output_path": "/Users/probello/Repos/claude-office/frontend/public/sprites/[NAME]_handoff_sheet_raw.png",
  "model_tier": "pro",
  "aspect_ratio": "21:9",
  "negative_prompt": "blurry, 3D, realistic, anti-aliasing, anti-aliased edges, smoothing, blending, soft edges, gradients, shadows on background, inconsistent character, different characters, text, watermark, back view, grid lines, cell borders, padding between frames, gaps between cells"
}'
3e. コーヒーを飲むアニメーションシート

技術要件:

  • 全体サイズ:928 × 1120 ピクセル(ただし、コンテンツは 1 行)
  • グリッド:4 列 × 1 行(使用可能なコンテンツ領域)
  • セルサイズ:各 232 × 699 ピクセル
  • コンテンツの開始位置:y=0
  • セル間に境界線、パディング、間隔を設けないでください
mcpl call nanobanana generate_image '{
  "prompt": "16-bit pixel art sprite sheet for DRINKING COFFEE animation, EXACTLY 928 pixels wide, horizontal strip with 4 equal cells of EXACTLY 232 pixels wide each with NO borders NO padding NO gaps between cells, character is [CHARACTER DESCRIPTION] (EXACTLY as shown in first reference image), character seen from front holding and drinking from a coffee cup mug, 4 frame animation sequence: frame 1 holding coffee cup at chest, frame 2 raising cup toward face, frame 3 cup at lips drinking, frame 4 lowering cup with satisfied expression, cells touch edge-to-edge with no visible grid lines, retro SNES Genesis 16-bit pixel art, SHARP CRISP PIXEL EDGES WITH ABSOLUTELY NO ANTI-ALIASING NO SMOOTHING NO BLENDING, each pixel is a solid color with hard edges, consistent character across all 4 frames matching reference, solid magenta #FF00FF background fills all empty space in each cell, game sprite sheet asset, no text no watermarks",
  "input_image_path_1": "/Users/probello/Repos/claude-office/frontend/public/sprites/[NAME]_front_idle_raw.png",
  "input_image_path_2": "/Users/probello/Repos/claude-office/frontend/public/sprites/agent1_coffee_sheet.png",
  "output_path": "/Users/probello/Repos/claude-office/frontend/public/sprites/[NAME]_coffee_sheet_raw.png",
  "model_tier": "pro",
  "aspect_ratio": "21:9",
  "negative_prompt": "blurry, 3D, realistic, anti-aliasing, anti-aliased edges, smoothing, blending, soft edges, gradients, shadows on background, inconsistent character, different characters, text, watermark, back view, sitting, grid lines, cell borders, padding between frames, gaps between cells"
}'
ステップ 4:生成した各シートを検証する

重要:各スプライトシートを生成した後:

  1. スプライトフォルダーにコピーします:

    cp "/Users/probello/nanobanana-images/[FILENAME].png" \
       "/Users/probello/Repos/claude-office/frontend/public/sprites/[NAME]_[TYPE]_sheet_raw.png"
    
  2. 寸法が仕様に一致していることを確認します:

    cd /Users/probello/Repos/claude-office/frontend/public/sprites
    
    # Check sheet dimensions
    magick "[NAME]_[TYPE]_sheet_raw.png" -format "Size: %wx%h" info:
    
    # Expected dimensions:
    # idle/walk sheets: 928x1152
    # typing sheet: 928x144 (after cropping) or 928x1152 (full generation)
    # handoff/coffee sheets: 928x1152
    
  3. Read ツールを使って表示し、次の点を確認します:

    • キャラクターが承認済みのデザインと一致している
    • すべてのフレームがあり、正しく配置されている
    • アニメーションの流れが正しく見える
    • マゼンタの背景が均一である
    • 目に見えるグリッド線やセルの境界線がない
    • セル間にパディングや間隔がない
    • アンチエイリアスのない鮮明なピクセルエッジ(拡大して確認)
    • 方向別シート(アイドル/歩行)の場合:方向の順序が正しいことを確認します:
      • 行 0:南(カメラ正面)
      • 行 1:南西
      • 行 2:西(左側面)
      • 行 3:北西
      • 行 4:北(後ろ姿)
      • 行 5:北東
      • 行 6:東(右側面)
      • 行 7:南東
  4. よくある問題を確認します:

    • グリッド線が見える場合: 「グリッド線なし」をより強調して再生成します
    • セル数が間違っている場合:正しい列数/行数の指定で再生成します
    • セルサイズが不揃いの場合:プロンプトに正確なピクセル寸法を指定して再生成します
    • エッジが柔らかい/ぼやけて見える(アンチエイリアスがかかっている)場合:「アンチエイリアスなし」をより強調して再生成します
    • 方向の順序が間違っている場合:「行 0 は南、行 1 は南西……」と明示した順序で再生成します
  5. 問題が見つかった場合は、そのシートのみを再生成します

ステップ 5:すべてのスプライトシートを処理する

改善されたマルチパスワークフローを使って、すべてのシートからマゼンタの背景を削除します:

cd /Users/probello/Repos/claude-office/frontend/public/sprites

# Process all sheets using the shared script
SCRIPT="/Users/probello/Repos/claude-office/.claude/skills/shared/scripts/remove_magenta.sh"

for sheet in [NAME]_idle_sheet [NAME]_walk_sheet [NAME]_typing_sheet [NAME]_handoff_sheet [NAME]_coffee_sheet; do
  INPUT="${sheet}_raw.png"
  OUTPUT="${sheet}.png"

  # Use multi-pass removal (--skip-trim preserves sprite sheet dimensions)
  "$SCRIPT" "$INPUT" "$OUTPUT" --skip-trim

  echo "Processed: $OUTPUT"
  magick "$OUTPUT" -format "  Size: %wx%h, Opaque: %[opaque]" info:
done

マルチパスワークフロー:

  1. FFmpeg geq フィルター:R≈B かつ G が低いピクセル(紫/マゼンタ系の色相)を削除します
  2. ImageMagick のマルチパス処理:残った明るいマゼンタ色を取り除きます
  3. ImageMagick の暗い紫色のクリーンアップ:rgb(32,0,31) のような暗いエッジピクセルを削除します

ベースのキャラクタースプライトも処理します:

INPUT="[NAME]_front_idle_raw.png"
OUTPUT="[NAME]_front_idle.png"

"$SCRIPT" "$INPUT" "$OUTPUT"

フォールバック(スクリプトが使用できない場合):

magick "$INPUT" \
  -fuzz 40% -transparent "#FF00FF" \
  -fuzz 15% -transparent "#CC00CC" \
  -fuzz 15% -transparent "#880088" \
  -strip \
  "$OUTPUT"
ステップ 6:最終確認

処理済みの各スプライトシートを表示し、次の点を確認します:

  • キャラクターのエッジ周辺にピンク/マゼンタの縁取りがない(拡大して確認)
  • 全体にわたって透明部分がきれいである
  • キャラクターのエッジが保たれている(透明化処理で削られていない)
  • すべてのフレームが見える

処理後もピンクのエッジが残る場合:

  1. fuzz 値を上げてみます:-fuzz 45% または -fuzz 50%(ただし、50% を超えるとキャラクターのエッジが削られることがあるので注意してください)
  2. その結果キャラクターのエッジが削られる場合は、fuzz 値を下げて、生画像を手動で確認します
  3. マゼンタを背景にしたアンチエイリアス付きのエッジがある生画像では、縁取りの問題が必ず発生します。「アンチエイリアスなし」をより強調して、生画像を再生成してください

参照用スプライトシート

以下の Agent #1 のスプライトシートをレイアウトの参照として使用します。

シート場所
待機/frontend/public/sprites/agent1_idle_sheet.png
歩行/frontend/public/sprites/agent1_walk_sheet.png
タイピング/frontend/public/sprites/agent1_typing_sheet.png
引き継ぎ/frontend/public/sprites/agent1_handoff_sheet.png
コーヒー/frontend/public/sprites/agent1_coffee_sheet.png

出力先

すべてのスプライトの出力先:/Users/probello/Repos/claude-office/frontend/public/sprites/

  • [name]_front_idle_raw.png - オリジナルのキャラクターデザイン(参照用として保持)
  • [name]_front_idle.png - 透過処理済みのキャラクターデザイン
  • [name]_[type]_sheet_raw.png - 未加工のスプライトシート(バックアップとして保持)
  • [name]_[type]_sheet.png - ゲーム用に処理済みのスプライトシート

キャラクター案

バリエーションを増やすためのキャラクター説明例:

キャラクター説明
Agent 2紫のブラウス、黒いパンツ、眼鏡、ポニーテールの女性開発者
Agent 3グレーのセーター、カーキ色のパンツ、ひげ、後退した生え際の男性シニア開発者
Agent 4緑のパーカー、ジーンズ、カラフルな髪のノンバイナリーのインターン
Boss/Claudeオレンジ/タン系の配色の威厳ある人物(Claude のブランドイメージに合わせる)

アンチパターンとよくある問題

グリッドレイアウトの問題(重大)

禁止事項:

  • セル間に見えるグリッド線や境界線を追加する
  • セル間にパディング/マージン/間隔を追加する
  • セルサイズが不揃いなシートを生成する
  • 行数/列数を誤る(グリッドシートは上記の仕様どおり、8×8 にする必要があります)
  • タイピングスプライトに机、椅子、キーボードを含める(これらはゲーム内の別アセットです)

よくある生成ミス(要修正):

  • セル間にグリッド線が見える → 「グリッド線なし」を強調して再生成する
  • セルのサイズが異なる → ピクセル単位で正確な寸法を指定して再生成する
  • セルが空または欠落している → すべてのセルを埋めて再生成する
  • キャラクターに家具が含まれている → 「キャラクターのみ」を強調して再生成する
アンチエイリアスの問題(重大)

禁止事項:

  • 輪郭が柔らかい/ぼやけたスプライトを受け入れる
  • ピクセル間で色が混ざっているスプライトを受け入れる
  • 輪郭に滑らかなグラデーションがあるスプライトを受け入れる

アンチエイリアスの検出方法:

  • キャラクターの輪郭を拡大する。各ピクセルが単色になっている必要があります
  • キャラクターの輪郭の周囲に「ハロー」や「フリンジ」状の色がないか確認する
  • 輪郭がギザギザ/段状ではなく、滑らかに見えないか確認する

よくあるアンチエイリアスのミス(要修正):

  • キャラクターの輪郭がぼやけている → 「アンチエイリアスなし」をより強調して再生成する
  • ピクセルの境界に色のグラデーションがある → 「各ピクセルは単色」と強調して再生成する
  • ぼやけて濁った印象がある → 「くっきりとシャープなピクセルの輪郭」を指定して再生成する
ワークフローのアンチパターン

禁止事項:

  • 最初のデザイン承認を省略する。ユーザーが満足するまで調整する
  • 両方の参照画像を使わずにスプライトシートを生成する
  • 生成した各シートの検証を省略する
  • 背景の削除にフラッドフィルを使う(スプライトシートには -transparent を使用する)
  • シート間で一貫性のないキャラクターデザインのまま進める

必ず行うこと:

  • まずベースデザインについて必ずユーザーの承認を得る
  • 各シートでキャラクターの参照画像とレイアウトの参照画像を使用する
  • 生成後、次へ進む前に各シートを検証する
  • 未加工の画像をバックアップとして保持する
  • 検証が完了した後、すべてのシートをまとめて処理する
  • 生成後にセルの寸法が仕様と一致することを確認する

コメント