BreathStudio 仕様書

概要

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

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

機能一覧

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

• キャンバスに画像をドラッグ＆ドロップ（DD）で追加
• レイヤー管理UI（キャンバスとは別に表示）
  • 追加した画像をレイヤーとして登録
  • 追加した最新の画像はUI上部に追加され、画像は上部にあるものほど手前に表示される
  • レイヤーの 名前は画像ファイル名（拡張子は省略）、名前は変更可能
  • レイヤーの 階層管理（上・下移動）
  • レイヤーの 削除
  • レイヤーごとに アニメーション設定
  • レイヤーの 親レイヤー指定
• キャンバス上での操作
  • クリック＆ドラッグで画像の移動

2. レイヤー親レイヤー指定

• 親レイヤーを設定すると、親レイヤーのアニメーション時、変形に合わせて子レイヤーの座標が追従
• 親レイヤー指定はレイヤー管理UIでセレクトボックスから設定
  • 自身を親レイヤーに設定することは出来ない
  • 例：呼吸アニメーション時、親レイヤーの拡大縮小（5px）に合わせて子レイヤーの座標が上下移動

3. アニメーション機能

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

A. 揺れアニメーション

• レイヤーの下半分、もしくは上半分を数ピクセル分左右に歪ませるループアニメーション
  • 例：レイヤーの下半分を左右に揺らし、髪の揺らめきを表現する

B. 呼吸アニメーション

• レイヤーの上半分、もしくは下半分が数ピクセル分左右に拡大・縮小するループアニメーション
  • 例：レイヤー（身体）の上半分を拡大縮小し、呼吸を表現する

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. APNGエクスポートの実装
6. UIのブラッシュアップ