Hora del Código™

Perfila y publica tu juego con widgets y la

visualización frontal en Unreal Engine
Piensa en algunos de tus videojuegos favoritos. ¿La información se presenta de forma
que tú, como jugador, te enteres de qué está ocurriendo? ¿Sabes cuánta vida o qué
puntuación tienes? ¿Puedes consultar con facilidad qué objetos hay en 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, y añadirle esta
función. 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 a tu gusto.
Por último, tendrás que empaquetar (publicar) el juego para compartirlo con el mundo.

Plan formativo/Guía para el profesor

Lección/Clase/Información de la guía
Título de la lección: Widgets y visualización frontal en Unreal Engine
Contenido/Nivel: Informática/Hora del Código: De 2.º de ESO a 2.º de Bachillerato
Duración de la lección: Una hora

Autores y datos de contacto

Steve Isaacs imparte clases de Diseño y Desarrollo de Videojuegos con una
metodología basada en misiones o elecciones, lo que da a los alumnos la oportunidad
de adoptar distintos enfoques con los que podrán alcanzar los objetivos de aprendizaje
en función de sus intereses, en cuanto a contenido y a opciones del proyecto.

Brian Dickman estudió Informática y dirige un estudio de desarrollo de videojuegos a

tiempo completo que produce contenido educativo y de entretenimiento en videojuegos
populares.

Ian Southwelll trabaja en la Rocky Mountain College of Art and Design, donde enseña
en el departamento de Arte y Animación de Videojuegos y dirige el taller de fabricación
digital de la RMCAD. También es el director creativo de Cleverlike Studios.
Autores, Organización/Puesto: Steve Isaacs, Brian Dickman e Ian Southwell
Dirección de correo electrónico:
Twitter:
LinkedIn:
Descripción de la clase/Entorno de aprendizaje
Esta lección se ha diseñado para la Hora del Código™ con motivo de la Semana de la
Educación en Informática. La lección puede usarse para cualquier plan de estudios con
el que haya interés en participar en la Hora del Código. No obstante, también puede
usarse fuera de la Hora del Código, para cualquier curso de desarrollo de videojuegos
o de informática, como formación independiente o en conjunto con otras actividades
integradas en un proyecto de mayor tamaño.

Presentación de la lección
Piensa en algunos de tus videojuegos favoritos. ¿La información se presenta de forma
que tú, como jugador, te enteres de qué está ocurriendo? ¿Sabes cuánta vida o qué
puntuación tienes? ¿Puedes consultar con facilidad qué objetos hay en 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, y añadirle esta
función. 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 a tu gusto.
Por último, tendrás que empaquetar (publicar) el juego para compartirlo con el mundo.

RESULTADOS DESEADOS
Preguntas básicas/Grandes ideas

● ¿Pueden los estudiantes aprender conceptos de informática englobados en

actividades de peso en lugar de estudiar sintaxis de forma aislada?
● ¿Se adquirirá un entendimiento general de los conceptos en un entorno de
programación al aprender conceptos informáticos (como la visualización frontal
o HUD), con una actividad en Unreal Engine?
● ¿Pueden los estudiantes aprender conceptos informáticos con las mecánicas de
los videojuegos?
● ¿Sentirán los estudiantes una mayor motivación por aprender informática
cuando los conceptos se presenten en un entorno de videojuegos?
Resultados del aprendizaje/Objetivos
Los estudiantes podrán:

● Entender la visualización frontal o HUD y cambiar los ajustes relacionados.

● Saber cómo incorporar widgets y trabajar con ellos en el sistema de
programación visual de Blueprint.
● Poner en práctica lo aprendido para mejorar el nivel de un juego con Unreal
Engine.
● Empaquetar y publicar un proyecto de Unreal Engine para que el usuario final
pueda abrir y jugar al juego fuera del entorno de Unreal Engine.

PLAN FORMATIVO
Actividades formativas
 Cómo usar Unreal Engine para las lecciones de la Hora del Código

Estas lecciones se han creado para presentarles a los estudiantes conceptos

informáticos contextualizados con la herramienta de desarrollo de videojuegos por
excelencia en el sector: Unreal Engine.

Como parte de la iniciativa Hora del Código™, cada lección enseña de forma
independiente un concepto en el plazo aproximado de una hora. Las lecciones están
configuradas de manera que los estudiantes las trabajen cronológicamente para que
adquieran habilidades a partir de otras.

Las lecciones también se complementan, de modo que, si los estudiantes completan

