Incorporación de interactividad en los iconos de imagen de XR mediante botones

2 minutos

Ahora que tiene un lugar para cada uno de los iconos de personaje, así como una imagen emergente que se mostrará en grande en el centro de la pantalla, necesita que se pueda interactuar con los iconos y las imágenes emergentes.

Para que se pueda interactuar los iconos, recorra en bucle _players y cree un botón para cada jugador en función de los datos JSON.

Este código debe aparecer en la parte inferior de la función createCharacterButtons() de la clase Environment en el archivo environment.ts:

// Create an array of meshes to access later
var activeMesh: AbstractMesh[] = null;

// When the pop-up image is selected, hide the player container and close button
displayStatsContainer.onPointerUpObservable.add(() => {
    displayStatsContainer.isVisible = false;
    if (activeMesh) {
        activeMesh.forEach(mesh => {
            mesh.dispose();
        });
    }
});

// Loop through players in the JSON file and create a button for each player
for (var index = 0; index < this._players.length; index++) {
    let player = this._players[index];

    // Create the button and add it to mainButtonPanel
    var button = new GUI.HolographicButton("orientation");
    mainButtonPanel.addControl(button);

    // Add the player's name and their image to the button on mainButtonPanel
    button.text = player.name;
    button.imageUrl = player.imgUrl;

    // When the button is selected, trigger the pop-up image to appear, now with the PER
    button.onPointerUpObservable.add(async function () {
        displayStatsContainer.imageUrl = player.imgUrl;
        displayStatsContainer.text = `PER: ${player.per}`;
        displayStatsContainer.isVisible = true;
        displayStatsContainer.scaling = new Vector3(3, 3, 1);
        displayStatsContainer.position =  new Vector3(-6,-1,2);
    });
};

Con este código en su lugar correspondiente, hará que los jugadores se muestren en el entorno. Cuando se seleccionen, aparecerán sus estadísticas (si inicializa este nuevo entorno que acaba de crear). Lo hará en la unidad siguiente.

Continuar

Incorporación de interactividad en los iconos de imagen de XR mediante botones

Comentarios