Pixel Art Exporter

ピクセルアートエクスポーター

概要

ピクセルアートエクスポーターのスキルを使うと、Aseprite のピクセルアートのスプライトを、用途に応じて最適化されたさまざまな形式でエクスポートできます。単一画像（PNG）、アニメーション GIF、スプライトシート、ゲームエンジン向けの JSON メタデータに対応しています。

主な機能：

• 単一フレームまたはアニメーション全体を PNG 画像としてエクスポート
• タイミングとループをカスタマイズできるアニメーション GIF を生成
• 複数のレイアウト（横方向、縦方向、グリッド、パック）でスプライトシートを作成
• ゲームエンジン（Unity、Godot、Phaser、汎用）向けの JSON メタデータを生成
• ピクセル単位で正確な拡大率（1x、2x、4x など）でエクスポート
• 透過、背景色、フレームごとのエクスポートに対応

対応するエクスポート形式：

• PNG：透過に対応した単一画像またはフレームシーケンス
• GIF：フレームのタイミングとループ制御に対応したアニメーション GIF
• スプライトシート：さまざまなパッキングアルゴリズムに対応したテクスチャアトラス
• JSON：フレームのメタデータ、アニメーションタグ、レイヤー情報

このスキルは pixel-mcp サーバーのツールと連携し、ウェブ、ゲーム、アプリケーション向けの本番環境で使えるアセットを作成します。

使用するタイミング

ユーザーが次のような場合に、このスキルを呼び出します。

• エクスポートまたは保存したい：「このスプライトをエクスポートして」「PNG として保存して」「スプライトシートを生成して」
• ファイル形式について言及する：「PNG」「GIF」「スプライトシート」「テクスチャアトラス」「JSON」
• ゲームエンジン向けに準備する：「Unity 向けにエクスポートして」「Godot 用のスプライトシート」「Phaser のアニメーション」
• 特定の出力が必要：「フレーム 3 だけをエクスポートして」「タイルセットを作成して」「各レイヤーを個別に保存して」
• 拡大を依頼する：「2x サイズでエクスポートして」「4x に拡大して」「Retina ディスプレイ向けに拡大して」
• アニメーションをエクスポートしたい：「これを GIF にして」「アニメーションをエクスポートして」「すべてのフレームを保存して」
• メタデータが必要：「JSON データを含めて」「座標付きでエクスポートして」「フレーム情報」

呼び出し例：

• 「このキャラクターのスプライトを PNG としてエクスポートしてくれますか？」
• 「ゲームエンジン用のスプライトシートが必要です」
• 「このアニメーションをアニメーション GIF として保存して」
• 「高解像度ディスプレイ向けに 4x でエクスポートして」
• 「JSON メタデータ付きのテクスチャアトラスを生成して」
• 「『run』アニメーションタグだけをエクスポートして」

手順

1. 単一画像（PNG）のエクスポート

静止スプライトまたは単一フレームの場合：

1. まずスプライト情報を取得

   Use mcp__aseprite__get_sprite_info to understand:
   - Current dimensions
   - Number of frames
   - Available layers
   - Color mode and transparency settings
   

2. 透過 PNG をエクスポート

   Use mcp__aseprite__export_png:
   - file_path: Absolute path (e.g., "/path/to/output/sprite.png")
   - frame_number: Specific frame (0-indexed) or omit for current frame
   - layer: Specific layer name or omit for merged output
   - scale: Scaling factor (1, 2, 4, etc.) - default is 1
   

3. エクスポートオプション

   • 透明な背景：デフォルトの動作で、アルファチャンネルを保持します
   • 特定の背景：レイヤーの表示設定を使うか、エクスポート前に統合します
   • アニメーションから単一フレームを選択：frame_number パラメーターを指定します
   • 特定のレイヤーのみ：レイヤー名を指定すると、そのレイヤーのみをエクスポートします

ワークフローの例：

1. Get sprite info to verify dimensions and frame count
2. Export PNG: mcp__aseprite__export_png with desired frame and scale
3. Confirm file creation and report dimensions to user

2. アニメーション GIF のエクスポート

