This site has been permanently archived. The content on this site was last updated in 2019.
Click menu
Stay organized with collections
Save and categorize content based on your preferences.
The Click Menu template is optimized for ease of use and can handle deep
hierarchies of menu options. Users point and click on icons just like they're
accustomed to on a PC or mobile device. In the provided example, icons
are arranged radially to enable fast and accurate selections.
A Click Menu can be used in VR in the same way a toolbar menu provides a 2D
app's top-level command structure. Additionally, Click Menus can also be used
for contextual commands on an object in VR, analagous to a right-click context
menu in 2D. In both cases, the Click Menu enables the user to choose between
many commands in a compact and easy to navigate manner.
In the provided example, Click Menu is used in a basic painting app to select
various painting options different brushes and colors. Icons are arranged
radially to enable fast and accurate selections.
Getting started:
Click Menu is available as part of Daydream Elements.
To use Click Menu, add the MenuRoot prefab to your sceen. This prefab
contains the ClickMenuRoot script which listens to the controller and is responsible for spawning the menu.
Customization
The ClickMenuRoot script has the following fields which can be customized according to your use case:
- Menu Tree: A Unity asset that represents the menu hierarchy. See the
building a menu section for more details.
- Back Icon: (Optional) The sprite to use as the back button in the center
of the menus. Leave blank if you don't need that functionality.
- Laser Pointer: (Optional) Typically, menus need to appear closer to
the user than the background elements in the scene. This means that the
laser reticle may need to adjust the distance from the controller when a
menu is opened. Link the active laser pointer here to allow the reticle
to update its distance.
- Pie Material: (Optional) If this is set, a background will be drawn for
the entire menu with this material. Selecting an icon will also cause a
section of the background to be highlighted.
- Menu Activation Button: The input event that will allow the menu to
open. This is typically a press or release of the app or touchpad buttons.
- Menu Icon Prefab: A prefab used to spawn each menu icon. Leave as
default for sprite icons.
- Reticle Delta: The maximum amount the reticle can move by each frame
when the menu is opening.
- Menu Distance: The distance away from the controller in meters to spawn
the Click Menu.
- Close Angle: The menu will automatically close when you point away from
the center by more than this angle.
- Open FoV Angle: The menu will only open if the laser is within the field
of view by less than this angle. This prevents accidental menu openings.
- Create a Click Menu Tree by going to File > Assets > Create >
DaydreamElements > ClickMenu > Tree.
- Create a Click Menu Item for each menu icon you want to add by going to
File > Assets > Create > DaydreamElements > ClickMenu > Item.
- Set the
ClickMenuItem fields as desired:
- ID: This value is passed to the
ItemSelectedEvent so that you can
identify what item was selected during the OnItemSelected event.
- Icon: This is the primary image for the button. Avoid text and opt
for recognizable icons.
- Background: (Optional) This is the image that will appear behind
the icon image.
- Tool Tip: This text draws in the center of the menu when this icon
is hovered over.
- Close After Selected: If true, the menu will close after selecting
the item. Otherwise the menu will stay open. This only applies to
non-parent nodes.
- Each
ClickMenuItem can then be added to the menu tree by dragging them into the Tree field. Items can be nested as children or as siblings to
construct a hierarchy.
Listening for Events:
In order to listen to menu selection events, subscribe a listener to
ClickMenuRoot's OnItemSelected. This listener will receive a callback and
an item ID whenever a final selection has been made. You can then use this ID
to handle each of the menu actions.
All rights reserved. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2024-10-09 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-10-09 UTC."],[[["\u003cp\u003eClick Menu is a user-friendly VR interface element within Daydream Elements, ideal for deep menu hierarchies and contextual commands, similar to PC or mobile menus.\u003c/p\u003e\n"],["\u003cp\u003eIt utilizes radial icon arrangements for quick selection and can be customized extensively using the \u003ccode\u003eClickMenuRoot\u003c/code\u003e script, controlling aspects like menu hierarchy, appearance, and interaction.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers build menus by creating a Click Menu Tree and individual Click Menu Items, defining icons, tooltips, and behavior using provided assets and scripting fields.\u003c/p\u003e\n"],["\u003cp\u003eTo handle user interactions, subscribe a listener to the \u003ccode\u003eClickMenuRoot\u003c/code\u003e's \u003ccode\u003eOnItemSelected\u003c/code\u003e event, which provides the selected item's ID, enabling developers to trigger corresponding actions within their application.\u003c/p\u003e\n"]]],["The Click Menu, part of Daydream Elements, enables users to select commands in VR via clickable icons, similar to PC or mobile interfaces. Menus are built using `MenuRoot` prefab and can be customized with properties like a `Menu Tree` for hierarchy, `Back Icon`, `Laser Pointer`, and `Menu Activation Button`. Developers can build menus by creating `Click Menu Tree` and `Click Menu Item` assets, adding icons, tooltips, and arranging them in hierarchies. The `OnItemSelected` event allows for action handling based on the selected item's ID.\n"],null,["The Click Menu template is optimized for ease of use and can handle deep\nhierarchies of menu options. Users point and click on icons just like they're\naccustomed to on a PC or mobile device. In the provided example, icons\nare arranged radially to enable fast and accurate selections.\n\nA Click Menu can be used in VR in the same way a toolbar menu provides a 2D\napp's top-level command structure. Additionally, Click Menus can also be used\nfor contextual commands on an object in VR, analagous to a right-click context\nmenu in 2D. In both cases, the Click Menu enables the user to choose between\nmany commands in a compact and easy to navigate manner.\n\nIn the provided example, Click Menu is used in a basic painting app to select\nvarious painting options different brushes and colors. Icons are arranged\nradially to enable fast and accurate selections.\n\nGetting started:\n\nClick Menu is available as part of Daydream Elements.\n\nTo use Click Menu, add the `MenuRoot` prefab to your sceen. This prefab\ncontains the `ClickMenuRoot` script which listens to the controller and is responsible for spawning the menu.\n\nCustomization\n\nThe `ClickMenuRoot` script has the following fields which can be customized according to your use case:\n\n- **Menu Tree:** A Unity asset that represents the menu hierarchy. See the [building a menu](#building_a_menu) section for more details.\n- **Back Icon:** (Optional) The sprite to use as the back button in the center of the menus. Leave blank if you don't need that functionality.\n- **Laser Pointer:** (Optional) Typically, menus need to appear closer to the user than the background elements in the scene. This means that the laser reticle may need to adjust the distance from the controller when a menu is opened. Link the active laser pointer here to allow the reticle to update its distance.\n- **Pie Material:** (Optional) If this is set, a background will be drawn for the entire menu with this material. Selecting an icon will also cause a section of the background to be highlighted.\n- **Menu Activation Button:** The input event that will allow the menu to open. This is typically a press or release of the app or touchpad buttons.\n- **Menu Icon Prefab:** A prefab used to spawn each menu icon. Leave as default for sprite icons.\n- **Reticle Delta:** The maximum amount the reticle can move by each frame when the menu is opening.\n- **Menu Distance:** The distance away from the controller in meters to spawn the Click Menu.\n- **Close Angle:** The menu will automatically close when you point away from the center by more than this angle.\n- **Open FoV Angle:** The menu will only open if the laser is within the field of view by less than this angle. This prevents accidental menu openings.\n\nBuilding a menu\n\n1. Create a Click Menu Tree by going to **File \\\u003e Assets \\\u003e Create \\\u003e\n DaydreamElements \\\u003e ClickMenu \\\u003e Tree**.\n2. Create a Click Menu Item for each menu icon you want to add by going to **File \\\u003e Assets \\\u003e Create \\\u003e DaydreamElements \\\u003e ClickMenu \\\u003e Item**.\n3. Set the `ClickMenuItem` fields as desired:\n - **ID** : This value is passed to the `ItemSelectedEvent` so that you can identify what item was selected during the `OnItemSelected` event.\n - **Icon**: This is the primary image for the button. Avoid text and opt for recognizable icons.\n - **Background**: (Optional) This is the image that will appear behind the icon image.\n - **Tool Tip**: This text draws in the center of the menu when this icon is hovered over.\n - **Close After Selected:** If true, the menu will close after selecting the item. Otherwise the menu will stay open. This only applies to non-parent nodes.\n4. Each `ClickMenuItem` can then be added to the menu tree by dragging them into the **Tree** field. Items can be nested as children or as siblings to construct a hierarchy.\n\nListening for Events:\n\nIn order to listen to menu selection events, subscribe a listener to\n`ClickMenuRoot`'s `OnItemSelected`. This listener will receive a callback and\nan item ID whenever a final selection has been made. You can then use this ID\nto handle each of the menu actions."]]