BreathStudio 仕様書
ナビゲーションに移動
検索に移動
目次
概要
本ツール（Breath Studio／ブレススタジオ）は、ブラウザ上で立ち絵のアニメーションを作成し、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 | アニメーション設定の保存・読み込み |
実装の流れ
- 画像管理の実装（レイヤー追加・削除・階層管理）
- レイヤー固定機能の実装（親子関係の動作制御）
- アニメーション機能の実装（固定・振動・スプライトアニメ）
- プレビュー機能の実装（リアルタイム再生）
- APNGエクスポートの実装
- UIのブラッシュアップ
