Pixel Art Animator

ピクセルアートアニメーター

概要

このスキルは、スプライトのすべてのアニメーション関連タスクを処理します。フレーム管理、タイミング、アニメーションタグ（シーケンス）、効率的なアニメーションのためのリンクされたセルが含まれます。

使用するタイミング

次のような場合にこのスキルを使用します。

• スプライトを「アニメーション化」したい、または「アニメーションを追加」したい場合
• 「フレーム」、「キーフレーム」、「フレームレート」について言及している場合
• 「歩行サイクル」、「走行サイクル」、「待機アニメーション」、「攻撃アニメーション」など、動きを説明している場合
• 「アニメーションタグ」、「ループ」、「再生」について質問している場合
• アニメーション用の「スプライトシート」を作成したい場合（エクスポーターのスキルと連携してください）

トリガーキーワード： アニメーション化、アニメーション、フレーム、歩行サイクル、走行、待機、攻撃、ループ、移動、動き

手順

1. アニメーションの基本を理解する

フレーム：アニメーションシーケンス内の1枚の画像です。スプライトは1フレームから始まります。

フレームの表示時間：各フレームを表示する時間です（ミリ秒単位）。デフォルト：100ms（10 FPS）。

アニメーションタグ：フレームに名前を付けたシーケンスです（例：「walk」はフレーム1～4、「idle」はフレーム5～8）。

リンクされたセル：別のセルと画像データを共有するセルです。一方を編集すると、リンクされたすべてのセルが更新されます。

再生方向：

• 順方向：フレームを1 → 2 → 3 → 4の順に再生し、その後ループします
• 逆方向：フレームを4 → 3 → 2 → 1の順に再生し、その後ループします
• ピンポン：フレームを1 → 2 → 3 → 4 → 3 → 2 → 1の順に再生し、その後ループします

2. アニメーションフレームを作成する

フレームの追加： mcp__aseprite__add_frame を使って新しいフレームを作成します。

• フレーム番号は1から始まります
• 新しいフレームは、現在のフレームのコピー（または空白）として作成されます

一般的なフレーム数：

• 待機アニメーション：2～4フレーム（わずかな動き）
• 歩行サイクル：4～8フレーム（脚が交互に動く）
• 走行サイクル：6～8フレーム（より速く、大きな動き）
• 攻撃アニメーション：3～6フレーム（溜め、攻撃、回復）
• ジャンプ：4～6フレーム（しゃがむ、上昇、頂点、下降、着地）

フレームの複製： mcp__aseprite__duplicate_frame を使って既存のフレームをコピーします。

• バリエーションの作成に便利です
• 類似したフレームの出発点として使えます

フレームの削除： mcp__aseprite__delete_frame を使ってフレームを削除します。

• 最後に残ったフレームは削除できません
• 削除後、フレーム番号は振り直されます

3. フレームのタイミングを設定する

フレームの表示時間： mcp__aseprite__set_frame_duration を使います。

• 表示時間はミリ秒（ms）単位です
• 100ms = 10 FPS
• 50ms = 20 FPS
• 33ms ≈ 30 FPS
• 16ms ≈ 60 FPS

一般的なタイミングパターン：

均等なタイミング： すべてのフレームの表示時間を同じにします。シンプルで予測しやすい設定です。

• 歩行サイクル：すべてのフレームを100msに設定（滑らかな10 FPS）

可変タイミング： 強調したい部分に合わせて表示時間を変えます。

• 待機：呼吸のような効果を出すため、ゆっくりしたフレーム（150ms）
• 攻撃：素早い攻撃（30ms）、ゆっくりした回復（100ms）

フレームの保持： ドラマチックな効果を出すため、表示時間を長くします。

• ジャンプの頂点：200ms（空中で静止する時間）
• 衝撃：50ms（短い閃光）

4. アニメーションタグを作成する

目的： フレームを名前付きのシーケンスに整理します。

mcp__aseprite__create_tag を使います。

• 名前：「walk」、「idle」、「attack」など
• 開始フレーム：開始するフレーム（1から数えます）
• 終了フレーム：終了するフレーム（そのフレームを含みます）
• 方向：「forward」、「reverse」、「ping-pong」

タグの例：

• タグ「idle」：フレーム1～2、ピンポン方向
• タグ「walk」：フレーム3～6、順方向
• タグ「attack」：フレーム7～10、順方向

