Anterior

Siguientes

Inicialización del entorno personalizado en la experiencia de XR

Completado

Lo último que debe hacer antes de que la experiencia personalizada esté lista para jugar consiste en inicializar el entorno y reemplazar el entorno predeterminado del archivo index.ts. Antes de hacerlo, vamos a asegurarnos de que atribuye las imágenes a la película Space Jam: Nuevas leyendas.

Incorporación de la atribución a la película Space Jam: Nuevas leyendas

A veces es necesario agregar texto e imágenes 2D. Para agregar este tipo de objetos a la escena, use AdvancedDynamicTexture. Esto le permite agregar otros controles de GUI.

Agregue GUI.Rectangle para crear imageRect y agréguelo a la textura dinámica guiMenu. Después, obtenga la imagen mediante GUI.Image, establezca sus propiedades y agréguela a imageRect.

Esta función debe ir en la clase Environment que se encuentra en el archivo environment.ts:

public addLegalLine() {
    const guiMenu = GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
    guiMenu.idealHeight = 720;

    //Creating the legal text box
    const textRect = new GUI.Rectangle("legalContainer");
    textRect.color = "white";
    guiMenu.addControl(textRect);

    //Creating the legal text
    const legal = new GUI.TextBlock("legalText", "© 2021 WBEI TM & ©2021 WarnerMediaDirect, LLC. All Rights Reserved.");
    legal.height = 0.2;

    // Positioning the legal text to the bottom center
    legal.verticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_BOTTOM;
    legal.horizontalAlignment = GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
    textRect.addControl(legal);
}

Ahora, los aficionados sabrán que esta experiencia de XR está protagonizada por el famoso equipo de los Looney de la película Space Jam: Nuevas leyendas.

Inicialización del entorno personalizado

Ahora que ha creado las funciones, agregue una función init() para llamar a las funciones auxiliares que crearán los botones de los personajes e incluirán el logotipo que acaba de agregar.

La función init() debe ir en la clase Environment del archivo environment.ts. Normalmente, las funciones init() se agregan justo después de constructor():

    public async init() {
        this.createCharacterButtons();
        this.addLegalLine();
    }

Ya está listo para cambiar el entorno predeterminado por el que acaba de crear.

Inicialización y prueba del entorno personalizado

De nuevo en el archivo index.ts, debe reemplazar el entorno predeterminado que creó y crear una instancia Environment. Pase las instancias scene y engine que creó anteriormente para construir la clase. Luego, llame a init para configurar los botones. Reemplace la línea const env = scene.createDefaultEnvironment(); por las dos líneas de código siguientes:

  const environment = new Environment(scene, engine);
  environment.init();

Por último, no olvide importar la clase Environment que acaba de crear. Para importar la clase, agregue la siguiente instrucción de importación hacia la parte superior del archivo index.ts, justo debajo de las otras instrucciones de importación que ya estaban allí:

  import {Environment} from "./environment"

Ya tenemos la escena con los botones para mostrar la puntuación de PER de cada personaje.

Ejecute npm start y observe la escena. Si quiere verla en un casco, puede implementarla en un sitio web estático o usar el almacenamiento de blobs para sitios estáticos.

Este es el aspecto que debería tener la escena final:

© 2021 Warner Bros. Ent. All Rights Reserved.

Continuar