docs: add docs for material setter and update screenshots

docs~/docs/reference/reactive-components/index.md

@@ -12,6 +12,7 @@ The following reactive components are currently available:
 
 * [Object Toggle](./object-toggle.md) - controls the active state of other game objects
 * [Shape Changer](./shape-changer.md) - modifies blendshapes on a target renderer
+* [Material Setter](./material-setter.md) - changes materials on a target renderer
 
 ## General rules for reactive components
 
@@ -19,7 +20,9 @@ In general, reactive components apply some kind of effect when they are _active_
 active when:
 
 - Its GameObject, and all parents, is active in the scene hierarchy.
-- If the reactive object is on the same GameObject as a [Menu Item](../menu-item.md), the Menu Item is selected.
+- If the reactive object is on the same GameObject as, or a child of a [Menu Item](../menu-item.md), the Menu Item is
+  selected.
+  - Note that only the first parent Menu Item is considered (parent Submenus are ignored).
 
 After building your avatar, reactive components respond to the following:
 
@@ -27,6 +30,9 @@ After building your avatar, reactive components respond to the following:
 - Object Toggles which influence the active state of other reactive components
 - Menu Item selections
 
+You may also select the "Invert condition" option; in this case, the effect of the component is applied when _any_ of
+the above conditions is _not_ true.
+
 ### Priority rules
 
 If multiple reactive components are active at the same time, and their effects conflict (e.g., one tries to turn off a

docs~/docs/reference/reactive-components/material-setter.md

@@ -0,0 +1,27 @@
+# Material Setter
+
+![Material Setter](material-setter.png)
+
+The Material Setter component allows you to change the materials of a renderer on yout avatar, when the Material Setter
+component's GameObject is enabled.
+
+Material Setter is a type of [Reactive Component](./index.md). See that page for general rules and behavior of reactive
+components.
+
+## When should I use it?
+
+Material setter can be used to change out the material of an object, either directly in response to a menu item, or in
+response to some other object appearing or disappearing.
+
+## Setting up Material Setter
+
+Attach the Material Setter component to the GameObject that will control its state. This can either be an object that
+will be animated to enable/disable it, or it can be on a Menu Item (or a child thereof). You can also attach it to an
+object that is always enabled, to change the material of an object at all times.
+
+Next, click the + button to add a new entry. Drag the renderer you want to manipulate onto the top object field, and
+select the material slot you want to change on the right side dropdown box. Then, put the material you want to insert
+into the "Set material to" field.
+
+By default, Material Setter will change the material when the GameObject is enabled (and/or the associated menu item is
+selected). If you want to change the material when the GameObject is disabled, you can select "Inverse condition".

docs~/docs/reference/reactive-components/object-toggle.md

@@ -1,6 +1,6 @@
 # Object Toggle
 
-<!-- TODO: Screenshot -->
+![Object Toggle](object-toggle.png)
 
 The Object Toggle component allows you to change the active state of one or more other GameObjects, based on the active
 state of a controlling object.

docs~/docs/reference/reactive-components/shape-changer.md

@@ -1,6 +1,6 @@
 # Shape Changer
 
-<!-- TODO: Find a good screenshot -->
+![Shape Changer](shape-changer.png)
 
 The Shape Changer component modifies the shape keys (blendshapes) of another renderer on the avatar, when the Shape 
 Changer component is enabled.

docs~/i18n/ja/docusaurus-plugin-content-docs/current/reference/reactive-components/index.md

@@ -12,13 +12,15 @@ sidebar_position: 1
 
 - [Object Toggle](./object-toggle.md) - 他のゲームオブジェクトのアクティブ状態を制御します
 - [Shape Changer](./shape-changer.md) - レンダラーのブレンドシェープを変更します
+- [Material Setter](./material-setter.md) - レンダラーのマテリアルを変更します
 
 ## リアクティブコンポーネントの一般的なルール
 
 一般的に、リアクティブコンポーネントは起動状態ときに何らかの効果を適用します。リアクティブコンポーネントは次の条件が満たされるときに起動状態とみなされます:
 
 - 付属しているGameObjectとその親がシーン階層でアクティブである
-- リアクティブコンポーネントが[Menu Item](../menu-item.md)と同じGameObjectにある場合、Menu Itemが選択されている
+- リアクティブコンポーネントが[Menu Item](../menu-item.md)と同じGameObject、もしくはその子にある場合、Menu Itemが選択されている
+  - なお、一番近い親のMenu Itemのみが考慮されます(親のサブメニューは無視されます)
 
 アバターを構築した後、リアクティブコンポーネントは以下に反応します:
 
@@ -26,6 +28,8 @@ sidebar_position: 1
 - 他のリアクティブコンポーネントのアクティブ状態に影響を与えるObject Toggle
 - Menu Itemの選択
 
+「条件を反転」オプションを選択することもできます。この場合、コンポーネントの効果は、上記の条件のいずれかから外れる場合に適用されます。
+
 ### 優先ルール
 
 同時に複数のリアクティブコンポーネントが起動状態であり、その効果が競合する場合(例: 1つがゲームオブジェクトをオフにしようとし、もう1つが

docs~/i18n/ja/docusaurus-plugin-content-docs/current/reference/reactive-components/material-setter.md

@@ -0,0 +1,26 @@
+# Material Setter
+
+![Material Setter](material-setter.png)
+
+Material Setter コンポーネントは、Material Setter コンポーネントの GameObject が有効になっているときに、アバター内のほかのレンダラーの
+マテリアルを変更します。
+
+Material Setter は [リアクティブコンポーネント](./index.md) の一種です。リアクティブコンポーネントの一般的なルールと動作については、
+[リアクティブコンポーネント](./index.md) ページを参照してください。
+
+## いつ使うべきか？
+
+Material Setter は、オブジェクトのマテリアルを変更するために使用できます。Menu Item の動作、もしくは他のオブジェクトの表示/非表示に応じて、
+オブジェクトのマテリアルを変更することができます。
+
+## Material Setter の設定
+
+Material Setter コンポーネントを、その状態を制御する GameObject にアタッチします。アタッチするオブジェクトは、アニメーションで有効/無効になる
+オブジェクトであってもよいし、Menu Item（またはその子オブジェクト）であってもよいです。また、常に有効のオブジェクトにつけることで固定で
+マテリアルを変更することもできます。
+
+次に、新しいエントリを追加するために + ボタンをクリックします。操作したいレンダラーを上部のオブジェクト欄にドラッグし、その右側のドロップダウン
+ボックスから変更したいマテリアルスロットを選択します。最後に、挿入したいマテリアルを「変更先のマテリアル」欄に入れます。
+
+デフォルトでは、Material Setter は GameObject が有効になっているとき（および/または関連するメニューアイテムが選択されているとき）に
+マテリアルを変更します。GameObject が無効になったときにマテリアルを変更したい場合は、「条件を反転」を選択してください。

docs~/i18n/ja/docusaurus-plugin-content-docs/current/reference/reactive-components/object-toggle.md

@@ -1,6 +1,6 @@
 # Object Toggle
 
-<!-- TODO: Screenshot -->
+![Object Toggle](object-toggle.png)
 
 Object Toggle コンポーネントは、制御オブジェクトのアクティブ状態に基づいて、他のいくつかのGameObjectのアクティブ状態を変更するコンポーネントです。
 

docs~/i18n/ja/docusaurus-plugin-content-docs/current/reference/reactive-components/shape-changer.md

@@ -1,5 +1,7 @@
 # Shape Changer
 
+![Shape Changer](shape-changer.png)
+
 Shape Changerコンポーネントは、有効になっているときに、アバター内の別のレンダラーのシェープキー（Blend Shape）を変更します。
 
 ## いつ使うべきか？