En el parte anterior miramos miramos con un poco más de detalle el trabajo con Sprites, ahora vamos a ser un poco más… animados. En este tutorial, veremos el uso de Spritesheets, llamados Flipbooks en Unreal Engine, para crear animaciones de sprites.

Una pequeña advertencia antes de saltar, al momento de escribir este proceso es un poco defectuoso y necesita mejoras. Con suerte, para cuando leas esto, el equipo de Unreal haya solucionado algunos de los problemas. Si desea obtener más detalles sobre la creación de las hojas de sprites y un poco más de exposición a algunas de las fallas de Unreal Engine, asegúrese de ver la versión en video, que incluye muchos más detalles.

este tutorial es disponible en un video HD aquí.

Importación de una hoja de Sprite

Una Spritesheet es simplemente una textura con múltiples sprites. Este es el que estoy usando para este ejemplo:

Es un archivo PNG de potencia de 2 de resolución que contiene 25 fotogramas de una animación de ciclo de caminata. Un poco de advertencia sin embargo, NO HE TENIDO ÉXITO CON PNG en Irreal. Para que esto funcione, tuve que convertirlo al formato tga antes de importar. Independientemente de cómo se haga el PNG, los resultados casi siempre se alteran una vez que se importan a UE4.

Para comenzar, simplemente arrastre la textura como de costumbre. La parte crítica de esta ecuación es que su archivo debe tener un canal alfa, ya que el canal alfa se usa para calcular la ubicación de cada objeto en la siguiente parte.

Ahora que hemos agregado nuestra hoja de sprites a nuestras texturas, simplemente haga clic derecho y seleccione Extraer sprites:

Usando el canal alfa, automáticamente creará un sprite para cada imagen en la hoja de sprites, así:

Con todos los sprites generados seleccionados, ahora los moví a su propia carpeta en la carpeta Sprites. Este paso es, por supuesto, estrictamente opcional.

Ahora, un pequeño error/problema con Unreal Engine… Cada uno de los sprites generados se nombra automáticamente, pero los nombres en sí mismos no tienen sentido. En primer lugar, se llaman FILENAME_Sprite###. Sin embargo, el Navegador de contenido no se clasifica correctamente para alfanumérico, lo que significa que Sprite11 y Sprite12 vienen antes que Sprite2 y Sprite3, lo que hace que trabajar con ellos sea particularmente complicado.

Peor aún, el orden en que se crean no tiene absolutamente ningún sentido en este momento… por lo que el proceso de creación de un flipbook es innecesariamente complicado. Verás lo que quiero decir en un momento.

Primero echemos un vistazo a un sprite generado y, de repente, Editar región de origen tendrá mucho más sentido. Simplemente haga doble clic en un objeto para que aparezca en el Editor de objetos. Aquí está el primer sprite de la secuencia abierta en el editor.

Ahora haga clic en Editar región de origen y verá cómo se pueden almacenar varios sprites en una sola textura:

Como puede ver, nuestro sprite es en realidad solo una porción muy pequeña de la textura general. Esperaríamos que el próximo sprite fuera Sprite2, 3, 4, etc… pero lamentablemente no lo son. Honestamente, no puedo entender la rima o la razón de la convención de nomenclatura que Unreal usó para los sprites analizados automáticamente. Lamentablemente, deberá resolverlos para poder lidiar con la siguiente parte del proceso. Esperemos que todo esto se arregle pronto, ya que es extremadamente irritante. Por ahora, selecciona cada sprite y averigua dónde está en el orden… el mío básicamente fue

Fila1: objeto, 2,3,4,5,6,7

Fila2: 12,13,14,11,10,8,9

Fila3: 15,16,17,18,19,20

Fila4: 24,25,23,22

… si ves la lógica allí, ¡bien por ti! En última instancia, una vez que determine el orden, los nombres realmente no importan, pero puede cambiarlos para que tengan sentido si lo desea. O puede cambiar los valores UV de cada uno para que los nombres existentes tengan sentido. Yo, esperaré a que Unreal arregle este lío.

Creación de una animación de libro animado

De todos modos, una vez que haya descubierto el orden de los marcos de sus sprites, es hora de crear un nuevo Flipbook. Simplemente seleccione New->Animation->Sprite Flipbook, así:

Se creará un nuevo flipbook, no dude en cambiarle el nombre. Luego haga doble clic en él para que aparezca el Editor de Flipbook:

Ahora lo que quieres hacer es arrastrar cada Sprite a la parte inferior de la página, en el orden de los cuadros de animación (esa es la lista que hice arriba. Básicamente, si tu hoja de sprites es como la mía, quieres la fila superior, de izquierda a derecha, luego el siguiente, y el siguiente, etc.). El orden en que se arrastran es el orden en que se reproducen en la secuencia:

Verá una vista previa en tiempo real de su animación a medida que arrastra los sprites:

Puede cambiar la velocidad general de su animación aquí:

Ese es el número de fotogramas que se mostrarán cada segundo. Entonces, una animación de 26 cuadros tardaría 2 segundos en completarse. También puede establecer la duración de cada cuadro, aquí:

Frame Run es para cuántos fotogramas se mostrará este fotograma de animación. Por ejemplo, si tenía fotogramas por segundo configurados en 10 y el fotograma 1 configurado en una ejecución de fotogramas de 5, ese fotograma en particular se mostraría durante 1/2 segundo.

Ahora su sprite animado se puede agregar a la escena con la misma facilidad que un sprite normal, simplemente arrastre el flipbook a su escena:

Sin embargo, la verdad es que rara vez usará un Flipbook de esta manera, en su lugar, generalmente será propiedad de un actor, que cubriremos en la siguiente parte.