TypeScriptから始める VR生活

TSKaigi 2024 LTで発表した資料です

---

みなさん、ResoniteというVRSNSはご存知ですか？
Resoniteは「Flux」という独自のビジュアルプログラミング言語を使ってメタバース内で何でも作ることが出来る、何でも創りたいエンジニアにはもってこいのVRSNSです！

今日はそんなResonite内で使えるアイテムを、みなさんが普段使っているであろうTypeScriptを使って、型安全に開発することができるMirageXについてお話します！

こんな人に聞いて欲しい！
・メタバースって今どうなってんだって人
・Resoniteって名前だけは聞いたことあるって人
・TypeScriptで世界を創りたい人

Transcript

1. TypeScript から始める
 VR 生活
 TamaG (@TAMAGOKAKE_G_)

2. TamaG（@TAMAGOKAKE_G_）
 読み方：たまじー
 所　属：株式会社ウィルゲート
 趣　味：スプラ・ポケスリ
 求　む：おすすめの日本酒🍶

3. みなさん

4. VR 知ってますか？
 （挙手お願いします）
 

5. 知ってますか？

6. 知ってますか？

7. Resonite とは

8. Resonite とは
 無限の可能性を秘めた、革新のデジタル世界へ足を 踏み入れよう。何気ない会話やゲーム、交流の場で 世界中の人々と共鳴(Resonate)し、アートから複雑 なゲームプログラミングまで、創作で互いの意見を ぶつけ合おう。ここであなたの居場所が見つかりま す。
 
 https://store.steampowered.com/app/2519830/Resonite/?l=japanese

9. 健康体操
 スロット

11. Resonite とは

12. モデリング
 プログラミング
 　　　　　　的なやつ
 ができる

13. モデリングできる

14. プログラミングできる

15. ProtoFlux（プロトフラックス）
 「ノード」と「ノード」をつなぐ
 ビジュアル
 プログラミング言語
 
 ｚ

16. ProtoFlux で Lightsout🍝
 🥺バージョン管理できない
 🥺関数化できない

17. それらの問題を
 解決すべく
 生まれたのが

18. MirageX
 （ミラージュ クロス）

19. MirageX なら . . .
 TypeScript × React で
 Resonite の開発ができる！！
 
 
 
 https://github.com/rheniumNV/mirage-x-template

20. こんなのだって
 作れる

21. 本格シューティング

22. MirageX の
 ここがすごい！！

23. TypeScript × React で書ける
 
 

24. すっきりしたかも？
 MirageX

25. 動きました

26. MirageX の
 ここがすごい！！

27. コードベースの開発なので
 バージョン管理できる！！
 
 

28. コードベースの開発なので
 AIの力を借りることができる

29. MirageX の
 ここがすごい！！

30. ライブラリを使うことができる
 
 
 [img] matter.jsを使った例の画像
 

31. MirageX の メリット
 󰢏TypeScript と React で書ける！！
 󰢏バージョン管理・AIパワー ！！
 󰢏ライブラリを使うことができる！！
 󰢏（不正な操作をされづらい！！）

32. MirageX の デメリット
 🥺インフラコストがかかる
 🥺ゲーム内で改造しづらい
 🥺遅延がある(ネットワークレイテンシ)

33. 最後になりますが

34. Resonite は
 作りたがりの
 エンジニア󰞵にとって

35. 夢のような場所

36. TypeScriptで
 ”共に”
 世界を創りましょう

37. 参考資料・ワールド
 rheniumNV/mirage-x-template 
 https://github.com/rheniumNV/mirage-x-template 
 TypeScriptでResoniteのアイテム開発をするMirageX（ミラージュクロス） 
 https://sharedx.notion.site/TypeScript-Resonite-MirageX-5a5dae2e62f9439d9ddf87f6dafd7f51 
 
 Zozokasu/avatar-tower-battle 
 https://github.com/Zozokasu/avatar-tower-battle 
 
 参考ワールド in Resonite 
 「Snatch Company」