[Tutoriales Palib] 5. Uso de Sprites

5. Uso de sprites

En este tutorial aprenderemos a crear y usar los sprites para palib. Quizas os resulte mas sencillo que los otros

5.1 Definicion de sprite

Los sprites son imagenes de un tamaño pequeño que se utilizan en la progamacion. Muy frecuentemente suelen estar animadas

Aqui pongo algunos sprites para que os hagais la idea:





El primer sprite que he puesto es bastante simple. Un simple iconito sin complicacion

El segundo sprite en cambio, esta animado,. Es decir tiene movimiento (representa una explosion)

Bien, supongo que os habreis fijado en una cosa, y es que el fondo de los sprites... Es de color rosa!

La explicacion es muy sencilla, abrimos el pagfx y miramos por esta zona



Pone que el transparent col es el color de antes (se llama magenta por cierto). Eso quiere decir que al transformar la imagen, el color magenta no se tendra en cuenta y se tomara como un hueco vacio

Por lo que si insertarmos el sprite, en el juego aparecera asi:



Tiene su logica no?, esto tambien se cumple en los fondos por cierto


Bien, ya vamos terminando esta parte, lo unico que me falta es indicar los tamaños que pueden ser. Son cualquiera de estos tamaños a lo alto y ancho:



5.2 Carga de sprites

Ahora que sabemos lo que son, vamos a aprender a usarlos

Usaremos este sprite:



Lo metemos en la carpeta del pagfx, abrimos el pagfx y lo metemos



El modo lo vamos a dejar en 256 colores. En el nombre de la paleta pondremos uno facil (despues dire para que sirve). Convertimos el sprite y pasamos los archivos a la carpeta gfx que crearemos ahora

Bien, supongo que sabras que para cargar texto en la nds, primero hay que preparar la ds para utilizarlo escribiendo PA_InitText

Con los sprites pasa algo similar, pero aqui los sprites se agrupan en unas paletas. Podremos cargar y preparar los sprites de una paleta para usarlos. Pero entonces no los sprites que tengamos en otras paletas no podremos usarlos (habria que cargar dicha paleta entonces)

Bien, pos para cargar una paleta se usa:

PA_LoadSpritePal(0, // Pantalla
0, // Asignale un numero a la paleta
(void*)sprite0_Pal); // Nombre de la paleta que le pusistes

Bien, pos luego para crear el sprite se usa:

PA_CreateSprite(0, // Pantalla
0, // Asignale un numero al sprite
(void*)Mouse_Sprite, // Nombre de sprite
OBJ_SIZE_32X32, // Tamaño de sprite, en este caso es 32x32 asi que pondremos ese valor
1, // Modo de 256 colores, los demas modos no los vamos a ver aun
0, // Numero de la paleta, el que pusistes antes
50, 50); // Posicion X e Y en la pantalla donde aparecera

Y como siempre hago, pongo el codigo entero:

#include <PA9.h>
#include "gfx/all_gfx.c"
#include "gfx/all_gfx.h"
int main(int argc, char ** argv)
{
PA_Init();
PA_InitVBL();
PA_LoadSpritePal(0,0,(void*)sprite0_Pal);
PA_CreateSprite(0,0,(void*)Mouse_Sprite,OBJ_SIZE_32X32,1,0, 50, 50);

while (1)
{
PA_WaitForVBL();
}

return 0;
}

Lo compilamos y lo probamos... Y veremos nuestro sprite alli en la pantalla

5.3 Animar los sprites


Esto es bastante facil de hacer


Cogemos este sprite:



Lo covertimos y lo metemos en el juego igual que el paso anterior (el tamaño del sprite es 64x64 por cierto)

Una vez creado, para animarlo usaremos:

PA_StartSpriteAnim(0, // pantalla
0, // número del sprite
0, // Numero de frame donde empieza
6, // Numero de frame cuando termina la animacion
1); // La Velocidad en frames por segundo. Actualmente esta puesta a 1 frame por segundo

