Tutorial
Heading
Jan 24, 2024

How we created a camera system for 3D showcases

Showcase Manager is a tool designed to facilitate control over an isolated camera system within Unity

The mission

This documentation aims to guide users in using the "Showcase Manager" camera system effectively. We will cover configuring the tool, adjusting positions, modifying FOV, selecting projection modes (perspective, isometric), and more.

Additionally, we will explore the configuration of some UI elements.

Resources

  • Unity 2019.4.31f1 or newer.
  • Visual Studio 2019 or newer.
  • Showcase prefab.

The tool

Let’s delve into the components that constitute this tool.

  1. Canvas 2D
  • Button_Next
  • Button_Prev
  • Background_Step (0) (text containers)

i. Description.

ii. Title

  • Discord (this button is not used at the moment)
  • Instagram (this button is not used at the moment)
  • Twitter (this button is not used at the moment)
  • PingPong_Next (these buttons are crucial for one of the navigation systems)
  • PingPong_Back (these buttons are crucial for one of the navigation systems)
  1. Camera (main camera. This can be replaced at a later date based on project requirements)
  2. NavigationPoints (these points are employed by the camera to navigate the environment. They also contain information for the camera, such as POV or projection mode)

Unity's general structure

Functionality

Let’s explore the components that contribute to the functionality of Showcase Manager.

  1. Default State (this number determines the current camera position. Generally, it doesn’t require manipulation)
  2. States (UI elements)
  • Size (number of UI elements desired)
  • Element 0 (here, we place the UI elements in the order 0, 1, 2, and so forth)
  1. Navigation points (physical positions of navigation points in space)
  • Size (number of physical navigation points desired)
  • Element 0 (here, we place navigation points, in the order 0, 1, 2, and so forth)
  1. Navigation transform (transform position occupied by navigation points)
  • Size (this number must match the number of navigation points)
  • Element 0 (here, we host navigation point transformations in the same order as they are in navigation points)
  1. Forward (here, we place the button "Button_Next")
  2. Backward (here, we place the button "Button_Prev")
  3. PingPong_Next (here, we place the button "PingPong_Next")
  4. PingPong_Back (here, we place the button "PingPong_Back")
  5. Cycle (type of camera movement)
  • Once (when it reaches the end of the navigation points list, it does not proceed further)
  • Repeat (when it reaches the end of the navegation points list, it returns to 0)
  • PingPong (when it reaches the end of the navigation points list "1,2,3" the sequence is played backwards "3,2,1")
  1. Reverse (it serves as a visual guide to the pingpong cycle)
  2. Main Camera (here, we place the physical object of the camera)
  3. Main Camera (here, we use the same camera as above. The difference is that here we read the camera properties through code)

Unity's general structure 02

States
Navigation points

Navigation transform
Buttons next

PingPong next
Cycle

Main camera

Configuration

One important consideration is that, regardless of the number of navigation points, when the programme starts, the camera will automatically move to point (0). Therefore, it is crucial to position the camera at the same coordinates as this point.

Additionally, we can leverage this initial movement to create an intriguing effect, such as simulating being dropped into the scene.

The most basic configuration consists of 4 points, but you can modify the number of points based on your specific needs.

Navigation point configuration

It’s essential to note that we are working with a Unity prefab. Therefore, any modifications made will display in bold, including letters, numbers and names.

No bold
Bold

For this example, we will use only 2 points.

Initially, we will position the navigation points in the appropiate sections of the Showcase Manager Script (navigation points, navigation transform).

Navigation points example

Afterwards, we will position the Background_Step. There’s no need to toggle them on or off, the code manages them correctly.

Background step example

The following step involves configuring the navigation point data.

The critical data include "position" "rotation" and "new FOV", as the camera uses this information to navigate through the environment.

Navigation point data

The camera will typically have coordinates of 0,0,0 for both rotation and position in all positions.

Coordinates

Upon pressing the play button, you will observe that the camera repositions itself to the location of navigation point (0). Even though the numerical positions may not match exactly, their spatial positions are the same. This occurs because both the points and the camera have different parents, and these numerical values are independent of each other.

Camera reposition

To address this, I recomend aligning the cameras to "play" and using the blue arrow on the navigation points as a guide.

Camera aligment

Following that, you can copy the component during play, disable this mode and paste those values outside of play.

Outside of play values

Additionally, there’s the option to adjust the FOV using the same methods.

FOV modification

In addition to all this configurations, there’s the option to modify the speed at which the transition occurs from one camera to another, as well as the speed of the FOV transition, with 3 being the default value.

Speed transition modification

As a final detail, you have the option to change the projection method.

Projection mode modification

This capability enables us to have various points of view within the same presentation, as the camera will adjust the projection type based on the values of the navigation points.

Types of cycle

Repeat

Repeat cycle

This mode enables us to create an infinite loop, continously returning to the first and last navigation points.

Once

Once cycle

In this mode, we will cross from the first to the last navigation point, and once we reach the end, further progression will be restricted. However, we can return to the starting point.

PingPong

PingPong cycle

In the PingPong mode, the buttons will vanish from the screen, and clicking in the center of the screen will transition from the first point to the last and then proceed in reverse order (1,2,3...3,2,1). This mode is designed for mobile devices.

UI

The entire UI will be managed using Unity's built-in sprite editing system.

UI showcase Atlas

This serves as a good example of the type of UI used. The crucial aspect is that everything is divided into powers of 2, facilitating easier manipulation.

Sprite

Conclusion

This camera system is highly versatile, providing a wide array of tools that allow for the creation of spectacular presentations when configured meticulously.

Decentraland
Development
Unity
PJ Martínez
Lead Environmental Artist
Tutorial
Turning a 2D image into 3D using Blender
Tutorial
Trim textures: a new hope
Tutorial
Tomb Chaser 1 - Showcase