Hora del Código

con Unreal Engine

Actividad 5
Perfila y publica tu juego con widgets y la visualización frontal en
Unreal Engine

Presentación
Unreal Engine es un motor de videojuegos inmersivo en 3D con el que se han creado algunos
de los videojuegos más populares del mundo. Aunque para algunos videojuegos es necesario
contar con equipos de profesionales en la creación de un producto final, uno puede iniciarse en
este campo sin experiencia previa. Con Unreal Engine, no solo te centrarás en conceptos
básicos de informática, sino que también crearás un videojuego. Estas actividades te guiarán
en el proceso de creación de un videojuego en 3D y resaltarán los conceptos informáticos más
importantes. Esperamos que la idea de crear un videojuego te dé el contexto y la motivación
suficientes como para aprender conceptos básicos de programación.

Este programa contiene cinco actividades de la Hora del Código, las cuales combinan todos los
conceptos e instrucciones necesarias para terminar un videojuego en 3D que se podrá
compartir con amigos y al que se podrá jugar. Las actividades y los archivos de proyecto
incluidos están pensados para hacerse en orden de principio a fin, aunque también se pueden
hacer actividades aisladas de forma individual. Todas las actividades contienen retos nuevos y
emocionantes y descubrimientos que sacan a la luz el poder del desarrollo de videojuegos con
Unreal Engine.

Información de esta actividad

Piensa en algunos de tus videojuegos favoritos. ¿Se le muestra la información sobre el juego al
jugador de modo que entienda lo que ocurre? ¿Sabes cuánta vida o qué puntuación tienes?
¿Ves los objetos de tu inventario? Si cuentas con habilidades especiales, ¿hay alguna forma de
ver si se pueden usar en el momento o si están en un periodo de enfriamiento? Todos estos
elementos pertenecen a la interfaz de usuario (IU) o a la visualización frontal (HUD). Si se
implementan con efectividad, contribuirán a la experiencia positiva del usuario en un
videojuego.

Ahora, te toca a ti desarrollar tu propio videojuego con Unreal Engine, una de las herramientas
más usadas en el sector de desarrollo de videojuegos. En esta lección, incorporaremos
elementos de la IU y la visualización frontal para mejorar la experiencia del jugador. Además,
podrás modificar el juego y adaptarlo a tu gusto. Por último, tendrás que empaquetar (publicar)
el juego para compartirlo con el mundo.
En esta actividad, pulirás tu videojuego.
Nos vamos a centrar en los siguientes aspectos:

- La visualización frontal o HUD, con:

o El contador de monedas y gemas
o El icono de la llave
o El icono del potenciador de saltos

- Preparar el videojuego para poder jugarlo en un ordenador con Windows.

o Añadir un modo en el que el jugador pueda cerrar el videojuego al acabarlo.

- La conexión de código existente.

o El código te servirá como punto de partida, un inicio donde investigar por tu
cuenta ahora que estás empezando a crear videojuegos.

Si añades y completas todas las funciones de arriba, tu juego llamará más la atención y los
jugadores entenderán mejor qué es lo que pasa en el juego.

Con este último paso, profundizaremos más en el código y haremos que esta parte sea la más
provechosa. Estás al 80 % de tener un nivel funcional. Cuando adquieras el 20 % restante, tu
videojuego brillará con luz propia. Para aplicar estas mejoras de usabilidad, es necesario que
realices más testeos, así que no dudes en pedir ayuda a tus compañeros.

Primeros pasos
Si no has descargado aún Unreal Engine y el proyecto de la Hora del Código, consulta la
guía de los primeros pasos para ello. Si lo has hecho, ¡abre el proyecto y empieza!

Conceptos de programación
Hablaremos de un nuevo tipo de blueprint, el de los widgets. Piensa que un widget es un
elemento de la visualización frontal (HUD). Los widgets se muestran en pantalla para que los
vean los jugadores y, como son una clase de blueprint, pueden contener código que modifique
lo que se muestra en pantalla.

