Foro de elhacker.net

Media => Diseño Gráfico => Mensaje iniciado por: Beginner Web en 22 Diciembre 2018, 22:05 pm



Título: Como crear un sprite sheet
Publicado por: Beginner Web en 22 Diciembre 2018, 22:05 pm
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:


Título: Re: Como crear un sprite sheet
Publicado por: manwan en 23 Diciembre 2018, 02:35 am
 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:


Título: Re: Como crear un sprite sheet
Publicado por: Beginner Web en 23 Diciembre 2018, 09:47 am
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  :¬¬


Título: Re: Como crear un sprite sheet
Publicado por: 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
  1. 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/

(https://i.ibb.co/vYSTzYb/imagemagick-sprite.png)


Título: Re: Como crear un sprite sheet
Publicado por: manwan en 23 Diciembre 2018, 14:04 pm
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




Título: Re: Como crear un sprite sheet
Publicado por: Beginner Web en 23 Diciembre 2018, 15:51 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
  1. 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/

(https://i.ibb.co/vYSTzYb/imagemagick-sprite.png)
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
(https://i.ibb.co/kQt6d6V/9-copia.jpg)
Y quiero esto
(https://i.ibb.co/f05bkwZ/9.jpg)
Si ya se que recortando pero no tengo buena precision ademas que son 3 personajes con varios movimientos  :-(


Título: Re: Como crear un sprite sheet
Publicado por: rub'n en 23 Diciembre 2018, 17:59 pm
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.


Título: Re: Como crear un sprite sheet
Publicado por: Beginner Web en 23 Diciembre 2018, 18:28 pm
Bueno creo que terminé, gracias a estos dos videos lo he logrado
8oEGTT09utg
wV6-fetGDG4
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 (http://www.lolotaku.com/upload/gif/18737.gif)


Título: Re: Como crear un sprite sheet
Publicado por: EdePC en 23 Diciembre 2018, 22:09 pm
- 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
  1. 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)


Título: Re: Como crear un sprite sheet
Publicado por: Beginner Web en 23 Diciembre 2018, 22:55 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
  1. magick mogrify -trim *.jpg
la verdad ya termine de darle vida a los personajes solo me quedaria programar el videojuego
(https://i.ibb.co/2sZcgkN/936354-copia.png)


Título: Re: Como crear un sprite sheet
Publicado por: manwan en 23 Diciembre 2018, 23:18 pm
Citar
Imagemagick, puede procesar miles de ficheros de una...

Recuerdo que había descargado esa aplicación para Ubuntu Xenial, nunca le había visto una utilidad. Sinceramente no pensé que fuera tan útil...  :)