利点：

• 特定のアニメーションを個別にエクスポートできます
• 複雑なスプライトシートを整理できます
• ゲームエンジンからタグを参照できます

5. リンクされたセルを使用する

目的： フレーム間で画像データを共有し、メモリを節約して一貫性を保ちます。

mcp__aseprite__link_cel を使います。

• フレームの内容が変化しない場合に便利です
• 例：背景レイヤーをアニメーション全体で同じに保つ
• リンクされたセルを1つ編集すると、すべてのセルが更新されます

使用する場面：

• 静止した背景要素
• 歩行サイクル中のキャラクターの顔（胴体が別々にアニメーションする場合）
• アニメーション内で繰り返されるフレーム

ワークフロー：

1. 内容を含むフレームを作成します
2. データを共有するセルをリンクします
3. 一度編集すれば、すべての箇所が更新されます

6. アニメーションのワークフロー

ワークフロー 1：歩行サイクル（4 フレーム）

1. ベーススプライトを作成します（または既存のものを使用します）
2. フレームをさらに 3 つ追加します（合計 4 フレーム）
3. 歩行時の位置になるよう各フレームを編集します：
   • フレーム 1：左足を前に出します
   • フレーム 2：接地（両足が地面に触れています）
   • フレーム 3：右足を前に出します
   • フレーム 4：接地（両足が地面に触れています）
4. すべてのフレームの表示時間を 100ms に設定します
5. タグ「walk」を作成します：フレーム 1～4、順方向

ワークフロー 2：待機アニメーション（2 フレーム）

1. ベーススプライトを作成します
2. フレームをさらに 1 つ追加します（合計 2 フレーム）
3. わずかな変化を付けます：
   • フレーム 1：通常の立ち姿
   • フレーム 2：さりげない動き（呼吸、まばたき）
4. フレームの表示時間を 500ms に設定します（ゆっくりと、さりげなく）
5. タグ「idle」を作成します：フレーム 1～2、ピンポン方向

ワークフロー 3：複数のアニメーションを含む複雑なスプライト

1. ベーススプライトを作成します
2. すべてのアニメーションに必要な数のフレームを追加します：
   • 待機：2 フレーム
   • 歩行：4 フレーム
   • ジャンプ：4 フレーム
   • 合計：10 フレーム
3. フレームを順番に並べます
4. 個別のタグを作成します：
   • タグ「idle」：フレーム 1～2
   • タグ「walk」：フレーム 3～6
   • タグ「jump」：フレーム 7～10
5. アニメーションごとに適切なフレーム表示時間を設定します

例

例 1：シンプルな 2 フレームの待機アニメーション

ユーザーのリクエスト：

「このスプライトにシンプルな待機アニメーションを追加してください」

手順：

1. フレームを 1 つ追加します（フレーム 1 と 2 がある状態になります）
2. フレーム 2 にさりげない変化を加えます（ピクセルを上下に 1～2 ピクセル移動します）
3. 両方のフレームの表示時間を 500ms に設定します
4. タグ「idle」を作成します：フレーム 1～2、ピンポン方向
5. 結果：前後にゆっくり揺れる待機モーションになります

例 2：4 フレームの歩行サイクル

ユーザーのリクエスト：

「このキャラクターの歩行サイクルアニメーションを作成してください」

手順：

1. フレームを 3 つ追加します（1、2、3、4 がある状態になります）
2. 歩行ポーズになるよう各フレームを編集します
3. すべてのフレームの表示時間を 100ms に設定します
4. タグ「walk」を作成します：フレーム 1～4、順方向
5. 結果：10 FPS のループする歩行アニメーションになります

例 3：タイミングを変化させた攻撃

ユーザーのリクエスト：

「素早い一撃を含む攻撃アニメーションを追加してください」

手順：

1. フレームを 5 つ追加します（フレーム 1 がすでにある場合、合計 6 フレームになります）
2. フレームの並び：
   • フレーム 2：構え（遅い）
   • フレーム 3：準備（遅い）
   • フレーム 4：攻撃（速い）
   • フレーム 5：振り抜き（中程度）
   • フレーム 6：戻り（遅い）
