BreathStudio 仕様書

概要

本ツールは、ブラウザ上で立ち絵のアニメーションを作成し、APNGとしてエクスポートできるシングルページアプリケーション（SPA）です。

ユーザーは画像をキャンバスにドラッグ＆ドロップしてレイヤーとして追加し、階層管理やアニメーション設定を行えます。 具体的な用途としては、キャラクターイラスト（立ち絵）を拡大縮小・アニメーション登録等し、呼吸や瞬き、髪のゆらめきといったアニメを実現します。

機能一覧

1. 画像管理・レイヤー機能

• キャンバスに画像をドラッグ＆ドロップ（DD）で追加
• レイヤー管理UI（キャンバスとは別に表示）
  • 追加した画像をレイヤーとして登録
  • レイヤーの 階層管理（上・下移動）
  • レイヤーの 削除
  • レイヤーごとに アニメーション設定
• キャンバス上での操作
  • クリック＆ドラッグで画像の移動（レイヤー固定時の挙動あり）
  • 拡大・縮小・回転（マウスホイール・スライダー）

2. レイヤー固定機能（親子関係）

• 固定を設定すると、親レイヤーに対して子レイヤーが追従
• 親レイヤーを移動すると、子レイヤーも同じ動きをする
• 子レイヤー単体では移動できない
• 固定の解除はレイヤー管理UIで行う

3. アニメーション機能

各レイヤーに以下のアニメーションを設定可能：

A. レイヤー固定を利用した連動アニメーション

• 指定した座標を基準に、他のレイヤーに追従
  • 例：「上半身が縮小すると顔も連動して上下移動する」

B. 振動・揺れアニメーション

• 指定の高さ以上 or 以下の範囲で、指定 px ぶん 横 or 縦に揺れる
  • 例：「呼吸時に体がわずかに上下する」

C. スプライトアニメーション（パラパラ漫画）

• 1枚の画像を横方向に分割し、スプライトシートとして利用
• 設定可能項目：
  • 画像の分割数（横方向）
  • アニメーション速度（FPS）
  • ループまでの待機時間
  • ループ設定（無限 / 指定回数）

4. APNG出力機能

• Canvas API を利用してフレームごとに画像を描画
• 指定FPSでAPNGとしてエクスポート
• アニメーション設定を保持し、再編集可能なJSON形式で保存・読み込み

技術	目的
HTML5 & CSS3	UIデザイン
JavaScript (ES6+)	画像管理・アニメーション制御
Drag and Drop API	画像のドラッグ＆ドロップ処理
Canvas API	画像合成・APNG生成
GSAP	アニメーション制御
Web Worker	APNGエンコード時の負荷軽減
LocalStorage / IndexedDB	アニメーション設定の保存・読み込み

実装の流れ

1. 画像管理の実装（レイヤー追加・削除・階層管理）
2. キャンバス上での操作（移動・拡大・回転）
3. レイヤー固定機能の実装（親子関係の動作制御）
4. アニメーション機能の実装（固定・振動・スプライトアニメ）
5. プレビュー機能の実装（リアルタイム再生）
6. APNGエクスポートの実装
7. UIのブラッシュアップ