「BreathStudio 仕様書」の版間の差分
ナビゲーションに移動
検索に移動
| (同じ利用者による、間の10版が非表示) | |||
| 1行目: | 1行目: | ||
===概要=== | ===概要=== | ||
| − | + | 本ツール（Breath Studio／ブレススタジオ）は、ブラウザ上で立ち絵のアニメーションを作成し、APNGとしてエクスポートできるシングルページアプリケーション（SPA）です。 | |
| + | |||
| + | ユーザーは画像をキャンバスにドラッグ＆ドロップしてレイヤーとして追加し、階層管理やアニメーション設定を行えます。 | ||
| + | 具体的な用途としては、キャラクターイラスト（立ち絵）を拡大縮小・アニメーション登録等し、呼吸や瞬き、髪のゆらめきといったアニメを実現します。 | ||
=機能一覧= | =機能一覧= | ||
| 7行目: | 10行目: | ||
*レイヤー管理UI（キャンバスとは別に表示） | *レイヤー管理UI（キャンバスとは別に表示） | ||
**追加した画像をレイヤーとして登録 | **追加した画像をレイヤーとして登録 | ||
| + | **追加した最新の画像はUI上部に追加され、画像は上部にあるものほど手前に表示される | ||
| + | **レイヤーの 名前は画像ファイル名（拡張子は省略）、名前は変更可能 | ||
**レイヤーの 階層管理（上・下移動） | **レイヤーの 階層管理（上・下移動） | ||
**レイヤーの 削除 | **レイヤーの 削除 | ||
**レイヤーごとに アニメーション設定 | **レイヤーごとに アニメーション設定 | ||
| + | **レイヤーの 親レイヤー指定 | ||
*キャンバス上での操作 | *キャンバス上での操作 | ||
| − | ** | + | **クリック＆ドラッグで画像の移動 |
| − | |||
| − | ==2. | + | ==2. レイヤー親レイヤー指定== |
| − | * | + | *親レイヤーを設定すると、親レイヤーのアニメーション時、変形に合わせて子レイヤーの座標が追従 |
| − | * | + | *親レイヤー指定はレイヤー管理UIでセレクトボックスから設定 |
| − | * | + | **自身を親レイヤーに設定することは出来ない |
| − | * | + | **例：呼吸アニメーション時、親レイヤーの拡大縮小（5px）に合わせて子レイヤーの座標が上下移動 |
==3. アニメーション機能== | ==3. アニメーション機能== | ||
各レイヤーに以下のアニメーションを設定可能： | 各レイヤーに以下のアニメーションを設定可能： | ||
| − | |||
| − | |||
| − | |||
| − | ===B. | + | ===A. 揺れアニメーション=== |
| − | * | + | *レイヤーの下半分、もしくは上半分を数ピクセル分左右に歪ませるループアニメーション |
| − | ** | + | **例：レイヤーの下半分を左右に揺らし、髪の揺らめきを表現する |
| + | |||
| + | ===B. 呼吸アニメーション=== | ||
| + | *レイヤーの上半分、もしくは下半分が数ピクセル分左右に拡大・縮小するループアニメーション | ||
| + | **例：レイヤー（身体）の上半分を拡大縮小し、呼吸を表現する | ||
===C. スプライトアニメーション（パラパラ漫画）=== | ===C. スプライトアニメーション（パラパラ漫画）=== | ||
| 64行目: | 70行目: | ||
=実装の流れ= | =実装の流れ= | ||
#画像管理の実装（レイヤー追加・削除・階層管理） | #画像管理の実装（レイヤー追加・削除・階層管理） | ||
| − | |||
#レイヤー固定機能の実装（親子関係の動作制御） | #レイヤー固定機能の実装（親子関係の動作制御） | ||
#アニメーション機能の実装（固定・振動・スプライトアニメ） | #アニメーション機能の実装（固定・振動・スプライトアニメ） | ||
2025年3月30日 (日) 05:25時点における最新版
目次
概要
本ツール（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のブラッシュアップ
