Create a visual script to detect a button press spanish

Hasta ahora, has utilizado las funciones incorporadas que forman parte de AR Foundation para crear aplicaciones. AR Foundation es muy útil para resolver los detalles técnicos del desarrollo en AR (Realidad aumentada), pero la mayoría de las aplicaciones que te propongas crear incluirán algún tipo de interactividad que estará más allá del alcance de los componentes incorporados.

Afortunadamente, una de las mayores fortalezas de Unity es la facilidad con la que puedes crear interactividad. En este tutorial, empezarás a trabajar con la ventana Graph Editor (Editor de gráficos) de Visual Scripting de Unity y crearás tu primer script de detección de botón.

El editor de Visual Scripting de Unity es muy similar a los editores de Visual Scripting que puedes encontrar en otras herramientas de creación en AR, como SparkAR.

Puedes utilizar la función de Visual Scripting de Unity para crear la lógica de tus proyectos de Unity sin tener que escribir código. La elaboración de scripts tradicional utiliza el lenguaje de programación C# en Unity, mientras que Visual Scripting es una representación visual de la lógica que puedes usar para crear diagramas de instrucciones. Por ejemplo, los siguientes dos scripts hacen lo mismo: el de la izquierda utiliza Visual Scripting y el de la derecha es un Script de C#.

¿Por qué utilizar Visual Scripting?

Visual Scripting permite que las personas utilicen el scripting en Unity independientemente de su nivel de experiencia en programación. Si tiendes a retener mejor la información visual, este enfoque te puede ayudar a aprender y entender los conceptos del scripting con mayor facilidad. Incluso puedes ver cómo se ejecutan los scripts en tiempo real. Con Visual Scripting, las personas sin experiencia en programación pueden ampliar o modificar los Scripts de C#, y los programadores pueden colaborar mejor con los artistas y diseñadores. Si tienes experiencia en programación, también puedes utilizar Visual Scripting para crear extensiones, modelos y herramientas con los que otros usuarios de Unity puedan personalizar sus proyectos, independientemente de sus conocimientos de C#.

¿Qué es la API de scripting de Unity?

Con Visual Scripting, las personas sin experiencia en programación también pueden acceder a toda la interfaz de programación de aplicaciones (API) de scripting de Unity. Esta API contiene el conjunto completo de definiciones de las clases, los eventos, los métodos (comportamientos) y las propiedades (ajustes) que puedes manipular en los scripts de Unity. Aunque la API es muy extensa, puedes hacer muchas cosas en los scripts si aprendes algunos conceptos básicos.

En el editor de Visual Scripting de Unity, puedes buscar cualquier clase, evento, método y propiedad en la API mediante una serie de menús que te ayudan a encontrar o descubrir lo que necesitas con mayor facilidad. La mejor opción para obtener más información sobre la API es buscar lo que necesites (en la documentación de referencia de la API de scripting de Unity, que está en inglés, e incluso dentro del propio editor de Visual Scripting de Unity) y experimentar mientras creas tus propios scripts.

Los scripts visuales se colocan en recursos llamados gráficos. Aunque los gráficos de Visual Scripting se pueden aplicar a cualquier GameObject de la Scene (Escena), para simplificar las cosas, crearás un GameObject especial en la ventana Hierarchy (Jerarquía) para todos tus gráficos de scripts.

Importante: si aparece una ventana de diálogo para pedirte que cambies las preferencias de Unity durante este proceso, selecciona Change now (Cambiar ahora).

Sigue estas instrucciones para crear un nuevo gráfico de script:

1. En la ventana Hierarchy, haz clic derecho y selecciona Create Empty (Crear vacío).

2. Asigna el nombre «Visual Scripts» al nuevo GameObject.

3. En la ventana Inspector, revisa que los tres valores de la propiedad Position (Posición) del GameObject sean 0.

4. Selecciona Add Component (Agregar componente) y agrega un componente Script Machine (Máquina de scripts).

Script Machine es el componente que ejecutará los script visuales que vas a crear. En Unity, el script visual se conoce como gráfico. Observa que el componente Script Machine que acabas de agregar tiene espacio para un gráfico, pero aún no se asigna ninguno.