ウェブやプレゼンテーション向けのアニメーションの場合：

1. アニメーションの設定を確認

   Use mcp__aseprite__get_sprite_info to check:
   - Frame count (needs 2+ frames)
   - Frame durations (timing information)
   - Animation tags (if specific tag requested)
   - Sprite dimensions
   

2. GIF をエクスポート

   Use mcp__aseprite__export_gif:
   - file_path: Output path (e.g., "/path/to/animation.gif")
   - animation_tag: Optional - specific tag name to export
   - loop: true (infinite loop) or false (play once)
   - scale: Upscaling factor if needed
   

3. GIF の最適化に関する考慮事項

   • GIF 形式には 256 色の制限があるため、パレットが最適化されていることを確認します
   • フレームのタイミングは Aseprite のフレーム時間を保持します
   • 透過に対応していますが、エッジにアーティファクトが発生する場合があります
   • サイズとフレーム数に応じてファイルサイズが大きくなります

ワークフローの例：

1. Verify sprite has multiple frames
2. Export GIF with appropriate loop setting
3. Report file size and frame count to user
4. Suggest optimization if file is large (>1MB)

3. スプライトシートの作成

ゲームエンジンやテクスチャアトラス向け：

1. レイアウト要件を理解する

   レイアウトの種類：

   • 横方向：すべてのフレームを1行に配置します（スクロールアニメーションに適しています）
   • 縦方向：すべてのフレームを1列に配置します（CSS アニメーションに適しています）
   • グリッド：フレームを行と列に配置します（バランスの取れたサイズになります）
   • パック：テクスチャサイズを最小限に抑えるよう最適化して配置します（エンジンによって異なります）

2. スプライトシートをエクスポートする

   Use mcp__aseprite__export_spritesheet:
   - file_path: Output PNG path (e.g., "/path/to/spritesheet.png")
   - layout: "horizontal", "vertical", "grid", or "packed"
   - animation_tag: Optional - export specific animation only
   - scale: Upscaling factor
   - padding: Pixels between frames (default 0, common: 1-2)
   - include_json: true to generate metadata file
   

3. JSON メタデータの構造

   include_json: true の場合、以下を含む .json ファイルが作成されます：

   {
     "frames": [
       {
         "filename": "frame_0.png",
         "frame": {"x": 0, "y": 0, "w": 32, "h": 32},
         "spriteSourceSize": {"x": 0, "y": 0, "w": 32, "h": 32},
         "sourceSize": {"w": 32, "h": 32},
         "duration": 100
       }
     ],
     "meta": {
       "app": "Aseprite",
       "version": "1.3.x",
       "format": "RGBA8888",
       "size": {"w": 256, "h": 32},
       "scale": "1"
     }
   }
   

4. レイアウト選択のガイドライン

   • 横方向：Web/CSS のスプライトアニメーションや、シンプルなスクロールに最適です
   • 縦方向：モバイルに適しており、縦スクロールのアニメーションに向いています
   • グリッド：Unity、Godot 向けで、テクスチャサイズのバランスが取れます（2のべき乗）
   • パック：アトラスに対応した高度なエンジン（Phaser、LibGDX）向けです

ワークフローの例：

1. Ask user about target platform if not specified
2. Recommend layout based on use case
3. Export spritesheet with JSON metadata
4. Report texture dimensions and frame count
5. Provide integration code sample for their engine

4. JSON メタデータの生成

ゲームエンジンとの連携向け：

1. エンジン別のメタデータ形式

   Unity：

   • Unity の Sprite Editor では「grid」レイアウトを使用します
   • JSON にスライス用のフレーム座標を指定します
   • テクスチャのにじみを防ぐため、パディングを含めます

   Godot：

   • 「horizontal」または「grid」レイアウトを使用します
   • JSON が AnimatedSprite のフレームに対応します
   • フレームの表示時間を FPS に変換します

   Phaser：

   • 最適なパフォーマンスを得るには「packed」レイアウトを使用します
   • JSON は Texture Packer 形式に従います
   • トリミングされたスプライトと回転に対応します

   汎用／カスタム：

   • x、y、w、h 座標を含む標準的なフレーム配列
   • 各フレームの表示時間をミリ秒で指定
   • アニメーションタグによるグループ化

