PcoWSkbVqDnWTu_dm2ix

User Interface

User Interface

We wanted to add an interactive map UI to let users consume information in the space station that looked and felt like it lived in this world. We decided to build the map inside the 3D space instead of on a screen that overlays the experience. This type of diegetic visualization allows for more immersion with the world as opposed to feeling like it is a completely separate experience.

Designing the Map

To design the map:

  1. We mocked the UI in an external application and came up with a rough idea of how we wanted it to look.
  1. We exported the individual pieces of the map as .png and imported them into Studio.

Building the Map

Building the map inside Studio involved using Part|Parts and SurfaceGui|SurfaceGuis.

  1. For non-interactive elements, all we needed to do is add a SurfaceGui object to the part.
  2. For interactive elements, the SurfaceGui also needs to be inside the StarterGui container, with the SurfaceGui/Adornee|Adornee property linked to the appropriate part in the 3D workspace. Doing so allows you to add button events.
  1. To achieve a parallax effect, we used three separate ScreenGui|ScreenGuis assigned to three unique Part|Parts with different X values.
  1. We then added a glow effect with the SurfaceGui/LightInfluence| LightInfluence property of the appropriate SurfaceGui object. If you set the property value to anything less than 1, it enables the SurfaceGui/Brightness|Brightness property. By adjusting the brightness, you can increase the glow emitting from the image.
  1. To let users toggle the display of the map, we used a ProximityPrompt that we attached to a 3D model. This is an easy way to allow user interaction with world elements.
  1. Finally, using a UITweenModule ModuleScript inside ReplicatedStorage, we animated hiding and showing the UI with TweenService and a bit of logic for determining the state. By tracking what the user clicked, we could hide and show elements by tweening various properties like alpha, position, and size.

Here's the final result of the interactive map:


Previous Sound Design