# ユーザーガイド — 3D魔法陣アニメジェネレータ

このガイドでは、3D魔法陣アニメジェネレータの基本的な使い方から応用的なテクニックまでを解説します。

English version: [docs/user-guide.en.md](user-guide.en.md)

---

## 目次

1. [はじめに](#はじめに)
2. [画面構成](#画面構成)
3. [基本操作](#基本操作)
4. [プロジェクト管理（ライブラリ）](#プロジェクト管理ライブラリ)
5. [魔法陣の構築](#魔法陣の構築)
6. [レイヤーの種類](#レイヤーの種類)
7. [カラーテーマ](#カラーテーマ)
8. [アニメーション](#アニメーション)
9. [複数魔法陣の配置](#複数魔法陣の配置)
10. [エクスポート](#エクスポート)
11. [プリセット一覧](#プリセット一覧)
12. [キーボードショートカット](#キーボードショートカット)
13. [ゲームエンジンへの取り込み](#ゲームエンジンへの取り込み)
14. [よくある質問](#よくある質問)

---

## はじめに

3D魔法陣アニメジェネレータは、リング・多角形・星形・ルーン文字・パーティクルなどの要素を組み合わせて、**プロシージャルに魔法陣を構築する**ツールです。

リアルタイム 3D プレビューを見ながらパラメータを調整し、ゲーム・映像制作向けのアセットとして書き出せます。デスクトップアプリ版（Windows .exe）とブラウザ版の両方で動作します。

### こんな用途に最適

- RPG / アクションゲームの魔法エフェクト素材
- VTuber 向けの演出オーバーレイ
- TTRPG のビジュアルエイド
- 映像作品・MV の背景素材
- イラストのトレース元

---

## 画面構成

アプリケーションは 3 つのパネルで構成されています。各パネルの境界はドラッグでリサイズできます。

```
┌──────────┬────────────────────┬────────────┐
│          │                    │            │
│ ライブラリ│     ビューア       │  エディタ   │
│ パネル    │   (3Dプレビュー)    │  パネル     │
│ (左)     │     (中央)         │  (右)      │
│          │                    │            │
└──────────┴────────────────────┴────────────┘
```

### ライブラリパネル（左）

保存済みプロジェクトの一覧です。サムネイル付きで表示されます。

- **📄 新規** — 新しいプロジェクトを作成し、即座にライブラリに追加します
- **💾 保存** — 現在の編集内容をライブラリに保存します
- **プロジェクトクリック** — 保存済みの魔法陣を読み込みます

> **ヒント:** 編集中のプロジェクトは青い枠線でハイライト表示されます。

### ビューアパネル（中央）

魔法陣のリアルタイム 3D プレビューです。

- **左ドラッグ** — カメラを回転（OrbitControls）
- **右ドラッグ** — カメラをパン
- **ホイール** — ズームイン / ズームアウト

> **ヒント:** エディタのレイヤーフォルダをクリックすると、ビューア上に青いバウンディングボックスが表示され、どのレイヤーを編集中か分かります。もう一度クリックで解除します。

### エディタパネル（右）

魔法陣の設定を変更する GUI です。フォルダを開閉してパラメータを調整します。

---

## 基本操作

### 1. プリセットを選ぶ

エディタパネル上部の **「プリセット」** ドロップダウンから、基本セット 10 種のプリセットをワンクリックで適用できます。気に入ったプリセットをベースにカスタマイズするのがおすすめです。

追加コレクション（DLC想定プリセット）は、**JSON を読み込み** から取り込んで利用できます。

### 2. パラメータを調整する

各レイヤーのフォルダを開くと、色・サイズ・回転速度などのスライダーが並んでいます。値を変更すると、ビューアに即座に反映されます。

### 3. レイヤーを追加・削除する

- **リングを追加 / 図形を追加 / テキスト模様を追加 / 効果を追加** — 該当タイプのレイヤーを追加
- **このレイヤーを削除** — 選択中のレイヤーを削除
- **▲▼** — レイヤーの表示順を変更
- **📋** — レイヤーを複製

### 4. 保存する

**💾 保存** ボタンを押すか、**Ctrl+S** でライブラリに保存されます。既に保存済みのプロジェクトを編集中の場合は上書き保存になります。

### 5. エクスポートする

エディタパネルの **「操作」** フォルダから希望の形式で書き出します。

---

## プロジェクト管理（ライブラリ）

ライブラリパネルではプロジェクトの一覧管理ができます。データは**ブラウザの localStorage** に保存されるため、アプリを閉じても保持されます。

### プロジェクトの操作

| 操作 | 方法 |
|------|------|
| **新規作成** | 「📄 新規」ボタン。デフォルトプリセットで新しいプロジェクトが追加されます |
| **保存** | 「💾 保存」ボタンまたは Ctrl+S |
| **読み込み** | プロジェクトのサムネイルをクリック |
| **名前変更** | ホバーで表示される ✏ ボタン → インライン入力 |
| **複製** | ホバーで表示される 📋 ボタン |
| **削除** | ホバーで表示される 🗑 ボタン → 確認ダイアログ |

### 自動保存

編集内容はパラメータ変更のたびに **localStorage に自動保存** されます。ブラウザを閉じてもリロード時に復元されます。

### Undo / Redo

操作を間違えても、**Ctrl+Z**（元に戻す）で最大 50 段階前まで戻せます。**Ctrl+Y** でやり直しも可能です。

---

## 魔法陣の構築

### 構造の概要

魔法陣は **レイヤー** の積み重ねで構成されます。

```
MagicCircle (コンテナ)
├── Ring: Band（外周リング）
├── Shape: Hexagram（六芒星）
├── Rune: Ring（ルーン文字リング）
├── Effect: Particles（パーティクル）
└── Effect: Aura（オーラ）
```

各レイヤーには独立したサイズ・アニメーションを設定できます。色は「色ロール（メイン/サブ）」と「個別色」で制御できます。

### レイヤーの追加

エディタパネルで以下のボタンを使います:

- **リングを追加** — 装飾リングを追加
- **図形を追加** — 多角形・星形などを追加
- **テキスト模様を追加** — ルーン文字・ビットパターンを追加
- **効果を追加** — パーティクル・オーラ等を追加
- **オプション粒子を追加** — 周辺に漂うパーティクル
- **オプション特殊効果を追加** — コアライトやオーラ
- **衛星魔法陣を追加** — 子の魔法陣（入れ子構造）

### 色と見た目の共通パラメータ

| パラメータ | 説明 |
|-----------|------|
| **表示** | レイヤーの表示/非表示を切り替え |
| **色ロール** | `メイン` または `サブ` を選択。未指定時はメイン扱い |
| **個別色を使う** | ON の場合、そのレイヤーだけ専用の色を使用 |
| **レイヤー色** | 個別色ON時のみ表示。最優先で適用 |

### 魔法陣コンテナ固有パラメータ

| パラメータ | 説明 |
|-----------|------|
| **メイン色** | コンテナ配下レイヤーの基本色（mainロール） |
| **サブ色** | コンテナ配下レイヤーの補助色（subロール） |
| **不透明度** | 0（完全透明）〜 1（不透明） |
| **半径** | 魔法陣全体のスケール基準 |
| **速度** | 配下レイヤーのアニメーション速度倍率 |
| **強度** | 発光の明るさ倍率 |

#### 円形背景

魔法陣の円の内側だけに単色・半透明の背景ディスクを敷くことができます。`魔法陣設定 > 円形背景` フォルダで設定します。

| 設定項目 | 説明 |
|---------|------|
| **有効** | ON にすると背景ディスクを描画 |
| **カラー** | 背景の色（カラーピッカー） |
| **不透明度** | 0（完全透明）〜 1（完全不透明） |

**主な用途:**
- **ポータル表現** — 内側を真っ黒や暗紫に設定し「空間の穴」を演出
- **地形ノイズ軽減** — ゲームエンジンで複雑な地形に配置する際、半透明の暗色で模様を際立たせる
- **UIアイコン** — バッジ状に仕上げることでUIレイアウトへの干渉を防ぐ

> **ヒント:** 「透過背景（PNGのみ）」フラグとは独立して動作します。例えば「円の内側は暗色を敷き、外側は透明な PNG を書き出す」といった使い方が可能です。

---

## レイヤーの種類

### Ring（リング）

魔法陣の円環部分を構成するレイヤーです。

| スタイル | 説明 |
|---------|------|
| **Band** | シンプルな帯状リング |
| **Double** | 二重リング（線の太さ・隙間を調整可能） |
| **Ornate** | 装飾付きリング（線の太さ・隙間・目盛り数を調整可能） |

**全スタイル共通の追加パラメータ:**
- **弧の開始角度 / 弧の角度範囲** — リングを全円ではなく弧（一部の扇型）として表示できます。`弧の角度範囲` を小さくすることで半円・四分円なども作れます。

**Double / Ornate 専用パラメータ:**
- **線の太さ** — 各リング線の幅をワールド単位で指定します（WebGL の linewidth 制限を回避するためメッシュベースで描画）
- **線間の隙間** — 2本のリング線の間隔を調整します
- **目盛り数**（Ornate のみ）— 目盛りタイルの個数を変更します

### Shape（図形）

幾何学模様を描画するレイヤーです。

| スタイル | 説明 |
|---------|------|
| **Polygon** | 正多角形（辺数を調整可能） |
| **Circle** | 円 |
| **Hexagram** | 六芒星（ダビデの星） |
| **Pentagram** | 五芒星（頂点数・接続ステップを調整可能） |
| **Flower** | フラワーオブライフ |
| **Spirograph** | スピログラフ模様 |

**全スタイル共通の追加パラメータ:**
- **破線** — ON にすると実線を破線に切り替えます。`ダッシュ長` と `ギャップ長` で間隔を調整できます（線の太さは WebGL の仕様上 1px 固定）

### Rune（ルーン / テキスト）

文字・記号模様を配置するレイヤーです。

| スタイル | 説明 |
|---------|------|
| **Ring** | リング状にルーン文字を配列（縦線＋ランダム枝） |
| **Bits** | デジタルビットパターン |
| **Box** | 長方形の輪郭＋手足（辺から伸びる線分）で構成された文字様グリフをリング状に配列 |

> **ヒント:** Ring と Box スタイルには `テキストパターンシード` があります。値を変えるとグリフ形状が変わり、同じ値なら常に同じ形状を再現できます。

### Effect（エフェクト）

視覚効果を追加するレイヤーです。

| スタイル | 説明 |
|---------|------|
| **Particles** | 浮遊パーティクル |
| **Aura** | 光のオーラ（グロウディスク） |
| **Core** | 中心の発光 |
| **LightPillar** | 召喚光柱 — 魔法陣の中心から上方向に伸びる光のビーム |
| **BurstRays** | 放射光線 — 三角形の光線を放射状に配置 |
| **RisingOrbs** | 浮遊球 — 光の球が上昇しながらフェードするアニメーション |

**LightPillar パラメータ:**

| パラメータ | 説明 |
|-----------|------|
| **柱の高さ** | ビームの長さ（0.5〜20）。魔法陣のスケールに合わせて調整 |
| **柱の太さ** | ビームの半径（0.05〜8.0）。外周リングを囲む太さにも対応 |
| **グロー層数（0〜2）** | 0=コア柱のみ / 1=+中間グロー / 2=+外周グロー（デフォルト） |
| **不透明度** | 全体の透明度（0〜1） |

---

## カラーテーマ

各魔法陣にはカラーテーマを適用できます。テーマを選択するとメイン色・サブ色が一括で変更されます。

| テーマ | メイン色 | サブ色 | イメージ |
|--------|---------|--------|---------|
| **カスタム** | 手動設定 | 手動設定 | 自由に調整 |
| **炎** | 赤橙 | 黄色 | 火炎魔法 |
| **氷** | 水色 | 白 | 氷結魔法 |
| **闇** | 紫 | 濃紫 | 暗黒魔法 |
| **聖** | 淡黄 | 金色 | 光・回復魔法 |
| **毒** | 黄緑 | 明緑 | 毒・酸魔法 |
| **黄金** | 金色 | 橙金 | 錬金術・豪華演出 |
| **血** | 深紅 | 暗赤 | 血の魔法 |
| **森** | 深緑 | 明緑 | 自然魔法 |
| **嵐** | 青紫 | 淡青 | 雷・風魔法 |
| **宇宙** | 紫桃 | 藍紫 | 宇宙・次元魔法 |

> **ヒント:** テーマを適用した後でもメイン色・サブ色を個別に微調整できます。テーマを「カスタム」に戻せば自由な配色が可能です。

---

## アニメーション

各レイヤーには個別のアニメーションパラメータを設定できます。

### レイヤーアニメーション

| パラメータ | 説明 |
|-----------|------|
| **回転速度** | レイヤー自身の回転（正: 時計回り、負: 反時計回り） |
| **軌道速度** | 軌道上の移動速度 |
| **軌道半径** | 軌道の大きさ |
| **軌道位相** | 軌道上の開始位置 |
| **拡大縮小アニメーション** | 有効にすると脈動（パルス）する |
| **脈動速度** | 拡大縮小の速さ |
| **脈動幅** | 拡大縮小の大きさ |

### 速度カーブ

回転や軌道の速度に変化を加えるオプションです。

| パラメータ | 説明 |
|-----------|------|
| **カーブ種別** | 現在は `sine` (正弦波) のみ |
| **振幅** | 速度変化の大きさ |
| **周波数** | 速度変化の速さ |
| **位相** | 速度カーブの開始タイミング |
| **オフセット** | 基本速度への加算値 |

### コンテナアニメーション

魔法陣全体（コンテナ）に適用する演出です。

| タイプ | 説明 |
|--------|------|
| **なし** | アニメーションなし |
| **上昇** | 下から上に出現 |
| **落下** | 上から下に出現 |
| **左スライド** | 右から左に出現 |
| **右スライド** | 左から右に出現 |
| **展開（中心から）** | 任意の開始座標から目標位置へ移動 |
| **周回** | 定点を中心に周回し続ける |

上昇・落下・スライドでは**移動距離**、**時間**、**開始遅延**、**イージング**（等速 / 加速 / 減速 / 緩急）を調整できます。展開では **開始X/Y/Z** を指定でき、さらに **展開後に周回** をONにすると、到達後に周回へ遷移できます。

> **ヒント:** 「イントロ再生」ボタンを押すと、コンテナアニメーションを含むすべてのアニメーションを最初から再生できます。

---

## 複数魔法陣の配置

### 魔法陣の追加

**「魔法陣操作」 → 「魔法陣を追加」** で同一シーンに複数の魔法陣を配置できます。各魔法陣は独立したプリセット・色・アニメーションを持てます。

### 魔法陣名の変更

エディタ内の魔法陣ヘッダー（`MagicCircle: ...`）を**ダブルクリック**すると、その場で名前を編集できます。Enterで確定、Escでキャンセルです。

### 位置の調整

各魔法陣の **「位置」** フォルダで X / Y / Z 座標を調整できます。

- **X位置** — 左右方向
- **Y位置** — 前後方向
- **高さ(Z)** — 上下方向

### 縦に等間隔配置

**「魔法陣操作」 → 「縦に等間隔配置」** をクリックすると、すべての魔法陣が Z 軸方向に等間隔で積み重なります。**「段間隔」** スライダーで間隔を調整できます。

### ドラッグ移動モード

**「ドラッグ移動モード」** を有効にすると、ビューア上で魔法陣を直接ドラッグして位置を変更できます。

> **ヒント:** ドラッグ移動モード中はカメラの回転操作が無効になります。調整が終わったらモードを解除してください。

### 衛星魔法陣

**「衛星魔法陣を追加」** で、親の魔法陣の周囲を周回する小さな子魔法陣を追加できます。

---

## エクスポート

エディタパネルの **「操作」** フォルダから各種形式でエクスポートできます。

### GLB（3D モデル）

アニメーション付き 3D モデルです。以下の複数クリップが含まれます:

`アニメーション秒数` と `フレーム数` は、GLB書き出し時のベイク長とサンプリング密度にも反映されます。

| クリップ名 | 内容 |
|-----------|------|
| **Static** | 静止（1フレーム） |
| **Rotate_Action** | 回転のみ |
| **Orbit_Action** | 軌道のみ |
| **Pulse_Action** | 脈動のみ |
| **FullAction** | 全アニメーション統合 |
| **ContainerMove_Action** | コンテナアニメーション（該当時のみ） |

Blender、Unity、Unreal Engine などに直接インポートできます。

### Blender向けGLBパック（推奨）

Blender でアクションがノード単位に分割される環境向けに、**「Blender向けGLBパックを書き出し」** を利用できます。\n
このZIPには以下が含まれます:
- GLB本体
- Blender用自動セットアップスクリプト（NLA一括割り当て）
- 手順テキスト

Blender取り込み後に同梱スクリプトを1回実行すると、NLAで全ストリップをまとめて再生しやすくなります。

### 実験: 1オブジェクト頂点ベイクGLB

実験機能（頂点ベイク書き出し・ループ/FPS設定）は、**開発者モード（実験機能）** をONにすると操作パネルに表示されます。
通常利用では、標準のGLBまたはBlender向けGLBパックの利用を推奨します。

### GLBエクスポートの制限事項（ビューアとの差異）

GLTF/GLB フォーマットの仕様上、ビューアでの表示と GLB での表示には以下の差異があります。

| 機能 | ビューア | GLB |
|------|---------|-----|
| **発光（加算合成）** | 重なる要素が加算されてグロー発光する | 通常のアルファ合成になる。色・不透明度は保持されるが、重なりによる発光は失われる |
| **破線（Shape の破線トグル）** | ダッシュ・ギャップ長の通りに破線表示 | ジオメトリに焼き付けて再現（ビューアとほぼ同等） |
| **マスク（Effect: Mask）** | ステンシルバッファによる切り抜き表示 | GLTF はステンシル未対応のため、マスク円は除去され、マスク対象コンテンツは全表示される |
| **フェードイン（FadeIn アニメーション）** | 不透明度が 0→1 に変化 | スケール 0→1 で近似される |
| **描画（DrawOn アニメーション）** | 線が少しずつ描かれる | セグメント分割 + スケールアニメで近似される |

> **ヒント:** 発光エフェクトを重視する場合は、**透過PNG連番**・**スプライトシート**・**動画** 形式での出力が最もビューアに近い見た目になります。

### PNG

高解像度スクリーンショットです。透過背景の ON/OFF を切り替えて出力できます。

- **PNGを書き出し** — 上面ビュー
- **サイドビューPNG出力** — 側面ビュー
- **テクスチャPNG出力** — フラットなテクスチャとして出力

共通設定:
- **PNG解像度** — 出力サイズ（デフォルト: 1024px）
- **透過背景（PNGのみ）** — PNG 系出力の背景を透過するか切り替え
- **視認性ブースト（PNGのみ）** — 透過時に見えにくい要素を補正（なし/弱/中/強/カスタム）
- **ブースト不透明度倍率 / ブースト最小不透明度 / ブースト加算上限（PNGのみ）** — `カスタム` 選択時の詳細調整

### 連番 PNG（ZIP）

アニメーションの各フレームを PNG 連番で書き出し、ZIP にまとめます。上面ビューと側面ビューの両方が含まれます。

設定項目:
- **フレーム数** — アニメーションの総フレーム数
- **アニメーション秒数** — 1ループの長さ（秒）

※ **透過背景（PNGのみ）** と **視認性ブースト（PNGのみ）** は連番 PNG にも適用されます。

### スプライトシート（ZIP）

ゲームエンジンで使いやすいスプライトシート形式です。上面・側面ビューの両方が ZIP に含まれます。

設定項目:

| 設定 | 説明 |
|------|------|
| **スプライトシートプリセット** | よく使うエンジン向けの解像度・列数を一括設定 |
| **スプライト列数（カスタム時のみ）** | 1行あたりのフレーム数。プリセット選択時は非表示 |

**スプライトシートプリセット一覧:**

| プリセット | 解像度 | 列数 | 用途 |
|-----------|--------|------|------|
| **カスタム** | PNG解像度設定値 | 列数スライダー値 | 自由設定 |
| **RPG Maker MV/MZ** | 192px | 5列 | RPGツクール MV/MZ バトルアニメーション規格 |
| **Bakin 512** | 512px | 6列 | RPG Developer Bakin（高解像度） |
| **Bakin 256** | 256px | 6列 | RPG Developer Bakin（軽量） |

※ **透過背景（PNGのみ）** と **視認性ブースト（PNGのみ）** はスプライトシートにも適用されます。

### 動画書き出し（PRO 版）

PNG パネルの `動画書き出し` フォルダから GIF / WebM / MP4 を書き出せます。
共通設定は `PNG解像度 / Options` フォルダの設定値を使用します。

| 形式 | コーデック | 透過 | 備考 |
|------|---------|------|------|
| **GIF** | GIF256色 + 1bit アルファ | ◯（透過背景 ON 時） | ループ再生、256 色制約あり |
| **WebM** | VP9 | ◯（透過背景 ON 時） | アルファチャンネル付き動画 |
| **MP4** | H.264 | ✕ | 最高互換、透過なし。非対応時は VP9 WebM に自動フォールバック |

各形式につき **上面ビュー** と **サイドビュー** の 2 種類を書き出せます。

| ボタン名 | ビュー |
|---------|-------|
| GIF書き出し / WebM書き出し / MP4書き出し | 真上からの俯瞰ビュー |
| サイドビューGIF / サイドビューWebM / サイドビューMP4 | 斜め側面からの遠近感ありビュー |

設定項目:
- **アニメーション秒数** — 出力動画の長さ（秒）
- **動画 FPS** — フレームレート（10〜60fps）

> **注意:** 動画の長さは「アニメーション秒数」で決まります。FPS を変えると尺ではなく滑らかさが変わります。

### Unityパッケージ（PRO 版）

3D モデルパネルから Unity プロジェクトへ直接インポートできる `.unitypackage` を書き出せます。

**Unity でのインポート手順:**
1. `Assets > Import Package > Custom Package...` を選択
2. 書き出した `.unitypackage` ファイルを開く
3. `Import` ボタンをクリック
4. プロジェクトに `.glb` ファイルが追加されます

### JSON

設定ファイルの保存・読み込みができます。

- **JSONを書き出し** — 現在の設定を JSON ファイルとしてダウンロード
- **JSONを読み込み** — 以前保存した JSON を読み込んで復元

> **ヒント:** JSON を読み込むと現在の編集内容は上書きされます。先にライブラリに保存しておくことをおすすめします。

---

## プリセット一覧

ツール上で直接選択できるのは **基本セット 10 種** です。追加コレクションは JSON 読み込みで利用します。

| プリセット名 | 日本語名 | 特徴 |
|-------------|---------|------|
| Classic | 正統派魔法陣 | 六芒星 + ルーン + 五芒星の王道ファンタジー |
| Dense | 高密度曼荼羅 | 多層リング + 複合図形の密度の高いデザイン |
| Runic | ルーン円環 | ルーン文字リングを中心にした古代風 |
| Demonic | 悪魔召喚 | 五芒星 + 暗色系の禍々しいデザイン |
| Grand | 極大魔法 | 大規模で壮大な多層魔法陣 |
| Celestial | 天体観測 | 軌道回転する天体のような明るいデザイン |
| Chrono | 時空魔法陣 | 時計のような回転が特徴的な時間魔法風 |
| Cyber | サイバー召喚陣 | ビットパターン + ネオン系のデジタル風 |
| Bloom | 開花魔法陣 | フラワーオブライフを中心にした有機的デザイン |
| Celtic | ケルト聖域 | ケルト風の結び目模様を使った聖域 |

---

## キーボードショートカット

| ショートカット | 動作 |
|---------------|------|
| **Ctrl+Z** | 元に戻す (Undo) |
| **Ctrl+Y** / **Ctrl+Shift+Z** | やり直し (Redo) |
| **Ctrl+S** | ライブラリに保存 |
| **Ctrl+Shift+E** | GLB をエクスポート |

> **注意:** input / textarea 内ではショートカットは無効になります。

---

## ゲームエンジンへの取り込み

### Unity

1. **Unityパッケージ（推奨）** — `.unitypackage` を `Assets > Import Package > Custom Package...` でインポート。GLB が自動配置される
2. **GLB（直接）** — `.glb` ファイルをインポート。Animation Controller でクリップを選択可能
3. **透過 PNG** — UI Image やパーティクルシステムのテクスチャとして使用
4. **スプライトシート** — Sprite Editor でスライスし、Animator でアニメーション再生

### Unreal Engine

1. **GLB** — glTF インポーターで読み込み。Skeletal Mesh + Animation Sequence に変換
2. **連番 PNG** — Flipbook Material で再生
3. **テクスチャ PNG** — マテリアルのエミッシブテクスチャとして使用

### Godot

1. **GLB** — `AnimationPlayer` にクリップが自動マッピング
2. **スプライトシート** — `AnimatedSprite2D` で使用
3. **テクスチャ PNG** — `Sprite2D` のテクスチャとして使用

### Blender

1. **GLB** — `ファイル > インポート > glTF 2.0` で読み込み
2. インポート後、NLA エディタで各アニメーションクリップを確認・編集できます

### 映像編集ソフト（After Effects / DaVinci Resolve など）

1. **透過 PNG** — そのまま素材として配置（アルファチャンネル対応）
2. **連番 PNG** — 画像シーケンスとして読み込み、ループ再生

---

## よくある質問

### Q: 保存したデータはどこに保存されますか？

**ブラウザの localStorage** に保存されます。ブラウザのデータを消去すると失われるため、重要なデザインは **JSON エクスポート** でバックアップしておくことをおすすめします。

### Q: デスクトップアプリの場合も localStorage ですか？

はい。Tauri（デスクトップアプリ）版も内部的に WebView の localStorage を使用しています。データはアプリのデータフォルダ内に保持されます。

### Q: 生成した魔法陣は商用利用できますか？

本ツールで生成した画像・3D モデル・スプライトシートなどの**出力物は商用利用可能**です。ゲーム、映像、印刷物などに自由にお使いいただけます。ただし、ツール本体の再配布は禁止されています。

### Q: どのレイヤーがメイン色/サブ色になりますか？

レイヤーの **「色ロール」** が `サブ` の場合にサブ色、それ以外はメイン色が使われます。さらに **「個別色を使う」** をONにした場合は、そのレイヤー色が最優先されます。

### Q: アニメーションが再生されません

**「イントロ再生」** ボタンを押すか、レイヤーの **「回転速度」** などのアニメーションパラメータが 0 になっていないか確認してください。

### Q: 魔法陣が見えません

以下を確認してください:
- レイヤーの **「表示」** がオンになっているか
- **「不透明度」** が 0 になっていないか
- **「半径」** が極端に小さくないか
- カメラが魔法陣の方を向いているか（ビューアをダブルクリックでリセット不可の場合は、ページをリロード）

### Q: PNG の背景を透明にしたい

**「透過背景（PNGのみ）」** を ON にしてから PNG 系の各出力を実行してください。OFF の場合はビューア背景色に近い不透明背景で出力されます。

### Q: GLB に複数のアニメーションクリップが含まれていない

GLB エクスポートは自動的に Static / Rotate / Orbit / Pulse / Full の 5 クリップ（＋コンテナアニメーション時は ContainerMove）を生成します。Blender で読み込んだ際は NLA エディタでクリップを確認できます。

### Q: 言語を切り替えたい

エディタパネル上部の **「言語」** ドロップダウンで日本語と English を切り替えられます。

---

## Tips & テクニック

### 見栄えを良くするコツ

1. **レイヤーの回転速度に変化をつける** — 正と負の回転速度を交互に使うと奥行き感が出る
2. **不透明度を 0.6〜0.8 に下げる** — 完全不透明よりも重なりが美しく見える
3. **サブ色をメイン色の補色にする** — コントラストが際立つ
4. **パーティクルやオーラは最後に追加** — 仕上げとして華やかさをプラス
5. **カラーテーマを活用する** — 属性に合った配色で統一感を出す

### 複雑な魔法陣を作るコツ

1. **プリセットをベースにする** — ゼロからよりも、近いイメージのプリセットから始める
2. **衛星魔法陣を活用する** — 入れ子構造で密度の高いデザインに
3. **多角形の辺数を変える** — 三角形〜十二角形で印象が大きく変わる
4. **速度カーブで抑揚をつける** — 一定速度より自然な動きに

### エクスポートのコツ

1. **ゲーム用スプライトは 512〜1024px** — パフォーマンスとクオリティのバランス
2. **映像用は 2048px 以上** — 解像度に余裕を持たせる
3. **GLB の FullAction クリップ** — 全アニメーションが統合されているので最も使いやすい
4. **JSON でこまめにバックアップ** — localStorage は消えることがある
