Si eres un desarrollador que trabaja con Unreal Engine y te interesa experimentar con la información detallada de cada Pokémon, ¡estás en el lugar correcto! En este tutorial, te enseñaremos cómo integrar la API de PokéAPI en Unreal Engine 5 utilizando el plugin VaRest.
La API de PokéAPI te permite acceder a una amplia variedad de información sobre cada uno de los Pokémon de manera fácil y eficiente. En este artículo, te mostraremos paso a paso cómo configurar la integración de la API de Pokémon con el plugin VaRest en Unreal Engine 5. También te explicaremos cómo acceder a la información de los Pokémon en tiempo real para que puedas enriquecer tus proyectos con datos detallados sobre cada uno de ellos.
Usando PokéAPI para obtener información de cualquier Pokémon
Para comenzar, usaremos PokéAPI, esta API es una excelente herramienta que contiene información sobre cualquier Pokémon. La API es accesible sin necesidad de una clave API, lo que la hace muy fácil de utilizar. Todo lo que se necesita es conocer la URL adecuada y los campos que se desean obtener.
En este caso, nos centraremos en la URL GET https://pokeapi.co/api/v2/pokemon/{id or name}/. Al acceder a esta URL, se puede obtener información detallada sobre cualquier pokémon, incluyendo su ID y su nombre. Simplemente se debe reemplazar «{id or name}» con el ID o el nombre del pokémon en cuestión.
También queremos mostrar las imágenes de los Pokémons, se puede utilizar la web oficial de Pokémon, que cuenta con imágenes de todos los Pokémons. Estas imágenes están disponibles en la URL https://assets.pokemon.com/assets/cms2/img/pokedex/full/, seguido del identificador del pokémon y terminado en .png.
Cómo instalar y activar el plugin VaRest
Este plugin es esencial para utilizar la API de Pokémon, y te permitirá crear una experiencia de juego más inmersiva y emocionante.
Para instalar el plugin, sigue estos sencillos pasos:
- Abre el Launcher de Unreal Engine y busca la pestaña Bazar.
- Busca VaRest y descárgalo de forma gratuita.
- Instala VaRest en el motor de juego de Unreal Engine. Si tienes varios motores instalados, se te preguntará cuál quieres usar.
Una vez que hayas instalado el plugin, el siguiente paso es activarlo en el editor de Unreal Engine. Sigue estos pasos para hacerlo:
- Abre tu proyecto en Unreal Engine.
- Haz clic en la pestaña Edit y selecciona Plugins.
- Busca VaRest y actívalo. El editor te pedirá que reinicies el programa.
Creando la interfaz de usuario
Lo primero que necesitamos hacer es crear un nuevo mapa vacío con un fondo negro para poder visualizar bien la interfaz de usuario que vamos a crear. Una vez hecho esto, podemos crear una carpeta llamada PokeAPI y añadir un widget llamado WBP_PokeAPI.
Dentro de este widget, añadimos un Canvas Panel y tres elementos más: 2- TextBlock, 1- Image y 1- Editable TextBox. Los dos primeros elementos serán utilizados para mostrar el nombre y el identificador del Pokémon, mientras que la imagen se mostrará una vez se ingrese el nombre, podemos configurarla a un tamaño de 262 x 300 px. El Editable TextBox será utilizado para que el usuario pueda ingresar el nombre del Pokémon.
También añadimos dos botones, uno llamado «Enviar» y otro llamado «Randomite». El botón «Enviar» se utilizará para buscar el Pokémon cuyo nombre haya sido ingresado por el usuario. El botón «Randomite» mostrará un Pokémon aleatorio.
Es importante que todos los elementos que añadimos en la UI sean de tipo variable, para poder acceder a ellos y modificarlos posteriormente. Para hacer esto, simplemente hacemos clic en el botón correspondiente en el panel de detalles.
Seleccionamos la imagen y la ocultamos, para que no se vea un cuadro en blanco nada más iniciar juego.
Una vez que hemos creado todos los elementos necesarios en la UI, podemos agregar eventos On Click para los botones «Enviar» y «Randomite». De esta manera, podemos programar qué sucederá cuando el usuario haga clic en uno de los botones.
Programación con blueprints
Para empezar, añadimos un nodo llamado «Get VaRestSubsystem». Para hacer esto, hacemos clic con el botón derecho del ratón en cualquier espacio vacío y buscamos el nodo en la lista que aparece.
A continuación, sacamos un nodo llamado «Construct Json Object» de la salida del nodo anterior, y de este último sacamos otro nodo llamado «Call URL». Conectamos el pin de salida de «Get VaRestSubsystem» al pin de entrada «Target» del nodo «Call URL», y el «Return Value» de «Construct Json Object» al pin de entrada «Va Rest Json».
En la URL lo dejamos vacío por el momento, ya que lo rellenaremos más tarde. Dejamos los demás campos tal y como están, con «Verb» en «Get» y «Content Type» en el primer campo de la lista.
A continuación, hacemos clic en «Callback» y arrastramos el ratón para buscar «Add Custom Event», y lo llamamos «JsonRequest».
Después, hacemos clic en un espacio vacío y creamos otro «Custom Event», el cual se encargará de recuperar todos los datos, y lo llamamos «Recuperar Datos».
Creamos un nodo llamado «Get Response Object» (Si no aparece, desmarcar la opción Context Sensitive) y lo conectamos con el nodo de evento arrastrando su entrada «Target» a la esquina inferior del evento. Esto creará un nuevo input que usaremos más adelante.
A continuación, sacamos un nodo llamado «Get Integer Field» del nodo «Get Response Object» y establecemos el campo «Field Name» en «id» en minúsculas, lo que nos permitirá obtener el identificador de cada Pokémon. Promocionamos la salida de este nodo a una variable, ya que la usaremos más adelante, la llamaremos «Id Ref».
Luego, del mismo nodo «Get Response Object» sacamos otro nodo llamado «Get String Field» y establecemos el campo «Field Name» en «name» para obtener el nombre de cada Pokémon. También promocionamos la salida de este nodo a una variable, la llamaremos «Name Ref».
Si necesitamos otros datos adicionales, podemos repetir el proceso con el nodo «Get String Field».
Sacamos la variable que contiene el identificador del Pokémon del «TextBlock» que llamamos «Identificador», y utilizamos un nodo «Set Text» para conectarlo al pin de entrada del nodo anterior (en este caso, el «SET» de la variable «Name Ref»).
A continuación, sacamos la variable «Id Ref» y lo conectamos al nodo «In Text» del nodo «Set Text».
Luego, sacamos la variable del «TextBlock» que llamamos «Nombre», y utilizamos otro nodo «Set Text» para mostrar el nombre del Pokémon en la UI.
A continuación, sacamos la variable «Name Ref» que creamos con la salida del nodo «Get String Field», y la conectamos al nodo «In Text» del nodo «Set Text» para mostrar el nombre del Pokémon en la UI.
Para mostrar la imagen del Pokémon, sacamos un nuevo nodo llamado «Download Image», que descargará la imagen del Pokémon utilizando el parámetro de URL que le indiquemos.
Arrastramos el nodo «URL» y sacamos un nodo «Append», hacemos click en Add pin, para tener un total de tres pines. En el primer pin, colocamos la URL «https://assets.pokemon.com/assets/cms2/img/pokedex/full/» (sin las comillas), ya que esta URL es la que utilizaremos para descargar las imágenes de los Pokémon.
Luego, sacamos la variable de identificación que creamos anteriormente en el nodo «Get Integer Field». La URL de las imágenes siempre tiene tres cifras, por lo que necesitamos asegurarnos de que el identificador del Pokémon tenga tres cifras. Para hacer esto, sacamos un nodo «To Text (Integer)» y en «Minimum Integral Digits» ponemos 3. Esto hará que cualquier número que salga tenga tres cifras, lo que significa que si el número es 4, aparecerá como «004», si es 95, aparecerá como «095», y si es 324, aparecerá como «324».
A continuación, conectamos el pin de salida del nodo «To Text (Integer)» al pin B del nodo «Append», y en el pin C escribimos «.png», ya que las imágenes de los Pokémon tienen esta extensión.
Por último, del nodo «Download Image» sacamos el pin de salida «Texture» y buscamos «Make SlateBrush».
Arrastramos la variable de imagen y sacamos un nodo llamado «Set Brush». Luego, conectamos la salida del nodo «Make SlateBrush» a la entrada In Brush del nodo de Set Brush.
Conectamos el «On Success» del nodo «Download Image» al nodo Set Brush.
Por último, necesitamos agregar un nodo de Set Visibility para mostrar la imagen en la pantalla. Para hacer esto, arrastramos un nodo de Set Visibility desde la pestaña de nodos y lo conectamos a la variable de imagen que creamos anteriormente.
Si sigues estos pasos, deberías obtener el resultado que se muestra en la imagen que se proporciona. Puedes copiar y pegar este grafo en tu propio proyecto.
Volvemos al evento «On clicked» del botón enviar y sacamos un «append» desde URL en el nodo «Call URL».
En el pin A , agregamos la API de PokéAPI “«https://pokeapi.co/api/v2/pokemon/» ” y aseguramos que la última barra diagonal esté presente. Esto nos permitirá obtener información sobre un Pokémon específico.
Sacamos la variable del EditableTextBox, en mi caso la llamé «Caja nombre Pokémon» y sacamos un Get Text. Luego, conectamos la salida del nodo de Get Text al pin B del nodo de append.
En el evento JsonRequest, arrastra y suelta el evento personalizado «recuperar datos» en el segundo “Target” y asegúrese de que esté conectado correctamente al Request. Si ha seguido correctamente los pasos anteriores, debería poder conectar el evento personalizado sin problemas.
Ahora, vamos a trabajar en el botón «Randomite». Volvemos al editor de UI y hacemos clic en «On Click».
Copia todos los nodos anteriores del «On Click» del botón «Enviar» y pégalos en el nuevo nodo. Conecta todo correctamente y borra los nodos que salen del pin B del append.
Para crear un número aleatorio, agrega un nuevo nodo llamado «Random Integer» y establece su valor en 1000. Conecta este nodo al pin B del append.
Finalizando y pruebas
Una vez que hayas seguido los pasos anteriores, es hora de añadir el widget a la pantalla. Para ello, abrimos el level blueprint y en el evento BeginPlay arrastramos y añadimos el nodo Create Widget. A continuación, seleccionamos nuestro widget (en mi caso, lo llamé WBP_PokeAPI) y del return value sacamos el nodo Add to viewport.
Para que el cursor del ratón sea visible, arrastramos un nodo Set Show Mouse Cursor y lo marcamos como True (V). Finalmente, arrastramos desde el target y sacamos el Get Player Controller.
Con esto, habremos finalizado y solo nos quedará probar nuestro widget. Le damos al play y ponemos en el cuadro de texto el nombre de un Pokémon, por ejemplo Pikachu. Si todo va bien, debería aparecer el nombre, la imagen y el identificador del Pokémon.
También podemos hacer clic en Randomite para ver aparecer Pokémon al azar.
Recuerda que este tutorial se puede aplicar a cualquier API de cualquier cosa. ¡Próximamente, pondremos más ejemplos de uso con VaRest! ¡Gracias por seguir nuestro tutorial!
