[Depreciated] Trace Interaction (Creating a menu) - mitchemmc/VRContentExamples GitHub Wiki

##Creating a Menu

There are many ways to create menus in UE4, one particular way is to use UMG(Unreal Motion Graphics) a WYSIWYG UI editor that comes built in with UE4. Unfortunately at this time UMG isn't very VR friendly and a lot of hacks are required to get UMG working when you don't have a keyboard and mouse. Fortunately I've done a little bit of work in creating a workflow of using UMG with VR, if nothing else this workflow will be a stop gap until Epic officially support UMG in VR.

###The Menu Widget

Firstly we are going to create a UMG widget object which will inherit from my custom TraceBaseMenu widget instead of the default UserWidget. This will give us an interface of interacting with the widget with a trace. Name it what ever suits your needs.

Next open up the newly created UMG widget.

  1. Select the created Canvas Panel
  2. Make that Canvas Panel a variable so we can use it in the event graph

  1. Move to the Event Graph
  2. Select the Canvas Panel and drag it into the graph
  3. Call the Set Root function to tell other blueprints what widget is the root widget
  4. Call initialised which will allow other blueprints to know when the menu is ready

  1. Moving back to the designer were going to make the editor a bit nicer to work with
  2. Select the fill screen menu to change how the screen is set up

  • Select the custom menu item
  • Set the width and height to 500

  • Select a Trace Button widget from the User Created menu into the designer, this is a custom widget that wraps a button around the custom trace logic to enable it to be used with the trace menu system.

  1. To make it easier to work with we are going to select a new anchor point for our button
  2. Select the middle, middle anchor point
  • ! Take note of the button name here (in this case TraceButton_320) as we'll need it later

  • Move the button to the bottom and scale it up to fit the bounds

  1. Now grab a Trace Table from our palette. The Trace Table is a custom UMG widget that is great for creating easily customisable menus
  2. Make sure to set it's anchors to middle, middle similar to the button. Also make sure to scale it to fit the remaining bounds

The Trace Menu Widget comes with a few variables we can change

  1. We can set the amount of columns the menu has, this is useful for creating either a list like layout or more of a grid like layout
  2. The item template is the menu item template that represents an individual item in our table
  3. The table items is an array containing each menu item we wish to see

  • Set the template to TraceTableItem an item template that has a nice translucent style.

  1. Now let's add a new item to our menu
  2. You can set this items individual padding
  3. You can also set the text that will be displayed on the item
  4. You can set the menu items height
  5. If you need to override the style on a per item level you can select override style and choose a new style
  6. You can also override the font if needed

  • To make this button a little less boring when we test it later we'll set its hovered tint to orange. This will give the button an orange tint when we hover over it
  • ! If you haven't noticed so far, the changes we make on these custom widgets won't be displayed in realtime. This unfortunately is due to the lack of a construction script for widgets

The Menu Blueprint

UMG and widgets exist in 2D space, to get the widget into the world and hence 3D space we'll need to create a new blueprint that will allow us place it in the world.

  • We'll create a new blueprint actor based off of Trace3DMenu, this is a blueprint that implements various functions that will translate 3D traces from our Pawn into its Widget Component

  1. Once we've created our blueprint select the inherited Widget Component
  2. Once selected we can select which menu it will show
  3. select our widget we created in the previous section

  1. Move to the event graph to set up some basic interaction
  2. Make sure that we can see the inherited variables
  3. Drag our menu widget from our variables into the graph

  • To use our menu we need to wait until it's initialised, luckily I've set up a function that is run once this is the case. Right click and get a reference to the Event Menu Initialised event

  1. Drag off of menu widget and call the interface function Get Widget By Name, this function will return a widget with the given name (Make sure to put in the name we took note off in the previous section)
  2. Next we cast to our Trace Button widget, this will allow us to assign events to the buttons delegates
  3. Assign to the On Clicked delegate of our button, this will create an event that will be run every time the button is clicked

  • Once we have the event we can do what ever we need with the button

Now all we need to do to see our working menu is drag our menu blueprint into our level, making sure that we are using a version of our TraceInteractionPawn

  1. As you can see a message is now printed when the button is clicked
  2. Also the menu turns orange when the button is hovered

  1. Create a similar flow to the getting the Trace Button to get the TraceTable
  2. The OnClicked of a TraceTable returns the individual menu item that was clicked
  3. We simply print the text of the menu item

  • As we can see clicking on a menu item will now print its text