Autor Tema: PixelPush - Herramienta Web para trabajar Pixel Art  (Leído 840 veces)

Desconectado ilovepixel

  • PHPer@ Fijo
  • ***
  • Mensajes: 149
  • Karma: 9
  • Sexo: Masculino
  • Game Artist & Developer
    • Ver Perfil
    • i ■ pixel
PixelPush - Herramienta Web para trabajar Pixel Art
« en: 06 de Noviembre de 2012, 07:12:37 am »
Hola, quería presentarles mi proyecto de tiempo libre. Lo programé hoy en la tarde así que aún tiene muchos bugs.

PixelPush está apuntando  a la gente que gusta de trabajar haciendo pixel-art por ende todas las herramientas que incluye y va a incluir apuntan a facilitar el trabajo de este.

Por ahora es una simple app para dibujar con selección de colores de una paleta y un sistema básico de capas.



Acá hay algo de info/bugs/futuras ideas sobre la herramienta:

Cosas que funcionan:
- Un sistema básico de Capas // Agregar/Quitar/Borrar
- Selección de colores de la paleta y el canvas.
- Rellenar y Borrar áreas de color seleccionado.
- Generar una imagen que puede ser guarda.
- Preview.
- Undo con CTRL-Z. Hasta 100 undos.

Cosas que no funcionan bien:

- Si cambias de capa se borra el historial de undos.
- Si seleccionas un color del canvas solo elige un color de la capa activa.
- La paleta de colores es un asco.
- Rellenar y Borrar áreas es bastante lento y buggeado.
- No se puede cambiar el tamaño del canvas.
- Solo "funciona" en Chrome.
- Otras cosas que ya ni recuerdo.

Cosas que agregaré en una proxima actualización

- Sistema de capas mucho mas complejo [ Alpha/Visibilidad/Mover arriba o abajo/Imagen de muestra/mas.
- Un botón de guardar imagen directamente.
- Cambiar el tamaño del canvas.
- Zoom in/out.
- Frames para crear animaciones.
- Guardar GIF animados.
- Guardar animaciones como Sprite Sheet.
- Mejor sistema de paleta de colores.
- Mas brushes.
- Mejorar el rendering.
- Lineas rectas/Rectángulos/Circulos.
- Colores con alpha.
- Cargar imagen del PC.
- Cargar image de URL.
- Muchos mas, espero.

Pueden probar la herramienta acá:  http://shin.cl/pix/

Comunidad PHPeros

PixelPush - Herramienta Web para trabajar Pixel Art
« en: 06 de Noviembre de 2012, 07:12:37 am »

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Re:PixelPush - Herramienta Web para trabajar Pixel Art
« Respuesta #1 en: 07 de Noviembre de 2012, 04:00:01 am »
Antes (No se si ahora), existía un sitio web algo similar a lo que tu planteas pero desarrollado en AS3.
La verdad es que no recuerdo el nombre, tratare de buscarlo en este foro (recuerdo llegar a publicar algo referente a esto), el caso es que el otro aparte de que era online (Podías crear diferentes espacios, hacerlos públicos o privados, etc), las opciones mas avanzadas como transparencias, tipos de trazado, etc. eran como decir "opciones premium", tenias que pagar la afiliación para poder llegar a usarlas.

El hecho es que el dueño del "espacio" podía asignar a los usuarios una capa en particular (Por cuestiones de seguridad, para que no llegara un troll a arruinar tu diseño), o bien darle mas "privilegios", todos los trazos se iban mostrando en tiempo real junto con un "puntero virtual" que mostraría el nombre de ese usuario.

Una sugerencia que te doy. Si esto lo quieres hacer formal, deberías de tomar en consideración todo lo bueno de ese proyecto y lo que le falta por solucionar para llegar a plantear algo nuevo.

Saludos y suerte en el proyecto!
Twitter: @JoakoM010



Desconectado ilovepixel

  • PHPer@ Fijo
  • ***
  • Mensajes: 149
  • Karma: 9
  • Sexo: Masculino
  • Game Artist & Developer
    • Ver Perfil
    • i ■ pixel
Re:PixelPush - Herramienta Web para trabajar Pixel Art
« Respuesta #2 en: 07 de Noviembre de 2012, 05:38:53 am »


Una pequeña actualización.

- He mejorado un poco el sistema de capas, ahora se puede activar o desactivar la visibilidad, puedes mover las capas hacia arriba o abajo en la lista.
- El algoritmo de dibujo está mejorado.
- Cada capa tiene un historial independiente.
- Puedes guardar la imagen en el local storage y poder cargarlo en una sesión mas tarde.


Tengo pensado escribir de nuevo todo ya que hice todo en un día y para ser sincero está bien cochino, realmente no me preocupé por eso y muchas veces me pasa que me topo con un bug o error y no sé de donde sale. Aprovechando eso re diseñaré el sistema de capas y trataré de que todo corra mas suave.

@Joaquín
Gracias!
Voy a buscar la web que dices. Yo la verdad estoy apuntando a crear una herramienta que se acomode a mis necesidades para cuando trabajo creando pixel-art para juegos, por eso quiero agregar frames y guardar animaciones como sprite-sheet. No tengo mucho interes en que sea un servicio o que la gente tenga privilegios o no, es mas que nada un paint en la web ademas de ser un proyecto de aprendizaje personal.

http://shin.cl/pix/

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Re:PixelPush - Herramienta Web para trabajar Pixel Art
« Respuesta #3 en: 07 de Noviembre de 2012, 19:24:47 pm »


Una pequeña actualización.

- He mejorado un poco el sistema de capas, ahora se puede activar o desactivar la visibilidad, puedes mover las capas hacia arriba o abajo en la lista.
- El algoritmo de dibujo está mejorado.
- Cada capa tiene un historial independiente.
- Puedes guardar la imagen en el local storage y poder cargarlo en una sesión mas tarde.


Tengo pensado escribir de nuevo todo ya que hice todo en un día y para ser sincero está bien cochino, realmente no me preocupé por eso y muchas veces me pasa que me topo con un bug o error y no sé de donde sale. Aprovechando eso re diseñaré el sistema de capas y trataré de que todo corra mas suave.

@Joaquín
Gracias!
Voy a buscar la web que dices. Yo la verdad estoy apuntando a crear una herramienta que se acomode a mis necesidades para cuando trabajo creando pixel-art para juegos, por eso quiero agregar frames y guardar animaciones como sprite-sheet. No tengo mucho interes en que sea un servicio o que la gente tenga privilegios o no, es mas que nada un paint en la web ademas de ser un proyecto de aprendizaje personal.

http://shin.cl/pix/

Seria ademas bueno que el usuario pudiera renombrar los layers y quizás un pick para seleccionar un color en el lienzo.

Saludos!
Twitter: @JoakoM010



Desconectado ilovepixel

  • PHPer@ Fijo
  • ***
  • Mensajes: 149
  • Karma: 9
  • Sexo: Masculino
  • Game Artist & Developer
    • Ver Perfil
    • i ■ pixel
Re:PixelPush - Herramienta Web para trabajar Pixel Art
« Respuesta #4 en: 07 de Noviembre de 2012, 22:43:59 pm »
Seria ademas bueno que el usuario pudiera renombrar los layers y quizás un pick para seleccionar un color en el lienzo.

Saludos!

Estoy trabajando en una nueva versión, re escribiendo  y re estructurando todo de una mejor forma. En la nueva versión las capas tendrán un id  personal el cual podrá ser modificado. Actualmente tengo implementado el zoom in/out crear lienzos de diferentes tamaños.

Sobre el pick de color en el lienzo, eso ya está. Tienes que apretar la tecla I + boton izq del mouse para seleccionar el color del canvas.

Saludos.

Desconectado ilovepixel

  • PHPer@ Fijo
  • ***
  • Mensajes: 149
  • Karma: 9
  • Sexo: Masculino
  • Game Artist & Developer
    • Ver Perfil
    • i ■ pixel
Re:PixelPush - Herramienta Web para trabajar Pixel Art
« Respuesta #5 en: 12 de Noviembre de 2012, 04:00:00 am »
Acabo de publicar una nueva versión. Esta incluye un poco mas de cosas de las que incluía la anterior versión.
acá pueden verla:
http://shin.cl/pixelpush/

Acá pueden ver una demo simple de la herramienta siendo usada por mi:
http://www.youtube.com/watch?v=oLP7AJ90e9M

Las cosas que esta versión incluyen son:
- Dibujar al lienzo. Lápiz / Rectángulos / Lineas rectas / Rellenar y remover relleno.
- Sistema de capas. Agregar / Quitar / Borrar / Mover Arriba & Abajo / Alpha / Activar & Desactivar visibilidad / Cambiar nombre.
- Simple paleta de colores y escoger color del lienzo.
- Zoom In & Out con la rueda del mouse.
- Guardar & Cargar al almacenamiento local.

Cosas que implementaré:
- Cuadros para animar.
- Mejor soporte para navegadores.
- Tamaños de brocha.
- Selección dentro del lienzo: Copy/Paste.
- Exportar a GIF animado.
- Exportar a Sprite Sheet.
- Transparencia en los colores.
- Cargar imagen desde PC y URL.
- Mejorar Interfaz.
- Soporte para presión de tabletas Wacom.
- Un mejor rellenado.
- MOAR!!!!!

Mientras he estado trabajando con PixelPush me he topado con un par de bugs que solucionaré durante la semana, ya que tengo sueño.

Saludos :)