5. Selecciona New (Nuevo) junto a la propiedad Graph (Gráfico).

6. Cuando aparezca la ventana de diálogo Save Graph (Guardar gráfico), crea una nueva carpeta y asígnale el nombre «Visual Scripts».

7. Asigna el nombre «MeshChanger» al nuevo gráfico y selecciona Save (Guardar).

El gráfico MeshChanger aparecerá en el parámetro de gráfico del componente Script Machine. Observa que ahora hay dos parámetros nuevos en la parte superior del Script Machine: uno para el título y otro para un resumen. El título y la descripción de los Script Machines te ayudará a tenerlos organizados conforme vayas creando más.

8. Actualiza los campos de texto del gráfico de la siguiente manera:

• Título: Mesh Changer (Cambiador de mallas)
• Resumen: Changes the visibility of the meshes on the GlassesGroup prefab (lo que indica que cambia la visibilidad de las mallas en el Prefab GlassesGroup).

Ahora tienes todo listo para abrir el gráfico y empezar a crear la función:

1. En el componente Script Machine, selecciona Edit Graph (Editar gráfico) para abrir el área de trabajo de Visual Scripting.

Se mostrará una advertencia la primera vez que abras un script visual. Selecciona Change now para actualizar las preferencias de Unity a fin de que sea compatible con los complementos de Visual Scripting.

Nota: la primera vez que configures un Script Machine, se creará automáticamente un nuevo GameObject llamado VisualScripting SceneVariables en la ventana Hierarchy.

La primera vez que se abra la ventana Script Graph (Gráfico de script), se mostrará como ventana independiente. Puedes maximizar esta ventana para verla en pantalla completa o acoplarla junto a la pestaña Project (Proyecto), que es la acción recomendada.

El área de trabajo principal ubicada en el lado derecho es la ventana Graph Editor, donde crearás la lógica del gráfico. En el lado izquierdo se encuentra la ventana Graph Inspector (Inspector de gráficos), la cual proporciona información detallada sobre los objetos seleccionados. Debajo de la ventana Graph Inspector se encuentra la ventana Blackboard (Pizarra), donde crearás las variables.

Cuando crees un nuevo gráfico, se cargará con los nodos On Start (Al inicio) y On Update (Al actualizar). Los nodos son los componentes que se utilizan para crear la lógica en el gráfico. Hay varios tipos de nodos diferentes. Aprenderás más sobre ellos en un tutorial posterior. Los nodos On Start y On Update se utilizan con frecuencia al crear la lógica de las aplicaciones, pero esta vez no los necesitarás.

2. Dedica un poco de tiempo a familiarizarte con la interfaz. Puedes hacer lo siguiente:

• Desplazarte por la ventana Graph Editor al hacer clic en el botón central y arrastrar el mouse.
• Si utilizas un panel táctil, puedes desplazar con dos dedos para recorrer la ventana Graph Editor.
• Para acercar o alejar la vista, mantén presionado Ctrl (macOS: Cmd) y gira la rueda del mouse o desplázate hacia arriba y abajo en el panel táctil.

3. Selecciona el nodo On Start.

Observa que, cuando seleccionas el nodo On Start, la ventana Graph Inspector se actualiza y muestra toda la información disponible sobre el elemento seleccionado. En este caso, la ventana Graph Inspector indica que el nodo tiene una sola salida, llamada Trigger (Desencadenador): Flow (Flujo). Las salidas de flujo (y las entradas) determinan el flujo de la lógica en un gráfico, es decir, el orden en que se debe llamar a un nodo. Obtendrás más detalles sobre el flujo en una sección posterior de este tutorial.

5. Haz clic en el nodo On Start y arrástralo hacia el otro lado de la ventana Graph Editor.

6. Haz clic derecho en el nodo On Start y selecciona Delete (Eliminar) para eliminarlo de la ventana Graph Editor.

7. Selecciona el nodo On Update y presiona la tecla Suprimir (macOS: Cmd + Delete) para eliminarlo de la ventana Graph Editor.

De esta manera, tendrás un gráfico en blanco.