2. メタデータと一緒にエクスポートする

   Always include JSON when exporting for game engines:
   - Set include_json: true in export_spritesheet
   - JSON file created with same name as PNG (different extension)
   - Contains frame positions, durations, and sprite metadata
   

3. メタデータの使用例

   JavaScript での解析（Phaser）：

   this.load.atlas('sprite', 'spritesheet.png', 'spritesheet.json');
   this.add.sprite(x, y, 'sprite', 'frame_0.png');
   

   C# での解析（Unity）：

   // Import spritesheet.png with Multiple sprite mode
   // Use JSON to set sprite rectangles in Sprite Editor
   

5. エクスポートの拡大縮小

高解像度ディスプレイ向けのピクセルパーフェクトな拡大：

1. 拡大するタイミング

   • Retina／HiDPI ディスプレイ：2倍または4倍を使用します
   • 最新のゲームエンジン：ネイティブサイズでエクスポートし、エンジン側で拡大縮小します
   • Web：2倍でエクスポートし、CSS で縮小します（よりシャープに描画できます）
   • 印刷／マーケティング：4倍以上を使用します

2. 拡大縮小のベストプラクティス

   • 常に整数倍で拡大縮小します（1倍、2倍、3倍、4倍など。1.5倍は使用しません）
   • ニアレストネイバー法を使用してピクセルパーフェクトな鮮明さを維持します
   • エクスポート後ではなく、前に拡大縮小します（ぼやけを防ぎます）
   • ファイルサイズと品質のトレードオフを考慮します

3. 拡大縮小を適用する

   Add scale parameter to any export:
   - mcp__aseprite__export_png: scale: 2
   - mcp__aseprite__export_gif: scale: 4
   - mcp__aseprite__export_spritesheet: scale: 2
   

4. 解像度の推奨値

   • 1倍：元のピクセルアートサイズ。レトロな雰囲気になります
   • 2倍：最新のディスプレイで標準的で、バランスに優れています
   • 4倍：高解像度で、マーケティング資料に適しています
   • 8倍以上：超高解像度で、印刷や大型ディスプレイに適しています

用途別のエクスポートワークフロー

Web 用の静的スプライト

1. Get sprite info to verify single frame
2. Export PNG at 2x scale with transparency
3. Optimize PNG with compression tools if needed
4. Provide HTML/CSS example for display

ゲーム用のキャラクターアニメーション

1. Verify animation has multiple frames and tags
2. Export spritesheet with "grid" layout
3. Include JSON metadata (include_json: true)
4. Set appropriate padding (1-2 pixels)
5. Scale if needed (typically 1x for engines)
6. Provide code snippet for target engine

アイコンセットのエクスポート

1. If multiple layers, export each separately
2. Use PNG format with transparency
3. Scale to multiple sizes (16x16, 32x32, 64x64)
4. Batch export all sizes
5. Organize in output directory structure

ソーシャルメディア用 GIF

1. Verify frame timing is appropriate (100-200ms typical)
2. Export GIF with loop: true
3. Scale to 2x or 4x for visibility
4. Check file size (optimize if >2MB)
5. Suggest hosting platforms if needed

ゲームエンジン用のタイルセット

1. Verify tiles are uniform size (e.g., 16x16, 32x32)
2. Export as grid spritesheet
3. Set padding to 0 or 1 (depends on engine)
4. Include JSON for tile coordinates
5. Provide tile size and grid dimensions

ゲームエンジンとの連携

Unity との連携

エクスポート設定：

• レイアウト：「grid」
• JSON を含める：true
• パディング：1～2ピクセル（にじみを防ぎます）
• 拡大縮小：1倍（拡大縮小は Unity が処理します）

インポート手順：

1. spritesheet.png を Assets にインポートします
2. Texture Type を「Sprite (2D and UI)」に設定します
3. Sprite Mode を「Multiple」に設定します
4. Sprite Editor を開き、JSON の座標を使ってスライスします
5. スプライトアニメーションを使って Animator Controller を作成します

