Friday, 10 January, 2020 UTC
Summary
One UI pattern from web design that has been widely adopted in Virtual Reality user interfaces is the ever popular Carousel. In this tutorial we will go over how to build a UI Carousel for your VR application.
If you are new to VR UI and Unity, get started with my previous tutorials: How to Build VR UI’s with Unity and Oculus Rift.
Understanding Scroll View
To make a Carousel, you first have to be familiar with Unity’s various Layout Components and UI Prefabs.
The prefab that we’ll use and modify for our Carousel is the Scroll View. Go to: Create > UI > Scroll View
Size the Scroll View’s width to fit however many tiles you wish to display in a single slide. And explore the set of options you have for fine tuning its scrolling behavior in the Scroll Rect component attached to it.
Trending AR VR Articles:
1. Augmented Reality Robotics
2. Mario Kart in a real vehicle with VR!
3. Ready Player One : How Close Are We?
4. Augmented Reality — with React-Native
Because our Carousel scrolls horizontally, we want to disable Vertical Scrolling. Next, we want to delete both the horizontal and vertical scrollbars, as we will be implementing our own scrolling and pagination methods.
Working With Layout Components
In my opinion, the trickiest part to Unity’s UI workflow is the layout.
Specifically, there are three components that work together to create dynamic layouts, but the ways that they interact with each other is unclear. They are:
- Horizontal, Vertical, Grid Layout Group
- Content Size Fitter
- Layout Element
We’ll want to use the Horizontal Layout Group to place our tiles horizontally in the Carousel.
Inside Scroll View there’s a “Content” game object where we’ll put all of our tiles. Attach the Horizontal Layout Group component to “Content,” and it will arrange the tiles horizontally.
There are a couple of very important, and poorly named, configurations that we want to set . Child Force Expandstretches the tiles to the size of “Content.” We do not want this, so uncheck both Width and Height.
Child Controls Size, conversely, forces “Content” to stretch to fit the number of tiles it contains. We want to choose the Width option. At this point you will notice that selecting Child Controls Size: Widthhas no effect on “Content.” What is going on?
In order for “Content” to expand, we need to add the Content Size Fitter component to it, and set Horizontal Fit to Preferred Size. Again, very confusing options.
And there you have it, a functioning Carousel that you can drag and scroll through!
Layout Element
Another component that I want to touch upon is the Layout Element.
Using Layout Element, we can set the min/max width and height for our UI. Which can be very useful for creating Responsive Design. But setting max sizes is not at all straight-forward without some trickery.
First, you want the parent game object to force the child to expand. With the parent having the width and height of the entire screen, and the child the element we want to set max sizes on.
Then, we want to attach Layout Element to the child. Change the Preferred Width/Height to the desired max values, and set Flexible Width/Height to 0.
That’s right, Preferred Width/Height plus Flexible Width/Height = 0 is Max Width/Height. Who would’ve guess?
Next Step
Now that we have a scrolling Carousel in place, in the second part of our tutorial, we will want to add pagination. Stay tuned.
To see the Carousel in action, checkout my VR UI Kit in the Unity Asset Store.
Don’t forget to give us your 👏 !
https://medium.com/media/1e1f2ee7654748bb938735cbca6f0fd3/hrefVR for UI Designers: Making a UI Carousel in Unity, Part 1 was originally published in AR/VR Journey: Augmented & Virtual Reality Magazine on Medium, where people are continuing the conversation by highlighting and responding to this story.