docs: new tutorials (#983)

* fix: missing localization key

* docs: new tutorials

Editor/Localization/en-US.json

@@ -250,5 +250,6 @@
   "ma_info.param_usage_ui.no_data": "[ NO DATA ]",
   "reactive_object.inverse": "Inverse Condition",
   "reactive_object.material-setter.set-to": "Set material to: ",
-  "reactive_object.shape-changer.target-renderer": "Target Renderer"
+  "reactive_object.shape-changer.target-renderer": "Target Renderer",
+  "menuitem.misc.add_toggle": "Add toggle"
 }

docs~/docs/tutorials/advanced-toggles/index.md

@@ -0,0 +1,133 @@
+---
+sidebar_position: 5
+---
+
+# Advanced toggles
+
+Before we start, make sure you've read the [simple object toggle tutorial](/docs/tutorials/object_toggle/).
+This tutorial will build on that tutorial, showing you how to also update blendshapes when toggling objects.
+
+First, some background. Many avatars come with "shrink blendshapes", which are used to hide parts of the avatar, to
+avoid them clipping through clothing. These blendshapes are often used in conjunction with toggles to hide and show
+clothing items.
+
+By using Modular Avatar's [`Shape Changer`](/docs/reference/reactive-components/shape-changer/) component, you can
+easily update these
+blendshapes
+when toggling objects. Let's take a look at Anon's socks and shoes as an example.
+
+<div style={{"display": "flex", "flex-direction": "row"}}>
+<figure>
+![Anon-chan with shoes and socks](0a-boots-on.png)
+<figcaption>Shoes on</figcaption>
+</figure>
+
+<figure>
+![Anon-chan with shoes and socks](0b-boots-off.png)
+<figcaption>Shoes off</figcaption>
+</figure>
+</div>
+
+As you can see, when the shoes are toggled off, you can see a bit of a stick here. This is because both the socks and
+underlying foot are hidden by shrink shapekeys. Let's start by resetting them to zero.
+
+<div style={{"display": "flex", "flex-direction": "row"}}>
+<figure>
+![Anon_body blendshapes](1a-bs-settings.png)
+<figcaption>Anon_body blendshapes</figcaption>
+</figure>
+
+<figure>
+![Socks blendshapes](1b-bs-settings.png)
+<figcaption>Socks blendshapes</figcaption>
+</figure>
+</div>
+
+<figure>
+![With blendshapes reset](1c-results.png)
+<figcaption>Blendshapes reset to zero</figcaption>
+</figure>
+
+Now, let's set up Shape Changer to toggle off the underlying layers. We'll add one to each of the shoes and socks
+objects,
+and shrink the layer(s) underneath them.
+
+<div style={{"display": "flex", "flex-direction": "row"}}>
+<figure>
+![Shoes Shape Changer](2a-sc-boots.png)
+<figcaption>Shoes Shape Changer</figcaption>
+</figure>
+
+<figure>
+![Socks Shape Changer](2b-sc-socks.png)
+<figcaption>Socks Shape Changer</figcaption>
+</figure>
+</div>
+
+Note that we use `Delete` here. This is because, if we don't have any animatable toggles, Modular Avatar will
+automatically remove the underlying polygons instead of shrinking them, which can save on performance. If you have
+anything that can animate the object in question, it'll instead set the shape to 100. You can use `Set` instead if you
+want to keep the underlying polygons in all cases.
+
+Shape Changer will preview its effects in the editor... but if we do it right it's hard to tell that it's doing anything
+at all! To check, click on the debug overlay button, and select `Overdraw`, to get a see-through view of what's going
+on.
+If you shrink too much, however, it'll be immediately obvious in the scene view.
+
+<div style={{"display": "flex", "flex-direction": "row"}}>
+<figure style={{"width": "100%"}}>
+![Overdraw option](3a-overdraw-menu.png)
+<figcaption>Overdraw debug view</figcaption>
+</figure>
+
+<figure>
+![Overdraw view](3b-overdraw.png)
+<figcaption>Overdraw view</figcaption>
+</figure>
+</div>
+
+Now that we've set up our shape changers, we can go ahead and set up our toggles. Let's start by creating a submenu.
+Create a new game object and add a `Menu Installer` and `Menu Item`. Then set the menu item type to `submenu`.
+
+<div style={{"display": "flex", "flex-direction": "row", "justify-content": "center"}}>
+<figure>
+![Submenu setup](4-submenu-setup.png)
+<figcaption>Submenu setup</figcaption>
+</figure>
+</div>
+
+Now, click `Add Toggle` to create a new toggle under this submenu. Give it a new name and add our shoes object to it.
+Do the same for socks as well.
+
+<div style={{"display": "flex", "flex-direction": "row", "justify-content": "center"}}>
+<figure>
+![Shoes toggle setup](5-toggle-boots.png)
+<figcaption>Shoes toggle setup</figcaption>
+</figure>
+
+<figure>
+![Socks toggle setup](5b-toggle-socks.png)
+<figcaption>Socks toggle setup</figcaption>
+</figure>
+</div>
+
+:::warning
+
+While we can preview the effect of these toggles by clicking the `default` checkbox on the menu items in
+question, in the current version of Modular Avatar, the downstream effects of toggles on blendshapes can't be previewed
+in the editor. Use Avatar 3.0 Emulator or Gesture Manager to test these out in play mode.
+
+This limitation will be improved in future versions.
+
+:::
+
+And that's it! As you can see, Modular Avatar's Reactive Object system is designed to make it easy to set up shrink
+shapekeys and other such common outfit settings.
+
+:::tip
+
+Outfit authors can preset these Shape Changers, to allow for easy installation of clothing, with automatically
+configured blendshapes. The Reactive Object system responds to animations created by other NDMF-compatible systems, so
+your users don't necessarily need to use Modular Avatar's toggle system to get the benefits of these blendshapes.
+
+:::

docs~/docs/tutorials/index.md

@@ -11,5 +11,7 @@ Here are some step-by-step guides on how to set up things using Modular Avatar.
 * [Configuring a complex (cloth) outfit](/docs/tutorials/adv_clothing/) - this tutorial shows an example of an outfit that requires just a little bit more setup
 * [Toggle an object](/docs/tutorials/object_toggle/) - In this tutorial we'll build a simple toggle to turn on and off
   an item of clothing.
-  * You can also do this by [building an animator manually](/docs/tutorials/object_toggle_manual/)
+  * In the [advanced toggles tutorial](/docs/tutorials/advanced-toggles/), we'll show you how to update blendshapes when
+    toggling objects as well.
+  * You can also do this by [building an animator manually](/docs/tutorials/object_toggle_manual/), but why would you?
 * [Edit menus](/docs/tutorials/menu/) - This tutorial shows you how to use the modular avatar menu system to easily edit your avatar's menus

docs~/docs/tutorials/object_toggle/index.md

@@ -1,4 +1,8 @@
-# Simple Object Toggle
+---
+sidebar_position: 3
+---
+
+# Simple Object Toggle
 
 In this tutorial, we'll see how to create a simple menu item to toggle an object using the Reactive Object system of
 Modular Avatar.

docs~/docs/tutorials/object_toggle_manual/index.md

@@ -1,6 +1,6 @@
 ---
-sidebar_position: 2
-sidebar_label: Toggle an object
+sidebar_position: 6
+sidebar_label: Building an animator manually
 ---
 
 # Toggle an object (using manual animations)

docs~/i18n/ja/docusaurus-plugin-content-docs/current/tutorials/advanced-toggles/index.md

