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

Akidenz Grotesk

Baskerville

Futura

Gotham

Helvetica

Nanum Pen Script

Press Start 2P

Times

Inconsolata

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.

Example

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

remarque

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'
})