Resoniteでのモノづくり

# Resoniteでモノづくり
VRSNS「Resonite」における開発の仕方についてまとめます。
本記事では、モノづくりのための思考や知識の説明にフォーカスしており、部分的に操作説明を省略する場合があります。

## 開発者目線でワールド上のオブジェクトを観測する
Resoniteでモノを作るに当たって、作りたいモノや、既にあるアイテムなどの構造を確認することは非常に重要です。Resoniteはオブジェクトの構造をゲーム内で確認することが出来ます。確認するには、`DevTool (デヴツール)` というアイテムを用いて、`Inspector (インスペクター)`を開きます。

### インスペクターの開き方
DevToolを取り出します。`Resonite Essentials > Tools` の中にあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/911135/d0ed69bd-6a45-3349-a398-78594771075b.png)

もしくは、以下のURLをResoniteにペーストすることでも取り出せます。
```
resrec:///G-Resonite/R-626800ae-24a7-4287-a747-165f9ff611d0
```

DevToolを取り出したら装備をします。コンテキストメニューを開くと、`インスペクターを開く`という項目を選びましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/911135/9b7143c0-bdb6-fc47-736a-b06f72e0c806.png)

そうするとインスペクターが出現します。大体の見方は以下の通りです。
![ex_inspector_colored.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/911135/b1fee46b-51ac-c88a-cc1c-22cde58853b8.png)

### Slotとコンポーネント
Slotは座標や回転角、縮小率などの情報を持ちますが、そのままでは目で見たり、触ったりすることは出来ません。Resonite内で物体として干渉出来るようにするためには、コンポーネントをアタッチする必要があります。

例えば、『手に持てる箱』を作るには
- BoxMesh - Meshとは多角形の集合で立体構造を表現したデータ。BoxMeshは文字通り、直方体の形状をしたMeshデータ。 
- MeshRenderer - Meshはただの形状の情報なので、コレを描画(Render)するためにレンダラーコンポーネントが必要。  
- BoxCollider - モノに当たり判定をつけるために、Boxの形状をしたコライダーが必要。  
- Grabbable - モノを持てるようにするコンポーネント。  

の4コンポーネントが最低でも必要になります。機能や要素を持たせるために、多種多様なコンポーネントが必要になってきます。

```mermaid
graph LR;
    VisibleBox[目に見える箱]
    TouchableBox[当たり判定があり<br>目に見える箱]
    GrabbableBox[当たり判定があり<br>手に持つことが出来る<br>目に見える箱]
    B{{BoxMesh}} -- Attach --> S[[Slot]] --- VisibleBox;
    R{{Renderer}} -- Attach --> S[[Slot]];
    VisibleBox --> TouchableBox;
    C{{Collider}} -- Attach --> TouchableBox;
    TouchableBox --> GrabbableBox;
    G{{Grabbable}} -- Attach --> GrabbableBox;
```

さらにもっとコンポーネントをアタッチしてみましょう。
```mermaid
graph LR;
    GrabbableBox[当たり判定があり<br>手に持つことが出来る<br>目に見える箱]
    SpiningBox[当たり判定があり<br>手に持つことが出来る<br>回転し続ける<br>目に見える箱]
    SizingBox[当たり判定があり<br>手に持つことが出来る<br>回転・拡大縮小し続ける<br>目に見える箱]

    VGDPN1([一定のスピードで特定の値を操作できるギミック])
    VGD{{ValueGradientDriver float3<br>一定の割合おきに値を変化させられるコンポーネント}} --> VGDPN1
    PN1{{Panner1D<br>Float値を一定のスピードで変化させられるコンポーネント}} -- progressを操作 --> VGDPN1

    GrabbableBox --> SpiningBox
    S{{Spinner}} -- Attach --> SpiningBox --> SizingBox
    VGDPN1 -- scaleを操作 --> SizingBox
```

このようになります

![Resonite 2024-12-01 14-28-19 - Trim.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/911135/b4649979-03fb-fb7f-eb4a-477aa9e1f500.gif)

どのようなコンポーネントがどんな働きをするかは、コンポーネントの名前から大体推測したり、ResoniteのWikiを熟読して大まかな傾向を掴むことが必要です。


## 動くモノを作るには
Resoniteでは複雑な動きをするオブジェクトを制御する方法として、コンポーネント単体で動作を制御する方法と、ヴィジュアルプログラミングシステムのProtoFluxを利用する方法があります。

### ProtoFlux
プログラミングシステムを使って動きを制御することの最大の強みは、その制御が自由に行えることです。コンポーネントでは予め用意されている移動方法を組み合わせるだけの制御ですが、ProtoFluxを使う場合、乱数を用いたり、三角関数によってより自然で滑らかな動きを実現したり、条件に応じて動き方を変えるなど、非常に柔軟な制御が可能になります。

