La clase anterior ( Clase 7 ) usamos IMGLOAD para cargar una imagen que generamos en PISKEL, en esta clase haré una animación, exportaré las imágenes por separado y usaré un ciclo para mostrarlas en movimientos.
Además, introducimos los ARRAYS, un tipo de variable que también nos servirá para generar programas de preguntas y respuestas, en éste caso, será una lista con los nombres de los archivos de imagen.
Como ya dije en la ( Clase 7 ) Piskel es una excelente herramienta para generar pixel art, pero además permite generar GIF animados o secuencias de imágenes.
Como se ve en la imagen, para crear nuevos fotogramas y dar vida a la animación, tenemos varios botones, el primero es para borrar el fotograma actual (tacho de basura), luego el que hace una copia exacta del fotograma actual, y debajo de todos el que crea un fotograma nuevo y vacío.
En esta otra imagen, he creado cuadros nuevos. Cada uno tiene información diferente, con el ícono de la cebolla (marcado con el círculo rojo) podemos ver semi transparente el cuadro anterior de la animación y planificar mejor trayectorias, transformaciones o movimientos.
En ésta imagen, ya agregué los brazos, las piernas, los cuernitos y el ojo del sipmático Mike Wasownki (Monsters Inc.)
EXPORTAR ANIMACION
La clase pasada exportamos una imagen usando el boton de EXPORTAR, y luego DOWNLOAD PNG (galeria de dibujos de los alumnos), pero en éste caso, como se trata de una animación, tenemos 2 formas de exportar animaciones.
DOWNLOAD ZIP, nos permite exportar un archivo comprimido donde tenemos los fotogramas en formato .PNG (con transparencia), en última instancia, tenemos la opción GIF que está orientada a la WEB y es la que se ve a la derecha (pequeña).
Una vez que descomprimimos el archivo .ZIP tendremos varios fotogramas, en mi caso sprite_1 , sprite_2 , sprite_3 y sprite_4. Luego vamos a basic para cargarlos como animación.
A continuación les dejo las min-imáges de Mike que dibujé para éste post (pueden hacer click con el boton derecho en cada una y GUARDAR COMO... )
y además unas imágenes de Mario que descargué de internet y usamos en clase:
CODIGO DE UN ALUMNO
Comence a explicar el tema que seria cargar imagenes en secuencia para dar la idea de movimiento... de hecho pensaba primero explicar arrays cuando un alumno me dijo: YA LO HICE!!!.
Y si, realmente encontro una solucion sencilla al problema que es cargar la primer imagen, hacer una pause de 0.1 segundos, luego CLG para borrarla, luego cargar la siguiente imagen repitiendo el proceso para cada una, todo eso dentro de un loop infinito (while true ... endwhile).
Debo decir que quedé impresionado con la simpleza del código y me quedé preguntando: como no se me ocurrió a mi empezar la clase con un codigo tan cool y simple.
Arreglos
El código del alumno es eficiente para pocas imágenes, pero cuando se trata de 100 fotogramas, terminaremos con 300 líneas dentro del loop (while). Para ello usaré un arreglo, que es una variable con múltiples compartimientos donde podemos guardar el nombre de cada uno de los archivos que creamos en PISKEL.
Un arreglo es como UN EDIFICIO donde cada piso puede guardar información, un número o caracteres alfanuméricos, para éstos últimos usamos las comillas. Por ejemplo, si el IMGLOAD requiere el nombre de una imagen lo haremos como: "SPRITE_1"
Para crear el arreglo (Array) que guarde 4 valores usamos:
DIM imagenes$(4)
Para llenar cada celda con los nombres de los archivos podemos usar:
imagenes$ = { "sprite_1" , "sprite_2" ,"sprite_3" ,"sprite_4" ,}
Si quiero conocer el primer valor guardado en cada casilla usamos los corcheres con cada valor, comenzando por el 0 (cero).
PRINT imagenes$[0]
PRINT imagenes$[1]
PRINT imagenes$[2]
PRINT imagenes$[3]
Para solucionar el error usaremos el IF como explicamos en la clase 5 para preguntar dentro del ciclo si el valor de i llego a 5... si eso pasa entonces, le asignamos el valor 0 (CERO).
Por lo tanto, i se incrementará dentro de éste ciclo de ésta forma:
01234012340123401234...
Por lo tanto evitamos el error, si su animación tiene más cuadros, debe preguntar por la cantidad de cuadros-1 ya que el 0 es la primer celda del arreglo imagenes$.
NOTA: RECUERDEN QUE PARA QUE BASIC256 ENCUENTRE LAS IMAGENES POR EL NOMBRE, DEBEMOS GUARDAR EL PROGRAMA (KBS) EN LA MISMA CARPETA QUE LAS IMAGENES GENERADAS POR EL PISKEL.
#CODIGO COMPLETO DE LA CLASE
CLG
fastgraphics
DIM imagenes$(4)
imagenes$ = { "sprite_1" , "sprite_2" , "sprite_3" , "sprite_4" }
i = 0
PRINT i
WHILE true
imgload 150, 150, 5, imagenes$[ i ]
refresh
pause 0.1
i = i + 1
IF i = 4 THEN
i = 0
ENDIF
clg
ENDWHILE