Que es un frame?. Bueno si has hecho un gif alguna vez esto se sonara familiar

Para hacer una animacion, lo que se hace es poner un monton de imagenes estaticas. Luego a la hora de animarse, las imagenes pasan rapidamente y asi se ve la animacion

Estas imagenes son las frames

Sencillo no?. Pongo el codigo entero como siempre:

#include <PA9.h>
#include "gfx/all_gfx.c"
#include "gfx/all_gfx.h"
int main(int argc, char ** argv)
{
PA_Init();
PA_InitVBL();
PA_LoadSpritePal(0,0,(void*)sprite0_Pal);
PA_CreateSprite(0,0,(void*)explosion_Sprite,OBJ_SIZE_64X64,1,0, 50, 50);
PA_StartSpriteAnim(0,0,0,6,1);

while (1)
{
PA_WaitForVBL();
}

return 0;
}

Una cosa mas, si quereis que el sprite se posicione en un frame especifico sin animarse. Habria que poner:

PA_SetSpriteAnim(0,//Pantalla
0,//Numero de sprite
1//Numero de frame
);

5.4 Creaccion de sprites

Ahora que sabeis usar los sprites, vamos a aprender a crear uno

Usaremos el progama de dibujo que mas os guste, yo usare el paint que es el que tengo mas a mano

El sprite lo hare de 32x32, es el tamaño mas estandar...

Ponemos el tamaño del lienzo a 32x32. En paint nos vamos a imagen, atributos y seleccionamos 32 de ancho y 32 de alto:



Ponemos la imagen de fondo en magenta. El magenta se obtiene al mezclar 255 de color rojo y 255 de color azul

En paint nos vamos a colores, modificar colores, colores personalizados. Y ponemos en rojo y en azul dicha cantidad, lo de matiz, saturacion y luminosidad ni lo toqueis:



Rellenamos el fondo con magenta...



Y ahora nos pondremos ha hacer la primera frame. El sprite que hare tratara de un circulo que se va haciendo mas y mas grande, y despues mas y mas pequeño. Un pego. Pintamos el circulo



Bien, el segundo frame hay que situarlo debajo del primero. Añadiremos 32 de alto, sobre el fondo blanco pintaremos el siguiente frame, despues lo volveremos a colorear de magenta:




Repetimos el mismo procedimiento de antes para el tercer frame:



Y asi vamos haciendo todos los frames:




Lo guardamos en formato de 256 colores. Y lo probamos haber que tal va (el mio me ha quedado muy chapuzero, se me da muy mal la parte grafica )



Y con esto acabamos este tutorial. En el proximo aprenderemos a usar los botones y el stylus (dispositivos de entrada y salida)

Saludos

me parecen bastante buenos estos tutoriales que estas haciendo para la gente que quiere aprender y tal... pero creo que podrías enseñar como realizar otro tipo de animaciones además (PA_SetSpriteAnimEx) o como cargar imágenes desde fat... porque a mucha gente los 4 mb se nos quedan cortos jeje. Salu2, y sigue con los tutoriales

muy buenos tutos
te felicito

Una cosa que no entiendo de los sprites, en el tutorial usas los sprites con animacion en una columna vale, pero si el sprite es asi

¿Como haces esa animacion en las cuatro direcciones?

Psyker escribió:Una cosa que no entiendo de los sprites, en el tutorial usas los sprites con animacion en una columna vale, pero si el sprite es asi

¿Como haces esa animacion en las cuatro direcciones?

Tienes que modificar la imagen de modo que te quede todo en una columna. Además cada frame de la animacion tiene que tener un tamaño prefijado (para todos el mismo). Te aconsejo que uses el mas pequeño en el cual entren cada uno de los frames. Espero que me hayas entendido. Salu2