@@ -0,0 +1,126 @@
+---
+sidebar_position: 4
+---
+
+# （続）トグルの設定
+
+まず始める前に、[簡単なオブジェクトトグルチュートリアル](/docs/tutorials/object_toggle/)を読んでおいてください。
+このチュートリアルでは、オブジェクトをトグルする際にブレンドシェイプを更新する方法を紹介します。
+
+多くのアバターには「シュリンクブレンドシェイプ」と呼ばれるものが付属しており、これは衣服に素体がめり込むことを防ぐために使われます。
+これらのブレンドシェイプは、衣服アイテムを表示・非表示にするためのトグルと一緒に使用されることがよくあります。
+
+Modular Avatar の [`Shape Changer`](/docs/reference/reactive-components/shape-changer/) コンポーネントを使用することで、これらのブレンドシェイプを
+簡単に設定できます。例として、あのんちゃんの靴下と靴を見てみましょう。
+
+<div style={{"display": "flex", "flex-direction": "row"}}>
+<figure>
+![靴ありのあのんちゃん](0a-boots-on.png)
+<figcaption>靴あり状態のあのんちゃん</figcaption>
+</figure>
+
+<figure>
+![靴OFF](0b-boots-off.png)
+<figcaption>靴OFF状態</figcaption>
+</figure>
+</div>
+
+見ての通り、靴をOFFにすると、中から棒状のものが見えます。これは靴下と足がシュリンクブレンドシェイプで隠されているためです。
+まずは、これらをゼロにリセットしましょう。
+
+<div style={{"display": "flex", "flex-direction": "row"}}>
+<figure>
+![Anon_body のブレンドシェープ](1a-bs-settings.png)
+<figcaption>Anon_body のブレンドシェープ</figcaption>
+</figure>
+
+<figure>
+![ソックスのブレンドシェープ](1b-bs-settings.png)
+<figcaption>ソックスのブレンドシェープ</figcaption>
+</figure>
+</div>
+
+<figure>
+![リセット後](1c-results.png)
+<figcaption>リセット後の状態</figcaption>
+</figure>
+
+次に、Shape Changer を設定して、隠された部位を非表示にします。靴と靴下のオブジェクトそれぞれに追加し、その下のものを縮小します。
+
+<div style={{"display": "flex", "flex-direction": "row"}}>
+<figure>
+![靴に付属するShape Changer](2a-sc-boots.png)
+<figcaption>靴に付属するShape Changer</figcaption>
+</figure>
+
+<figure>
+![靴下に付属するShape Changer](2b-sc-socks.png)
+<figcaption>靴下に付属するShape Changer</figcaption>
+</figure>
+</div>
+
+ここで、`Delete` を使用しています。こうすることで、実際にこのオブジェクトをOFFにできるアニメーションが存在しない場合、指定したブレンドシェープ
+を操作する変わりに、ポリゴンを削除することができます。アニメーションがある場合は、変わりにブレンドシェープを１００に設定することになります。
+ポリゴンを残したい場合は `Set` に変更してください。
+
+Shape Changer はエディタ内で効果をプレビューしますが、正しく設定すると何もしていないように見えます。
+確認するには、デバッグオーバーレイボタンをクリックし、`Overdraw` を選択して透過表示を確認します。
+逆に、縮小しすぎた場合はシーンビューですぐにわかります。
+
+<div style={{"display": "flex", "flex-direction": "row"}}>
+<figure style={{"width": "100%"}}>
+![Overdraw 設定の位置](3a-overdraw-menu.png)
+<figcaption>Overdraw のデバッグ表示設定</figcaption>
+</figure>
+
+<figure>
+![Overdraw にするとこんな感じです](3b-overdraw.png)
+<figcaption>Overdraw にするとこんな感じです</figcaption>
+</figure>
+</div>
+
+Shape Changer を設定したら、次はトグルを設定します。まず、サブメニューを作成しましょう。
+新しいゲームオブジェクトを作成し、`Menu Installer` と `Menu Item` を追加します。次に、Menu Itemのタイプを `Submenu` に設定します。
+
+<div style={{"display": "flex", "flex-direction": "row", "justify-content": "center"}}>
+<figure>
+![Submenu 設定](4-submenu-setup.png)
+<figcaption>Submenu 設定</figcaption>
+</figure>
+</div>
+
+次に、このサブメニューの下に新しいトグルを追加します。`トグルを作成` をクリックして、このサブメニューの下に新しいトグルを作成します。
+新しい名前を付け、靴のオブジェクトを追加します。ソックスについても同様に行います。
+
+<div style={{"display": "flex", "flex-direction": "row", "justify-content": "center"}}>
+<figure>
+![靴のトグル設定](5-toggle-boots.png)
+<figcaption>靴のトグル設定</figcaption>
+</figure>
+
+<figure>
+![靴下のトグル設定](5b-toggle-socks.png)
+<figcaption>靴下のトグル設定</figcaption>
+</figure>
+</div>
+
+:::warning
+
+トグルの効果をプレビューするには、メニューアイテムの `Default` チェックボックスをクリックしてください。靴が消えます。
+ただし、現在のバージョンの Modular Avatar では、エディタ内でトグルによるブレンドシェイプへ影響までプレビューすることはできません。
+これについては、Avatar 3.0 Emulator や Gesture Manager を使用してプレイモードでテストしてください。
+
+この制限は、今後のバージョンで改善される予定です。
+
+:::
+
+完了です！これで、あのんちゃんの靴と靴下をトグルするメニューアイテムを作成しました。
+このように、Modular Avatar の Shape Changer を使用することで、簡単に衣服アイテムの表示・非表示を設定できます。
+
+:::tip
+
+衣装作者も Shape Changer を事前に設定しておくことで、衣服の導入を簡単に行えるようになります。
+Reactive Object システムは、他の NDMF 互換システムによって作成されたアニメーションに応答しますので、
+ユーザーが Modular Avatar のトグルシステムを使用しなくても、ブレンドシェイプを自動的に設定できます。
+
+:::

docs~/i18n/ja/docusaurus-plugin-content-docs/current/tutorials/menu/index.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 4
+sidebar_position: 5
 sidebar_label: メニューを編集
 ---
 

docs~/i18n/ja/docusaurus-plugin-content-docs/current/tutorials/object_toggle/index.md

@@ -1,4 +1,8 @@
-# 簡単なトグル作成
+---
+sidebar_position: 3
+---
+
+# 簡単なON/OFFトグル設定
 
 このチュートリアルでは、Modular Avatar の Reactive Object システムを使用してオブジェクトをON/OFFする簡単なメニューアイテムを作成します。
 

docs~/i18n/ja/docusaurus-plugin-content-docs/current/tutorials/object_toggle_manual/index.md

@@ -1,11 +1,12 @@
 ---
-sidebar_position: 2
-sidebar_label: オブジェクトを出し入れしよう
+sidebar_position: 6
+sidebar_label: 手動でアニメーター作成
 ---
 
-# オブジェクトを出し入れしよう
+# 手動でアニメーター作成
 
-このチュートリアルでは、キューブを出したり消したりするプレハブを作ります。ついでに分かりやすいように、アバターの右手に追従させます。
+このチュートリアルでは、手動でアニメーターを組むことでキューブを出したり消したりするプレハブを作ります。
+ついでに分かりやすいように、アバターの右手に追従させます。
 
 ## ①　オブジェクトを作成