Loading...

Creating a VR Menu

Oculus GearVR – Unity 2017.1.1f1

Project Brief: Design and build a VR Menu

Design for: Android – GearVR Headset

Inputs: Use a gaze cursor & timer to click. (ray-cast)

Functionality: Be able to click on tiles and that action take the user to a new scene.

RESEARCH:

I am text block. Click edit button to change this text.

The VR menu system in Unity VR Samples

From what I can gather each image is its own FBX model.
The models each have their own materials assigned to it.
The material is a PNG sequence of 50 frames, displaying an animation loop “On Over” (1024x512px – 2:1 Ratio)

The Descriptions use another method,
The are all derived from 1 single transparent TIF image with alpha.
As I am planning to allow a dynamic style menu later this may not be the best option for me.

JAUNT’s VR Menu

OCULUS’s Curved VR Menu

OCULUS’s Flat VR Menu

OCULUS’s Segmented VR Menu


Starting the build


Media360 - Test Video Placeholder

Industry Compatibility

Youtube recommends their cover images are 16X9 Ratio 1280px X 720px less than 2mb

This seems like a good place to start as artwork is generally created in the same size and format.

Use PNG for transparency possibilities.

 

I built this in photoshop as a placeholder to test my video titles.
Whilst building this I encorporated a few tests.
Colours, Transperency, Aliasing, shading, Black & white edges, Safe Zones, 30 & 60pt Robotto Font


Initial Choices

Initially I am going to go with a modified 16:9 version of the VR Samples demo because I have very few items to place in the scene and there is a working example I can reference.

For the final layout I would like to use the Oculus flat style as I believe it looks cleaner and more professional.


Modifying the assets

The initial Menu Image item was 2:1 ratio.

we need it to be 16:9

If we scale the Y to 1.125 then we achieve the desired results .

Video Placeholder On Menu

Unity TIF vs PNG Alpha Channel + Photoshop Drop Shadow

Same image within Photoshop

New Material – VideoPlaceholder

I created a new material which has the Video Placeholder graphic attached as a texture

Shader – Custom / Separable Alpha

I set the other field to the same image as the other menu items “MenuScreenAlpha.tif” after inspecting this in Photoshop I realised that this image seems to just be a white blank image with very small black edge frame on the alpha channel layer (512x256px 72 pix/in) This seems to be used for a transparency matte.

When I added the texture to unity and camared it to the existing texture there were 2 differences 1. the existing images’s compression type is DXT1 & mine is DXT5, the other and more important difference is the existing image uses a trilenear filter mode with a Aniso Level of 16, my image used the default Bilinear and Aniso 1. I changed my settings to match.

Strangely within unity my 1280×720 graphic is showing up as 1024×512 like all of the others, we will see if this becomes an issue later.

Aniso Level – From Unity API

Anisotropic filtering level of the texture.

Anisotropic filtering makes textures look better when viewed at a shallow angle, but comes at a performance cost in the graphics hardware. Usually you use it on floor, ground or road textures to make them look better.

The value range of this variable goes from 1 to 9, where 1 equals no filtering applied and 9 equals full filtering applied. As the value gets bigger, the texture is clearer at shallow angles. Lower values mean the texture will be more blurry at shallow angles.

When attaching the texture to the material I changed Render Queue to : “transparent”, to match the others

 

Differences between PNG & TIF with transperancy

2 images output from the same PSD including alpha channel.

The tif seems to be more accurate but produces a slight black edge. Both do work, and can be set as an Alpha mask to their own image in a material.


Project Update


Scripting & Game Objects Analysis

MenuItem (Video Placeholder Object)

This Item Contains:

Menu Item – MenuItemFlyer
Mesh Renderer – All Off,
          Materials – Size 1, Element 0 – VideoPlaceholder material
MenuButton (Script)
          Scene to load – “Flyer”
          Camera Fade – MainCamera(VRCameraFade)
          Selection Radial – MainCamera(SelectionRadial)
          Interactive Item – (VRInteractiveItem)
VRInteractiveItem (Script) – No inputs
Mesh Collider – Material – None, Mesh – MenuItemFlyer
Menu Item Popout (Script) – Transform – MenuItemFlyer(transform), Item – MenuItemFlyer(VRInteractiveItem), Pop Speed – 8, Pop Distance – 0.5
Audio Source – Unsure
Menu Animator (Script) – Frame Rate = 30, Screen Mesh = MnuItemFlyer (MeshRenderer), VR Interactive Item = MenuItemFlyer(VRInteractiveItem)
Anim Textures – Size=51, element0=graphic_00 element1=graphic_01… to 50
Selection Slider (Script) – Duration=2, Audio=MenuItemFlyer(Audio Source), On Over Clip=MenuGazeOver, On Filled Clip = Menu Select, Slider=None, Interactive Item=MenuItemFlyer(VRInteractiveItem), VR Input = MainCamera(VR Input), Bar Canvas = None, Renderer = MenuSelectorChild (Mesh Renderer), Selection Radial= MainCamera(SelectionRadial), UI Fader= none(UIFader), Collider=None(Collider), Disable On Bar Fill = True, Disappear On Bar Fill = False.
VideoPlaceholder (Material) – Video Placeholder texture (Alpha Tif), Render Queue – Transparent

I am text block. Click edit button to change this text.


New Video / Menu Item Placeholder

I built this in After Effects and exported it as a PNG Sequence


VR Menu with their new Animated Placeholders