Gestionar Sprites 2D

Makaimura · 28 de Septiembre de 2011, 03:16:32 AM

Que programas usais para gestionar las animaciones de sprites 2d?, he mirado por inet y he visto algunos metodos pero hay uno llamado sprite sheet que parece ser que se usa bastante, es necesario un editor para gestionarlos o se puede hacer mas facilmente.

XÑA · 28 de Septiembre de 2011, 09:43:53 AM

SpriteSheets es para mi lo mejor, pq en una textura puedes tener todas las animaciones del personaje. Es cómodo y lo más rápido para la tarjeta.

blau · 28 de Septiembre de 2011, 09:48:07 AM

Y una buena base es el sample de microsoft sobre sprite sheets http://create.msdn.com/en-US/education/catalog/sample/sprite_sheet

Y tambien te puedes hacer tu propia aplicacion para gestionar los sprite sheets http://www.youtube.com/watch?v=UCfPFn4OLhk 8)

Makaimura · 28 de Septiembre de 2011, 11:17:13 AM

Thx, peña, esto de empezar es muy lioso no paro de mirar liks hyperlinks y documentación y de todo y me va a estallar el cabezón!!!

Hans · 30 de Septiembre de 2011, 08:10:09 AM

Yo utilizo spritesheets para cargar muchas imágenes pero no animaciones específicamente, los utilizo más bien como contenedores masivos. Esto lo hago porque XNA (al menos antes, ahora no sé cómo andará con el 4.0) si tu juego tenía muchas texturas (nuestros juegos 2D no bajan de 2000) y pretendías cargarlas te podías pasar minutos en ello (por ser muchos accesos a disco individuales para el disco duro de la consola que ya de por sí es lentísimo). Yo las meto todas en spritesheets (usando el ejemplo de creators, lo máximo que quepa en cada uno) y luego las cargo-desempaqueto al principio en un diccionario (o varios) a los que accedo y así paso de minutos a segundos.

Las únicas texturas que no empaqueto así son las tochas (1024x1024) para arriba, más que nada porque caben 4 y casi no se gana en velocidad de carga. Y si el juego no tiene demasiadas texturas tampoco lo hago.

Vicente · 30 de Septiembre de 2011, 11:43:33 AM

Bueno, eso es algo mas de como funcionan las graficas que XNA en si. Es mucho mas rapido cargar algo grande y recortar una textura que andar cargando trozos pequeños todo el rato.

Makaimura · 30 de Septiembre de 2011, 01:18:24 PM

Y para los sprites animados?

Hans · 30 de Septiembre de 2011, 01:43:35 PM

Yo no tengo animaciones como tal en un único fichero, sólo uso los spritesheets para empaquetar texturas (que a veces son animaciones en forma de secuencias de imágenes). Pero siempre tengo todo separado en texturas, cada frame de cada animación es siempre una textura separada. Esto para los grafistas es comodidad pura y dura.

blau · 30 de Septiembre de 2011, 05:58:25 PM

Bueno, pues alla voy yo...

yo me base en el sample del sprite sheet para hacer un solo archivo con toda la informacion necesaria.

el archivo actualmente lo genero automaticamente... haciendo una busqueda automatica en el directorio sprites, y añadiendo todos los .png que encuentre, y si el fichero termina en _strip_xxx.png significa que es una animacion, asi que genero la secuencia correspondiente.

Luego cargo el sprite sheet y puedo acceder a la region a traves del nombre del archivo.

<SpriteSheet xmlns="http://www.w3.org/2001/XMLSchema-instance">
<Files>
<File id="0" columns="3" rows="1">Sprites\Disparos\spr_bomba_strip3.png</File>
<File id="1">Sprites\Disparos\spr_disparo.png</File>
<File id="2" columns="8" rows="1">Sprites\Disparos\spr_espadazo_strip8.png</File>
<File id="3" columns="5" rows="1">Sprites\Disparos\spr_explosiondisparo_strip5.png</File>
<File id="4" columns="6" rows="1">Sprites\Disparos\spr_explosion_bomba_strip6.png</File>
<File id="5" columns="4" rows="1">Sprites\Enemigos\spr_bola_energia_normal_strip4.png</File>
<File id="6" columns="4" rows="1">Sprites\Enemigos\spr_bola_inestable_gigan_strip4.png</File>
<File id="7" columns="2" rows="1">Sprites\Enemigos\spr_cthulhu_cara_strip2.png</File>
<File id="8" columns="10" rows="1">Sprites\Enemigos\spr_cthulhu_tentaculos_strip10.png</File>
<File id="9" columns="6" rows="1">Sprites\Enemigos\spr_explosion_cthulgu_strip6.png</File>
<File id="10" columns="4" rows="1">Sprites\Enemigos\spr_fantasma_strip4.png</File>
<File id="11" columns="6" rows="1">Sprites\Enemigos\spr_moscardon_strip6.png</File>
<File id="12" columns="2" rows="1">Sprites\Enemigos\spr_muro_enemigo_strip2.png</File>
<File id="13" columns="8" rows="1">Sprites\Enemigos\spr_mva_gigante_suelo_strip8.png</File>
<File id="14" columns="6" rows="1">Sprites\Enemigos\spr_mva_muerta_strip6.png</File>
<File id="15" columns="8" rows="1">Sprites\Enemigos\spr_mva_strip8.png</File>
<File id="16" columns="6" rows="1">Sprites\Enemigos\spr_mva_suelo_gigan_muerta_strip6.png</File>
<File id="17" columns="9" rows="1">Sprites\Enemigos\spr_mva_voladora_gigante_dead_strip9.png</File>
<File id="18" columns="4" rows="1">Sprites\Enemigos\spr_mva_voladora_gigante_strip4.png</File>
<File id="19" columns="4" rows="1">Sprites\Enemigos\spr_mva_voladora_strip4.png</File>
<File id="20" columns="12" rows="1">Sprites\Enemigos\spr_mva_vol_aparece_strip12.png</File>
<File id="21" columns="20" rows="1">Sprites\Enemigos\spr_ojo_muerto_strip20.png</File>
<File id="22" columns="5" rows="1">Sprites\Enemigos\spr_ojo_strip5.png</File>
<File id="23">Sprites\Fondos y portada\back_fondo_general.png</File>
<File id="24">Sprites\Fondos y portada\back_fondo_naves.png</File>
<File id="25">Sprites\Items\spr_botas.png</File>
<File id="26">Sprites\Items\spr_botas_cogidas.png</File>
<File id="27" columns="6" rows="1">Sprites\Items\spr_espada_strip6.png</File>
<File id="28" columns="3" rows="1">Sprites\Items\spr_estrellas_strip3.png</File>
<File id="29">Sprites\Items\spr_gafas.png</File>
<File id="30">Sprites\Items\spr_gafas_cogidas.png</File>
<File id="31">Sprites\Items\spr_item_bombas_dest.png</File>
<File id="32" columns="3" rows="1">Sprites\Items\spr_item_bombas_strip3.png</File>
<File id="33">Sprites\Items\spr_llave_cogida.png</File>
<File id="34" columns="12" rows="1">Sprites\Items\spr_llave_strip12.png</File>
<File id="35" columns="5" rows="1">Sprites\Items\spr_moneda_cogida_strip5.png</File>
<File id="36" columns="5" rows="1">Sprites\Items\spr_moneda_strip5.png</File>
<File id="37">Sprites\Items\spr_pistola.png</File>
<File id="38">Sprites\Items\spr_pistola_cogida.png</File>
<File id="39">Sprites\Items\spr_rayo_espada.png</File>
<File id="40">Sprites\Items\spr_reloj_cogido.png</File>
<File id="41" columns="8" rows="1">Sprites\Items\spr_reloj_strip8.png</File>
<File id="42">Sprites\Muros\spr_bloque_oculto.png</File>
<File id="43">Sprites\Muros\spr_mask.png</File>
<File id="44" columns="2" rows="1">Sprites\Muros\spr_muelle_strip2.png</File>
<File id="45" columns="3" rows="1">Sprites\Muros\spr_muro_aparece_strip3.png</File>
<File id="46">Sprites\Muros\spr_muro_bomba.png</File>
<File id="47" columns="8" rows="1">Sprites\Muros\spr_muro_deshaz_strip8.png</File>
<File id="48">Sprites\Muros\spr_muro_espada.png</File>
<File id="49" columns="4" rows="1">Sprites\Muros\spr_muro_normal_strip4.png</File>
<File id="50">Sprites\Muros\spr_muro_rompible.png</File>
<File id="51" columns="10" rows="1">Sprites\Muros\spr_muro_rompible_rot_strip10.png</File>
<File id="52" columns="8" rows="1">Sprites\Muros\spr_muro_temporal_strip8.png</File>
<File id="53">Sprites\Prota\spr_mask_prota.png</File>
<File id="54">Sprites\Prota\spr_nave_mask.png</File>
<File id="55" columns="4" rows="1">Sprites\Prota\spr_prota_andando_strip4.png</File>
<File id="56">Sprites\Prota\spr_prota_disparando.png</File>
<File id="57" columns="4" rows="1">Sprites\Prota\spr_prota_espada_strip4.png</File>
<File id="58" columns="11" rows="1">Sprites\Prota\spr_prota_luminoso_strip11.png</File>
<File id="59" columns="12" rows="1">Sprites\Prota\spr_prota_muerto_strip12.png</File>
<File id="60" columns="13" rows="1">Sprites\Prota\spr_prota_nave_muerta_strip13.png</File>
<File id="61" columns="4" rows="1">Sprites\Prota\spr_prota_nave_strip4.png</File>
<File id="62">Sprites\Prota\spr_prota_quieto.png</File>
<File id="63">Sprites\Prota\spr_prota_salta.png</File>
<File id="64" columns="8" rows="1">Sprites\Prota\spr_stranger_strip8.png</File>
<File id="65" columns="30" rows="1">Sprites\Puertas\spr_portal_strip30.png</File>
<File id="66" columns="4" rows="1">Sprites\Puertas\spr_puerta_abierta_strip4.png</File>
<File id="67">Sprites\Puertas\spr_puerta_cerrada.png</File>
<File id="68">Sprites\Puertas\spr_puerta_enemigo.png</File>
<File id="69">Sprites\Puertas\spr_puerta_llave.png</File>
<File id="70" columns="8" rows="1">Sprites\Puertas\spr_puerta_temp_strip8.png</File>
<File id="71" columns="4" rows="1">Sprites\Trampas\spr_bola_inestable_strip4.png</File>
<File id="72">Sprites\Trampas\spr_bola_lava.png</File>
<File id="73" columns="10" rows="1">Sprites\Trampas\spr_lava_strip10.png</File>
<File id="74" columns="2" rows="1">Sprites\Trampas\spr_lanzabolas_strip4.png</File>
<File id="76">Sprites\Trampas\spr_pinchos_abajo.png</File>
<File id="77">Sprites\Trampas\spr_pinchos_arriba.png</File>
<File id="78">Sprites\Trampas\spr_pinchos_derecha.png</File>
<File id="79">Sprites\Trampas\spr_pinchos_izquierda.png</File>
<File id="80" columns="4" rows="1">Sprites\Trampas\spr_plasma_strip4.png</File>
<File id="81">Sprites\Trampas\spr_laser_energia_vertical.png</File>
<File id="82">Sprites\Trampas\spr_laser_energia_horizontal.png</File>

</Files>
<Sequences>
<Sequence>
<Name>spr_bomba_strip3</Name>
<Frames>0.0 0.1 0.2</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_espadazo_strip8</Name>
<Frames>2.0 2.1 2.2 2.3 2.4 2.5 2.6 2.7</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_explosiondisparo_strip5</Name>
<Frames>3.0 3.1 3.2 3.3 3.4</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_explosion_bomba_strip6</Name>
<Frames>4.0 4.1 4.2 4.3 4.4 4.5</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_bola_energia_normal_strip4</Name>
<Frames>5.0 5.1 5.2 5.3</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_bola_inestable_gigan_strip4</Name>
<Frames>6.0 6.1 6.2 6.3</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_cthulhu_cara_strip2</Name>
<Frames>7.0 7.1</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_cthulhu_tentaculos_strip10</Name>
<Frames>8.0 8.1 8.2 8.3 8.4 8.5 8.6 8.7 8.8 8.9</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_explosion_cthulgu_strip6</Name>
<Frames>9.0 9.1 9.2 9.3 9.4 9.5</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_fantasma_strip4</Name>
<Frames>10.0 10.1 10.2 10.3</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_moscardon_strip6</Name>
<Frames>11.0 11.1 11.2 11.3 11.4 11.5</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_muro_enemigo_strip2</Name>
<Frames>12.0 12.1</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_mva_gigante_suelo_strip8</Name>
<Frames>13.0 13.1 13.2 13.3 13.4 13.5 13.6 13.7</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_mva_muerta_strip6</Name>
<Frames>14.0 14.1 14.2 14.3 14.4 14.5</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_mva_strip8</Name>
<Frames>15.0 15.1 15.2 15.3 15.4 15.5 15.6 15.7</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_mva_suelo_gigan_muerta_strip6</Name>
<Frames>16.0 16.1 16.2 16.3 16.4 16.5</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_mva_voladora_gigante_dead_strip9</Name>
<Frames>17.0 17.1 17.2 17.3 17.4 17.5 17.6 17.7 17.8</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_mva_voladora_gigante_strip4</Name>
<Frames>18.0 18.1 18.2 18.3</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_mva_voladora_strip4</Name>
<Frames>19.0 19.1 19.2 19.3</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_mva_vol_aparece_strip12</Name>
<Frames>20.0 20.1 20.2 20.3 20.4 20.5 20.6 20.7 20.8 20.9 20.10 20.11</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_ojo_muerto_strip20</Name>
<Frames>21.0 21.1 21.2 21.3 21.4 21.5 21.6 21.7 21.8 21.9 21.10 21.11 21.12 21.13 21.14 21.15 21.16 21.17 21.18 21.19</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_ojo_strip5</Name>
<Frames>22.0 22.1 22.2 22.3 22.4</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_espada_strip6</Name>
<Frames>27.0 27.1 27.2 27.3 27.4 27.5</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_estrellas_strip3</Name>
<Frames>28.0 28.1 28.2</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_item_bombas_strip3</Name>
<Frames>32.0 32.1 32.2</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_llave_strip12</Name>
<Frames>34.0 34.1 34.2 34.3 34.4 34.5 34.6 34.7 34.8 34.9 34.10 34.11</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_moneda_cogida_strip5</Name>
<Frames>35.0 35.1 35.2 35.3 35.4</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_moneda_strip5</Name>
<Frames>36.0 36.1 36.2 36.3 36.4</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_reloj_strip8</Name>
<Frames>41.0 41.1 41.2 41.3 41.4 41.5 41.6 41.7</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_muelle_strip2</Name>
<Frames>44.0 44.1</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_muro_aparece_strip3</Name>
<Frames>45.0 45.1 45.2</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_muro_deshaz_strip8</Name>
<Frames>47.0 47.1 47.2 47.3 47.4 47.5 47.6 47.7</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_muro_normal_strip4</Name>
<Frames>49.0 49.1 49.2 49.3</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_muro_rompible_rot_strip10</Name>
<Frames>51.0 51.1 51.2 51.3 51.4 51.5 51.6 51.7 51.8 51.9</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_muro_temporal_strip8</Name>
<Frames>52.0 52.1 52.2 52.3 52.4 52.5 52.6 52.7</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_muro_temporal_strip9</Name>
<Frames>52.0 52.1 52.2 52.3 52.4 52.5 52.6 52.7 52.0</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_prota_andando_strip4</Name>
<Frames>55.0 55.1 55.2 55.3</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_prota_espada_strip4</Name>
<Frames>57.0 57.1 57.2 57.3</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_prota_luminoso_strip11</Name>
<Frames>58.0 58.1 58.2 58.3 58.4 58.5 58.6 58.7 58.8 58.9 58.10</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_prota_muerto_strip12</Name>
<Frames>59.0 59.1 59.2 59.3 59.4 59.5 59.6 59.7 59.8 59.9 59.10 59.11</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_prota_nave_muerta_strip13</Name>
<Frames>60.0 60.1 60.2 60.3 60.4 60.5 60.6 60.7 60.8 60.9 60.10 60.11 60.12</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_prota_nave_strip4</Name>
<Frames>61.0 61.1 61.2 61.3</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_stranger_strip8</Name>
<Frames>64.0 64.1 64.2 64.3 64.4 64.5 64.6 64.7</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_portal_strip30</Name>
<Frames>65.0 65.1 65.2 65.3 65.4 65.5 65.6 65.7 65.8 65.9 65.10 65.11 65.12 65.13 65.14 65.15 65.16 65.17 65.18 65.19 65.20 65.21 65.22 65.23 65.24 65.25 65.26 65.27 65.28 65.29</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_puerta_abierta_strip4</Name>
<Frames>66.0 66.1 66.2 66.3</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_puerta_temp_strip8</Name>
<Frames>70.0 70.1 70.2 70.3 70.4 70.5 70.6 70.7</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_bola_inestable_strip4</Name>
<Frames>71.0 71.1 71.2 71.3</Frames>
<Duration>1</Duration>
</Sequence>
<Sequence>
<Name>spr_lava_strip10</Name>
<Frames>73.0 73.1 73.2 73.3 73.4 73.5 73.6 73.7 73.8 73.9</Frames>
<Duration>1</Duration>
</Sequence>

<Sequence>
<Name>spr_plasma_strip4</Name>
<Frames>80.0 80.1 80.2 80.3</Frames>
<Duration>1</Duration>
</Sequence>

</Sequences>
</SpriteSheet>

Makaimura · 30 de Septiembre de 2011, 06:24:54 PM

La hostia, puede repetirmelo? Thx

blau · 30 de Septiembre de 2011, 08:08:25 PM

Solo era por hacer ver que ahorra mucho curro hacerlo asi... ^_^'

Makaimura · 01 de Octubre de 2011, 02:03:01 AM

Perdonad si os pregunto cosas obvias pero yo voy por los GFX y me estoy haciendo un cacao tremendo, imaginaros que solo quiero mostar un fondo de pantalla, que resolucion ha de tene, la 360 es 720p no?, es decir que mi fondo de pantalla tendria que tener 1280x720? para que quedase perfecto no?, es decir si le hago en los 4 extremos una especie de L quedaria cada una en una esquina perfectamente?.

Makaimura · 01 de Octubre de 2011, 03:28:22 AM

Hice la prueba pero en lugar de L en las esquinas puse cuadrados, uno por esquina y en el win queda bien, pero en la xbox con una tele, los cuadrados casi no se veian, solo un lado por cada esquina de la pantalla, supongo que es por el tipo de televisión y habrá que tener en cuenta unas safe region o como se llamen para según que tipo de juegos.