El objetivo de este tutorial es detectar cuando el usuario presione un botón en la aplicación. Así como AR Foundation hace casi todo el trabajo necesario para detectar la cara del usuario, la API de scripting de Unity proporciona las funciones necesarias para prácticamente todas las interacciones principales que utilizarás al crear aplicaciones.

Se necesita mucha práctica y paciencia para saber a qué parte de la API debes llamar en cada caso. No te preocupes si no sabes qué nodo usar, nosotros te lo diremos. Entre más funciones crees con Visual Scripting (y con elaboración de scripts tradicional), mejor podrás adivinar qué es lo que necesitas. ¡Pero hasta los programadores más experimentados buscan ayuda con frecuencia!

En Unity, una interacción con un botón se considera como un clic en un botón, independientemente de si el usuario hace clic con un mouse o pulsa la pantalla de un dispositivo. Este será el primer nodo que agregarás al gráfico.

Mira el video o sigue estas instrucciones para agregar un nodo al gráfico MeshChanger:

1. Haz clic derecho en la ventana Graph Editor. Aparecerá el menú contextual, también conocido como el buscador de concordancias.

El buscador de concordancias es un menú de varios niveles que contiene todos los tipos de nodos e incluye toda la API de scripting de Unity. Con el buscador de concordancias, puedes buscar cualquier nodo por nombre o categoría.

2. Busca «On Button Click» y selecciona el nombre para agregar el nodo. (También puedes utilizar el buscador de concordancias para ir a Events > GUI > On Button Click).

3. Selecciona el nodo On Button Click y observa los datos que aparecen en la ventana Graph Inspector.

Antes de continuar con la configuración del gráfico, vamos a revisar las diferentes partes del nodo On Button Click.

Sección Inputs

A diferencia de los nodos On Start y On Update que viste anteriormente, On Button Click tiene una sección Inputs (Entradas). Hay dos tipos de entradas: entradas de control y entradas de datos. Las entradas de control controlan el flujo de la lógica de un gráfico. Las entradas de datos reciben tipos de valores específicos provenientes de otros nodos para que el nodo receptor realice su tarea. Por sí mismo, el nodo On Button Click solo realiza una acción cuando se presiona un botón, pero necesita saber cuál es el botón que debe monitorear.

En este caso, la ventana Graph Inspector muestra que la entrada del nodo On Button Click busca un GameObject como objetivo. Este GameObject es el botón que el nodo On Button Click monitoreará para recibir la entrada.

Parámetro de entrada objetivo

De forma predeterminada, el nodo On Button Click tiene una casilla de parámetro llamada This (Esto).

La entrada objetivo se conectará en este parámetro. Sin embargo, existe un mecanismo emergente: si no se conecta ninguna entrada, el nodo busca una entrada objetivo en el GameObject al que está asignado. Este comportamiento emergente es la razón por la que el parámetro se muestra con la etiqueta This (que es una manera de decir «buscaré la entrada en este GameObject»).

En este caso, si dejas el parámetro vacío, el nodo On Button Click buscará un componente botón en el GameObject Visual Scripts al que esté conectado el Script Machine que creaste. Si el gráfico de script estuviera conectado a uno de los botones de AR_Canvas, no habría problema. Pero, ¿qué debes hacer si los gráficos están colocados en otros GameObjects diferentes?

Para esto se utilizan las variables. Las variables son contenedores de diferentes tipos de datos. Estos datos pueden ser números, GameObjects, sonidos o prácticamente cualquier cosa. Las variables se pueden generar dentro de un gráfico o pueden hacer referencia a otros objetos de una aplicación. En este caso, crearás una variable que hará referencia a uno de los botones de la interfaz de usuario.

Como aprendiste antes, las variables se crean en la sección Blackboard de la ventana Script Graph. La ventana Blackboard tiene las siguientes pestañas en la parte superior:

• Graph
• Object (Objeto)
• Scene
• App (Aplicación)
• Saved (Elementos guardados)

Estas pestañas son las diferentes categorías de variables que puedes crear. Debido a que necesitas una variable que haga referencia a un GameObject presente en la Escena, crearás una variable Object.

Mira el video o sigue estas instrucciones para crear una variable Object:

1. En la ventana Blackboard, selecciona la pestaña Object para acceder a las opciones de creación de variables Object.

2. En la casilla (New Variable Name) o Nuevo nombre de la variable, escribe «glasses1Button» y luego selecciona Add (Agregar o +) o presiona la tecla Enter o Intro.

Los nombres de las variable se suelen escribir en formato «camel case», donde la primera palabra se escribe con minúscula y todas las demás comienzan con mayúscula. Este formato se conoce como camel case porque «camel» significa «camello» y el perfil de la palabra parece un camello, con las jorobas en las letras mayúsculas.

De esta manera, se creará la variable glasses1Button. Pero, como verás, la propiedad Type (Tipo) tiene el valor (Null o Nulo). Esto se debe a que aún no defines el tipo de objeto que se colocará en esta variable.

3. Selecciona el menú desplegable de la propiedad Type y luego busca y selecciona Button (Botón). Ahora, glasses1Button está definida como variable de botón, por lo que aparecerá un parámetro Value (Valor). Puedes utilizarlo para crear la referencia a un botón específico de la interfaz de usuario.

4. Haz clic en el selector de objetos (ícono de círculo) ubicado al lado derecho del parámetro Value.

5. Selecciona Glasses 1 Button (Botón de anteojos 1) en la lista de Assets (Recursos) disponibles.

6. Selecciona la variable glasses1Button en la ventana Blackboard y arrástrala a la ventana Graph Editor.

Al agregar la variable a la Escena, generaste un nodo Get Variable (Obtener variable). Los nodos de variables también se pueden agregar a la ventana Graph Editor mediante el buscador de concordancias. Sin embargo, luego tendrías que definir a qué variable debe hacer referencia el nodo Get Variable. Cuando arrastras la variable desde la ventana Blackboard, se agrega toda la información correspondiente.

Como puedes ver, el parámetro This también está presente en el nodo Get Variable glasses1Button. Al igual que en el caso de On Button Click, esta es una opción alternativa que se utiliza cuando no se agregan los detalles de Get Variable. Sin embargo, ya que este nodo está definido como glasses1Button, no se necesitará la alternativa.

Ahora puedes usar la variable con el nodo On Button Click. Cuando lo conectes, el nodo On Button Click registrará si el usuario presiona el botón Glasses 1 Button.

Mira el video o sigue estas instrucciones para probar la funcionalidad del botón:

1. Haz clic en el círculo blanco sin relleno ubicado al lado derecho del nodo Get Variable glasses1Button. Esta es la salida de nodo. Cuando selecciones la salida, aparecerá una línea verde que seguirá el movimiento del cursor.

2. Haz clic en el círculo blanco sin relleno ubicado al lado izquierdo del nodo On Button Click para conectar los dos nodos.

Cuando estén conectados, desaparecerá el valor de This en el nodo On Button Click. Esto se debe a que el nodo ahora reconoce a glasses1Button como la variable asignada a él.

Si deseas eliminar la conexión entre dos nodos, haz clic derecho en la entrada o la salida conectadas.

3. Haz clic en el botón Play (Reproducir) para probar la aplicación en el Editor de Unity.

4. En la vista de Juego, selecciona el primer ícono de anteojos y observa la ventana Script Graph mientras lo haces.

A lo largo de la línea que conecta los dos nodos, se muestra el nombre del GameObject asociado con glasses1Button, lo que indica que este es el botón monitoreado por el nodo On Button Click. Cuando hagas clic en ese botón, el nodo On Button Click parpadeará.

Esto quiere decir que la funcionalidad es correcta. Sin embargo, puede ser un poco difícil ver esto y, por ahora, la única opción es observar el editor de scripts mientras pruebas la Escena.

Nota: si ves alguna advertencia de color amarillo en la consola, no te preocupes. Estas advertencias no deben provocar ningún error en el proyecto.

Si quieres saber qué sucede en la Escena de una manera más sencilla, puedes usar otro nodo para mostrar un mensaje en la consola.

Mira el video o sigue estas instrucciones para enviar un mensaje a la consola:

1. Vuelve a seleccionar el botón Play para salir del modo Play.

2. Haz clic derecho en la ventana Graph Editor para abrir el buscador de concordancias.

