elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.


 


Tema destacado:


+  Foro de elhacker.net
|-+  Media
| |-+  Diseño Gráfico
| | |-+  Como crear un sprite sheet
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] 2 Ir Abajo Respuesta Imprimir
Autor Tema: Como crear un sprite sheet  (Leído 1,873 veces)
Beginner Web


Desconectado Desconectado

Mensajes: 538


youtu.be/0YhflLRE-DA


Ver Perfil
Como crear un sprite sheet
« en: 22 Diciembre 2018, 22:05 »

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:


En línea

{_id: "5ef16999f6ce240abc225ss3",
nombre: "Ana Keldysh",
nacionalidad: "Argentina",
edad: "17",
profesion: "Desarrollador Web Full Stack",
"__v": 0
}
manwan

Desconectado Desconectado

Mensajes: 38


addEvenListener('dragstart', arrastrado, false);


Ver Perfil
Re: Como crear un sprite sheet
« Respuesta #1 en: 23 Diciembre 2018, 02:35 »

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:



En línea

Beginner Web


Desconectado Desconectado

Mensajes: 538


youtu.be/0YhflLRE-DA


Ver Perfil
Re: Como crear un sprite sheet
« Respuesta #2 en: 23 Diciembre 2018, 09:47 »

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  :¬¬
En línea

{_id: "5ef16999f6ce240abc225ss3",
nombre: "Ana Keldysh",
nacionalidad: "Argentina",
edad: "17",
profesion: "Desarrollador Web Full Stack",
"__v": 0
}
EdePC
Colaborador
***
Desconectado Desconectado

Mensajes: 1.270



Ver Perfil
Re: Como crear un sprite sheet
« Respuesta #3 en: 23 Diciembre 2018, 14:00 »

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/

En línea

manwan

Desconectado Desconectado

Mensajes: 38


addEvenListener('dragstart', arrastrado, false);


Ver Perfil
Re: Como crear un sprite sheet
« Respuesta #4 en: 23 Diciembre 2018, 14:04 »

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


« Última modificación: 23 Diciembre 2018, 14:37 por manwan » En línea

Beginner Web


Desconectado Desconectado

Mensajes: 538


youtu.be/0YhflLRE-DA


Ver Perfil
Re: Como crear un sprite sheet
« Respuesta #5 en: 23 Diciembre 2018, 15:51 »

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/


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  :-(
« Última modificación: 23 Diciembre 2018, 17:33 por Beginner Web » En línea

{_id: "5ef16999f6ce240abc225ss3",
nombre: "Ana Keldysh",
nacionalidad: "Argentina",
edad: "17",
profesion: "Desarrollador Web Full Stack",
"__v": 0
}
rub'n


Desconectado Desconectado

Mensajes: 1.085


(e -> λ("live now")); tatuar -> λ("α");


Ver Perfil WWW
Re: Como crear un sprite sheet
« Respuesta #6 en: 23 Diciembre 2018, 17:59 »

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.
En línea

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 King.
Beginner Web


Desconectado Desconectado

Mensajes: 538


youtu.be/0YhflLRE-DA


Ver Perfil
Re: Como crear un sprite sheet
« Respuesta #7 en: 23 Diciembre 2018, 18:28 »

Bueno creo que terminé, gracias a estos dos videos lo he logrado


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
En línea

{_id: "5ef16999f6ce240abc225ss3",
nombre: "Ana Keldysh",
nacionalidad: "Argentina",
edad: "17",
profesion: "Desarrollador Web Full Stack",
"__v": 0
}
EdePC
Colaborador
***
Desconectado Desconectado

Mensajes: 1.270



Ver Perfil
Re: Como crear un sprite sheet
« Respuesta #8 en: 23 Diciembre 2018, 22:09 »

- 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)
« Última modificación: 23 Diciembre 2018, 23:18 por EdePC » En línea

Beginner Web


Desconectado Desconectado

Mensajes: 538


youtu.be/0YhflLRE-DA


Ver Perfil
Re: Como crear un sprite sheet
« Respuesta #9 en: 23 Diciembre 2018, 22:55 »

- 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
En línea

{_id: "5ef16999f6ce240abc225ss3",
nombre: "Ana Keldysh",
nacionalidad: "Argentina",
edad: "17",
profesion: "Desarrollador Web Full Stack",
"__v": 0
}
Páginas: [1] 2 Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
sprite [tutorial]
Diseño Gráfico
mcd 0 1,726 Último mensaje 28 Diciembre 2008, 03:45
por mcd
SQL Injection Cheat Sheet
Nivel Web
el-brujo 1 1,815 Último mensaje 1 Junio 2012, 13:59
por h3ct0r
sprite jquery
Desarrollo Web
kakashi20 1 634 Último mensaje 30 Octubre 2012, 17:26
por #!drvy
Como cargar imagen,sprite sin contorno en allegro
Programación C/C++
Guayavas 1 562 Último mensaje 13 Mayo 2018, 21:36
por Guayavas
MOVIDO: Como crear un sprite sheet
Multimedia
Songoku 0 648 Último mensaje 22 Diciembre 2018, 23:39
por Songoku
Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines