Trabajando con SPRITES - [Tema Serio]

[tSuKiYoMi]

Hola amigos, en mis ratos libres me ha dado por programar un pequeño juego. El tema de programación realmente no es el problema, sino más bien el trabajar con gráficos, hacerlos y demás. Estoy siguiendo algunos tutoriales y ahora estoy en la parte de las animaciones de los sprites. Hasta ahora tengo claro que para animar un personaje necesito todos los sprites con las posiciones o posturas que hará el personaje en el juego, como por ejemplo el sprite cuando camina hacia la derecha, hacia la izquierda, cuando corre, cuando salta... etc.

También me ha quedado claro que para tomar la referencia del tamaño de cada sprite y con el objetivo de que todos tengan el mismo tamaño tengo que coger como refrencia de ancho, el mayor ancho de todos, y como referencia de alto, el más alto de todos, así si el sprite más ancho es de 28 y el más alto tiene 40, todos los sprites deberían ser de 28x40, aunque haya otros más pequeños en ambas dimensiones pues en ese caso se rellena con el mismo color de fondo.

Ahora viene mi duda. En los tutoriales que he visto cuando se tienen todos los sprites de un personaje terminados y correctamente dimensionados se crea lo que llaman el "SpriteSet" que no es más que una imagen en la que se recogen todos los sprites anteriores del personaje en las distintas posturas que este toma. Como ejemplo pongo este spriteset del personaje principal del juego Chrono Trigger sacado de una de esas webs donde se almacenan sprites de juegos y otros recursos.



La duda es que en todos sitios recomiendan crear el spriteset pues se comenta que es más sencillo de utilizar a la hora de programar que usar cada imagen por separado (supongo que también es porque tienes que cargar más referencias en memoria y de la otra forma solo lo haces una vez). El problema es que no termino de entender como referenciar cada sprite dentro del spriteset para mostrar el sprite que me interesa en cada momento. Es decir, si cada sprite tiene un tamaño como el del ejemplo de 28x40, como le digo que quiero el sprite 5 del spriteset donde el personaje esta por ejemplo caminando hacia la derecha.

No pongo código porque no tiene mucho sentido pues con cada libreria me imagino que se hará de una forma distinta. Lo que me interesa es "la forma de pensar" para poder entender como referenciar cada sprite dentro del spriteset.

Gracias de antemano.

[juanvvc]

Hay dos formas:

Si no tienes una librería específica de juegos, normalmente las librerías que utilices para los gráficos incluyen soporte de "Rectángulos". Un rectángulo es eso, un rectángulo dentro de una imagen, y le dices donde empieza y su tamaño. Cuando pintas una imagen (el tileset), no la pintas toda sino solo un rectángulo dentro de ella. Por ejemplo, para tu sprite de tamaño (28, 40) en la posión (column, row) dentro del tileset, que quieres dibujar en la posición (x,y) de la pantalla, sería algo así:

spriteset = loadimage("protachronotrigger.png");
rect = new Rectangle(column * 28, row * 40, 28, 40);
screen.drawSprite(tileset, x, y, rect);

Esto se hace por ejemplo con la SDL básica o el sistema básico de dibujo de Java (Android, swing...) Si tus librerías gráficas no tienen soporte de rectángulos (por ejemplo, porque estás trabajando a muy bajo nivel directamente sobre el framebuffer de la máquina), te recomiendo que te crees tus propias funciones de dibujo con tus propios rectángulos.

Ahora, si tienes una librería de soporte de juegos, normalmente soportan ya tilesets y lo que haces es crear un sprite a partir de ese tileset. Algo así:

tileset = new TileSet("protachronotrigger.png", 7, 4); // creas un tileset con 7 columnas y 4 filas
sprite = new Sprite(spriteset.getTile(5, 1)); // creas un nuevo sprite a partir del tile en la columna 5, fila 4
animatedSprite = new AnimatedSprite(spriteset.getRow(2); // creas un nuevo sprite animado a partir de la fila 2 (la animación son todos los sprites de esa fila)

Y luego dibujas los sprites como toque en la librería gráfica. Algo así:

screen.drawSprite(sprite, x, y); // pinta el sprite, sin más
screen.drawAnimatedSprite(animatedsprite, x, y, 3); // pinta el frame 3 del aniamted sprite

Así se hace por ejemplo en en la librería de juegos andengine (para Java Android) y creo recordar que con alguna librería extra de SDL también. Cualquier librería de juegos va a tener un sistema como este para los sprite set.

[hardyx]

Se usa un spritesheet porque es más sencillo para los dibujantes hacerlo así, y también para optimizar recursos a la hora de programar. Ya que cargas el gráfico completo de un golpe. Para referenciarlos puedes definirte constantes en el código con la fila y columna de cada movimiento, o con la posición absoluta, como has comentado. Y luego sólo tienes que multiplicar, te creas una función que te dé el sprite en la posición que quieras.

[DrumpiFast]

Eso depende de en qué lenguaje o librería gráfica estes trabajando.
Si usas una básica, l que debes hacer es dibujar sólo la zona del spriteset que te interesa en cada momento. De ahi que todasnlas imágenes tengan el mismo tamaño, así es fácil obtener la "cuadrícula" imaginaria que contiene el gráfico.
Es posible que existan librerías gráficas que trabajen con spritesets y tengan funciones predefinidas, pero no conozco ninguna.

Yo uso Benu/Fenix, y usan un fmato de fichero que mantiene las imágenes separadas, pero no hay problemas por coger el spriteset y usar map_block_copy o una función similar para generar los mapas independients o simplemente usar las instrucciones put.L bueno de ussr un unico grafico es que lo cargas todo de golpe, y como tienen todas las imágenes las mismas propiedades, ahorras memoria y algunos pasos en la configuración.

[tSuKiYoMi]

Gracias. Con la idea de los rectángulos me queda mucho más claro. Por cierto andengina se usa solo para Java o también sirve para Android.

EDIT: veo que es específico para Android.

[juanvvc]

andengine, andengine, que lo he escrito mal pero ya lo he corregido

Es una librería para Android, y ya incluye tanto soporte de tilesets como soporte de sprites animados. Es decir, le dices que tu sprite animado es toda la fila 3 y que la animación dura 100ms (por decir algo) y ya te hace él solo toda la animación.

[SplinterGU]

jajajaja! el tio postea en el foro de wiz/caanoo, y sale uno poniendo codigos de android! jajaja! flipante!

Drumpi ha respondido correctamente, primero seria bueno saber en que lenguaje estas programando?

Por otro lado, los SpriteSet no siempre contienen graficos del mismo tamaño, incluso los graficos de una animacion no siempre tienen que ser del mismo tamaño.

Cuando se trabaja con SpriteSet lo mejor es no pintarlos directamente desde ellos a la hora de volcarlos a pantalla, sino que cuando cargas el SpriteSet los recortas en graficos individuales y luego descargas de la memoria el SpriteSet, con esto te ahorras unos cuantos calculos en runtime... esto sumado a que dependiendo del sprite (o incluso del frame dentro de una animacion) puedes necesitas centros del grafico en diferente posicion (por ejemplo, un personaje que camina, su centro deberia estar en sus pies... una pelota o una bala de cañon, tendria su centro en el centro del grafico, etc...)... te hace a que necesitas informacion adicional de cada grafico dentro de un SpriteSet, debes saber coordenadas de inicio dentro del spriteset (x e y), dimensiones (alto y ancho) y centro... podriamos agregar algunos mas, pero basicamente son esos... y esa informacion no la encuentras en el SpriteSet, la tienes que saber tu previamente y mantener estos datos en algun lugar de tu codigo... y obviamente usarlos al pintar...

como veras, si recortas los graficos previamente te ahorras un monton de calculos.

por otro lado, no es para hacer publicidad de mi engine (que a esta altura no la necesita en este foro), pero si recien te inicias a programar juegos, te recomiendo que empieces usando BennuGD, te sera mas simple hacer juegos.

[aitorpc]

Muy interesante este hilo.

SplinterGU, para mirar BennuGD lo mejor es empezar con este manual?:

http://www.bennugd.org/downloads/ManualBennuGD_Osk.pdf

[tSuKiYoMi]

jajajaja! el tio postea en el foro de wiz/caanoo, y sale uno poniendo codigos de android! jajaja! flipante!

jajajajaja!!!! mirad un magufador posteando fuera de trolls.

Drumpi ha respondido correctamente, primero seria bueno saber en que lenguaje estas programando?

No, no es necesario saber en que lenguaje hago las cosas. Solo necesitaba saber la idea detrás del "rectangulo" para saber como manejar el SpriteSet, y funciona.

---------- Post añadido a las 21:31 ---------- Post anterior a las 21:12 ----------

Se usa un spritesheet porque es más sencillo para los dibujantes hacerlo así, y también para optimizar recursos a la hora de programar. Ya que cargas el gráfico completo de un golpe. Para referenciarlos puedes definirte constantes en el código con la fila y columna de cada movimiento, o con la posición absoluta, como has comentado. Y luego sólo tienes que multiplicar, te creas una función que te dé el sprite en la posición que quieras.

No había visto tu comentario hardyx. Entre la idea del rectángulo y lo que comentas de las filas y columnas ya me he hecho la idea y he conseguido hacerlo funcionar. Luego me he dado cuenta de que la liberia que uso tiene alguna función más avanzada, pero creo que el manejo básico es más rápido y prefiero controlar en todo momento mediante este método como meter los sprites, además como bien dices es mejor cargar el gráfico completo de una vez que tener múltiples referencias por ahí dando vueltas.

[SplinterGU]

Muy interesante este hilo.

SplinterGU, para mirar BennuGD lo mejor es empezar con este manual?:

http://www.bennugd.org/downloads/ManualBennuGD_Osk.pdf

asi es...

jajajajaja!!!! mirad un magufador posteando fuera de trolls.



No, no es necesario saber en que lenguaje hago las cosas. Solo necesitaba saber la idea detrás del "rectangulo" para saber como manejar el SpriteSet, y funciona.

a pesar de que yo me limite a hablarte de la idea generica... es necesario saber el lenguaje para evitar que algunos te pongan codigos que no te serviran de nada (como lo han hecho varios)... o simplemente para sugerirte la mejor opcion a lo que preguntas, dependiendo del lenguaje, quizas tengas una funcion que lo hace por ti, y quizas mejor que lo que uno lo haria... es bien sabido que ningun buen programador no reinventa la rueda si la rueda actual funciona de maravillas... no seria la primera vez (muchos de los aqui presentes lo hemos visto varias veces) que alguien se mete a hacer todo un desarrollo, perdiendo tiempo y generando muchas lineas de codigo, cuando luego por no decir en que lenguaje lo necesitaba, aparece alguien que dice, "con esta funcion lo hacias"... y te queres matar...

en fin, es cosa tuya, suerte con eso.