3. Busca y selecciona el nodo Debug Log o Registro de depuración (Message o Mensaje).

4. Selecciona el nuevo nodo Debug Log y observa la ventana Graph Inspector.

La ventana Graph Inspector dice «Logs a message to the Unity Console», lo que indica que el nodo registra un mensaje en la consola de Unity, que es exactamente lo que queremos. La ventana Graph Inspector también muestra que el nodo tiene entradas de control (Flow) y de datos (Object). La entrada de datos dice «String or object to be converted to string representation for display», lo que indica que recibe una secuencia de caracteres o un objeto que se convertirán en una representación de secuencia de caracteres para mostrar. Una secuencia de caracteres es una palabra o un enunciado, por lo que debes crear un nodo para ella.

5. Conecta la salida de flujo ubicada en el lado derecho (ícono de flecha) del nodo On Button Click a la entrada de flujo (ícono de flecha) ubicada en el lado izquierdo del nodo Debug Log.

6. En el nodo Debug Log, selecciona la entrada Message ubicada en el lado izquierdo del nodo (ícono de círculo) para crear una línea de conexión.

7. En la ventana Graph Editor, abre el buscador de concordancias y agrega un nodo String Literal (Valor literal de secuencia de caracteres).

8. En el campo vacío del nodo String Literal, escribe «Button 1 pressed».

9. Haz clic en el botón Play para probar la aplicación.

10. Selecciona el primer botón de anteojos de la interfaz de usuario y observa la esquina inferior izquierda del Editor de Unity, donde se mostrará el mensaje «Button 1 pressed».

Si deseas desarrollar aún más tus habilidades, explorar nuevos conceptos o mejorar tu proyecto, echa un vistazo a algunas de las actividades opcionales que aparecen abajo. Estas actividades tienen etiquetas de Fácil, Medio o Difícil para que puedas elegir el nivel del desafío.

Estas actividades son totalmente opcionales, por lo que puedes omitir este paso si no deseas completarlas.

Sin embargo, te recomendamos intentar completar al menos una de ellas para aprovechar al máximo esta experiencia de aprendizaje. ¡Buena suerte!

Fácil: obtén más información sobre Visual Scripting

Si este tutorial despertó tu curiosidad sobre Visual Scripting, prueba nuestro curso Introducción a Visual Scripting para obtener más información.

Medio: prueba los eventos Debug Log Warning y Error

El evento Debug Log te permite enviar un mensaje a la consola y puede resultar útil para probar el código. El evento Debug Log Warning (Advertencia) envía un mensaje a la consola e incluye un ícono de triángulo amarillo con un signo de exclamación para llamar tu atención. Esto te permite asegurarte de que tú o tu equipo de programación tomen más en serio la advertencia. Para este desafío, crea un gráfico de Visual Scripting que advierta al usuario sobre lo que puede suceder si presiona un botón mientras tiene presionado otro botón. Para esto, deberás utilizar el siguiente nodo de Visual Scripting:

• Debug Log Warning

Difícil: une dos secuencias de caracteres para formar un mensaje complejo

Una de las tareas que realizarás muchas veces mientras programas tus creaciones es la unión de secuencias de caracteres. Este proceso se conoce como concatenación. En Unity, todos los GameObjects tienen un nombre almacenado como valor de secuencia de caracteres. Intenta agregar el nombre de la variable glasses1 a otra secuencia de caracteres que diga «was clicked». Para esto, deberás utilizar los siguientes nodos de Visual Scripting:

• Get Variable Object
• Game Object Get Name (Obtener nombre)
• String Literal
• String Concat o Concatenación de secuencia de caracteres (con 2 argumentos)
• Debug Log

En este tutorial, creaste un primer gráfico de script y un primer bloque de lógica. En el proceso, aprendiste a desplazarte por la ventana Graph Editor, acceder al buscador de concordancias, manipular nodos y crear variables. También aprendiste a enviar datos a la consola, que es una herramienta útil que utilizarás con frecuencia al trabajar en la lógica de la aplicación.

En el siguiente tutorial, ampliarás la funcionalidad del botón de anteojos para hacer que active los anteojos en la aplicación.