UI

Introduction

8th Wall Studio offre un système d'interface utilisateur intégré pour créer des interfaces interactives et conviviales au sein de votre expérience.

Mise en page et composants de l'interface utilisateur

Studio propose une grande variété de blocs de construction d'interface utilisateur, du texte aux images en passant par les boutons et les cadres. Notre option intuitive (+) dans le panneau Hiérarchie facilite l'ajout et la personnalisation des éléments de l'interface utilisateur. Le composant d'élément d'interface utilisateur comprend des paramètres de configuration détaillés inspirés de CSS et Flexbox, qui vous permettent de tout ajuster, des bordures aux couleurs d'arrière-plan. Pour en savoir plus sur le style Flexbox ici.

Ajout d'éléments d'interface utilisateur

Plusieurs méthodes permettent d'introduire des éléments d'interface utilisateur :

• Éditeur visuel: Utilisez l'option (+) dans la hiérarchie pour ajouter des préréglages.
• Méthode des composants: Attacher des éléments d'interface utilisateur en tant que composants à une entité.
• Scripting: Ajouter des éléments par programme à l'aide de l'API.

INTERFACE UTILISATEUR 3D

Les éléments de l'interface utilisateur 3D s'intègrent de manière transparente dans votre scène 3D, ce qui permet des affichages interactifs dans l'espace. Vous pouvez les ajuster via l'inspecteur ou le gadget de transformation.

Interaction

Vous pouvez ajouter une interaction aux éléments de l'interface utilisateur 3D à l'aide d'un composant personnalisé doté d'un récepteur d'événements.

Exemple

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

Interface utilisateur superposée

Pour les interfaces utilisateur ancrées dans l'écran, les éléments superposés offrent un positionnement absolu. Prévisualisez ces éléments dans le simulateur et utilisez des tailles basées sur des pourcentages pour un design réactif, par exemple, width : 100%.

Interaction

Vous pouvez ajouter une interaction aux éléments de l'interface utilisateur superposée à l'aide d'un composant personnalisé doté d'un récepteur d'événements.

Exemple

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

Intégration avec les machines à états

Comme nous l'avons vu dans les exemples précédents de cette page, l'interface utilisateur peut être intégrée à des [machines à états] (../essentials/state-machines.mdx) pour mettre en œuvre des fonctions telles que la navigation dans un menu de base, comme illustré ci-dessous.

Ces boutons construits avec des composants d'interface utilisateur peuvent être configurés pour déclencher un événement lorsqu'on interagit avec eux.

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

Les menus d'interface utilisateur élaborés dans Studio peuvent être suivis et organisés par état.

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

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

Pour faciliter le passage d'un menu à l'autre en masquant tous les autres menus et en affichant celui qui doit être actif, nous pouvons utiliser une fonction pour masquer par programme tous les menus non actifs.

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(`Menu ${menu} is not defined in the schema.`)
    }
  })
}

Tous les éléments ci-dessus peuvent être utilisés pour gérer une machine à états pour la navigation dans le menu qui change en fonction des clics sur les boutons et des états du jeu. Dans l'exemple suivant, nous démarrons un jeu en cliquant sur le bouton de démarrage et nous déclenchons un menu de fin de jeu après un certain temps. À partir du menu de fin de partie, d'autres boutons permettent de redémarrer le jeu ou de revenir au menu de démarrage.

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('State Change : Entered Game Active')
        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})
  },
})

Polices de caractères

Polices par défaut

Des polices par défaut sont disponibles pour être utilisées dans le système de l'interface utilisateur.

Nunito

Akidenz Grotesk

Baskerville

Futura

Gotham

Helvetica

Nanum Pen Script

Press Start 2P

Times

Inconsolata

Polices de caractères personnalisées

Vous pouvez également télécharger des polices personnalisées via des fichiers TTF pour les utiliser dans vos éléments d'interface utilisateur. Ajoutez des fichiers de polices personnalisées à vos ressources pour les rendre disponibles.