las cinco, crearán un videojuego compuesto de cinco niveles distintos en los que se
pondrán en práctica los distintos conceptos enseñados. Las actividades pueden
trabajarse en grupos pequeños para ejercitar la programación por parejas.

Cada lección viene con una guía para el estudiante y otra para el docente, con notas
para que este último imparta la lección y asista a los estudiantes durante el proceso.

Uso de Unreal Engine

Se espera que los estudiantes tengan algo de experiencia con la interfaz de Unreal
Engine antes de empezar. Para facilitar la enseñanza con Unreal Engine, los
docentes pueden familiarizarse con la herramienta y con su uso en el aula gracias a
un curso corto pensado para ello. Te animamos a hacer el curso y a ganarte la
insignia.

Preparación de cara a la actividad

Si los estudiantes han realizado la actividad anterior (la de las declaraciones

condicionales en Unreal Engine), ya habrán terminado la lección 4 y podrán continuar.
De no ser así, podrán activar las lecciones de la 1 a la 4 en el proyecto de Unreal
Engine si las visibilizan, hacen clic derecho en ellas, seleccionan «Change Streaming
Method» y «Always Loaded». Para ver instrucciones sobre cómo hacerlo, consulta la
guía para el profesor de la lección 5.

Al final de la actividad, cada estudiante preparará su videojuego para publicarlo. Es

necesario tener instalado Visual Studio en los ordenadores. Asegúrate de que esté
instalado o pídele a tu gestor de recursos informáticos que verifique que Visual Studio
está instalado en todos los ordenadores.

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

Generación de interés

Haz que los estudiantes añadan al nivel una llave y que luego inicien y jueguen al
juego.

Hablad de la mecánica del juego:

● ¿Ha ocurrido algo al abrir la puerta? Puede que los estudiantes se hayan
percatado de que aparece un icono de llave al abrir la puerta.
● ¿Alcanzasteis el objetivo? De ser así, ¿visteis que apareció texto con
información sobre la puntuación en la pantalla? ¿Sabéis a qué se refiere el texto
en pantalla en los videojuegos?

Explica a los estudiantes que, en esta actividad, aprenderán a trabajar con la

visualización frontal y los widgets, así como a hacer que su videojuego se encuentre
en un único archivo ejecutable que las personas podrán abrir sin tener Unreal Engine
instalado.

Introducción a la visualización frontal

En videojuegos, la visualización frontal (HUD) o barra de estado es un método con el

que se transmite información al jugador como parte de la IU del videojuego. Su nombre
proviene del dispositivo que tienen las aeronaves modernas.

Definición obtenida en: https://es.wikipedia.org/wiki/HUD_(videojuegos).

La manera en la que el videojuego se comunica e interactúa con el jugador es

extremadamente vital. Las interfaces de usuario y las visualizaciones frontales son
el modo que tiene el juego de dar información sobre sí mismo al jugador y, en algunos
casos, hacen posible la interacción del jugador con el videojuego.

La visualización frontal es donde se muestran los elementos expuestos en pantalla.

Cada jugador controlado por un humano en el videojuego cuenta con su propia
instancia de clase base de la visualización frontal, la cual tiene su propio visor. En el
caso de videojuegos multijugador con pantalla partida, hay varios visores que
comparten la misma pantalla, pero cada visualización frontal sigue teniendo su propio
visor. La clase de visualización frontal que se usará dependerá del tipo de videojuego.
Definición obtenida en: https://docs.unrealengine.com/en-
US/Gameplay/Framework/UIAndHUD/index.html.

Por ejemplo, cuando juegas a un videojuego, puedes ver menús, una barra de salud,
vidas, la puntuación, los objetos del inventario, etc. Cuando dichos objetos se muestran
en pantalla es porque forman parte de la visualización frontal. Consulta el artículo de
Wikipedia que hay arriba para ver más ejemplos de otras funciones de la visualización
frontal. Todos los textos, iconos y otros elementos que aparecen en pantalla y están
relacionados con la interfaz de usuario forman parte de la visualización frontal.

Pregunta a los estudiantes si conocen videojuegos que den mucha información al

jugador con la interfaz de usuario o la visualización frontal.

Accesibilidad: Con la IU y la visualización frontal los problemas de accesibilidad se

pueden abordar por vía informática.

La accesibilidad de las interfaces de usuario se puede abordar desde el punto de vista

de la usabilidad. [...] Con la accesibilidad, la interfaz de usuario se diseña de modo que
resulte efectiva, eficiente y satisfactoria para más personas, sobre todo para aquellas
con discapacidad, en un mayor número de situaciones (p. ej., en aquella en la que se
disponga de tecnologías de asistencia).

Definición obtenida en: http://www.uiaccess.com/accessucd/background.html.

Haz que los estudiantes lean el artículo de arriba y que hablen de cómo prestar
atención a las necesidades de todos los usuarios a la hora de desarrollar una interfaz
de usuario.

Introducción a los widgets

Hablaremos de un nuevo tipo de blueprint, el de los widgets. Piensa que un widget es

un elemento de visualización frontal. 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. ¿Recuerdas el icono de la llave que aparecía
al abrir la puerta en la lección cuatro? Ese icono forma parte de un widget que recibe la
orden de aparecer cuando el jugador usa la puerta.

Actividad

En esta lección, trabajaremos con algunas mejoras estéticas que optimizarán la

interfaz de usuario. Trabajaremos con la visualización frontal para mostrar información
al usuario mediante iconos, los cuales mostrarán si contiene ciertos objetos o
potenciadores; texto al pasarse el juego con un mensaje, el tiempo y el número de
objetos recogidos; y un modo de salir del juego. Harás referencia a las ideas
presentadas anteriormente sobre la accesibilidad mientras vayas realizando cambios a
la IU de tu videojuego.

Además, podrás usar lo que has aprendido para modificar el nivel y darle unos toques
especiales y personales. Puedes añadir islas y plataformas para cambiar la fluidez de
tu videojuego, poner objetos coleccionables distribuidos por el juego (algunos de los
cuales pueden ser difíciles de conseguir para que suponga un reto para el jugador) y
realizar los cambios que quieras para que el videojuego esté a tu gusto.

Por último, aprenderás a preparar un videojuego para su distribución. Eso significa que
podrás publicar (compartir) una versión de tu videojuego con otras personas en un
archivo ejecutable y único sin que el usuario final tenga que instalarse Unreal Engine.

Si quieres dar a los estudiantes instrucciones paso a paso, facilítales la guía para el
alumno y consulta la guía para el profesor para orientarlos.

Recursos externos
Tu primera hora con Unreal Engine:
https://www.unrealengine.com/en-US/onlinelearning-courses/your-first-hour-with-
unreal-engine

HUD (videojuegos): https://es.wikipedia.org/wiki/HUD_(videojuegos)

Interfaz de usuario y visualización frontal en Unreal Engine:

https://docs.unrealengine.com/en-US/Gameplay/Framework/UIAndHUD/index.html

Accesibilidad con un diseño centrado en el usuario:

http://www.uiaccess.com/accessucd/background.html

Documentación de los blueprints de widgets en Unreal Engine:

https://docs.unrealengine.com/en-
US/Engine/UMG/UserGuide/WidgetBlueprints/index.html

Cómo crear widgets en Unreal Engine:

https://docs.unrealengine.com/en-
US/Engine/UMG/UserGuide/CreatingWidgets/index.html

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

Tu primera hora con Unreal Motion Graphics (UMG):

https://www.unrealengine.com/en-US/onlinelearning-courses/your-first-hour-with-umg

EVALUACIÓN
Evaluaciones

Parrilla de evaluación
Hora del código™: Perfila y publica tu juego con widgets y la visualización frontal en
Unreal Engine

Aprendiz Competente Especialista Eminencia

Contenido del El proyecto no El proyecto El proyecto El proyecto refleja

proyecto y transmite la muestra un demuestra que se un entendimiento
objetivos de información o el conocimiento comprenden los y una aplicación
aprendizaje conocimiento básico de la conceptos de ejemplares de los
 requeridos de visualización visualización conceptos clave
acuerdo con los frontal y los frontal (HUD) y de esta lección.
objetivos de widgets. widgets y que se Se cumplen o
aprendizaje. sabe cómo superan los
preparar, publicar objetivos de
y distribuir un aprendizaje. El
videojuego creado estudiante pone
con Unreal en práctica las
Engine. habilidades
aprendidas para
desarrollar y
publicar una
experiencia de
juego que llama la
atención.

Desarrollo y El proyecto no El proyecto El proyecto El proyecto es

funcionalidad funciona o demuestra cumple con los funcional y ha
del proyecto cuenta con una objetivos sido
errores funcionalidad marcados por el perfeccionado con
importantes que básica y estudiante y da funciones extra
hacen que no cuenta con una guía general que hacen que se
pueda ponerse errores de al usuario final. superen los
en práctica poca requisitos.
según lo importancia.
esperado.

Estética y Se necesita Presenta una Está bien El diseño está

diseño del cuidar más la estética y un organizado y es muy cuidado. El
proyecto estética del diseño estético. Es más, entorno es
diseño en cuidados, su diseño se atractivo y
general, así pero está amolda a la proporciona al
como la incompleto o actividad y genera usuario un mundo
experiencia del faltan algunos una buena que invita a
usuario. aspectos de la experiencia de explorar e
estructura o usuario. interactuar con las
del diseño. actividades de
puzles. El
estudiante ha
mejorado las
funciones y la
visualización
frontal para que al
jugador le llame
más la atención el
juego.

Reflexión El estudiante El estudiante El estudiante El estudiante

tiene describe los razona bien cómo explica con
dificultades a la aspectos se incorporan la elocuencia los
 hora de básicos de la visualización conceptos de
describir la visualización frontal y los visualización
visualización frontal y los widgets para frontal, widgets y
frontal y los widgets y se mejorar la la preparación del
widgets y de hace una idea experiencia de juego para su
representarlos general de la usuario. El publicación. El
en esta relación que estudiante estudiante
actividad. guardan con muestra que entiende
el desarrollo generar un claramente todos
de archivo ejecutable los conceptos
videojuegos y para publicar el presentados en la
la juego facilita su lección.
programación. distribución.
Mapeado de estándares

Estándares de la CSTA para estudiantes:

https://csteachers.org/Page/standards

1A-DA-06
Los mismos datos se recogen y presentan en varios formatos visuales.

1A-AP-09
Se modela la manera en la que los programas almacenan y manipulan
datos usando números u otros símbolos para representar la información.

1A-AP-10
Se desarrollan programas con secuencias y bucles sencillos para expresar
ideas o abordar un problema.

1A-AP-12
Se desarrollan planes que describen la secuencia de eventos, los objetivos
y los resultados esperados de un videojuego.

1A-AP-14
Se depuran, es decir, se identifican y corrigen errores en un algoritmo o
programa que integre secuencias y bucles sencillos.

1A-AP-15
Se usa la terminología correctamente para describir los pasos seguidos y
las elecciones tomadas durante el proceso iterativo del desarrollo de un
programa.
1B-AP-16
Se adoptan distintos papeles con la ayuda del profesor o de la profesora a
la hora de colaborar con compañeros en el diseño, la implementación y la
revisión de las fases del desarrollo de un programa.

1B-AP-10
Se crean programas con secuencias, eventos, bucles y condiciones.

1B-AP-12
Se modifican, mezclan o incorporan porciones de un programa existente a
un trabajo propio para desarrollar algo nuevo o añadir funciones más
avanzadas.

1B-IC-19
Se hace una lluvia de ideas para mejorar la accesibilidad y la usabilidad de
productos tecnológicos de acuerdo con las necesidades y deseos diversos
de los usuarios.

2-AP-10
Se usan diagramas de flujo o pseudocódigo para abordar problemas
complejos como algoritmos.

2-AP-13
Se dividen los problemas y los subproblemas por partes para facilitar el
diseño, la implementación y la revisión de los programas.

2-AP-17
Se prueban y mejoran los programas sistemáticamente con varios
precedentes.

3A-AP-13
Se crean prototipos que usen algoritmos para solucionar problemas
computacionales recurriendo al conocimiento previo de los estudiantes, así
como a sus intereses personales.

3A-AP-16
Se diseñan y desarrollan elementos computacionales repetidamente a fin
de practicar, expresarse uno o abordar una cuestión social con eventos
para desencadenar instrucciones.
3A-AP-17
Se dividen los problemas en componentes más pequeños mediante
análisis sistemáticos usando constructos, como procedimientos, módulos u
objetos.

3B-AP-22
Se modifica un programa existente para añadir funcionalidades adicionales
y se abordan las implicaciones intencionadas y no intencionadas (por
ejemplo, la anulación de otra funcionalidad).

Interdisciplinariedad y sintonía con el siglo XXI

Esta lección aborda áreas relacionadas con la programación y la informática.

Sintonía con el siglo XXI:

● Pensamiento crítico
● Creatividad
● Colaboración
● Comunicación
● Conocimientos tecnológicos
● Flexibilidad
● Liderazgo
● Iniciativa
● Habilidades sociales

Ajustes y modificaciones

Realiza ajustes y modificaciones de acuerdo con las necesidades de los estudiantes,

los programas de educación individualizada, el plan 504, etc.

Los estudiantes pueden trabajar por equipos para adoptar un enfoque de programación
conjunto.

Puede darse a los estudiantes el proyecto completado para que lo deconstruyan y

modifiquen.