Coleccion de Lemmings de colores que uso en The Big Javis Adventure

Tutorial de AGD V: Animando Sprites

En el capítulo anterior, comentábamos los fundamentos de manejo del editor de sprites de AGD, en esta ocasión querría centrar mi atención en la animacion de sprites.

Puede parecer una cuestión baladí, pero personalmente creo que el 50% de la conexion con un juego se produce debido a la calidad de la animación, imaginen sino una película de Disney con animaciones estilo South Park… digno de verse sin duda, pero esa magia que hace que los más pequeños de la casa empaticen con los personajes se esfumaria inmediatamente.

He de hacer constar que yo no soy animador, por lo que no puedo dar clases al respecto, es por ello que he dedicado un tiempo a localizar y seleccionar algunos contenidos que, estudiados con atención, pondrán en contexto mis comentarios posteriores, y espero ayuden con ello a comprender el proceso de forma general, así como dar a conocer recursos excelentes que ya existen en la red.

Material de Estudio

En primer lugar os propongo un video de Adderly Céspedes (Es un gran canal, os recomiendo darle un vistazo) de cómo se anima “actualmente”, aunque no tenga que ver con AGD si nos pone en contacto con aspectos generales de la animación (y de la creación de sprites), con el resto del contenido iremos acercándonos a las limitaciones de un ordenador de 8Bits.

Una vez tengáis claro el concepto general, avanzamos siguiendo este expectacular tutorial que muestra el proceso de creacion y animacion de sprites ya usando pixels, aunque sin un limite de tamaño y colores como el que tendremos en Speccy.

Una herramienta que podeis usar es esta llamada Pixela que yo también estoy testeando (en una maquina virtual Windows) porque no encuentro nada potente para Mac.

¡Ahora exprimamos AGD!

Hay que tomar en consideración que estamos ante un entorno 8Bits, con unas limitaciones a nivel de color bastante duras, no solo por la máquina sino por cómo funciona el entorno de AGD. Para no marear con cuestiones tecnias sirva decir que los sprites son de un color determinado (todos, aunque luego se pueda jugar por codigo) y solo de uno, o todo el sprite es blanco o todo es rojo, por ejemplo, lo cual nos obliga a ser ingeniosos.

Lo que no podemos expresar con colores, en Spectrum se suele expresar con pixels separando áreas o delimitando objetos, es obvio que la limitación es grande, pero se pueden lograr cosas muy chulas. Ejemplo de esto de “dejar huecos” es el sprite de las antorchas que uso en el juego, en otras plataformas usaríamos amarillos y rojos en la llama, o tonos metalicos o tierra para el portaantorchas, aquí al tener un solo color, hemos de recurrir a eso de pintar o no pintar un pixel. Requiere tiempo pero no s tan complicado como pueda parecer.

Sprite de la llama

Y lo mismo sucede por ejemplo con este gráfico de uno de los enemigos, en lugar de pintar lineas de color para separar los elementos, dejamos líneas sin dibujar. Esto tiene el hándicap de que reduce los ya escasos pixeles con que contamos, pero ahí está la parte que cada uno hemos de desarrollar nuestro arte con la práctica. De hecho, aunque el resultado pueda no ser mejor que el de un profesional, es la parte que más disfruto de la creación de mis propios juegos, el expandir mis propias capacidades creando algo mejor que lo era capaz de hacer anteriormente.

Sprite Nave Enemiga

Frames, frames, frames

Como comentamos en el capítulo 4 de este curso, se pueden crear varios frames por cada sprite, la secuencia de estos es lo que dotará de vida a nuestras creaciones, según creemos varios frames de animación, podremos pulsar f a la velocidad que deseemos para ver la animación en el cuadro en que editamos el sprite. Mas adelante veremos como verlo en el escenario pero por ahora usaremos este método.

Hemos de tomar en consideración que, en una maquina de estas características no solo los colores son limitados, la velocidad de la máquina también así como la memoria. Si usamos demasiados frames, la animacion sera genial pero ocupara muchisima memoria y tardara mucho en ejecutarse, por el contrario si usamos demasiado pocos, la animacion ira a saltos y nuestro personajes parecera alguien con un ataque de epilepsia.

Personalmente suelo usar 3 máximo 4 frames en los casos más extremos, para equilibrar, y tambien me he fijado muchiiiiiisimo en los graficos de animaciones Japonesas de la epoca, en gran medida en los RPG de 8 y 16 bits que solian animar con mucho arte usando a veces solo dos frames.

No hay mas secreto que practicar, practica y practicar, como dice siempre el maestro profesor Retroman.

Menos es Mas

Os pongo a continuacion los cuatro frames de los mini lemmings de JBA, quisiera con ello trasmitir una ultima cuestión en este capítulo y es que cuando las limitaciones son tan grandes hay que jugar con la imaginacion del jugador, así como optimizar la animacion, dotando del mayor carisma posible a nuestras creaciones. Si yo, que soy un perfecto novato, he logrado crear unos mini personajes con muy pocos pixeles, seguro que tu también puedes, y recuerda, esto lo hacemos por diversión, así que cero verguenza y cero miedos, la única competición es contra nosotros mismos para ser mejores cada vez.

En el próximo capítulo exploraremos la importación de spritesheets en forma de screens y más adelante empezaremos a usar los sprites en la pantalla que creamos. Mientras tanto !disfruten creando sus propias animaciones!

¿Te gusta lo que hago?

En ese caso, puedes ayudarme con los costes de servidor, de dominios, y apoyame para que pueda seguir trabajando en esta dirección, recuerda ¡esta donación es completamente voluntaria!

En caso de que la cantidad propuesta te parezca mucha o (espero que) poca, puedes donar la cantidad que quieras a través de mi página en Paypal.me, si en la nota indicas porque donas y porque no coincides con la cantidad indicada, me ayudaras a entender mejor que creaciones pueden ser de mayor valor para vosotros, y tratare de crear mas de ese tipo (aunque en esencia escribo y creo lo que siento en cada momento). Gracias de todo corazón.

¿Quieres saber cual es mi plan con los miles de millones de los pozos de petroleo?

SpriteJavi en JBA

Tutoria de AGD IV: Creando nuestro “Muñequito” y los “Bichos” (Sprites)

Una vez tenemos los tiles y al menos una pantalla de las entregas anteriores de este Tutorial de AGD en español, y antes de profundizar en los detalles de la configuración de suelos y paredes, o los mapas, vamos a completar los elementos básicos que necesitaremos para crear un juego: nuestro protagonista y los enemigos a los que se enfrentará.

Antes de nada, un poco de contexto.

Aunque mi objetivo principal es enseñar com hacer un juego con AGD y que a partir de ahi cada cual pueda marcar su camino, como vengo haciendo quiero antes, dar un poco de contexto sobre sprites, y haceros conscientes de las limitaciones de las maquinas de la época de los 8 bits, lo que supone todo un reto a nivel artístico (Marty… ¿no tendré que llamarte gallina no? ;))

En el caso de Spectrum tenemos un color para la tinta y otro para el fondo a elegir entre 7 por cada area de 8×8 pixels pudiendo usar o no brillo de forma que (salvo del negro) tenemos dos versiones de cada color. Eso si no podemos hacer que la tinta tenga brillo y el fondo no, todo con brillo o sin brillo.

Al margen de las especifiadades de color de Spectrum, así como las especifidades del color de los sprites en AGD que veremos mas adelante, abramos boca con estos dos videos que nos dan una gran perspectiva sobre la materia. Hay subtítulos en español para los que no domineis el ingles..

Para temas de desarrollo el ingles es básico.

https://www.youtube.com/watch?v=Tfh0ytz8S0k
https://www.youtube.com/watch?v=_rsycfDliZU

Y en AGD … ¿Como va?

Lo primero es pulsar S desde el menú principal, accederemos al editor de Sprites donde podremos generar nuestras cracioes (de las dimensiones definidas traves de la opción i “Miscelanea”, en el caso de JBA he usado Sprites de 16×16). 

