[NDS][Programación con Palib] 5.Sprites

Sprites... ¿Que es un sprite?

Son imágenes como pueden ser por ejemplo personajes, objetos del escenario, etc...

Cada esprite es de 32x32.

Para meter por ejemplo 4 movimientos a un sprite el sprite seria de 32x128 (32 x (32+32+32+32)).

Para tener un sprite mas grande, deberia de ser de 64x64 o 128x128, etc, y para animarlo, seria múltiplo de su ancho siempre.

No se si a quedado muy claro, pues esto se entiende cuando empiezas a programar con ellos.
Tabla:

Imagen


Empezamos!

Nueva carpeta, con su carpeta de gráficos llamada gfx dentro de source y los dos archivos de Pagfx que conocemos y empezamos.

Crearemos un sprite de 32x32.
Por ejemplo, un cuadrado amarrillo de 32x32.
y otro sprite con 4 frames, por ejemplo, la palabra HOLA, una letra en cada frame, en PNG y 256 colores.

LLevaremos los sprites a la carpeta gfx y abriremos el pagfx.ini y ponemos:

#TranspColor Magenta // el color trasparente seria el margenta, se puede poner cualquiera (en ingles)
por ejemplo, si yo pongo un fondo con varios colores, y una letra amarilla, para que el vacio no se vea se poner de fondo ese color

#Sprites :
cuadrado.PNG //nombre del sprite
256colors //indica que esta en 256 colores
master //nombre de la paleta(mas adelante lo aprenderemos)
letras.PNG 256colors master //lo mismo para las letras

#Backgrounds :


En total, quedaria así:
#TranspColor Magenta

#Sprites :
cuadrado.PNG 256colors sprites
letras.PNG 256colors sprites

#Backgrounds :


Ya tenemos nuestros sprites listos. Y ahora al código:

// Includes
#include // Include de las PA_Lib
#include "gfx/all_gfx.c"
#include "gfx/all_gfx.h"

// Funcion: main()
int main(int argc, char ** argv)
{
PA_Init(); // Iniciamos las PA_Lib
PA_InitVBL(); // Iniciamos VBL

//cargamos la paleta
PA_LoadSpritePal(0, // pantalla
0, // numero de paleta (puede aver varias)
(void*)sprites_Pal); // nombre de la paleta (lo que mencione antes)

//mostramos el cuadrado
PA_CreateSprite(0, // pantalla
0, /* numero de sprite ( de 0 a 127 sprites que soporta ) el 0 estaria al frente de todos,
el 1, encima de todos menos del 0, etc... */
(void*)cuadrado_Sprite, // nombre del sprite
OBJ_SIZE_32X32, // tamaño
1, // modo (1= 256 colores)
0, // numero de paleta
50, 50); // posicion X, Y

//mostramos las letras
PA_CreateSprite(0, // pantalla
1, // numero de sprite
(void*)letras_Sprite, // nombre del sprite
OBJ_SIZE_32X32, // tamaño (el tamaño de cada frame, aunque en total tenga 32 x 128
1, // modo de 256 colores
0, // numero de paleta
90, 50); // posicion X, Y

//animamos el segundo sprite
PA_StartSpriteAnim( 0, // pantalla
1, // numero de sprite
0, // el primer frame que animamos es 0
3, // el ultimo es 3 ya que la animacion tiene 4 frames y el primero seria el 0
1); // velocidad, 1 frames por segundo, por ejemplo





//Bucle
while (1)
{




PA_WaitForVBL();
}

return 0;
} //Fin de main()

Pues asi quedaria, uno en animación y el otro sin animar.

Y terminó.

Captura:

Imagen

Descarga:
http://www.megaupload.com/es/?d=KJ9I4O7N

el proximo dia utilizaremos el stilius y el pad para controlar sprites y otras cosas.
Salu2
No queria irme sin explicar esto.

P.D: No hay tarea
El mejor de todos, este es el que esperaba ;)
q buenooo q buenooo
me los estoy a prendiendo todos a ver si me hago aqui algo wapo jajaja
gracias plata!! excelnte
salu2



PD: esperando prox. tuto (son la hostia)
Los sprites pueden ser de los siguientes tamaños (en píxeles):
__________________________
|8 |16 |32 |64 |
__________________________|
8 |8×8 |16×8 |32×8 |
16 |8×16 |16×16|32×16 |
32 |8×32 |16×32|32×32 |64×32
64 | | |32×64 |64×64

