NeosVRのLogiX開発のための自分用メモ。

2021/05/26 のアップデートで独自のコンテキストメニュー追加を行うコンポーネントが実装されました。

メインメニューの追加の仕方



任意のSlotに
Radiant UI/Context Menu/RootContextMenuItem
Radiant UI/Context Menu/ContextMenuItemSource
を追加する。
RootContextMenuItemのItemの箇所にはContextMenuItemSourceをドラッグして指定する。
ContextMenuItemSource内の
*Label
メニュに表示されるテキスト
*Color
メニューの色
*Sprite
メニューに表示されるアイコン
Assets/SpriteProviderのコンポーネントを追加し、Spriteに指定。
SpriteProviderの中のTextureに好きな画像を設定するのが楽だと思います。

ユーザーの子であれば表示されるようになるため、
掴んでいる、アバターの中に仕込む
等が条件でメニューに追加して表示されるようになる。

サブメニューの追加の仕方

上記メインメニューを追加したうえで、
コンポーネント
Radiant UI/Context Menu/ContextMenuSubMenu
を追加。
ItemsRootにサブメニューの親にしたいRootContextMenuItemのコンポーネントが入ったスロットを指定。

次にそのSlotの子に空のスロットを作成し、
コンポーネント
Radiant UI/Context Menu/ContextMenuItemSource
を追加。
あとはメインメニュー追加と同じように作成すると、サブメニューの作成が可能。

メニューボタン関連のイベントについて

ノードブラウザから
Interaction/ButtonEvents
を追加。

ノードの左端と、ContextMenuItemSourceのインタフェースノードを繋げば各種操作に対応した制御をおこなうことが出来る。


以下、そんな便利なコンポーネントがなかった頃に調査をしていた残骸です。

コンテキストメニューに独自の項目を追加してカスタムする方法を調査中。
他の方が制作したツールの中身を解析して作り方を調査。
記事も現状は完全に自分用です。

rhenium氏制作のカスタムメニューインストーラーというものも既にあり
いくつかの機能拡張が出来るようになっている。


追加する際の大枠の流れ


メニューボタン押下時に、
メニューが表示されるまで待つために少しだけディレイを入れた後、
UserのRootSlot>Context Menu>Visual>Radial Menu>ArcLayoutの中に自分で作ったArcを追加する。


メニューが表示された後にArcを追加すれば問題なく表示される(表示以外の機能については要調査)

Arcはメニューのアイテムの一つをまとめたものと思われるがそれをどうやって作るのかはまだ不明。


コンテキストメニュー用Arcの作り方

基本Slotの作成


空のSlotを作成。
名前をArcにする。
Arcの子に空のSlotを3つ作成。
それぞれ名前を
Image
Text
LogiX
にする。
*画像で更に親にBoxを設定しているのは、インベントリへの保存などをしやすくするためなので、メニューを作るだけなら必要ありません。

Textのコンポーネント設定

コンポーネントの追加
UIX>RectTransform
UIX>Graphics>Text
Assets>Materials>Text>UI_TextUnlitMaterial
UIX>RectTransform
追加したデフォルト値のまま特に変更しない。
UIX>Graphics>Text
Content:メニューに表示したいテキスト?

Imageのコンポーネント設定

コンポーネントの追加
UIX>RectTransform
UIX>Graphics>Image
Assets>SpriteProvider
Assets>Materials>Circle Segment>UI_CircleSegment
UIX>RectTransform
追加したデフォルト値のまま特に変更しない。
UIX>Graphics>Image
Assets>SpriteProvider
Assets>Materials>Circle Segment>UI_CircleSegment

Arcのコンポーネント設定

コンポーネントの追加
作成したSlot内に以下のコンポーネントを追加。
Radiant UI>ContextMenuItem
UIX>RectTransform
UIX>Graphics>OutlinedArc
UIX>Layout>ArcSegmentLayout
Uncategorized>PrimitiveMemberEditor
Common UI>Editors>TextEditor
Rendering>TextRenderer
UIX>Interaction>Button
Radiant UI>ContextMenuItem
Icon:Image内のImageコンポーネントをドラッグ。
Sprite:Image内のSpriteProviderコンポーネントをドラッグ。
Label:TextのTextコンポーネント内のContentの「Content:」の文字をドラッグして設定
??? Color:何の色を設定するのか確認中
_button:Buttonのコンポーネントをドラッグして設定

UIX>RectTransform
追加したデフォルト値のまま特に変更しない。
UIX>Graphics>OutlinedArc
Arc:360から1に変更
FillColor:メニューの背景の色になるのでお好みのものに変更
OutLineColor:メニューの外枠の色。デフォルトのままで良いが、好みで変更も可。
??? OutlineTickness:3に変更?デフォルトは2だが違いが不明。
Material:ImageのUI_CircleSegmentをドラッグして設定。
UIX>Layout>ArcSegmentLayout
Nested:ImageのRectTransformをドラッグして設定。
NestedSizeRatio:0.65に変更
Label:TextのTextコンポーネントをドラッグして設定。
Label Size: X 400 ,Y 120 に設定
Uncategorized>PrimitiveMemberEditor
_target:ContextMenuItemの「_menu:」の文字列をドラッグして設定。
_textEditor:Arc内のTextEditorをドラッグして設定。
_textDrive:Arc内のTextRendererの「Text:」の文字列をドラッグして設定
UIX>Interaction>Button
Addを3回押して3項目を追加。
色の値の設定例は写真の通り。

0のColorDrive:OutLinedArcのFillColor:の文字列をドラッグして設定
1のColorDrive:OutLinedArcのOutlineColor:の文字列をドラッグして設定
2のColorDrive:Image内のImageのTint:の文字列をドラッグして設定

LogiXの作成

コンテキストメニュー追加のLogiX
コードは以下の通り。

DupulicateSlotの接続先はArcのSlot。
また、LocalUserは制作例としてわかりやすさ重視で適当に設定してあるため
このままだとワールド内にツールがあるだけで全員のコンテキストメニューに追加が行われる。

実際に制作する場合は装備した時のタイミングなどにActiveUserを取得
メニューボタン押下時はその値の有無を参照してある場合は当該ユーザーのみに行うよう制御を追加する必要あり。

また、メニューが表示されている状態か否かも判定していない為、メニューを閉じるためにボタンを押下した際もコピーが行われてしまう。
メニュー項目をホバーした際にボタンを大きくするLogiX

コードは上記の通り。
コード自体は他の作者様のものをそのまま流用。
項目にレーザーが当たってホバー状態になった時にArcとOuterRadiusRatioの値を変更して大きくしています。
ホバー時に音を入れたい場合などはこの部分に改変を入れるのが良いと思われます。
メニュー項目として機能させたいだけなら不要です。
 

コンテキストメニュー用Arcの作り方(解析メモ)

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

管理人/副管理人のみ編集できます