Creating the Gallery prefab

When it runs, our project will house multiple images in individual galleries. Each gallery will be a self-contained prefab containing thumbnail previews, scripts for user interaction, and a category title. The next several steps will involve building the first gallery. Once completed, these objects will become prefabs for creating additional image galleries with their own unique content:

  1. Make an empty GameObject and title it GalleryHolder.
    This object is the primary receptacle for the individual galleries. All images and canvases will exist inside of this container.
  2. Move GalleryHolder to (0,0,0).
  1. Add a Canvas to the GalleryHolder GameObject and name it Gallery.
    Do this by right-clicking on GalleryHolder in the Hierarchy window and choosing UI | Canvas.
  2. Rename the Canvas GameObject Gallery in the Inspector.

This canvas will be the parent of the individual UI elements for a single gallery. Everything we need to build and display to the user will be included here. This will serve as the first category of images and later we will duplicate it to create additional galleries. Figure 3.9 is a sketch of the gallery layout we are building. The final gallery will have a large image area with five smaller thumbnails:

Figure 3.10: Layout sketch of the gallery GameObjects

Creating the new canvas will also create an EventSystem in the Hierarchy panel. We will not need to modify or adjust the object. Its purpose is to manage the processing and handling of events within the scene. It works in conjunction with several modules and must be present.

  1. Set the Canvas Render Mode to World Space: Select the Gallery element and find the Canvas component in the Inspector panel. Change the Render Mode to World Space.

Render Mode controls how canvases are displayed in Unity scenes. There are three options:

  • Screen Space – Overlay: Overlay is the default value. In this mode, the canvas is drawn directly on top of the scene. This is helpful when creating a UI that must conform or resize to changes in the resolution or scale of the scene.
  • Screen Space – Camera: As in Overlay, in this mode objects are drawn on top of the scene, but here the canvas can be set at a specific distance from the camera. This means that besides being affected by the scale and resolution of the scene's camera, the UI elements are also affected by the perspective and distortion created by manipulating the camera's field of view and frustum.
  • World Space: Here the canvas will behave as any other element in our scene and can be incorporated into the world. The size can be set manually instead of being tied to the camera and scene. It is important to use it here because we want the UI elements to be fixed in space, so that as the user's perspective changes with normal head movement, the UI elements will be anchored to a specific position.
  1. With the Gallery canvas selected, choose the Event Camera target selector in the Canvas component. Double-click CenterEyeAnchor from the Select Camera list to set the value. Figure 3.11 shows the Canvas and Canvas Scaler (Script) components of the Gallery GameObject:
Figure 3.11: Canvas component for the Gallery GameObject
The CenterEyeAnchor GameObject is a prefab within the OVRCameraRig. It coincides with the center position between the left and right camera, which are used to create simulated vision.
  1. Set the position, size (height and width), pivot, rotation, and scale transformations to the values indicated in Figure 3.13:
Figure 3.12: Rect Transform settings for the Gallery GameObject

By default, the Canvas object will be scaled to cover the camera's entire field of view. To fit the object within the player's vision, the Gallery GameObject must be scaled down. In this example we used 0.003 to allow three galleries to fit in the space. Your project might need a different scale based on the number of Canvases needed and their distance from the OVRCameraRig.

  1. Save the scene and Unity project.

You will note that our Gallery object is nearly invisible in the Game window. This is because our Gallery object is a container for the UI elements we will need to present to the user. Without images or text, the object is only visible in the Scene window as a rectangle with a thin white stroke. After the optional font installation in the next step we will create UI elements to be dynamically updated and controlled by scripts.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.17.166.233