Aproximadamente se ven, para mas info y una tabla mejor dibujada ver Wiki

Saludos!
Ultimamente no se que pasa no puedo compilar me da build error 2

Solo comento, el tuto ya lo se hacer hace rato pero gracias.
De momento sigo sin saber que son exactamente los sprites.... pero como dijiste, plata, ya me daré cuenta experimentando con ellos...

PD: Eres DIOS! Plata! [tadoramo]

[toctoc]

PD2: 5 estrellitas y media [plas]

-----------------------------

EDIT: Ha!! Una cosa. Que emulador de nds me bajo para ver lo que voy haciendo? Es que meter el nds una y otra vez en la ds como que no...... >.< [+risas]
Los Sprite son las imágenes en sí, que el juego utiliza.

Por ejemplo, en el juego de Pokémon, el dibujo de Charmander es un Sprite.

Espero que esta vez lo entiendas xD

Un saludo!

PD: 5 stars!
PLata, hacía tiempo que no me pasaba por el foro de Scene y ha sido un grata sorpresa encontrarme con tus tutos, así que muchas gracias Maestro!!!!!!

P.D. Esa chicheta que ya tarda!!!!!!!!!!!!!!

P.D2 5 estrellas pa este tuto!!!!!!!
plata como tienes instalado el devkitPro. A mi me da el build error y no puedo arreglarlo no me compila nada de nada. Y busque y encontre un post tuyo, si me puedes explicar detalladamente como arreglarlo.
Gracias.
ALguien (preferiblemente plata XD XD ) me dice como escribo las comillas en el texto? Porque si escribo algo entre comillas no sale en el texto (como es obvio).

PD: Otra duda... hay algun límite en los sprites? O se pueden meter todos los que quiera?

(Me refiero en los 2 sentidos, si se puede llenar la pantalla de ellos y si se puede meter 1 solo pero con MUCHOS frames.)

---------------------------------------

EDIT: Otra cosa, si en el PAGfx.ini cambio lo de 256colors a (por ejemplo) 1024colors.... acepta esa cantidad de colores? (No tiene por que ser 1024, la pregunta en si es si se puede cambiar lo de 256colors....)

----------------------------------------

EDIT2: Otra cosa más... (XD)... se puede usar otro formato que no sea PNG ? Porque cuando hice el font.gif era un GIF y no un PNG y me lo aceptó..... se puede?

-----------------------------------------

EDIT3: Acabado todos los tutoriales hasta la fecha. Al que le interese estoy elaborando un resumen con todos los tutoriales (menos el 1).... pero OJO, el resumen es SOLO complementario. Tienes que mirar antes (y hacer) el tutorial de plata. El resumen es solo para acceder más rápido a los comandos y saber para que sirve cada llave y número.

Bye! [fumando]
Plata, eres el mejor ^^
Donde dices que quieres una calle? y la estatua?,xD

SUGERENCIA: Crea un post a modo de índice con links a cada post, cada vez que crees uno nuevo editas ese post y listo, y que ese indice lo pongan como fijo ^^

five stars for God
Luiszu escribió:Plata, eres el mejor ^^
Donde dices que quieres una calle? y la estatua?,xD

SUGERENCIA: Crea un post a modo de índice con links a cada post, cada vez que crees uno nuevo editas ese post y listo, y que ese indice lo pongan como fijo ^^

five stars for God


Dice que en la avenida central de madrid... y la estatua delante del ayuntamiento... XD [plas]

Bueno y sobre lo del "post indice"..... YA SE LO HAN DICHO 10000 VECES!!!!

ein?
judelco escribió:ALguien (preferiblemente plata XD XD ) me dice como escribo las comillas en el texto? Porque si escribo algo entre comillas no sale en el texto (como es obvio).

PD: Otra duda... hay algun límite en los sprites? O se pueden meter todos los que quiera?

(Me refiero en los 2 sentidos, si se puede llenar la pantalla de ellos y si se puede meter 1 solo pero con MUCHOS frames.)

---------------------------------------

EDIT: Otra cosa, si en el PAGfx.ini cambio lo de 256colors a (por ejemplo) 1024colors.... acepta esa cantidad de colores? (No tiene por que ser 1024, la pregunta en si es si se puede cambiar lo de 256colors....)

----------------------------------------

EDIT2: Otra cosa más... (XD)... se puede usar otro formato que no sea PNG ? Porque cuando hice el font.gif era un GIF y no un PNG y me lo aceptó..... se puede?

-----------------------------------------

EDIT3: Acabado todos los tutoriales hasta la fecha. Al que le interese estoy elaborando un resumen con todos los tutoriales (menos el 1).... pero OJO, el resumen es SOLO complementario. Tienes que mirar antes (y hacer) el tutorial de plata. El resumen es solo para acceder más rápido a los comandos y saber para que sirve cada llave y número.

Bye! [fumando]


se pueden meter creo que asta 127 sprites con todos los frames que quieras.

----------------------------------------------
solo 256. algunas imagenes con mas colores pero ya lo veremos mas adelante
---------------------------------------------------------------------------
tambien se pueden usar gifs, y animados tambien (mas adelante)
pero los png tienen mejor calidad
-------------------------------------------------------------------------------
para que quieres hacer ese resumen si lo voy a juntar todo en un chincheta y poner el significada de esas palabras para vosotros "raras"? (jerga de programación)
lo que puedes hacer es subirlo a la wikipedia de eol.
de todas formas enseñamelo un poco pa verlo, me lo pasas un dia por msn :

plata._.17@hotmail.com


salu2
PiratePila está baneado por "crearse clones para trollear"
Muy bueno.

Tendrías que hacer un recopilatorio ya con todos los Tutoriales por que yo pensaba que no había más de 3.
Una preguntilla sobre sprites.

Se pueden hacer sprites anulares?
mas exactamente, imaginaros una diana, necesitaria qe al tocar cada "anillo de puntuacion" con el stylus los detectase y asi poder capturar el valor.
Si son cuadrados, las esquinas del circulo superior "tapan" parte del inferior, no? se podria traspasar con lo de la transparencia?

Como se podria hacer si no? no se me ocurre ninguna manera.
vjinete escribió:Una preguntilla sobre sprites.

Se pueden hacer sprites anulares?
mas exactamente, imaginaros una diana, necesitaria qe al tocar cada "anillo de puntuacion" con el stylus los detectase y asi poder capturar el valor.
Si son cuadrados, las esquinas del circulo superior "tapan" parte del inferior, no? se podria traspasar con lo de la transparencia?

Como se podria hacer si no? no se me ocurre ninguna manera.


Los sprites deben cargarse siempre como cuadrados o rectángulos siguiendo una cierta proporción de píxeles, así que no, no puedes hacer sprites anulares. Lo que sí puedes hacer es poner tu sprite anular dentro de un cuadrado y pintar de magenta todos los píxeles del cuadrado que no correspondan a tu sprite. Así al cargarlo se verá sólo el anillo.

Si las esquinas del sprite cuadrado son de color magenta siempre se transparentarán. No taparán a nada que esté debajo.

¿Estás tratando de implementar un Ouendan/EBA? [looco]
La duda qe tengo es qe imagina qe pones un sprite cuadrado encima de otro mas grande. En ambos sprites dibujas un circulo lo max de grande.

En el sprite qe va encima, como el cuadrado es mas grande qe el circulo qe has dibujado, las esquinas del cuadrado, aunqe esten en magenta, tapan el sprite de abajo.

Visualmente, al estar en magenta no hay problema y se ven ambos circulos en toda su plenitud PERO la duda es qe si toco con el stylus en la esquinilla del cuadrado del sprite superior (qe esta en magenta) se "traspasa" y toco el sprite inferior o tocaria el sprite superior (la parte de magenta de el).

La verdad qe no tengo ni idea, de no poderse hacer asi, como delimitar el area de un anillo a base de arrays, bucles o similares en programacion C++ para comparar con el XY del stylus.

Ya hare la prueba y os comento a ver qe tal :)


Y ya lo siento con el Ouendan. Solamente es hacer una diana y qe recoja con el stylus los impactos en ella para hacer una puntuacion.
Aun soy demasiado paqete para hacer cosas de esas jejejeje
Ya veo el problema.

Pues nunca se me ha planteado esa duda. [+risas]

En ese caso yo haría una aproximación. Aproximaría por cuadrados los anillos de la diana. Y puntuaría según la X y la Y del lugar donde ha tocado el stylus. O podrías meter en un array todas las coordenadas de los píxeles que ocupa tu sprite y comprobar si las coordenadas del píxel que se ha tocado coinciden con alguna del array. Con bastante trabajo, esta aproximación podría llegar a ser pixel-perfect.

