diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml index 3e92e48..867091b 100644 --- a/.github/workflows/docs.yml +++ b/.github/workflows/docs.yml @@ -39,7 +39,7 @@ jobs: mkdocs-material- - name: Install dependencies - run: pip install mkdocs-material mkdocs-static-i18n + run: pip install mkdocs-material mkdocs-static-i18n mkdocs-callouts - name: Deploy docs run: mkdocs gh-deploy --force diff --git a/docs/assets/1-sspj_import.webm b/docs/assets/1-sspj_import.webm new file mode 100644 index 0000000..93b36ad Binary files /dev/null and b/docs/assets/1-sspj_import.webm differ diff --git a/docs/assets/1-sspj_import.webp b/docs/assets/1-sspj_import.webp new file mode 100644 index 0000000..ee9036f Binary files /dev/null and b/docs/assets/1-sspj_import.webp differ diff --git a/docs/assets/2-fast_iteration_inspector.webm b/docs/assets/2-fast_iteration_inspector.webm new file mode 100644 index 0000000..8aeddd3 Binary files /dev/null and b/docs/assets/2-fast_iteration_inspector.webm differ diff --git a/docs/assets/2-fast_iteration_inspector.webp b/docs/assets/2-fast_iteration_inspector.webp new file mode 100644 index 0000000..6539c13 Binary files /dev/null and b/docs/assets/2-fast_iteration_inspector.webp differ diff --git a/docs/assets/3-setup_drag_and_drop.webm b/docs/assets/3-setup_drag_and_drop.webm new file mode 100644 index 0000000..37660ae Binary files /dev/null and b/docs/assets/3-setup_drag_and_drop.webm differ diff --git a/docs/assets/3-setup_drag_and_drop.webp b/docs/assets/3-setup_drag_and_drop.webp new file mode 100644 index 0000000..734d6b1 Binary files /dev/null and b/docs/assets/3-setup_drag_and_drop.webp differ diff --git a/docs/assets/4-inspector_preview-1.webm b/docs/assets/4-inspector_preview-1.webm new file mode 100644 index 0000000..0374d86 Binary files /dev/null and b/docs/assets/4-inspector_preview-1.webm differ diff --git a/docs/assets/4-inspector_preview-1.webp b/docs/assets/4-inspector_preview-1.webp new file mode 100644 index 0000000..45579d4 Binary files /dev/null and b/docs/assets/4-inspector_preview-1.webp differ diff --git a/docs/assets/4-inspector_preview-2.webm b/docs/assets/4-inspector_preview-2.webm new file mode 100644 index 0000000..cab113c Binary files /dev/null and b/docs/assets/4-inspector_preview-2.webm differ diff --git a/docs/assets/4-inspector_preview-2.webp b/docs/assets/4-inspector_preview-2.webp new file mode 100644 index 0000000..77889cc Binary files /dev/null and b/docs/assets/4-inspector_preview-2.webp differ diff --git a/docs/assets/5-open_sspj_from_inspector.png b/docs/assets/5-open_sspj_from_inspector.png new file mode 100644 index 0000000..76d79ac Binary files /dev/null and b/docs/assets/5-open_sspj_from_inspector.png differ diff --git a/docs/assets/6-connect_signals_node_tab.png b/docs/assets/6-connect_signals_node_tab.png new file mode 100644 index 0000000..a3c8acd Binary files /dev/null and b/docs/assets/6-connect_signals_node_tab.png differ diff --git a/docs/assets/7-cellmap_override_after.png b/docs/assets/7-cellmap_override_after.png new file mode 100644 index 0000000..da30e52 Binary files /dev/null and b/docs/assets/7-cellmap_override_after.png differ diff --git a/docs/assets/7-cellmap_override_before.png b/docs/assets/7-cellmap_override_before.png new file mode 100644 index 0000000..f384a02 Binary files /dev/null and b/docs/assets/7-cellmap_override_before.png differ diff --git a/docs/en/workflow/usage_asset_pipeline.md b/docs/en/workflow/usage_asset_pipeline.md index 3a979d8..19a9765 100644 --- a/docs/en/workflow/usage_asset_pipeline.md +++ b/docs/en/workflow/usage_asset_pipeline.md @@ -18,10 +18,11 @@ This triggers the conversion process, generating `.ssab` and `.ssqb` files in th Drag and drop the generated `.ssab` file into the 2D viewport to place a `SpriteStudioPlayer2D` node in advance (see [Basic Usage](usage_basic.md) for details). > [!TIP] +> > -> *(※ Video showing the drag-and-drop import of an .sspj file into the SS Import dock will be placed here)* +> --- @@ -36,8 +37,7 @@ When working in Godot and feeling the need to tweak an animation, you don't have This action automatically launches SpriteStudio and opens the underlying `.sspj` file, allowing you to start editing immediately. > [!NOTE] -> ![Opening SSPJ from the Inspector](../../assets/open_sspj_from_inspector.png) -> *(※ Image highlighting the "Open SSPJ" button in the Inspector will be placed here)* +> ![Opening SSPJ from the Inspector](../../assets/5-open_sspj_from_inspector.png) --- @@ -54,10 +54,11 @@ With just the following steps, your changes will instantly reflect in the game ( > You can call SpriteStudio directly from the Inspector with the node selected, and immediately reconvert in Godot after editing. **This powerful asset pipeline that allows seamless transition between SpriteStudio and Godot** drastically lowers the cost of trial and error during animation adjustments. > [!TIP] +> > -> *(※A video demonstrating the fast workflow: Open from Inspector -> Save in SpriteStudio -> Reconvert in Inspector -> Preview updates instantly)* +> --- diff --git a/docs/en/workflow/usage_basic.md b/docs/en/workflow/usage_basic.md index 64b6ff5..ef1684b 100644 --- a/docs/en/workflow/usage_basic.md +++ b/docs/en/workflow/usage_basic.md @@ -15,10 +15,11 @@ Taking advantage of Godot's powerful editor, you can set up an animation with th This action automatically creates a `SpriteStudioPlayer2D` node and assigns the resource to it. > [!TIP] +> > -> *(※ Short video showing node creation by dragging and dropping an .ssab file will be placed here)* +> --- @@ -39,15 +40,23 @@ Once the node is selected, you can adjust various settings from Godot's Inspecto 1. **Select an `Animation`** Open the dropdown for the `Animation` property in the Inspector. You will see a list of animations contained in the `.ssab`. Select the name of the animation you want to play. +> [!TIP] +> +> +> + 2. **In-Editor Preview** With the node selected, the **SpriteStudio** bottom panel appears. Use its transport controls (play from start / play from current / stop and the frame scrubber) to **play the animation directly in the editor without running the game**. Keyboard shortcuts mirror the AnimationPlayer editor: **D** play from current, **Shift+D** play from start, **S** stop (active while the panel is visible). Changes to parameters like `Frame`, `Speed`, and `Loop Count` are reflected in the preview in real-time, enabling quick adjustments. > [!TIP] +> > -> *(※ Video showing the animation preview via the SpriteStudio bottom panel will be placed here)* +> --- diff --git a/docs/en/workflow/usage_scripting.md b/docs/en/workflow/usage_scripting.md index f1de1f4..5ae2719 100644 --- a/docs/en/workflow/usage_scripting.md +++ b/docs/en/workflow/usage_scripting.md @@ -60,8 +60,7 @@ func _on_animation_finished(anim_name: String): ``` > [!NOTE] -> ![Signal connection screen](../../assets/signal_connection.png) -> *(※ Image showing signals connected in the "Node" tab of the Godot editor will be placed here)* +> ![Signal connection screen](../../assets/6-connect_signals_node_tab.png) ### Example: Triggering Events using User Data This is an example of receiving user data configured in SpriteStudio (such as playing footsteps or generating attack hitboxes) and processing it in the game. @@ -99,5 +98,5 @@ func change_weapon(): This feature allows you to build an efficient avatar system without needing to prepare multiple animation variations for each part. > [!TIP] -> ![Before/After comparison of equipment change](../../assets/change_equipment.png) -> *(※ Before/After image comparison of the character changing weapons will be placed here)* +> ![Before equipment change](../../assets/7-cellmap_override_before.png) +> ![After equipment change](../../assets/7-cellmap_override_after.png) diff --git a/docs/ja/workflow/usage_asset_pipeline.md b/docs/ja/workflow/usage_asset_pipeline.md index c5bcbd4..a231689 100644 --- a/docs/ja/workflow/usage_asset_pipeline.md +++ b/docs/ja/workflow/usage_asset_pipeline.md @@ -18,10 +18,11 @@ SpriteStudioPlayerForGodot は単にアニメーションを再生するだけ 生成された `.ssab` を 2D ビューポートへドラッグ＆ドロップして、あらかじめ `SpriteStudioPlayer2D` ノードを配置しておきましょう（詳細は [基本的な使い方](usage_basic.md) を参照）。 > [!TIP] +> > -> *(※上記に .sspj を SS Import ドックへドラッグ＆ドロップしてコンバートする様子の動画が入ります)* +> --- @@ -36,8 +37,7 @@ Godot で作業中に「もう少しアニメーションを微調整したい この操作により、SpriteStudio が起動して元となる `.sspj` ファイルが開き、すぐに編集作業に入ることができます。 > [!NOTE] -> ![インスペクタからSSPJを開く画像](../../assets/open_sspj_from_inspector.png) -> *(※ここにインスペクタ上の「Open SSPJ」ボタンがハイライトされた画像が入ります)* +> ![インスペクタからSSPJを開く画像](../../assets/5-open_sspj_from_inspector.png) --- @@ -54,10 +54,11 @@ SpriteStudio 側でアニメーションを修正して保存したら、Godot > ノードを選択したままインスペクタから SpriteStudio を呼び出し、編集後すぐに Godot 上で再コンバートをかけることができます。**SpriteStudio と Godot をシームレスに行き来できるこの強力なアセットパイプライン**により、アニメーション調整におけるトライアンドエラーのコストが劇的に下がります。 > [!TIP] +> > -> *(※上記に「インスペクタから開く -> SpriteStudioで保存 -> インスペクタでReconvert -> プレビューが即座に変わる」という一連の高速ワークフロー動画が入ります)* +> --- diff --git a/docs/ja/workflow/usage_basic.md b/docs/ja/workflow/usage_basic.md index c7af427..3035f0f 100644 --- a/docs/ja/workflow/usage_basic.md +++ b/docs/ja/workflow/usage_basic.md @@ -15,10 +15,11 @@ Godot エディタの強力な機能を活かし、最短の手順でアニメ これだけで自動的に `SpriteStudioPlayer2D` ノードがシーンに追加され、リソースの割り当ても完了します。 > [!TIP] +> > -> *(※上記に .ssab をドラッグ＆ドロップしてノードが自動生成される様子を示す動画が入ります)* +> --- @@ -39,15 +40,23 @@ Godot エディタの強力な機能を活かし、最短の手順でアニメ 1. **`Animation` の選択** インスペクタの `Animation` プロパティのドロップダウンを開くと、`.ssab` に含まれるアニメーションのリストが表示されます。再生したいアニメーション名を選択してください。 +> [!TIP] +> +> +> + 2. **エディタ上でのプレビュー** ノードを選択すると **SpriteStudio** ボトムパネルが表示されます。先頭から再生 / 現在位置から再生 / 停止のトランスポートとフレームスクラバを使って、**ゲームを実行せずにエディタ上でアニメーションを再生**できます。ショートカットは AnimationPlayer エディタと同じく **D** 現在位置から再生 / **Shift+D** 先頭から / **S** 停止（パネルが表示中に有効）。 `Frame` や `Speed`、`Loop` などのパラメータを変更するとリアルタイムにプレビューへ反映されるため、素早い調整が可能です。 > [!TIP] +> > -> *(※上記に SpriteStudio ボトムパネルでプレビューが動く様子を示す動画が入ります)* +> --- diff --git a/docs/ja/workflow/usage_scripting.md b/docs/ja/workflow/usage_scripting.md index f4e4b31..59f48c9 100644 --- a/docs/ja/workflow/usage_scripting.md +++ b/docs/ja/workflow/usage_scripting.md @@ -60,8 +60,7 @@ func _on_animation_finished(anim_name: String): ``` > [!NOTE] -> ![シグナル接続画面の画像](../../assets/signal_connection.png) -> *(※ここに Godot エディタ右側の「ノード」タブでシグナルを接続している様子の画像が入ります)* +> ![シグナル接続画面の画像](../../assets/6-connect_signals_node_tab.png) ### 実装例: ユーザーデータを使ったイベント発火 SpriteStudio 上で設定したユーザーデータ（足音の再生、攻撃判定の発生など）を受け取り、ゲーム側で処理を行う実装例です。 @@ -99,5 +98,5 @@ func change_weapon(): この機能により、アニメーションデータをパーツごとに何パターンも用意することなく、効率的なアバターシステムを構築できます。 > [!TIP] -> ![着せ替えの Before/After 比較画像](../../assets/change_equipment.png) -> *(※ここにキャラクターが武器を持ち替えた Before/After の比較画像が入ります)* +> ![着せ替え前](../../assets/7-cellmap_override_before.png) +> ![着せ替え後](../../assets/7-cellmap_override_after.png) diff --git a/mkdocs.yml b/mkdocs.yml index f90c95c..4e1c9b4 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -32,6 +32,7 @@ theme: plugins: - search + - callouts - i18n: docs_structure: folder languages: