Animation



Animation

Las animaciones son una parte esencial de cada juego, a veces puede ser bastante difícil hacerlo bien, en este tutorial exploraremos las múltiples opciones para animaciones 2D y 3D en GBEngine.

Skinning

La animación esquelética es una técnica de animación por computadora en la que un personaje se representa en dos partes, una representación de superficie utilizada para dibujar el personaje (llamada piel o malla) y un conjunto jerárquico de huesos interconectados (llamado esqueleto o plataforma) que se usa para animar ( pose y fotograma clave) la malla.

Si bien esta técnica se usa a menudo para animar humanos o más en general para modelado orgánico, solo sirve para hacer que el proceso de animación sea más intuitivo y la misma técnica se puede usar para controlar la deformación de cualquier objeto, una puerta, una cuchara, un edificio, o una galaxia. Cuando el objeto animado es más general que, por ejemplo, un personaje humanoide, el conjunto de huesos puede no ser jerárquico o estar interconectado, pero solo representa una descripción de nivel superior del movimiento de la parte de malla o piel que está influyendo.

Al importar un modelo 3D que contiene un SkinnedMesh con huesos adjuntos se creará automáticamente, es posible verificar las animaciones disponibles para ese modelo 3D en el panel de objetos, también es posible seleccionar una animación inicial para ese modelo que se reproducirá automáticamente en comienzo.


Skinning GBEngine Demo


También es posible reproducir animaciones usando un objeto de secuencia de comandos, el código a continuación muestra cómo mostrar las animaciones disponibles usando una secuencia de comandos y cómo reproducir la primera disponible en la lista.

Se pueden reproducir múltiples animaciones al mismo tiempo, el resultado de múltiples animaciones es la interpolación de la posición del hueso para todas las animaciones que se reproducen.

var object = scene.getObjectByName("animated");

for(var i = 0; i < object.animations.length; i++)
{
	console.log(object.animations[i].name);
}

object.playAnimation(0);

El método playAnimation recibió el índice de animación como parámetro, cada vez que se reproduce una animación, se crea un nuevo elemento de acción en la matriz de acciones en el objeto SkinnedMesh, podemos usar el objeto de acción para controlar cuánto pesa esa pista de animación en la animación final, esto puede resultar útil para interpolar entre varias animaciones.


Spritesheet

Para importar una nueva animación de hoja de sprites en GBEngine, podemos seleccionar importar / Textura / textura de hoja de sprites en el explorador de recursos. Después de haber seleccionado una imagen, se creará un tipo especial de textura. Podemos abrir el editor de la hoja de sprites haciendo doble clic en la textura recién creada.

La siguiente imagen muestra un ejemplo de una hoja de sprites de animación de 10x8, esa hoja de sprites en realidad contiene varias animaciones en las que el personaje se mueve hacia arriba, abajo, derecha, izquierda y un par de poses estáticas.


Tenemos que configurar manualmente en el editor de la hoja de sprites su tamaño, la cantidad de fotogramas a utilizar, dónde comenzar y terminar la animación, y qué tan rápido queremos reproducirla.

El siguiente ejemplo usa tres animaciones de hoja de sprites diferentes, una de ellas se controla usando un objeto de script para mostrar diferentes partes de la animación dependiendo del movimiento del jugador, este ejemplo también muestra muy bien cómo se pueden usar las luces para escenas 2D.


Spritesheet GBEngine Demo

Spine

Spine es un software de animación 2D para Windows, Mac y Linux, desarrollado por Esoteric Software. Spine está dirigido principalmente a personas que realizan videojuegos en 2d, pero se puede utilizar para prácticamente cualquier tipo de trabajo animado en 2D.

Para este tutorial, no se requiere Spine, puede descargar algunas animaciones de muestra de la página Esoteric Github, solo se pueden usar versiones pagas de Spine para exportar animaciones.

Las animaciones de la columna vertebral se pueden importar a GBEngine seleccionando "Animación de la columna vertebral" en el menú de importación del explorador de recursos. Los objetos de la columna vertebral pueden tener varias animaciones almacenadas. GBEngine proporciona una API sencilla para seleccionar y reproducir animaciones. Las animaciones también pueden tener máscaras adjuntas, el mismo objeto puede usar varias máscaras. La siguiente imagen muestra el mismo objeto Spine usando dos máscaras diferentes.



var spineboy;

function initialize()
{
	spineboy = scene.getObjectByName("spineboy");
}

function update()
{
	...

	if(Keyboard.keyJustPressed(Keyboard.RIGHT) || ...)
	{
		spineboy.setAnimation(0, "run", true);
	}
	if(Keyboard.keyJustReleased(Keyboard.RIGHT) || ...)
	{
		spineboy.setAnimation(0, "idle", true);
	}
}

El siguiente ejemplo usa la animación spineboy disponible gratis en el repositorio de tiempo de ejecución de spine y demuestra cómo usar animaciones de spine en un juego de plataformas.


Spine GBEngine Demo

Las animaciones de la columna también tienen soporte para cinemática inversa, también es posible usar la importación del mouse y el teclado para cambiar cuál sería el flujo de animación normal para adaptarlo a los eventos actuales.


Code

Otra forma de crear objetos animados es la codificación, las animaciones con guiones a veces permiten una interacción más dinámica y, a veces, pueden ser incluso más fáciles de hacer que usar herramientas visuales. Podemos animar fácilmente las propiedades de los objetos, texturas, materiales, etc. Sea creativo con un par de líneas de código fácilmente puede hacer buenas animaciones.




Code GBEngine Demo











NUESTROS Partners
image
Official

MANTENTE CONECTADO

Twitch
image image
Facebook
image image
Twitter
image image
YouTube
image image
Instagram
image image
Vimeo
image image