La mayor parte del código y de los widgets de esta actividad se han creado de antemano, así
que solo tendrás que modificar algunos ajustes para que aparezcan en pantalla. Para saber
más sobre los widgets y sobre cómo crearlos, consulta el curso «Tu primera hora con UMG»
de Aprendizaje en línea de Unreal Engine.

La compleja tarea de crear un videojuego se compone de subtareas más pequeñas. Al dividir

esta tarea en partes más manejables, el proceso de elaboración de un videojuego se vuelve
mucho más sencillo. La tecnología no deja de actualizarse y adaptarse. Si le sigues el ritmo, tu
contenido tendrá un mayor atractivo a ojos del mercado laboral.

Como dijimos antes, este último esfuerzo vale la pena. Tus habilidades serán más sólidas y
dispondrás de nuevas herramientas con las que convertirte en un diseñador o diseñadora con
más probabilidades de éxito.

Cómo preparar la actividad

Si has hecho ya las actividades 1, 2, 3 y 4 y quieres seguir con el trabajo ya realizado, puedes
saltarte esta sección.

Si estás empezando con la actividad 5 y quieres hacerla desde cero, sigue las siguientes
instrucciones sobre cómo comenzar con un proyecto nuevo.

Como empezamos en la actividad 5, tenemos que cargar las versiones completas de las
actividades 1, 2, 3 y 4 para comenzar con el juego desde el principio. Los casos prácticos
terminados para cada nivel están dentro del proyecto de ejemplo. Sigue estos pasos para
cargar el contenido de los niveles 1, 2, 3 y 4.

Los niveles completados se encuentran en el panel «Levels». Para verlo, accede a

«Windows» y luego a «Levels». Haz clic y arrastra la ventana por la pestaña para anclarla
junto a «World Outliner» y poder usarla luego.
Imagen 001a: Cómo llevar el panel «Levels» junto a «World Outliner».

Dirígete al panel «Levels», haz clic derecho en «Level_01_End», selecciona «Change

Streaming Method» y luego «Always Loaded». Así, se cargará el nivel de ejemplo cuando
juegues al juego. Repite este paso para «Level_02_End», «Level_03_End» y
«Level_04_End». No hace falta que cargues los otros niveles, así que puedes dejar la
opción de «Blueprint» marcada por ahora.

Nota para el profesor

Si un estudiante se apunta a la actividad sin haber hecho antes la anterior, puedes recurrir
a los niveles de ejemplo. También podrás dividir el proyecto entero para que lo puedas
enseñar en el orden que quieras o abordar solo actividades específicas. Por ejemplo, si
empiezas con la actividad 5, asegúrate de que los estudiantes marquen «Always Loaded»
para las actividades 1, 2, 3 y 4.
Imagen 001b: Cómo cargar los niveles 1, 2, 3 y 4 ya hechos, si no se han creado unos
propios.

NOTA: Asegúrate de que «Persistent Level» aparece en negrita. Si haces doble clic en uno
de los otros niveles, como en «Level_01_end», dicho nivel se activará. Eso significa que
cuando se añade un actor al visor, se añadirá al nivel «Lesson_01_end». El resto de los
niveles seguirán siendo visibles, pero no se podrán editar en el visor. En estas actividades,
solo añadiremos recursos a «Persistent Level». El nombre del nivel que aparece en negrita
es el nivel activo.
 Resolución de problemas

Si añades un actor a cualquier nivel distinto a «Persistent Level», selecciona el actor, haz
clic derecho en «Persistent Level» y pulsa «Move Selected Actors to Level».

Imagen 001c: Cómo llevar los actores a «Persistent Level» si se ponen por accidente en un
nivel «Level_##».

Consejos para ahorrar tiempo

Hemos añadido algunas cuestiones útiles para el proyecto. Lee estos consejos con
detenimiento.
Marcadores de cámara
Los marcadores de cámara sirven para cambiar rápidamente de ubicación en el editor. Para ver
cómo funcionan, haz clic primero en el visor y pulsa el número 1 o 2 que hay en la parte
superior del teclado. Verás que la cámara pasará a ubicaciones específicas.

1 = ubicación de inicio de la actividad 1

2 = ubicación de inicio de la actividad 2

Esto te permitirá moverte rápidamente por el nivel sin tener que pasar de un sitio a otro
manualmente. Los botones del 1 al 7 se asignan a marcadores importantes para este curso.
Puedes asignar tus propios marcadores de cámara pulsando Ctrl + cualquier número en el
teclado. Prueba a usar los números del 8 al 0.

Ahora te toca a ti: Fija otro marcador de cámara por el nivel pulsando Ctrl + 8. Para
comprobar si ha funcionado, puedes revisar otros marcadores de cámara pulsando cualquier
número del 1 al 7. Ahora, pulsa 8 en el teclado para que te transporte al marcador que habías
creado. ¿Ha funcionado?

Cómo reproducir desde la ubicación actual

¿Sabías que se puede iniciar el juego desde donde se encuentra ahora la cámara? Para tener
esa configuración, abre el menú desplegable que hay junto al botón «Play» y dale a la opción
«Current Camera Location». Esto te ahorrará mucho tiempo a la hora de probar los niveles.
Eso sí, ten en cuenta que, si empiezas el juego justo encima del vacío, el jugador caerá y
volverá a aparecer.
Imagen 001d: Cómo configurar el botón «Play» para empezar desde la ubicación de la cámara
actual.

Nota para el profesor:

Cuando preparemos el videojuego para su publicación al final de esta actividad,

deberemos asegurarnos de que Visual Studio está instalado en los ordenadores.
También se puede pedir ayuda a los informáticos para que lo verifiquen.

Esto ayudará con el proceso:

Instalador de Visual Studio: https://visualstudio.microsoft.com/downloads/

Tutorial para preparar el juego para su publicación:

https://docs.unrealengine.com/en-
US/Programming/Development/VisualStudioSetup/index.html

Reproducción del juego

Pongamos una llave delante de la puerta cerrada para poder empezar a ver la información que
puede mostrarse en la visualización frontal.
Para ir a la última puerta cerrada, haz clic en el visor y pulsa el número 5 del teclado para
pasar al marcador de cámara. En el explorador de contenido, dirígete a «Content», luego a
«Hour_of_Code» y después a «Blueprints». Lleva «BP_Key_Activity_4_end» frente a la
puerta del nivel. (Llevamos la llave frente a la puerta para facilitar el testeo. Al diseñar la versión
final, podrás eliminar las llaves sobrantes y guardar la llave en un buen escondite).

Imagen 001: Cómo añadir la llave al nivel.

Para iniciar el juego en nuestra ubicación actual, selecciona «Current Camera Location» en el
menú que se abre haciendo clic en la flecha que hay junto al botón «Play» y, luego, haz clic en
el botón «Play». Recoge la llave, dirígete a la puerta y pulsa la tecla E. La puerta se abrirá y
aparecerá el icono de la llave en el margen inferior izquierdo. Luego, cierra el videojuego
pulsando la tecla de Esc.
.

Para saber qué está pasando, hay que examinar el blueprint de la puerta. Selecciona la puerta
en el visor y pulsa Ctrl + E para abrir «Blueprint Editor». O haz doble clic en el blueprint
«BP_Door_Locked_Activity_4_End» de la carpeta «Blueprint».

Con «Blueprint Editor» abierto, haz clic en la pestaña «Event Graph» si no se ha abierto ya.
Aparecerá un área en amarillo en el margen inferior derecho. Acerca la imagen en el área con
la rueda del ratón. Puedes desplazarte manteniendo pulsado el botón derecho del ratón
mientras arrastras.
Imagen 002: La parte del blueprint que muestra el icono de la llave.

En esta área, hay tres nodos en el gráfico.

1) Una referencia al widget de la visualización frontal («W HUD Ref»)
2) La textura para el icono de la llave («T Key»)
3) Un modo de controlar la opacidad y el color de la textura («Set Color and Opacity»)

Al hacer clic en la cuadrícula, podrás abrir el selector de colores.

Advertencia: Cierra el selector de colores, aunque no hayas realizado cambios.

Nota para el profesor: Si el selector de colores no está cerrado antes de reproducir el juego,
puede que Unreal Engine genere un error y no permita a los estudiantes jugar al juego.

Dicho problema se puede solucionar de varias formas.

1) Cierra el selector de colores.

2) Haz clic en «Save all».
3) Cierra el editor y reabre el proyecto.
Imagen 003: Cómo seleccionar un color y una opacidad con el selector de colores.

Lleva el cable azul a su origen (a la izquierda) y verás que la información de la visualización

frontal se almacena en «ThirdPersonGameMode».

Si has realizado la actividad 2, recordarás que hemos hablado de que los blueprints pueden
hacer casting al videojuego para obtener información. En este caso, la puerta hace casting al
modo de juego para obtener información sobre la visualización frontal.
Imagen 004: Hacer casting al modo de juego posibilita que se usen los datos en cualquier
momento mientras se esté jugando.

Esto nos dice que el videojuego se encarga de la visualización frontal. Para ver cómo hace
eso el videojuego, puedes abrir el blueprint «Game Mode». En el explorador de contenido,
dirígete a «Content», luego a «ThirdPersonBP» y después a «Blueprints» y abre
«ThirdPersonGameMode» haciendo doble clic.

Imagen 005: Cómo acceder al blueprint «ThirdPerson GameMode».

Con el blueprint «ThirdPerson GameMode» abierto, haz clic en la pestaña «Event Graph» si
aún no está seleccionada. Busca el área azul llamada «Display HUD». Veamos cuáles son los
tres primeros nodos que hay a la izquierda de dicha área. Estos nodos:
1) Crean el widget de visualización frontal («Create W HUD Widget»).
2) Fijan una variable para la visualización frontal («SET W HUD Ref»).
3) Muestran la visualización frontal en la pantalla («Add to Viewport»).

Imagen 006: Los controles de visualización frontal en el «Event Graph» del blueprint.

Cierra «Blueprint Editor» pinchando la X que hay en el margen superior derecho.

Cómo trabajar con widgets

Vamos a abrir el widget de visualización frontal. En el explorador de contenido, dirígete a
«Hour_of_Code» y luego a «Widgets» y haz doble clic en «W_HUD».
Imagen 007: El elemento «W_HUD» en la carpeta «Widgets».

Presentación de los widgets

Los blueprints de los widgets son un poco distintos a los blueprints con los que hemos
trabajado anteriormente. Echemos un vistazo a las áreas con las que vamos a trabajar.
 Imagen 008: El diseñador de widgets.

1) Jerarquía: Esta área contiene una lista con todos los elementos que se muestran en
pantalla. Ahora mismo, todos los elementos están configurados como invisibles, razón
por la que no los has visto en pantalla en las actividades anteriores. Pero eso va a
cambiar en unos minutos.
2) Diseñador visual: Es una representación de la pantalla del videojuego donde hemos
colocado el icono de la llave.
3) Panel «Details»: Se irá actualizando cuando selecciones elementos, como el icono
de la llave, en la jerarquía o el diseñador visual.
4) Editor de modos: Sirve para pasar del modo «Designer» (diseñador) al modo
«Graph» (gráfico) o viceversa.

El icono de la llave
En esta sección, haremos lo siguiente:
- Que el jugador sepa que puede coger una llave en el juego.
- Que el icono de la llave se vuelva opaco cuando el personaje recoja la llave.
 1. En el panel de la jerarquía, selecciona «T_key».
2. Baja por el panel «Details», busca la sección «Color and Opacity» (puede que tengas
que hacer clic en la flecha que hay a la izquierda de «Color and Opacity» para
expandir el menú) y fija un valor de 0.3 para la A (alfa). El icono de la llave se volverá
opaco.
3. Luego, haz clic en el botón «Compile» que hay arriba a la izquierda.

Imagen 009: Cómo configurar el valor alfa del icono de la llave de visualización frontal para
visibilizarlo.

Ahora, cuando inicies el videojuego, el icono de la llave se verá en pantalla. Cierra «Widget
Editor» haciendo clic en la X del margen superior derecho y, luego, haz clic en el botón «Play»
de «Unreal Editor» para reproducir el nivel.
Imagen 010: El icono de la llave de visualización frontal semitransparente que hay abajo a la
izquierda.

