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:
- We mocked the UI in an external application and came up with a rough idea of how we wanted it to look.
- 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
- For non-interactive elements, all we needed to do is add a
SurfaceGuiobject to the part.
- For interactive elements, the
SurfaceGuialso needs to be inside the
StarterGuicontainer, with the
SurfaceGui/Adornee|Adorneeproperty linked to the appropriate part in the 3D workspace. Doing so allows you to add button events.
- To achieve a parallax effect, we used three separate
ScreenGui|ScreenGuisassigned to three unique
Part|Partswith different X values.
- We then added a glow effect with the
SurfaceGui/LightInfluence| LightInfluenceproperty of the appropriate
SurfaceGuiobject. If you set the property value to anything less than 1, it enables the
SurfaceGui/Brightness|Brightnessproperty. By adjusting the brightness, you can increase the glow emitting from the image.
- To let users toggle the display of the map, we used a
ProximityPromptthat we attached to a 3D model. This is an easy way to allow user interaction with world elements.
- Finally, using a UITweenModule
ReplicatedStorage, we animated hiding and showing the UI with
TweenServiceand 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