コード例：

SpriteRenderer renderer = GetComponent<SpriteRenderer>();
renderer.sprite = sprites[frameIndex];

Godot との連携

エクスポート設定：

• レイアウト：「horizontal」または「grid」
• JSON を含める：true
• 拡大縮小：1倍
• パディング：0～1ピクセル

インポート手順：

1. spritesheet.png をプロジェクトにインポートします
2. AnimatedSprite ノードを作成します
3. SpriteFrames リソースを作成します
4. スプライトシートからフレームを追加します
5. JSON の表示時間を使って FPS を設定します

コード例：

$AnimatedSprite.play("run")
$AnimatedSprite.speed_scale = 1.0

Phaser との統合

エクスポート設定：

• レイアウト：「packed」または「horizontal」
• JSON を含める：true（Texture Packer 形式）
• スケール：ゲームの解像度に応じて 1x または 2x

インポート手順：

1. spritesheet.png と .json を assets に配置します
2. preload() でアトラスとして読み込みます
3. アトラスキーを指定してスプライトを作成します
4. フレーム名からアニメーションを作成します

コード例：

this.load.atlas('player', 'spritesheet.png', 'spritesheet.json');

this.anims.create({
  key: 'run',
  frames: this.anims.generateFrameNames('player', {
    prefix: 'frame_',
    suffix: '.png',
    start: 0,
    end: 7
  }),
  frameRate: 10,
  repeat: -1
});

汎用／カスタムエンジン

エクスポート設定：

• レイアウト：エンジンの機能に応じて選択します
• JSON を含める：true
• シンプルなフレーム配列形式を指定します

JSON 構造：

{
  "frames": [
    {"x": 0, "y": 0, "w": 32, "h": 32, "duration": 100}
  ],
  "meta": {
    "frameWidth": 32,
    "frameHeight": 32,
    "frameCount": 8
  }
}

統合パターン：

1. PNG テクスチャを読み込みます
2. JSON を解析してフレームの矩形を取得します
3. 座標からサブテクスチャ／スプライトを作成します
4. duration をアニメーションのタイミングに使用します

技術詳細

PNG エクスポート形式

仕様：

• カラーモード：RGBA（チャンネルごとに 8 ビット）
• 透明度：完全なアルファチャンネルに対応
• 圧縮：PNG 可逆圧縮
• 色空間：sRGB
• ビット深度：32 ビット（RGBA、チャンネルごとに 8 ビット）

使用する場合：

• 透明度のある静止スプライト
• アニメーションから切り出した個別フレーム
• 高品質なソースファイル
• レイヤーごとのエクスポート

GIF エクスポート形式

仕様：

• カラーパレット：最大 256 色
• 透明度：バイナリ（オン／オフ）、部分アルファには非対応
• アニメーション：フレームごとのタイミングを設定
• ループ制御：無限ループまたは 1 回再生
• 圧縮：LZW 圧縮

制限事項：

• 色数の上限により、パレットの最適化が必要になる場合があります
• 部分的な透明度には対応していません（アルファはバイナリです）
• 動画形式よりファイルサイズが大きくなります
• 8 ビットの色深度に制限されます

使用する場合：

• 動画プレーヤーを使わないウェブアニメーション
• ソーシャルメディアへの投稿
• メールで使用できるアニメーション
• シンプルなループアニメーション

スプライトシートのレイアウト

水平レイアウト：

[Frame0][Frame1][Frame2][Frame3]...

• 寸法：幅 = frameWidth * frameCount、高さ = frameHeight
• 最適な用途：CSS アニメーション、シンプルなスクロール

垂直レイアウト：

[Frame0]
[Frame1]
[Frame2]
[Frame3]
...

• 寸法：幅 = frameWidth、高さ = frameHeight * frameCount
• 最適な用途：モバイル向け最適化、垂直スクロール

グリッドレイアウト：

[Frame0][Frame1][Frame2][Frame3]
[Frame4][Frame5][Frame6][Frame7]
[Frame8][Frame9][Frame10][Frame11]