Después, haz que el icono de la llave se vuelva opaco cuando el personaje recoja la llave. De
esto se encargará el blueprint de la llave. Con independencia de que hayas seguido los pasos
desde la actividad 4 o hayas empezado en la 5, tendrás que abrir el blueprint de la llave que te
hemos preparado.
1) En el explorador de contenido, dirígete a «Hour_of_Code» y luego a «Blueprints» y
abre «BP_Key_activity_4_end» haciendo doble clic.

Imagen 011: Cómo abrir el blueprint «BP_Key_activity_4_end».

 2) Haz clic en la pestaña «Event Graph», si aún no está seleccionada.
3) Verás un área azul llamada «Activity 5 Make the key icon opaque». (Si has hecho la
actividad 4, puedes pasar a la sección «NOTA»).

Imagen 012: La pestaña «Event Graph».

4) Seguidamente, saca un cable del pin de ejecución (Have Key?) de «Set» y llévalo al
nodo «Set Color and Opacity».
Imagen 013: Cómo conectar los pines de ejecución de la llave, la luz y la opacidad entre sí.

NOTA: Si en la actividad 4 creaste el blueprint de una llave, tendrás que seguir este paso
para actualizarlo. Si quieres saltarte este paso, usa el blueprint «BP_Key_Activity_4_End»
que viene con este proyecto.

Para actualizar el blueprint personalizado de la llave, selecciona estos tres nodos pulsando
Shift y haciendo clic, o haciendo clic y arrastrando para crear una caja de selección. Copia
los tres nodos seleccionados y pégalos en el blueprint de la llave. A continuación, conecta los
nodos como se ve en la imagen de debajo.

Imagen 013a: Cómo copiar y pegar los ajustes del color y la opacidad de la llave.

5) Haz clic en el botón «Compile» para actualizar los cambios del blueprint y, luego, cierra
«Blueprint Editor».
Ahora, inicia el juego y recoge la llave. El icono de la llave se volverá opaco. Luego, abre la
puerta y verás que el icono de la llave se vuelve transparente de nuevo.

Imagen 014: El icono de la llave de visualización frontal se muestra opaco cuando se recoge la
llave.

Veamos qué está pasando.

1) El modo de juego muestra la visualización frontal en pantalla cuando el juego

empieza y el icono de la llave inicialmente tiene un 30 % de opacidad.
2) Cuando el personaje toca la llave, le dice al modo de juego que el icono de la llave
debe tener un 100 % de opacidad.
3) Cuando el jugador abre llave, le dice al modo de juego que el icono de la llave debe
tener un 30 % de opacidad.

Bien hecho. Has hecho mucho código. A continuación, configuraremos el icono del potenciador
de saltos para que se comporte igual.

No olvides hacer clic en «Save All» para guardar tu trabajo.

Nota para el profesor: Es mucho más fácil ver las cosas plasmadas en pantalla que
explicarlas por escrito. Los estudiantes entenderán mejor las explicaciones si prueban el
juego.
Potenciador de saltos
En esta sección, vamos a trabajar con tres blueprints distintos.

1) «W_HUD» (en «Content» > «Hour_of_Code» > «Widgets»)

2) «BP_jumpBoost» (en «Content» > «Hour_of_Code» > «Blueprints»)
3) «EpicCharacter» (en «Content» > «ThirdPersonBP» > «Blueprints»)

Objeto coleccionable de potenciación de saltos

Primero, lleva «BP_jumpBoost» al nivel (Pulsa la tecla W para activar el elemento de
desplazamiento cuando lo necesites).

Imagen 015: Cómo añadir el blueprint del potenciador de saltos al nivel.

Blueprint de la visualización frontal

Ahora, abre el blueprint «W_HUD». Dirígete a «Hour_of_Code» y luego a «Widgets» y haz
doble clic en «W_HUD».
 1) En el panel de la jerarquía, selecciona «T_jumpBoost».
