Elevación de cubos a botones con scripts de MRTK

  • 10 minutos

La interfaz de usuario del botón es dinámica en el sentido de que los valores de cada campo de texto proceden del archivo PlayerDataStats.json. En lugar de codificar de forma rígida los datos de cada jugador en el objeto de juego, puede usar un archivo JSON y las funciones de utilidad de Unity para trabajar con datos JSON. Esto se denomina JSONUtility.

Solo tiene que crear los objetos de interfaz de usuario e indicar dónde quiere que aparezca el texto.

Creación del objeto de nombre del jugador

  1. En la ventana Hierarchy (Jerarquía), haga clic con el botón derecho en el objeto PlayerButton y seleccione 3D Object>Text - TextMeshPro (Objeto 3D > Texto: TextMeshPro). Esto crea un objeto de texto que usará para el nombre del jugador.

    Asegúrese de que el objeto Text (TMP) [Texto (TMP)] se crea como elemento secundario del objeto PlayerButton.

  2. Seleccione el objeto Text (TMP) [Texto (TMP)] en la ventana Hierarchy (Jerarquía). En la ventana Inspector, cambie el nombre del objeto a PlayerName.

  3. Ahora modificará los parámetros de las propiedades de TextMeshPro - Text (TextMeshPro: Texto). En TextMeshPro - Text (TextMeshPro: Texto), escriba Bugs Bunny. Aunque los datos se extraerán del archivo JSON, resulta útil tener texto de ejemplo para facilitar la colocación.

    Screenshot of the text mesh pro text properties for the player name object. Bugs Bunny is entered into the text input property.

  4. En las propiedades de Main Settings (Configuración principal), modifique lo siguiente para ajustar el tamaño y la ubicación del texto:

    • Font Size (Tamaño de fuente): 1.3
    • Alineación: Centro
    • Alignment (Alineación): Middle (central)

    Screenshot of the main settings properties for the player name object. The font size and alignment properties are highlighted.

  5. En las propiedades de Rect Transform (Transformación de rectángulo), modifique lo siguiente para ajustar el tamaño del cuadro de texto y la posición del texto:

    • Pos Z (Posición Z): -0.5
    • Width (Ancho): 1
    • Height (Alto): 0.2

    Screenshot of the rect transform properties for the player name object. The position z, width, and height properties are highlighted.

  6. En la herramienta de movimiento, seleccione las flechas arriba y abajo para arrastrar el texto a la parte inferior central del cubo.

    Screenshot of the scene window. The player name object is at the bottom-middle of the player button object.

Creación del objeto de imagen del jugador

  1. En la ventana Hierarchy (Jerarquía), haga clic con el botón derecho en el objeto PlayerButton y seleccione 2D Object>Sprite (Objeto 2D > Sprite). Esto crea un objeto para un gráfico 2D.

    Asegúrese de que el objeto New Sprite (Nuevo sprite) se crea como elemento secundario del objeto PlayerButton.

  2. Seleccione el objeto New Sprite (Nuevo sprite) en la ventana Hierarchy (Jerarquía). En la ventana Inspector, cambie el nombre del objeto a PlayerImage.

  3. Todas las imágenes de personajes se crean como un sprite (un gráfico 2D). Los sprites se encuentran en la carpeta Recursos del proyecto. En la ventana Project (Proyecto), vaya a la carpeta Resources (Recursos) y arrastre el sprite BugsBunny a la propiedad Sprite del componente SpriteRenderer.

    Screenshot of the sprite renderer properties for the player image object. The sprite property is highlighted.

    Usará este sprite para facilitar la colocación.

  4. Ahora modificará los parámetros de las propiedades de Transform (Transformar). En Transform (Transformar), cambie el valor de Position (Posición) a 0, 0.12, -0.5. Esto coloca la imagen encima del objeto PlayerName y ligeramente delante del cubo.

  5. Después, cambie Scale (Escala) a 0.025, 0.025, 0.025. Esto establece el tamaño de todos los sprites en una versión más pequeña que se ajusta correctamente al cubo.

    No dude en ajustar la posición de PlayerImage y escalarla según sea necesario.

Ahora debería tener un objeto PlayerButton completado que incluye la imagen de un jugador y su nombre.

Screenshot of the scene window. The player button is in the scene, with an image of Bugs Bunny, and Bugs Bunny's name.

© 2021 Warner Bros. Ent. All Rights Reserved.