Hacer coleccionables es algo que puede fomentar a la exploración por el mapa, puede darnos ciertas recompensas o incluso puede ser imprescindible para avanzar en nuestro juego.
Por eso, hoy vamos a aprender cómo hacer un sistema de coleccionables en nuestro proyecto de Unreal Engine 4.
Este es un sistema complejo y extenso, pero no os tenéis que preocupar por si no entendéis cómo hacer cierto paso o algo no funciona correctamente. Así mismo, recordar que hay una pequeña serie de tres episodios en el canal de YouTube por si tenéis alguna duda (podéis clicar en los títulos de este artículo y seréis redirigidos al vídeo en cuestión).
Cómo hacer coleccionables – Parte 1 (Blueprint)
Cómo crear el Blueprint del coleccionable
Antes de ponernos a programar, tenemos que crear el blueprint del nivel. En el «Content Browser» damos clic derecho, ‘Blueprint Class‘ y selecciónanos el tipo ‘Actor‘. Le damos un nombre y lo abrimos.
Dentro de nuestro nuevo blueprint, importamos el modelo (ya sea arrastrándolo desde el «Content Browser» o clicando en la pestaña correspondiente dentro del mismo blueprint) que hayamos elegido para nuestro coleccionable. No olvidéis ajustar el tamaño del modelo si es necesario.
Seguidamente, en el apartado de «Components«, damos a ‘Add Components‘ y buscamos ‘Sphere‘. Esta malla nos va a servir como Trigger (un trigger es un volumen el cual sirve para detectar movimiento dentro de él. Detecta cuándo algo o alguien entra en el mismo, sale de él, clica en él, entre otras acciones).
Para que la esfera que acabamos de añadir sea un trigger, tenemos que dirigirnos al panel de «Detalles» de la derecha, buscar el apartado «Collision» y en «CollisionPresets» seleccionamos ‘Trigger‘. Escalamos la malla al tamaño que queramos que se pueda interactuar con él, y posteriormente buscamos el apartado «Rendering» y desactivamos la casilla ‘Visible‘ para que no nos estorbe.
Finalmente vamos a volver a ponernos encima del pestaña «Components» y cambiamos el nombre de la esfera a ‘Trigger‘ para no hacernos líos más adelante. Por último, emparentamos el trigger con el modelo que acabamos de crear, tal y cómo se muestra en la imagen siguiente:
Añadiendo variable al jugador (player)
Nos dirigimos al blueprint de nuestro personaje y dentro del «EventGraph«, añadimos una nueva variable de tipo ‘Integer‘, la cual nosotros nombraremos ‘CollectionCounter‘. Esta variable va a registrar cuántos coleccionables tenemos hasta el momento. Clicamos ‘Compile‘ y cerramos la pestaña.
Programando el BP (Blueprint)
Una vez completados los pasos anteriores, volvemos al blueprint del coleccionable y nos dirigimos a la pestaña de «Event Graph«.
Seguidamente damos clic derecho en un sitio vacío del gráfico, buscamos el nodo ‘cast to (+ el nombre del BP del jugador)‘ y este lo conectamos al ‘Event ActorBeginOverlap‘ y el «Object» con el ‘Other Actor‘.
Esto va a referenciar el jugador al blueprint de los coleccionables, de forma que podamos hacer referencia a eventos del blueprint del jugador o variables.
Desde el pin de salida ‘As (+ el nombre de vuestro jugador)‘ arrastramos y buscamos ‘Get (+ la variable creada anteriormente. En nuestro caso, ‘Collection Counter’)‘, con ese nodo ya podremos modificar el valor de la variable desde el BP del coleccionable.
Desde el pin de salida del nodo creado recientemente clicamos y arrastramos, cuando aparezca el buscador tenemos que desmarcar la casilla de ‘Context Sensitive‘, buscamos ‘Integer+Integer‘ y lo seleccionamos. Este nodo va a sumar en 1 el valor de la variable cada vez que se recoja un coleccionable.
Por último, desde el ‘Integer+Integer‘ creamos un ‘set + el nombre de la variable‘ (en nuestro caso, ‘Collection Counter‘), esto va a ajustar la variable cada vez que recojamos uno diferente, por lo que no nos tenemos que preocupar por si ponemos un coleccionable o veinte.
Cómo hacer coleccionables – Parte 2 (Interfaz)
Crear un widget con contador de coleccionables
Vamos a crear un widget para que pueda mostrar la cantidad de coleccionables que tenemos en el momento (así como el número total), le ponemos un nombre y dentro de él podemos ver un lienzo vacío con un recuadro en medio. Este recuadro representa nuestra pantalla, así que todo lo que añadamos se podrá mostrar posteriormente en la pantalla del jugador.
Dentro del lienzo podemos añadir varias cosas, en nuestro caso vamos a añadir una imagen render del coleccionable (en formato .png). Debajo de la imagen, vamos a añadir dos textos. Para hacer esto, nos dirigimos al panel izquierdo llamado «Paleta«, buscamos ‘Text‘ y arrastramos al sitio que más nos guste (preferentemente debajo de la imagen importada).
Para modificar su texto buscamos en el panel de detalles «Content» y modificamos el ‘Text‘. A uno le pondremos de nombre «/ + (el número de coleccionables)» y el otro lo dejaremos a ‘0’. No olvidéis comprobar que al haber un número de dos o más cifras puede solaparse con el otro texto, así que ajustadlo de forma correcta para no tener problemas en un futuro.
Seguidamente seleccionamos el número de coleccionables que tenemos y en el panel de detalles nos aseguramos que en «Appearance«, ‘Justification‘ esté en la tercera opción.
Haciendo que el contador muestre cuántos coleccionables tenemos
Una vez hecho esto, seleccionamos el número que tendrá que variar, buscamos el texto en el panel de detalles, hacemos scroll vertical y clicamos en ‘Create Link‘. Hacemos clic en la lupa y se va a abrir el grafico.
Aquí vamos a programar que el número de coleccionables recogidos vaya aumentando cada vez que encontramos uno nuevo.
Iniciamos dando clic derecho en un sitio vacío del lienzo y buscamos ‘Get Player Character‘, de su pin de salida creamos un ‘Cast to + (el nombre de nuestro jugador)‘. Este nodo lo conectamos desde el pin de entrada al bloque ‘Get Text 0‘ que venía creado por defecto.
En el nodo de ‘Cast to + (el nombre de nuestro jugador)‘ vamos a seleccionar y arrastrar desde el ‘As + (el nombre de nuestro jugador)‘ a un espacio vacío, y buscamos ‘Collection Counter‘ (en el caso de que nuestra variable se llame de otra forma, lo buscamos por el nombre elegido). Desde su pin de salida lo conectamos al nodo que ya estaba creado, ‘Return Node‘.
Seguidamente, volvemos al blueprint del coleccionable. Dentro de él vamos a tener que crear un nuevo nodo que nos servirá para mostrar el widget en la pantalla. Creamos un nodo llamado ‘Create Widget‘, y lo conectamos al ultimo nodo creado (‘Set Collection Counter’).
En su menú desplegable seleccionamos el widget que tenemos creado. Hecho esto, el widget ya se creará en la pantalla cada vez que recojamos un coleccionable, pero en este punto aún no se mostrará, ya que tenemos que especificar en qué pantalla lo queremos crear.
Para hacer esto, vamos a sacar desde el ‘Return Value‘ un ‘Add to Player Screen‘. Finalmente ya se va a mostrar el widget cuando lo recojamos, sin embargo, una vez lo recojamos se va a quedar allí para siempre, así que solo tenemos que añadir tres nodos más para que esté arreglado este pequeño problema.
Desde el pin de salida, creamos un ‘Add to Player Screen‘ y añadimos un ‘Delay‘ (nodo que va a provocar un retraso antes de seguir con los demás blueprints). El tiempo que va a durar el widget en pantalla podéis elegirlo a vuestro gusto cambiándolo en el propio ‘Delay‘.
Seguidamente, con el ‘Context Sensitive‘ desmarcado (más arriba lo explicamos anteriormente), sacamos un ‘Remove from Parent‘. Este nodo va a borrar lo que le indiquemos desde el «Meta«. Después, conectamos el pin de entrada con el ‘Return Value’ del ‘Create Widget‘.
Por último añadimos un ‘Destroy Actor‘ haciendo referencia (Target) a «Self«.
Cómo hacer coleccionables – Parte 3 (Interacción)
Por ultimo, vamos a ver cómo hacer que cuando el jugador se acerque lo suficiente al coleccionable, en vez de recogerlo automáticamente, se va a cambiar el material para que resalte y el jugador al pulsar una tecla (E, o cualquier input), lo recoja.
Primero de todo, abrimos el blueprint del coleccionable. Dentro de él, vemos lo que ya habíamos programado hace unos momentos. Tenemos que añadir el nodo llamado ‘BeginPlay’ (posiblemente ya esté en el lienzo por defecto). Desde aquí vamos a crear un nodo ‘Enable Input‘ (de esta forma va a detectar lo que pulsemos en el teclado y podrá reaccionar a ello). En su pin de entrada ‘Player Controller‘ añadimos un ‘Get Player Controller‘.
Seguidamente, volvemos a dar clic derecho en un sitio vacío, buscamos y añadimos un ‘Event ActorEndOverlap‘. Desde él sacamos un ‘set material + (el nombre del modelo del coleccionable)‘ (este bloque va a cambiar el material del modelo elegido, al material que nosotros elijamos). Tenemos que elegir un material, que será el que se muestre cuando el jugador esté en el rango del coleccionable. Desde el pin de salida de este, creamos un ‘gate‘, y cambiamos el cable conectado del ‘enter‘ al ‘close‘.
Debemos crear otro ‘Set material + (el nombre del modelo del coleccionable)‘ (esta vez elegimos el material por defecto del coleccionable, en mi caso M_Fork), y lo conectamos desde el ‘Cast to + (el nombre de nuestro jugador)‘. Este lo enganchamos al ‘open‘ del bloque ‘gate‘. Y por último, añadimos el input que queramos al pin de entrada ‘Enter‘ del ‘gate‘. Este va a determinar la tecla que tenemos que pulsar para recoger el coleccionable, así que debemos añadir un ‘Input + (el carácter que queramos)‘, o un input ya establecido de antemano.
Con esto hecho, ya tendremos el sistema de coleccionables terminado. Te invito a pasarte por la serie de tutoriales en el canal de YT por si tienes alguna duda, o necesitas una referencia: