UI

Einführung

8th Wall Studio bietet ein integriertes UI-System für die Erstellung interaktiver, benutzerfreundlicher Schnittstellen in Ihrem Erlebnis.

UI-Layout & Komponenten

Studio bietet eine Vielzahl von UI-Bausteinen - von Text und Bildern bis hin zu Schaltflächen und Rahmen. Unsere intuitive (+) Option im Hierarchie-Panel macht es einfach, UI-Elemente hinzuzufügen und anzupassen. Die UI-Element-Komponente enthält detaillierte Konfigurationseinstellungen, die von CSS und Flexbox inspiriert sind und mit denen Sie alles von Rahmen bis zu Hintergrundfarben anpassen können. Erfahren Sie mehr über Flexbox-Styling hier.

Hinzufügen von UI-Elementen

Sie können UI-Elemente mit verschiedenen Methoden einführen:

• Visueller Editor: Verwenden Sie die Option (+) in der Hierarchie, um Voreinstellungen hinzuzufügen.
• Komponenten-Methode: Anhängen von UI-Elementen als Komponenten an eine Entität.
• Skripting: Fügen Sie mithilfe der API programmatisch Elemente hinzu.

3D UI

3D-UI-Elemente lassen sich nahtlos in Ihre 3D-Szene integrieren und ermöglichen so räumlich interaktive Darstellungen. Sie können diese über den Inspektor oder das Transformations-Gizmo anpassen.

Interaktion

Sie können 3D-Oberflächenelementen Interaktion hinzufügen, indem Sie eine benutzerdefinierte Komponente mit einem Ereignis-Listener verwenden.

Beispiel

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

Für bildschirmverankerte Benutzeroberflächen bieten Overlay-Elemente eine absolute Positionierung. Zeigen Sie diese Elemente im Simulator in der Vorschau an und verwenden Sie die prozentuale Größenanpassung für responsives Design, z. B. "Breite: 100%".

Interaktion

Sie können den Overlay-Oberflächenelementen Interaktion hinzufügen, indem Sie eine benutzerdefinierte Komponente mit einem Ereignis-Listener verwenden.

Beispiel

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

Integration mit Zustandsautomaten

Wie in den vorangegangenen Beispielen auf dieser Seite zu sehen ist, kann die Benutzeroberfläche in [Zustandsautomaten] (../essentials/state-machines.mdx) integriert werden, um Funktionen wie die grundlegende Menüführung zu implementieren (siehe Abbildung unten).

Diese mit UI-Komponenten erstellten Schaltflächen können so eingerichtet werden, dass sie bei Interaktion ein Ereignis auslösen.

ecs.registerComponent({
  name: 'start-button',
  stateMachine: ({world, eid}) => {
    ecs.defineState('default')
      .initial()
      .listen(eid, ecs.input.UI_CLICK, () => {
        world.events.dispatch(eid, 'onStartButtonClick')
      })
  },
})

In Studio erstellte UI-Menüs können nach Status verfolgt und organisiert werden.

enum GAME_STATES {
  GAME_START = 'gameStateStart',
  GAME_ACTIVE = 'gameStateActive',
  GAME_OVER = 'gameStateOver',
}

enum GAME_MENUS {
  START_MENU = 'startMenu',
  GAME_OVER_MENU = 'gameOverMenu',
}

Um den Wechsel zwischen den Menüs zu erleichtern, indem alle anderen Menüs ausgeblendet werden und das Menü angezeigt wird, das aktiv sein soll, können wir eine Funktion verwenden, um jedes nicht aktive Menü programmatisch auszublenden.

const updateUI = (world, schema, activeMenu = null) => {
  Object.values(GAME_MENUS).forEach((menu) => {
    if (schema[menu]) {
      if (menu === activeMenu) {
        ecs.Hidden.remove(world, schema[menu])
      } else {
        ecs.Hidden.set(world, schema[menu])
      }
    } else {
      console.warn(`Menü ${menu} ist im Schema nicht definiert.')
    }
  })
}

Alle oben genannten Funktionen können verwendet werden, um einen Zustandsautomaten für die Menünavigation zu verwalten, der sich je nach Schaltflächenklicks und Spielstatus ändert. Im folgenden Beispiel starten wir ein Spiel, wenn wir auf die Start-Schaltfläche klicken, und lösen nach einer bestimmten Zeit ein Game-Over-Menü aus. Vom Game-Over-Menü aus kann man mit weiteren Tasten das Spiel neu starten oder zum Startmenü zurückkehren.

ecs.registerComponent({
  name: 'game-controller',
  schema: {
    startMenu: ecs.eid,
    gameOverMenu: ecs.eid,
    gameActiveMenu: ecs.eid,
  },
  data: {
    isGameActive: ecs.boolean,
  },
  stateMachine: ({world, eid, dataAttribute, schemaAttribute}) => {
    const gameOver = ecs.defineTrigger()

    ecs.defineState(GAME_STATES.GAME_START)
      .initial()
      .onEnter(() => {
        console.log('Entered Game Start')
        updateUI(world, schemaAttribute.cursor(eid), GAME_MENUS.START_MENU)
      })
      .onEvent('onStartButtonClick', GAME_STATES.GAME_ACTIVE, {target: world.events.globalId})

    ecs.defineState(GAME_STATES.GAME_ACTIVE)
      .onEnter(() => {
        console.log('Statuswechsel: Spiel aktiv betreten')
        updateUI(world, schemaAttribute.cursor(eid), 'gameActive')

        setTimeout(() => {
          console.log('Waiting done. Triggering game over.')
          gameOver.trigger()
        }, 1000)
      })
      .onTrigger(gameOver, GAME_STATES.GAME_OVER)

    ecs.defineState(GAME_STATES.GAME_OVER)
      .onEnter(() => {
        dataAttribute.cursor(eid).isGameActive = false
        updateUI(world, schemaAttribute.cursor(eid), GAME_MENUS.GAME_OVER_MENU)
      })
      .onEvent('onRestartButtonClick', GAME_STATES.GAME_ACTIVE, {target: world.events.globalId})
      .onEvent('onReturnStartClick', GAME_STATES.GAME_START, {target: world.events.globalId})
  },
})

Schriftarten

Standard-Schriftarten

Für die Verwendung innerhalb des UI-Systems stehen Standardschriftarten zur Verfügung.

Nunito

Akidenz Grotesk

Baskerville

Futura

Gotham

Helvetica

Nanum Pen Script

Press Start 2P

Times

Inconsolata

Benutzerdefinierte Schriftarten

Sie können auch benutzerdefinierte Schriftarten über TTF-Dateien hochladen, um sie in Ihren UI-Elementen zu verwenden. Fügen Sie benutzerdefinierte Schriftdateien zu Ihren Assets hinzu, um sie verfügbar zu machen.