Se me ha ocurrido una mejor idea, aunque no tengo experiencia con la función en que se basa. Mira este ejemplo:

...\devkitPro\PAlibExamples\Sprites\Basics\GetSpritePixel\

Si los anillos de tu diana tienen diferentes colores, podrías recobrar el color del píxel que ha tocado el stylus y puntuar según el que sea. Así te olvidas de la situación de los sprites. [360º]
me acabas de salvar :)

Digamos qe los anillos son blanco, azul, dos rojos y dos amarillos, pero con poner uno de los rojos mas rojo y uno de los amarillos mas amarillo... problema resuelto :)

Ya ire contando a ver qe tal va :)
FaG está baneado por "clon de usuario baneado"
¿ La carpeta build tiene que tener algo adentro ?

Porque yo no tengo nada metido, y me sale un error y seguramente es culpa de eso
FaG escribió:¿ La carpeta build tiene que tener algo adentro ?

Porque yo no tengo nada metido, y me sale un error y seguramente es culpa de eso


no... eso aparece al compilar, si te etivocas en el codigo y no compila normal que no haya nada -.-
FaG está baneado por "clon de usuario baneado"
Ya esta, problema solucionado.
Me da este error, no entiendo que ocurre, es como si no encotnrase el sprite_Pal

main.c
c:/devkitPro/programas/sprites/source/main.c: In function 'main':
c:/devkitPro/programas/sprites/source/main.c:15: error: 'sprites_Pal' undeclared (first use in this function)
c:/devkitPro/programas/sprites/source/main.c:15: error: (Each undeclared identifier is reported only once
c:/devkitPro/programas/sprites/source/main.c:15: error: for each function it appears in.)
make[1]: *** [main.o] Error 1
make: *** [build] Error 2
es que le as dado un nombre diferente a la paleta que ese.
en el pagfs.ini , tendrias que poner en sprites, poniendote un ejemplo de que el spite se llamara sprite1 y estubiera en 256colores:

sprite1.png 256 colors sprites

lo que esta en negrita seria el nombre de la paleta, que es el que te falla.
vjinete escribió:La duda qe tengo es qe imagina qe pones un sprite cuadrado encima de otro mas grande. En ambos sprites dibujas un circulo lo max de grande.

En el sprite qe va encima, como el cuadrado es mas grande qe el circulo qe has dibujado, las esquinas del cuadrado, aunqe esten en magenta, tapan el sprite de abajo.

Visualmente, al estar en magenta no hay problema y se ven ambos circulos en toda su plenitud PERO la duda es qe si toco con el stylus en la esquinilla del cuadrado del sprite superior (qe esta en magenta) se "traspasa" y toco el sprite inferior o tocaria el sprite superior (la parte de magenta de el).

La verdad qe no tengo ni idea, de no poderse hacer asi, como delimitar el area de un anillo a base de arrays, bucles o similares en programacion C++ para comparar con el XY del stylus.

Ya hare la prueba y os comento a ver qe tal :)


Y ya lo siento con el Ouendan. Solamente es hacer una diana y qe recoja con el stylus los impactos en ella para hacer una puntuacion.
Aun soy demasiado paqete para hacer cosas de esas jejejeje


Eso es facil.

La diana es un círculo dentro de un círculo dentro de... etc.
Sabemos que el radio de la circunferencia es la distancia del centro al extremo a cualquier punto de la circunferencia.

Lo que yo haría es comprobar la distancia de la posición del stylus al centro, comprobar entre que dos radios está y listo :P.
(Teorema de Pitágoras, pa esto de "pogramá" sirven mucho las mates XD)




EJ (no es el codigo real):
int distancia_y, distancia_x, distancia;

distancia_y = stylus.y - centrodiana.y
distancia_x = stylus.x - centrodiana.x

distancia = distancia_y ^2 + distancia_x^2

//esto te da la distancia al cuadrado, pero hacer una raiz cuadrada llevaria bastante tiempo y tampoco pasa nada por hacerlo así.

if ( (distancia < radio mayor ^2) && (distancia > radio menor ^2) )
{
ha tocado tal circulo, sumas los puntos que sean
}
else if ....

etc


Las palib incluyen una función para hacer lo de la distancia sin liarse tanto, pero no me acuerdo de como se escribía XD. Tiene una que da la distancia real y otra que da la distancia al cuadrado (como he echo yo).


PD: Espero que se me entienda :P.
A mi el Pagfx no me los transforma, alguna ayuda?
25 respuestas