2) Baja por el panel «Details», busca la sección «Color and Opacity» y fija 0.3 para la A
(alfa). El icono del potenciador de saltos se volverá opaco.
3) Luego, haz clic en el botón «Compile» que hay arriba a la izquierda y cierra «Widget
Editor».

Imagen 016: El potenciador de saltos en la visualización frontal.

Reproduce el juego para ver aparecer el icono del potenciador de saltos en pantalla. Cuando
recojas el potenciador de saltos, verás que el icono no cambia. Nos encargaremos de eso
ahora en el blueprint.
Imagen 107: El icono del potenciador de saltos semitransparente antes de recoger el
potenciador de saltos.

No olvides hacer clic en «Save All» para guardar tu trabajo. Esta opción se encuentra en
«File».

Blueprint de potenciación de saltos

A continuación, haz clic en el blueprint «BP_jumpBoost» para abrirlo.
1) Haz clic en la pestaña «Event Graph», si aún no está seleccionada.
2) Fíjate en la sección en azul llamada «Activity 5». Dentro hay otra sección llamada
«Connect me to PlaySound at Location».
3) Conecta el pin de ejecución de «Play Sound at Location» con el nodo de redirección
en esta sección. Para ver cómo hacerlo, consulta la imagen 018.
Imagen 018: Cómo conectar «Play Sound» con el blueprint.

Como ves, al redireccionar este cable del pin de ejecución, se desconectarán los nodos
restantes. Pero no pasa nada. Hemos puesto una copia de dichos nodos en esta nueva sección
de conexiones por cuestiones prácticas.
Imagen 019: Cómo configurar el color y la opacidad del icono de visualización frontal del
potenciador de saltos.

Ahora inicia el juego y recoge el potenciador de saltos. La opacidad del potenciador de

saltos cambiará cuando el personaje lo toque y volverá a cambiar transcurridos cuatro
segundos (el valor por defecto es cuatro), cuando el temporizador del enfriamiento llegue a
cero.

Capacidad de observación de los programadores

Nota para el profesor: Esta sección es un buen ejemplo de la importancia que tiene
prestar atención a los detalles. Se recomienda para los estudiantes que hayan hecho todo
hasta ahora. Los estudiantes que necesiten más tiempo para el resto de actividades
pueden saltarse esta sección.

En ocasiones, ser programador requiere tener habilidades detectivescas. Gracias a la

curiosidad y la observación se pueden solventar muchos problemas.
¿Te percataste del error que introdujimos?

Si no lo has visto, vuelve a jugar y salta al vacío. Esta vez, fíjate en el icono del potenciador
de saltos que hay en pantalla. Verás que el icono del potenciador de saltos no se resetea
tras morir el personaje. Esto se debe a que el personaje está chocando contra el plano
«Kill Z», del que hablamos en la actividad 1. El plano «Kill Z» causa daños y mata al
jugador, pero lo hace de una manera un poco distinta al volumen de causa de daños de la
actividad 1.

Este es un buen ejemplo de lo que pasa cuando trabajamos en un videojuego. A veces, los
diseñadores implementan funciones y, después, se dan cuenta de que han generado un
error. En la próxima sección veremos cómo solucionarlo.

No olvides hacer clic en «Save All» para guardar tu trabajo.

Blueprint de «EpicCharacter»
Dirígete a «Content», luego a «ThirdPersonBP» y después a «Blueprints» y abre
«EpicCharacter» haciendo doble clic.

Imagen 020: Cómo abrir el blueprint «ThirdPerson Character».

Haz clic en la pestaña «Event Graph» si aún no está seleccionada. Verás que hay varias
áreas en azul. Busca la llamada «Activity 5». Acerca la imagen en esa área y busca el nodo
de color rojo «hitKillZ».
Imagen 021: La sección «Activity 5» del blueprint «ThirdPerson Character».

Conecta el pin de ejecución del nodo «hitKillZ» con el nodo «Cast to

ThirdPersonGameMode». Para ver cómo hacerlo, consulta la imagen 022.

