BreathStudio 仕様書

概要

本ツールは、ブラウザ上で立ち絵のアニメーションを作成し、APNGとしてエクスポートできるシングルページアプリケーション（SPA）です。ユーザーは画像をキャンバスにドラッグ＆ドロップしてレイヤーとして追加し、階層管理やアニメーション設定を行えます。

機能一覧

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

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

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

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

3. アニメーション機能

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

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

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

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

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

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

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

4. APNG出力機能

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