• 寸法：ほぼ正方形のテクスチャになるように調整します
• 最適な用途：ゲームエンジン、2 のべき乗サイズのテクスチャ、Unity、Godot

パックレイアウト：

[Frame0][Frame2][Frame5]
[Frame1][Frame3][Frame6]
    [Frame4][Frame7]

• 寸法：無駄なスペースを最小限に抑えるよう最適にパックします
• 最適な用途：アトラスに対応した高度なエンジン（Phaser、LibGDX）
• フレーム位置を示す JSON メタデータが必要です

メタデータ構造

標準フレーム形式：

{
  "filename": "frame_0.png",
  "frame": {"x": 0, "y": 0, "w": 32, "h": 32},
  "rotated": false,
  "trimmed": false,
  "spriteSourceSize": {"x": 0, "y": 0, "w": 32, "h": 32},
  "sourceSize": {"w": 32, "h": 32},
  "duration": 100
}

各フィールドの説明：

• filename：論理フレーム識別子
• frame：スプライトシート上の位置とサイズ（ピクセル）
• rotated：フレームが 90° 回転しているかどうか（パックレイアウト）
• trimmed：透明ピクセルが削除されているかどうか
• spriteSourceSize：トリミングされている場合の元のキャンバス内の位置
• sourceSize：トリミング前の元のキャンバスサイズ
• duration：フレームの表示時間（ミリ秒）

メタ情報：

{
  "app": "Aseprite",
  "version": "1.3.x",
  "format": "RGBA8888",
  "size": {"w": 256, "h": 128},
  "scale": "1",
  "frameTags": [
    {"name": "idle", "from": 0, "to": 3, "direction": "forward"},
    {"name": "run", "from": 4, "to": 11, "direction": "forward"}
  ]
}

一般的なエクスポートパターン

パターン 1：単一フレームのエクスポート

シナリオ： ユーザーが 1 フレームだけを PNG で求めている

1. mcp__aseprite__get_sprite_info (verify frame exists)
2. mcp__aseprite__export_png:
   - file_path: "/output/frame.png"
   - frame_number: 0 (or user-specified)
   - scale: 1 (or user-specified)
3. Confirm export with dimensions

パターン 2：アニメーション全体を GIF にエクスポート

シナリオ： ユーザーがスプライト全体のアニメーション GIF を求めている

1. mcp__aseprite__get_sprite_info (verify frames > 1)
2. mcp__aseprite__export_gif:
   - file_path: "/output/animation.gif"
   - loop: true
   - scale: 2
3. Report frame count and file size

パターン 3：ゲーム向けのスプライトシート

シナリオ： ユーザーが Unity／Godot 用のスプライトシートを求めている

1. mcp__aseprite__get_sprite_info (check dimensions and frames)
2. Ask about target engine if not specified
3. mcp__aseprite__export_spritesheet:
   - file_path: "/output/spritesheet.png"
   - layout: "grid"
   - include_json: true
   - padding: 1
   - scale: 1
4. Provide integration instructions for target engine

パターン 4：特定のアニメーションタグ

シナリオ： ユーザーが 1 つのアニメーション（例：「run」）だけをエクスポートしたい

1. mcp__aseprite__get_sprite_info (verify tag exists)
2. mcp__aseprite__export_spritesheet or export_gif:
   - animation_tag: "run"
   - Other settings as appropriate
3. Confirm only tagged frames exported

パターン 5：複数解像度でのエクスポート

シナリオ： ユーザーが複数のスケール（1x、2x、4x）を求めている

1. Export PNG/spritesheet at scale: 1
2. Export PNG/spritesheet at scale: 2
3. Export PNG/spritesheet at scale: 4
4. Organize files: sprite_1x.png, sprite_2x.png, sprite_4x.png
5. Report all outputs with dimensions

パターン 6：レイヤーごとのエクスポート

シナリオ： ユーザーが個々のレイヤーを別々のファイルとして求めている