El protagonista en el editor de sprites

El interfaz es bastante sencillo, un cuadro enorme en la parte superior izquierda que nos permite editar el sprite al gusto, un indicador del numero de sprite en que nos encontramos y el frame que estamos editando (los sprites pueden tener varios frames de animación.

¿En qué consiste esto de los “frames de animación”?.

Siempre que observamos un “muñequito” en la pantalla, vemos que se mueve, no es – habitualmente – una imagen estática, para lograr este efecto, se dibuja al personaje varias veces con la postura ligeramente cambiada, como en los dibujos animados. Al mostrar estos dibujos en secuencia a una velocidad apropiada, percibiremos que “se mueve”. Este pequeño video lo explica muy bien:

https://www.youtube.com/watch?v=G9m1Aku_bPk

Ahora que creo tenemos claro el contexto general es el momento de indicar las teclas que debemos usar en esta pantalla para crear nuestros muñequitos y bichos, el movimiento básico se realiza con cursores y space para cambiar el pixel donde se sitúa el cursor:

TECLAS 
=======================================================
X = Insertar Sprite
D = Borrar Sprite
C = Borrar el contenido del Sprite

Cursores = Movemos el puntero por la rejilla del Sprite
Space or 0 = Cambia el pixel actual (activo/inactivo)

M = Copia el sprite al portapapeles
K = Pega el sprite dede el portapapeles
H = gira horizontalmente el sprite
V = gira verticalmente el sprite

N = Moverse al sprite siguiente
P = Moverse al sprite siguiente

I = insertar frame
R = borrar frame
F = Ir al siguiente frame

ENTER = Volver al menú principal

Copiar bloques de un Load Screen
================================

El editor, según el manual de la version 4.6, tiene una 
pantalla en la que podemos cargar ficheros de tipo 
screen$, usando la tecla L. Una vez en esa pantalla, se 
puede mover un cursor de 16x16 pixels y copiar porciones 
de ella al portapapeles (usando space) desde el que luego 
podremos pegar usando la letra K.

L = carga una pantalla al editor para copiar trozos
G = vuelve a la pantalla cargada para copiar otro trozo
Space en la pantalla cargada = Copia el trozo activo
Cursores en la pantalla cargada = Mover Cursor de Copia.

Mas alla de esto, el funcionamiento es muy similar a los bloques, solo que aqui cada “Sprite” puede contener mas de un frame de animación , ya veremos como se usan las animaciones pero podéis practicar creando al protagonista (o vuestro propio “muñequito” con al menos 4 frames de animación, mirando a izquierda y derecha.

No os limiteis a copiar sin mas los sprites, dadles vuestro propio toque una vez que tengas claros los fundamentos.

Adicionalmente, y como ejercicio para afinar vuestro desempeño podeis tratar de replicar (y animar) los gráficos que sugiero a continuación. ¡Se me olvidaba! podeis usar la tecla F dentro del editor para ver en sucesión los frames y hacer preview de vuestra animación y asi corregirla… ¡antes de mandar vuestra creación a Dinamic!

En los próximos capitulos, os mostrare mis pruebas con la funcionalidad de copiar bloques desde pantallas de carga, y empezaremos a situar los muñequitos en la pantalla que creamos en capítulos anteriores, esto nos dará pie para ampliar los conocimientos de forma práctica.

¿Te gusta lo que hago?

En ese caso, puedes ayudarme con los costes de servidor, de dominios, y apoyame para que pueda seguir trabajando en esta dirección, recuerda ¡esta donación es completamente voluntaria!

En caso de que la cantidad propuesta te parezca mucha o (espero que) poca, puedes donar la cantidad que quieras a través de mi página en Paypal.me, si en la nota indicas porque donas y porque no coincides con la cantidad indicada, me ayudaras a entender mejor que creaciones pueden ser de mayor valor para vosotros, y tratare de crear mas de ese tipo (aunque en esencia escribo y creo lo que siento en cada momento). Gracias de todo corazón.

¿Quieres saber cual es mi plan con los miles de millones de los pozos de petroleo?