Skip to main content

UI

Introduction​

Niantic Studio offers a built-in UI system for creating interactive, user-friendly interfaces within your experience.

Layout​

The UI Element Component provides a range of settings, allowing you to add, position, and style text and images, as well as configure background color, opacity, and borders. These UI configurations incorporate concepts from CSS (Cascading Style Sheets) and Flexbox. CSS is one of the foundational web languages, standardized across all major browsers, while Flexbox simplifies responsive layout creation. Learn more about Flexbox styling here.

Fonts​

Default Fonts​

Default fonts are available for use within the UI system.

Nunito​

Nunito.png

Akidenz Grotesk​

AkidenzGrotesk.png

Baskerville​

Baskerville.png

Futura​

Futura.png

Gotham​

Gotham.png

Helvetica​

Helvetica.png

Nanum Pen Script​

NanumPenScript.png

Press Start 2P​

PressStart2P.png

Times​

Times.png

Inconsolata​

Inconsolata.png

Custom Fonts​

You can also upload custom fonts via TTF files to use in your UI Elements. Add custom font files to your assets to make them available.

Adding an Interface​

A UI element can be added to an entity through the Studio interface, the Mesh component, or in code. In Studio, you can add UI elements using the (+) button in the Hierarchy or by including a UI element in a Custom Component on the entity.

new-component-ui.png

Example​

The following example shows how to set a UI element on an entity at runtime.

note

Whether the UI appears in 3D space or as an overlay on the screen depends on whether the type is set to '3d' or 'overlay', not on the entity it’s attached to.

ecs.Ui.set(world, component.eid, {
  background: '#FFFFFF'
})