[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:

Imagen

Imagen

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! XD

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

Imagen

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:

Imagen

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:

Imagen

5.2 Carga de sprites


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

Usaremos este sprite:

Imagen

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

Imagen

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:

Imagen

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:

Imagen

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:

Imagen

Rellenamos el fondo con magenta...

Imagen

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

Imagen

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:


Imagen

Repetimos el mismo procedimiento de antes para el tercer frame:

Imagen

Y asi vamos haciendo todos los frames:

Imagen


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 XD)

Imagen

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 XD [oki]
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
Imagen
¿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
Imagen
¿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 [ginyo]
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
Imagen
¿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 [mamaaaaa]
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 XD. 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 [ginyo] ? ).

Si puedo hacer algo para compesarte el enfado... Dimelo [ginyo]  . 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? XD
Entiendo el enfado de Plata, aunque como ya han dicho el contenido no es exactamente el mismo.
Aún así, todos los tutoriales que se ven por aquí son prácticamente calcados a la wiki de palib + alguna cosilla más, pero pocos aportes realmente...
magic black 2009 escribió: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? XD


Exacto sería la mejor opción [chulito] [chulito]

Jesús Oliva Morales (Jesús94) escribió:PD: Hoy 17-06-2009 hace un año que me inscribí en el EOL y con este mensaje conseigo llegar al último rango Mega Adicto!!. Este es mi mensaje número 500. Gracias por tu ayuda EOL & EOLianos [boing] [sonrisa]
Pues yo no entiendo el enfado de Plata, es más, si lo dices porque te ha "plagiado" a tí, estás muy equivocado, si lo dices por copiar al tutorial de la web de palib, entonces sí coincido. Este tutorial está sacado de la propia web de PAlib, concretamente de aquí.

Pero sí es verdad que deberíais citar las fuentes cuando no es un trabajo propio.

Ánimo a seguir colaborando [oki]
Alber_h escribió:Entiendo el enfado de Plata, aunque como ya han dicho el contenido no es exactamente el mismo.
Aún así, todos los tutoriales que se ven por aquí son prácticamente calcados a la wiki de palib + alguna cosilla más, pero pocos aportes realmente...

Tanto el tutorial de palib.info, como los de plata como los mios hablan de la misma libreria y estan pensados para los novatos. Que no extrañe que veas un parecido entre ellos entonces ¬¬

Sepho escribió:Pues yo no entiendo el enfado de Plata, es más, si lo dices porque te ha "plagiado" a tí, estás muy equivocado, si lo dices por copiar al tutorial de la web de palib, entonces sí coincido. Este tutorial está sacado de la propia web de PAlib, concretamente de aquí.

Pero sí es verdad que deberíais citar las fuentes cuando no es un trabajo propio.

Ánimo a seguir colaborando [oki]

A ver que me entere, dices que he hecho un copy&paste de la web de palib?

Pos curiosamente, tanto las capturas como el contenido del propio tutorial es completamente diferente. Prueba a leerte los dos y veras las diferencias...

Lo que si admito es que unos de los sprites que he puesto en el tutorial procede de la web de palib. No se me da muy bien hacerlos XD. Le hare una mencion cuando acabe mis tutoriales...

Saludos
oye, para cuando habrá un nuevo tutorial???
amchacon escribió:
Alber_h escribió:Entiendo el enfado de Plata, aunque como ya han dicho el contenido no es exactamente el mismo.
Aún así, todos los tutoriales que se ven por aquí son prácticamente calcados a la wiki de palib + alguna cosilla más, pero pocos aportes realmente...

Tanto el tutorial de palib.info, como los de plata como los mios hablan de la misma libreria y estan pensados para los novatos. Que no extrañe que veas un parecido entre ellos entonces ¬¬


No, si extrañarme no me extraña, lo que quiero decir es que lo unico que estais haciendo es reinventar la rueda.
Que haya paz no?

Estoy con los 2:

Con plata por que casualmente explica lo mismo

Po con el otro ambién por que lo eplica de modos muy diferentes y siempre es bueno tener ms de 1 referencia.

PD:Por que un esprite que tenfgo de un meteorito e e ve los bordes rosa¿
4ris escribió:Por que un esprite que tenfgo de un meteorito e e ve los bordes rosa¿

No han de ser del color de transparencia que elegiste, te recomiendo usar paint (ese que viene con windows [+risas] ) ya que muchos programas (como photoshop) retocan pixeles al usar alguna herramienta y aunque tu los veas igual no lo son.
17 respuestas