Suikoden77 escribió:me parecen bastante buenos estos tutoriales que estas haciendo para la gente que quiere aprender y tal... pero creo que podrías enseñar como realizar otro tipo de animaciones además (PA_SetSpriteAnimEx) o como cargar imágenes desde fat... porque a mucha gente los 4 mb se nos quedan cortos jeje. Salu2, y sigue con los tutoriales

Hombre, la idea de estos tutoriales es que la gente que no sabe nada  y quiera ponerse en esto. Pueda adquirir los minimos conocimientos de palib con estos tutoriales para asi poder apañarselas perfectamente. Siguiendo eso, de la parte de sprites me parecio mas importante como poner un sprite en pantalla. Animarlo, posicionarlo en un frame especifico y crearlo (la parte del movimiento lo hare junto a los dispositivos de entrada, en el siguiente tutorial).
Por ello no he incluido el PA_StartSpriteAnimEx, pero creo que habia un ejemplo de palib que los nombraba. Dentro de sprite, animation y sprite anim 3
Lo de cargar imagenes desde fat lo voy a dejar para el tutorial de fat. De todas formas es bastante facil, en palib hay ejemplos de como cargar fondos y sprites desde fat (en formato bin)

Saludos y gracias por contestar

Psyker escribió:Una cosa que no entiendo de los sprites, en el tutorial usas los sprites con animacion en una columna vale, pero si el sprite es asi

¿Como haces esa animacion en las cuatro direcciones?

Recorta cada columna del sprite y ponlo debajo de la primera hasta tener una unica columna. Sabiendo el tamaño de cada frame, puedes animarlo sin problemas.

Claro que va a resultar un poco raro ya que el sprite no se mueve (eso va para el siguiente tutorial)... Pero en fin

Saludos

gracias porel tutorial esque estoy creando un proyecto personal no muy bueno

1. Introduccion a las palib y instalación / 1. Instalación del entorno
2. Nuestros primeros pasos con palib / 2. Hola mundo
3. Uso de fondos y capas / 3.Texto y utilización de fondos
4. Uso de textos avanzado / 4.Texto, color, tamaño y fuentes
5. Uso de Sprites / 5.Sprites


Claro que va a resultar un poco raro ya que el sprite no se mueve (eso va para el siguiente tutorial)...


[NDS][Programación con Palib] 6. Movimiento de sprites y utilización de stylus y pad


Y muchos detalles mas concretos...

¿Me estas vacilando? Mira que me he esperado para ver si hacias algo nuevo pero nada. Anda macho, vete a casa, otro discipulo de pilatepila... ¿Porque esa mania de modificar lo que no es vuestro descaradamente y atribuiros el merito? Da porculo hacer nada para que venga alguien que no tiene ni puta idea a plagiarte el 85% del tutorial (el otro 15% restante lo borra, of course) y me estoy cortando muchisisimo la lengua por los moderadores...

Los temas de los 5 primeros tutoriales son el mismo es cierto... Pero en el contenido no se parece en nada...

El 6º tutorial no iba de mover sprites con el pad y stylus, sino de los dispositivos de entrada y salida. Como utilizar los botones, el stylus. El pad... A partir de entonces es cuando mis tutoriales siguen unos temas distintos de los tuyos y se separan.

El 6º tutorial no he empezado a redactarlo aun por pereza . Los 5 primeros los he publicado con gran rapidez porque ya los tenia, ya que los colgue en espalnds hara milenios...


Plata... En ningun momento me he querido llevar tu gloria ni ofenderte... Lo siento muchisimo si te lo he hecho...

De hecho, yo siempre he intentado ayudarte (en el proyecto del ds-me, te di ideas para hacer el multihilo. Te acuerdas ? ).

Si puedo hacer algo para compesarte el enfado... Dimelo   . Soy todo oidos

Saludos

nos es por meterme en medio, pero estos tutos los habeis hecho para ayudar a la gente. ¿porque no os fusionais y seguis haciendo tutos entre los dos, que creo que va a ayudar a mucha gente?