Como crear un sprite sheet

Iniciado por Beginner Web, 22 Diciembre 2018, 22:05 PM

0 Miembros y 1 Visitante están viendo este tema.

Beginner Web

Quisiera saber saber de alguna herramienta para crear un sprite sheets, ya tengo todos los sprites dibujados, pero no encuentro nada como para convertirlos en gifs sin el fondo blanco, ayuda  :huh:
7w7

manwan

A veces me juego por las herramientas de diseño. Se dice que los buenos artistas copian.. Eso es lo que hago :silbar: Ya veré que te responden.
Por otro lado el fondo blanco se saca añadiendo canal alfa, capas y transparencias. Según tengo entendido  :rolleyes:


Beginner Web

mmm, tengo los 3 personajes y todos sus movimientos ya dibujados en 8 bits en archivos .png y lo que quiero hacer son los sprites sheet para scratch, no se si me conviene que sean gift o no se algo que no sea tan laborioso, ya me aburri de tanto dibujar, ya quiero hacer andar el juego  :¬¬
7w7

EdePC

Saludos,

- Por defecto Scratch trabaja con Sprites .png, no recuerdo que trabaje con Sprite Sheets directamente, supongo que quieres guardar o convertir tus sprites individuales a uno o más Sprites Sheets que los contengan.

- Con que editor de imágenes estás creando tus Sprites? con cualquier editor se podría crea el Sprite Sheet, sin embargo yo suelo utilizar Imagemagick para este tipo de tareas, Imagemagick es un procesador de imágenes por línea de comandos, permite hacer infinidad de cosas con las imágenes, por ejemplo para concatenar imágenes una seguida de otra a manera de Sprite Sheet se suele utilizar montage o convert:

Código (dos) [Seleccionar]
magick montage *.png -tile x1 -background none sprite_sheet.png

ImageMagick: https://imagemagick.org
ImageMagick Windows 64-bit: https://imagemagick.org/download/binaries/ImageMagick-7.0.8-19-Q16-x64-dll.exe
ImageMagick Windows 32-bit: https://imagemagick.org/download/binaries/ImageMagick-7.0.8-19-Q16-x86-dll.exe
ImageMagick montage documetation: https://imagemagick.org/script/montage.php
ImageMagick montage examples: https://imagemagick.org/Usage/montage/


manwan

#4
La verdad es que nunca llegué tan lejos...Lo mínimo fue el canvas de Java 2D y no seguí más.  Por eso voy a ver que te responden... (parece que ya te respondieron, justo mirá) :D

pienso que el gif solo permite opacidad de 0 al 100% en cambio el que decís se le puede dar porcentaje como los fondos en CSS... Mandale, varita mágica o selector general por color y borrá el fondo blanco y fijate con algunos a ver si te los levanta. Como nunca usé scratch, voy a ver que onda ::)

Gracias igual... ;)

La verdad que no sé, incluso algunos llegan a usar vectores como en Flash. Pero seguro que eso ya es otro tema...

Saludos... y suerte con eso



Beginner Web

#5
Cita de: EdePC en 23 Diciembre 2018, 14:00 PM
Saludos,

- Por defecto Scratch trabaja con Sprites .png, no recuerdo que trabaje con Sprite Sheets directamente, supongo que quieres guardar o convertir tus sprites individuales a uno o más Sprites Sheets que los contengan.

- Con que editor de imágenes estás creando tus Sprites? con cualquier editor se podría crea el Sprite Sheet, sin embargo yo suelo utilizar Imagemagick para este tipo de tareas, Imagemagick es un procesador de imágenes por línea de comandos, permite hacer infinidad de cosas con las imágenes, por ejemplo para concatenar imágenes una seguida de otra a manera de Sprite Sheet se suele utilizar montage o convert:

Código (dos) [Seleccionar]
magick montage *.png -tile x1 -background none sprite_sheet.png

ImageMagick: https://imagemagick.org
ImageMagick Windows 64-bit: https://imagemagick.org/download/binaries/ImageMagick-7.0.8-19-Q16-x64-dll.exe
ImageMagick Windows 32-bit: https://imagemagick.org/download/binaries/ImageMagick-7.0.8-19-Q16-x86-dll.exe
ImageMagick montage documetation: https://imagemagick.org/script/montage.php
ImageMagick montage examples: https://imagemagick.org/Usage/montage/


Hola, estuve haciendo unas pruebas y me he dado cuenta que los archivos.sprite2 para scratch no son mas que simples gifs con fondo transparente asi que usare ese metodo, programando bien las acciones por el numero de imagene si funciona, gracias a todos  :rolleyes:

Solo me faltaria extraer la imagen de cada frame, como podria quitar el exceso de imagen para extraer mi personaje solamente? tengo esto

Y quiero esto

Si ya se que recortando pero no tengo buena precision ademas que son 3 personajes con varios movimientos  :-(
7w7

rub'n

Hola,

Bueno de verdad Beginner web si has llegado a tener los sprites ya, eso de que no tienes buena presición,  >:D no lo creo, recortar eso es muy fácil desde Paint., Gimp, Photoshop etc  ;D...

No deberías de pararte por eso.


rubn0x52.com KNOWLEDGE  SHOULD BE FREE!!!
If you don't have time to read, you don't have the time (or the tools) to write, Simple as that. Stephen

Beginner Web

Bueno creo que terminé, gracias a estos dos videos lo he logrado
[youtube=640,360]https://www.youtube.com/watch?v=8oEGTT09utg[/youtube]
[youtube=640,360]https://www.youtube.com/watch?v=wV6-fetGDG4[/youtube]
Me quedo asi, aun me faltan encajar todos las acciones en un solo gif objeto para que funcione como quiero
http://www.lolotaku.com/upload/gif/18737.gif
7w7

EdePC

#8
- Lo que quieres hacer recortando el "exceso de fondo" (el clásico trim) lo puedes hacer fácilmente dependiendo del programa que estés utilizando:

-- Photoshop: Imagen > Cortar
-- Gimp: Imagen > Recortar al contenido
-- Imagemagick, puede procesar miles de ficheros de una:

Código (dos) [Seleccionar]
magick mogrify -trim *.jpg

- Al final que quieres lograr? un Sprite Sheet, GIF animado, o simples Sprites para animarlos con Scratch, por que lo más normal en Scratch es: https://scratch.mit.edu/projects/1754419/ (usar Mouse, Click, Cursores)

Beginner Web

Cita de: EdePC en 23 Diciembre 2018, 22:09 PM
- Veo que no estás utilizando transparencia (fondo transparente) supongo que es porque has exportado la imagen como .jpg y que tus imágenes reales si tienen transparencia.

- Lo que quieres hacer recortando el "exceso de fondo" (el clásico trim) lo puedes hacer fácilmente dependiendo del programa que estés utilizando:

-- Photoshop: Imagen > Cortar
-- Gimp: Imagen > Recortar al contenido
-- Imagemagick, puede procesar miles de ficheros de una:

Código (dos) [Seleccionar]
magick mogrify -trim *.jpg
la verdad ya termine de darle vida a los personajes solo me quedaria programar el videojuego
7w7