### Component
コンポーネントを使って動きを制御する場合、多くの場合は単純な動きに限られますが、このような単純な動きをProtoFluxで組み直すことは、開発上のコストも、実行負荷の観点からも重くなってしまいます。『全てコンポーネントで組んだほうが軽くなる』というわけではありませんが、単純な動きはコンポーネントで表現したほうがシンプルでしょう。
## アイテムを分解する
既存のツールやアイテムの仕組みを理解することは、モノづくりの理解を深めたり、新しいコンポーネントへの出会いに繋がります。  

特定のモノのインスペクターを開くには、まず対象の物体を『選択』する必要があります。
対象の物体にレーザーを当て、セカンダリ操作(スティック押し込み または `R`キー)を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/911135/8d0696ee-18bf-6d10-e020-366e37120602.png)
物体の原点に3本矢印『ギズモ』と、オブジェクトの領域を示す点線が表示されました。  
この状態で、コンテキストメニューから`インスペクターを開く`操作をすることで、その物体のインスペクターを開くことが出来ます。

:::note warn
なお、この方法でオブジェクトのインスペクターを開くためには、対象のオブジェクトに何らかのColliderがあり、かつその`IgnoreRaycasts`パラメータが`False`である必要があります。(`IgnoreRaycasts`はコライダーに存在するパラメータの1つで、これをTrueにするとレーザーが貫通するようになります。)  
`IgnoreRaycasts`が `True` の場合やコライダーがない場合、インスペクターから頑張って探すしか方法はありません。
:::

## ProtoFluxを展開する
上と同じような手順で、先述したヴィジュアルプログラミングシステムであるProtoFluxを展開してみましょう。まず、ProtoFluxが格納されているSlotを特定する必要があります。(が、そのアイテムを使い捨てする予定ならば、このステップは無視してよいです。)

Slotの特定と言っても、ProtoFluxが入っていそうな、「Flux」などという名前のSlotを探すだけです。見つからなかったら、アイテムの一番上のSlotを選びましょう。

### Slotを掴む
Fluxが入っているSlotをグラブしてください
![2024-12-01 04.54.24.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/911135/f1eb6121-cb51-0415-73a3-47513f68ab53.jpeg)

### コンテキストメニューを開く
グラブしたまま、コンテキストメニューを開いてください。  
そのまま「(Slot名)をアンパック」を選択します。
![2024-12-01 04.54.49.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/911135/1825fbb8-4ce9-4221-314f-94f501d32294.jpeg)

### 御対面
ProtoFluxが出てきます。
![2024-12-01 04.55.13.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/911135/ff7b42a5-276a-4ea8-8951-578b0638f210.jpeg)


## Mirage-X という選択肢
私が推しているResoniteでの開発手法の一つに、「Mirage-X」というフレームワークを用いる手法があります。これは、Web開発に用いられる「React」と同じような記述によって、Resonite内のオブジェクトを開発できます。

例えば、[UniPocket](https://uni-pocket.com/ja/items/715c047b-308c-474e-bfea-72d8dd5ca3bd)や、拙作の[Ai Console](https://uni-pocket.com/ja/items/931970c8-105c-4d00-b02a-827d8b3fa488)などはこのフレームワークを利用して開発されています。

Mirage-Xは、JavaScript(TypeScript)というプログラミング言語を使って記述しますので、例えば次のようなメリットがあります。

- コードベースの開発ができる
    - ProtoFluxのように、ノード型のプログラミングが好みでない方にとって、これは素晴らしい選択肢になります。
- 外部ライブラリが使える  
    - 複雑な挙動、難しい計算、高度な演出も、世の中のすごい人が作ったコードを流用できます。ProtoFluxでは、それを自分で再現する必要がありますが、ここではそれが必要ありません。
- Gitが使える
    - Gitはバージョン管理システムです。これによって、複数人での同時進行での開発や、履歴の管理が容易に行えます。
- AIの力を借りることが出来る
    - ProtoFluxという、Resonite内で限定的に動作するプログラミングシステムではなく、ReactやTypeScriptとと言った、世界中で幅広く使われているプログラミング言語・フレームワークを利用して開発するため、生成AIを利用したコーディングのスピード向上などが望めます。

これらの理由から、Mirage-Xが流行って欲しいので、これはこれで別の記事を書こうと思います。

# おわり
Resoniteを発展させるのはアナタ！是非色々作って遊んでください～
Mirage-Xの記事もお楽しみに