[EX3] · 02 de Octubre de 2011, 02:20:44 AM

Cita de: makaimura en 01 de Octubre de 2011, 03:28:22 AM
Hice la prueba pero en lugar de L en las esquinas puse cuadrados, uno por esquina y en el win queda bien, pero en la xbox con una tele, los cuadrados casi no se veian, solo un lado por cada esquina de la pantalla, supongo que es por el tipo de televisión y habrá que tener en cuenta unas safe region o como se llamen para según que tipo de juegos.

En consola tienes que trabajar con el area segura de pantalla ya que las televisiones no muestran todo el buffer de pantalla. Mirate este ejemplo del AppHub para que lo pruebes en la consola y en Windows:

http://create.msdn.com/en-US/education/catalog/sample/safe_area

Por norma, todo el material importante del juego, como el HUD por ejemplo, debe quedar si o si dentro de ese area para asegurarte que todo el mundo lo vera tenga la tele que tenga. El resto del espacio lo puedes llenar con lo que quieras.

Salu2...

P.D.: Seria interesante que te leyeras esta guia de "buenas practicas" para desarrollar para XBox Live Indie Games :) http://create.msdn.com/en-US/education/catalog/article/bestpractices_31

Hans · 02 de Octubre de 2011, 09:17:26 AM

Nosotros tenemos una opción en los juegos para adaptar el safe area de los juegos haciendo que el jugador estire una imagen de "control" para indicar manualmente los límites. Por defecto creo que lo dejaba al 90% de la resolución, más o menos.

Foros

Gestionar Sprites 2D

Hans

Hans

Hans