Anterior

Siguientes

Creación de iconos de personajes en el entorno de XR

Completado

Ya estamos listos para compilar la función createCharacterButtons.

Creación de un icono de personaje

Use el código siguiente para agregar CylinderPanel a mainManager. CylinderPanel será el contenedor de los iconos. Después, cree meshManager y meshPanel para mostrar la tarjeta emergente de personaje displayStatsContainer. Agregue el evento de clic onPointerUpObservable para quitar displayStatsContainer de la escena cuando se seleccione.

La función createCharacterButtons() debe ir en el archivo environment.ts en la clase Environment:

public createCharacterButtons() {
    // Create the main 3D UI manager for the icon grid
    var mainManager = new GUI.GUI3DManager(this._scene);

    // Create a cylindrical panel so that the images wrap around the user
    var mainButtonPanel = new GUI.CylinderPanel();
    mainButtonPanel.margin = 0.2;
    mainManager.addControl(mainButtonPanel);

    // Create an anchor so that the main panel doesn't move
    var anchor = new TransformNode("");
    mainButtonPanel.linkToTransformNode(anchor);
    mainButtonPanel.position =  new Vector3(0,-2,-3);

    // Create 8 columns and 2 rows so that each of the 16 players can be displayed
    mainButtonPanel.columns = 8;
    mainButtonPanel.rows = 2;

    // Set panel layouts
    mainButtonPanel.blockLayout = true;
}

Ahora tiene una posición para cada una de las cartas de jugador en el panel principal.

Creación de la imagen emergente de personaje

Ahora debe agregar el código de la imagen emergente que contiene el valor de PER del jugador. Por lo tanto, cuando se seleccione un icono de jugador, su tarjeta de estadísticas (con el nombre, la imagen y el valor de PER) aparecerá en grande en el centro de la pantalla.

Este código debe ir en la parte inferior de la función createCharacterButtons() que inició anteriormente:

// Create the mesh 3D UI manager for the pop-up image when a user selects a player
var meshManager = new GUI.GUI3DManager(this._scene);
var meshPanel = new GUI.PlanePanel();
meshPanel.margin = 0.2;

// Add meshPanel to meshManager and anchor it
meshManager.addControl(meshPanel);
meshPanel.linkToTransformNode(anchor);
meshPanel.position = new Vector3(6, 0, -1);

// Set the player container and add it to the mesh panel
var displayStatsContainer = new GUI.HolographicButton("orientation");
meshPanel.addControl(displayStatsContainer);
displayStatsContainer.isVisible = false;

La imagen emergente de personaje tiene la propiedad visible establecida en false para que no se muestre inicialmente. La última parte consiste en hacer que se pueda interactuar con estos iconos de personaje.

© 2021 Warner Bros. Ent. All Rights Reserved.

Continuar