1. mcp__aseprite__get_sprite_info (get layer names)
2. For each layer:
   - mcp__aseprite__export_png:
     - layer: "LayerName"
     - file_path: "/output/layerName.png"
3. Report all exported layers

他のスキルとの統合

Pixel Art Creator との統合

ワークフロー： 作成 → エクスポート

1. User creates sprite with Pixel Art Creator Skill
2. Automatically offer export options when creation complete
3. Suggest appropriate format based on sprite type (static vs animated)
4. Use this Skill to handle export

Pixel Art Animator との統合

ワークフロー： アニメーション作成 → エクスポート

1. User creates animation with Pixel Art Animator Skill
2. When animation complete, offer export formats:
   - GIF for web/social
   - Spritesheet for games
3. Use this Skill for export with animation metadata

Pixel Art Professional との統合

ワークフロー： 最適化 → エクスポート

1. User applies professional techniques (dithering, palette optimization)
2. Export with optimized settings:
   - Preserve palette for GIF export
   - Use appropriate compression for PNG
3. This Skill handles format-specific optimization

エラー処理

ファイルパスの問題

問題： 出力先のパスが無効、またはアクセスできません

解決策：

1. Verify directory exists (create if needed using Bash)
2. Check write permissions
3. Use absolute paths, not relative
4. Suggest valid path if user provides invalid one

フレームまたはタグが見つからない

問題： ユーザーが存在しないフレーム／タグを要求しています

解決策：

1. Use get_sprite_info to verify available frames and tags
2. List available options to user
3. Ask user to clarify which frame/tag they want
4. Don't attempt export until valid selection made

大容量ファイルに関する警告

問題： エクスポートによって非常に大きなファイルが作成されます（GIF は 5MB 超、PNG は 10MB 超）。

解決策：

1. Calculate approximate size based on dimensions and frame count
2. Warn user before export if size exceeds thresholds
3. Suggest alternatives:
   - Reduce scale factor
   - Export fewer frames
   - Use spritesheet instead of GIF
   - Optimize palette

フォーマットの制限

問題： ユーザーが、そのフォーマットでサポートされていない機能を要求しています（例：GIF の透過）。

解決策：

1. Explain format limitation clearly
2. Suggest alternative format or approach
3. Proceed with export noting the limitation
4. Examples:
   - GIF binary transparency → suggest PNG for partial alpha
   - GIF 256-color limit → suggest palette optimization first

スケール係数に関する問題

問題： 整数以外のスケール、または過度な拡大縮小が指定されています。

解決策：

1. Only accept integer scale factors (1, 2, 3, 4, etc.)
2. Warn if scale >4 (may create very large files)
3. Explain pixel-perfect scaling benefits
4. Suggest appropriate scale for user's use case

成功の指標

次の場合、エクスポートは正常に完了しています：

1. ファイルの作成： 指定されたパスに出力ファイルが存在する
2. 正しいフォーマット： ファイル拡張子が要求されたフォーマット（.png、.gif）と一致する
3. 想定どおりの寸法： スケーリング後の寸法が正しい（originalSize * scale）
4. フレーム数の一致： スプライトシートまたは GIF に想定どおりの数のフレームが含まれている
5. JSON の生成： include_json が true の場合、メタデータファイルが作成されている
6. ユーザーによる確認： ユーザーがエクスポートしたファイルを開いて確認できる

ユーザーへの報告：

✓ Export complete: /path/to/output.png
  - Format: PNG with transparency
  - Dimensions: 64x64 (2x scale from 32x32 original)
  - Frames: 1 (static image)
  - File size: ~8KB

[For spritesheets, also include:]
  - Layout: Grid (4x2)
  - Frame dimensions: 32x32 each
  - Total frames: 8
  - JSON metadata: /path/to/output.json
  - Integration: Ready for Unity/Godot import

[Provide relevant integration code snippet if applicable]

エクスポート後の案内：

• 次の手順を提案する（エンジンへのインポート、ファイルサイズの最適化、追加のスケールの作成）
• 対象プラットフォーム向けの統合コードを提示する
• JSON メタデータの使用方法を説明する
• 対象環境でのテストを推奨する