3. 表示時間を設定します：
   • フレーム 2～3：150ms（ゆっくり構えます）
   • フレーム 4：30ms（素早い攻撃）
   • フレーム 5：80ms（中程度の振り抜き）
   • フレーム 6：120ms（ゆっくり戻ります）
4. タグ「attack」を作成します：フレーム 2～6、順方向

例 4：リンクされた背景

ユーザーのリクエスト：

「キャラクターをアニメーションさせつつ、背景は静止させてください」

手順：

1. 2 つのレイヤー「Background」と「Character」があるものとします
2. アニメーション用のフレームを追加します
3. アニメーション用に各フレームの「Character」レイヤーを編集します
4. 「Background」レイヤーのすべてのセルをリンクします：
   • フレーム 2 の背景をフレーム 1 にリンクします
   • フレーム 3 の背景をフレーム 1 にリンクします
   • フレーム 4 の背景をフレーム 1 にリンクします
5. 背景は同じまま、キャラクターがアニメーションします

技術的な詳細

フレーム番号

• フレーム番号は 1 から始まります（最初のフレームはフレーム 1 です）
• 位置 N にフレームを追加すると、その位置に挿入されます
• フレーム N を削除すると、それ以降のフレーム番号が振り直されます

フレーム表示時間の制限

• 最小：1ms（速すぎるため推奨しません）
• 最大：65535ms（65.5 秒）
• 実用的な範囲：16ms（60 FPS）～500ms（2 FPS）

アニメーションタグの制限

• タグの数に厳密な上限はありません
• タグは同じフレームを重複して指定できます
• タグ名は一意で、内容がわかりやすいものにしてください

リンクされたセルの動作

• リンクされたセルの 1 つを編集すると、リンクされたすべてのインスタンスが更新されます
• リンクを解除すると、独立したコピーが作成されます
• 大規模なアニメーションのメモリ最適化に役立ちます

パフォーマンス

• フレームの追加：<20ms
• フレームの複製：<30ms
• フレーム表示時間の設定：<10ms
• タグの作成：<15ms
• セルのリンク：<25ms

よくあるパターン

パターン：呼吸する待機アニメーション

2 フレーム、ピンポン、ゆっくりしたタイミング（400～500ms）

• フレーム 1：通常
• フレーム 2：わずかな垂直移動（1～2 ピクセル）

パターン：基本的な歩行

4 フレーム、前進、均等なタイミング（100ms）

• フレーム 1：左足を前に、右足を後ろに
• フレーム 2：両足をそろえる（接地）
• フレーム 3：右足を前に、左足を後ろに
• フレーム 4：両足をそろえる（接地）

パターン：走行サイクル

6～8 フレーム、前進、速めのタイミング（60～80ms）

• 歩行よりも誇張したポーズ
• 歩幅を広くする
• 前傾姿勢

パターン：ジャンプのシーケンス

5～6 フレーム、前進、可変のタイミング

• フレーム 1：しゃがむ（100ms）
• フレーム 2：踏み切る（50ms）
• フレーム 3：上昇（80ms）
• フレーム 4：頂点（200ms）- 空中で静止する時間
• フレーム 5：下降（80ms）
• フレーム 6：着地（100ms）

他のスキルとの連携

• アニメーションを作成する前に pixel-art-creator を使ってベースとなるスプライトを作成します
• アニメーションの後、pixel-art-professional を使って仕上げます（シェーディング、アンチエイリアス処理）
• ユーザーがスプライトシートまたは GIF のエクスポートを希望する場合は、pixel-art-exporter に引き継ぎます

エラー処理

最後のフレームを削除できない場合：

• スプライトには少なくとも 1 フレーム必要です
• 最後のフレームを削除しようとした場合は、ユーザーに伝えます

無効なフレーム番号：

• フレーム番号は 1 から N（フレームの合計数）までである必要があります
• 操作の前に範囲を確認します

タグのフレーム範囲エラー：

• 「From」フレームは「To」フレーム以下である必要があります
• どちらも有効なフレーム番号である必要があります

成功の指標

次の条件を満たしていれば、このスキルを正常に使用できています：

• フレームが正しく追加または変更されている
• 目的の FPS に合わせてフレームの表示時間が適切に設定されている
• アニメーションタグが正しい範囲で作成されている
• アニメーションが指定どおりにループまたは再生されることをユーザーが理解している
• アニメーションがエクスポートまたはさらなる調整の準備ができている