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 | アニメーション設定の保存・読み込み |
実装の流れ
- 画像管理の実装（レイヤー追加・削除・階層管理）
- レイヤー固定機能の実装（親子関係の動作制御）
- アニメーション機能の実装（固定・振動・スプライトアニメ）
- プレビュー機能の実装（リアルタイム再生）
- APNGエクスポートの実装
- UIのブラッシュアップ