Luego, haz clic en el botón «Compile». Ahora, cuando se destruya al personaje, la opacidad
del icono del potenciador de saltos se reseteará.
 Imagen 022: Cómo conectar «hitKillZ» con «ThirdPersonGameMode» para saber cuándo
muere el jugador al caer.

Ahora, nos toca probarlo para asegurarnos de que funciona en condiciones. Recoge el
potenciador de saltos y precipítate al vacío. Cuando muera el personaje, se reseteará el
icono del potenciador de saltos.

No olvides hacer clic en «Save All» para guardar tu trabajo.

Monedas y gemas
En esta sección, mostraremos los contadores de monedas y gemas en el blueprint «W_HUD».

Antes de llegar a la sección del código, añadiremos una moneda y una gema en un sitio de fácil
acceso. En el explorador de contenido, dirígete a «Content», luego a «Hour_of_Code» y
después a «Blueprints» y pon una «BP_coin» y una «BP_gem» en el nivel. Recuerda pulsar
la tecla W para activar el elemento de desplazamiento y reposicionar los objetos.

Las monedas aparecerán con bastante frecuencia y se podrá acceder a ellas fácilmente.
También servirán para enseñarle al jugador el camino.

Las gemas no aparecerán mucho, por lo que hará falta mucha habilidad para cogerlas.
También servirán como recompensa para el jugador por haber superado los retos de mayor
dificultad.

Imagen 023: Cómo añadir una moneda y una gema al nivel.

1) En el explorador de contenido, dirígete a «Content», luego a «Hour_of_Code» y

después a «Widgets» y abre el blueprint «W_HUD».
2) En el panel de la jerarquía, selecciona «Coins Counter» y «Gems Counter». (Para
seleccionar ambos, haz clic en «Coins Counter» y pulsa Shift mientras haces clic en
«Gems Counter»).
3) En el panel «Details», fija el número 1 para «Color and Opacity» (color y opacidad) del
valor A (alfa).
4) Luego, haz clic en el botón «Compile».
Imagen 024: Los widgets para los contadores de monedas y gemas.

Ahora, inicia el juego y coge la moneda y la gema. Fíjate en los contadores que hay en el
margen inferior izquierdo.

¿Has conseguido ver el error?

El contador de monedas no ha cambiado. Esto se debe a que al blueprint «BP_coin» le falta

una conexión.

En el explorador de contenido, dirígete a «Content», luego a «Hour_of_Code» y después a

«Blueprints». Abre «BP_coin» y haz clic en «Event Graph», si no está seleccionado aún, y
fíjate en el código. ¿Sabes qué es lo que hay que conectar?

1) Busca el área «Activity 5» de color azul.

2) Conecta el pin de ejecución del nodo «Set (Coin Count)» con el nodo de eventos
«Update Coins».
3) Luego, compila el código y cierra «Blueprint Editor».
Imagen 025: Cómo conectar el nodo «Set (Coin Count)» con el nodo «Update Coins».

Vuelve a probar el juego. La visualización frontal se actualizará adecuadamente. Buen trabajo.

Imagen 026: Cómo recoger monedas y gemas.

Nota para el profesor: Es un buen momento para que los estudiantes desarrollen su nivel y
experimenten con sus nuevas habilidades. Esta nueva sección abordará una nueva
mecánica de juego.

Actividad de ampliación
Si has hecho todas las actividades, habrás añadido islas flotantes, plataformas móviles,
monedas, gemas, llaves y potenciadores. Ahora, aporta al juego tus habilidades y tu
creatividad. Siéntete libre de darle un toque personal al juego moviendo o añadiendo objetos.
Podrías esconder la llave para que no esté a plena vista. Asegúrate de llevar las gemas a sitios
de difícil acceso, ya que son un bonus. Si te atreves, modifica más los blueprints para que el
juego sea más interesante. Diviértete. Enseñar el nivel con las nuevas modificaciones a tus
compañeros será una grata experiencia.
Registro de la puntuación
Antes de preparar el juego para su publicación, veamos cómo se registra la puntuación. En el
explorador de contenido, dirígete a «Content», luego a «Hour_of_Code» y después a
«Widgets» y abre el blueprint «W_gameCompletion».

Imagen 033: El blueprint de cuando el jugador se pasa el juego.

En la vista «Designer», verás la disposición de los widgets. Ahora, selecciona «time» en el

panel de la jerarquía. Luego, fíjate en la parte de arriba del panel «Details». Hay una casilla
donde pone «is Variable». Eso significa que este widget puede usarse como variable y recibir
información, como las monedas y las gemas.
Imagen 034: La casilla de la variable para el widget de tiempo.

Haz clic en el botón «Graph». Hay tres secciones en el gráfico. La sección de arriba informa
del tiempo que se tardó en pasarse el juego. La sección del medio informa del número de
monedas que recogió el personaje. Y la sección de abajo informa del número de gemas que
recogió el personaje.
Imagen 035: Monedas, gemas y el tiempo en el blueprint del widget «Game Completion» en
«Event Graph».

Si te fijas en este gráfico, verás que las variables se usan como objetivos del nodo «SetText».
Sigue los cables hasta su origen y verás que el llamamiento a los datos se hace desde «Game
Mode».

Recuerda que un modo de hacer que los blueprints hablen entre sí es haciendo casting. Aquí
el blueprint «HUD» está haciendo casting a «Game Mode» para recibir información de las
monedas, las gemas y el tiempo que tarda el jugador en pasarse el nivel.

Aunque no hemos cambiado nada en estos blueprints, haz clic en «Save All». Este aspecto
será importante para la próxima sección.

Preparación del juego para su publicación

Tras haber realizado todo el trabajo del curso, prepararemos el juego para su publicación de
modo que lo puedas añadir a tu porfolio o enviarlo a tus amigos.
Debemos asegurarnos de que el jugador pueda salir del juego cuando quiera. Para ello, en el
explorador de contenido, dirígete a «Content», luego a «ThirdPersonBP» y después a
«Blueprints» y abre el blueprint «EpicCharacter».

Imagen 036: El blueprint «EpicCharacter».

Busca el área «Esc to quit» de color azul ubicada en «DEBUGGING». Luego, conecta el pin
de ejecución «pressed» con el nodo «Quit Game». Después, compila y cierra «Blueprint
Editor». Haz clic en «Save All».
Imagen 037: Pulsa Esc para los nodos «Quit Game».

Puede que tengas que instalar Visual Studio antes de preparar el juego para su publicación.
Este enlace te redirigirá a la página donde descargar Visual Studio.
https://visualstudio.microsoft.com/downloads/

A continuación, sigue los pasos de este tutorial corto para configurarlo de cara a preparar el
juego para publicarlo.
https://docs.unrealengine.com/en-
US/Programming/Development/VisualStudioSetup/index.html
Cómo configurar Visual Studio para Unreal Engine
Instala estas dos funciones de Visual Studio a fin de preparar el juego para su publicación.

Imagen 038: La función «Game development with C++» de Visual Studio.

 Imagen 039: La función «.NET development» de Visual Studio.

Para este paso, habrá que reiniciar, así que guarda tu trabajo.

Una vez descargado e instalado, podrás preparar el juego para su publicación.

Ve a «File», luego a «Package Project» y después a «Windows (64bit)» y escoge la

ubicación donde guardar el proyecto listo para su publicación.
Imagen 040: Cómo preparar el proyecto para su publicación.

Cuando el juego esté preparado para su publicación, aparecerá una carpeta llamada
«WindowsNoEditor». Puedes renombrarla si quieres. Abre la carpeta y haz doble clic en
«Hour_of_code.exe» para jugar al juego.

Continuación
Enhorabuena. Has completado las tareas. Ahora tienes los conocimientos suficientes como
para saber qué clase de preguntas hacer conforme vayas progresando en tu carrera
profesional de diseño de videojuegos. Guárdate este proyecto como referencia para cuando lo
necesites.

Tenemos un último regalo para ti. Abre la ventana «levels», fija «always loaded» para todos
los niveles y juega al videojuego. Así podrás ver cómo hemos diseñado el nivel. ¡Disfruta del
juego!