Skip to main content

UI

Introduction​

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

UI Layout & Components​

Studio provides a variety of UI building blocks—from text and images to buttons and frames. Our intuitive (+) option in the Hierarchy panel makes it simple to add and customize UI elements. The UI Element Component includes detailed configuration settings inspired by CSS and Flexbox, letting you adjust everything from borders to background colors. Learn more about Flexbox styling here.

Adding UI Elements​

You can introduce UI elements through several methods:

  • Visual Editor: Use the (+) option in the Hierarchy to add presets.
  • Component Method: Attach UI elements as Components on an entity.
  • Scripting: Programmatically add elements using the API.

add-ui-elements.png

3D UI​

3D UI elements integrate seamlessly into your 3D scene, allowing for spatially interactive displays. You can adjust these via the inspector or transform gizmo.

ui-element-mode-3d

Interaction​

You can add interaction to 3D UI elements using a custom component with an event listener.

Example​

import * as ecs from '@8thwall/ecs'

ecs.registerComponent({
  name: '3D Button',
  schema: {
  },
  schemaDefaults: {
  },
  data: {
  },
  stateMachine: ({world, eid}) => {
    ecs.defineState('default')
      .initial()
      .listen(eid, ecs.input.SCREEN_TOUCH_START, (e) => {
        console.log('Interacted!')
      })
  },
})

Overlay UI​

For screen-anchored UI, overlay elements offer absolute positioning. Preview these elements within the Simulator and use percentage-based sizing for responsive design, e.g., width: 100%.

ui-element-mode-2d

Interaction​

You can add interaction to Overlay UI elements using a custom component with an event listener.

Example​

import * as ecs from '@8thwall/ecs'

ecs.registerComponent({
  name: 'Overlay Button',
  schema: {
  },
  schemaDefaults: {
  },
  data: {
  },
  stateMachine: ({world, eid}) => {
    ecs.defineState('default')
      .initial()
      .listen(eid, 'click', (e) => {
        console.log('Interacted!')
      })
  },
})

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.