spritemate
1.0.0
Spritemate es un nuevo editor de sprites para el Commodore 64. Funciona con la mayoría de los navegadores modernos en Windows, Mac y Linux y es puro JavaScript y HTML, sin complementos. Todos los datos se procesan solo en el lado del cliente. Spritemate admite la importación y exportación de los formatos de archivo más comunes para el Commodore 64 (por ejemplo, Spritepad) y puede usarse como visor y editor en casi cualquier dispositivo con un navegador.
Spritemate todavía está en desarrollo. Si le gusta, avíseme;) no dude en enviar solicitudes de extracción o enviar ideas, errores, solicitudes en la sección de problemas. ¡Salud!
Última versión estable: https://spritemate.com/
Versión beta: https://beta.spritemate.com/
Video de una versión anterior: https://www.youtube.com/watch?v=n59axaeqdwe
Usar npm
$ npm install
$ npm run dev
| Símbolo | Atajo | Función |
|---|---|---|
 | - | Carga un archivo. Formatos soportados: Spritemate (SPM), Spritepad (SPD, SPR) |
 | - | Guarda un archivo. Formatos compatibles: Spritemate (SPM), Spritepad 2.0 y 1.8.1 (SPD), Fuente ASM (TXT) |
 | z | Deshacer. Para cuando te arruinaste. |
 | cambio + z | Rehacer. Porque cuando te diste cuenta de que no era tan malo |
 | d | Dibujar píxeles |
 | F | Llenado de inundación |
 | mi | borrador |
 | metro | mover |
| Símbolo | Atajo | Función |
|---|---|---|
 | metro | Alternar entre el modo single y multicolor |
 | - | Shift Sprite a la izquierda |
 | - | Cambiar el sprite a la derecha |
 | - | Cambiar de sprite hacia arriba |
 | - | Cambiar de sprite hacia abajo |
 | - | Flip Sprite horizontal |
 | - | Flip Sprite vertical |
 | - | Pantalla/desactivación de la pantalla de alternativa |
  | - | Ventana de Zooms In/Out |
| 1,2,3,4 | Seleccione color individual, transparente, multicolor 1 o multicolor 2 | |
| Shift + Mouse | Eliminar píxel |
| Símbolo | Atajo | Función |
|---|---|---|
 | - | Estiros sprite horizontalmente |
 | - | Estiras sprite verticalmente |
 | - | Superposición Next Sprite |
| - | Ventana de Zooms In/Out |
| Símbolo | Atajo | Función |
|---|---|---|
 | - | Crea un nuevo sprite |
 | - | Eliminar sprite seleccionado |
 | - | Copiar sprite |
 | - | Pasta sprite |
| - | Pantalla/desactivación de la pantalla de alternativa |
| - | Ventana de Zooms In/Out |
| cursor izquierdo y derecho | Ciclo a través de la lista de sprites |
Inicialmente, quería eliminar la interfaz de usuario jQuery y jQuery de este proyecto y reemplazarla con Vanilla JS. El tiempo de construcción había crecido a 10 segundos, lo que me pareció bastante molesto. Replicar la funcionalidad modal de JQuery fue más desafiante de lo previsto, por lo tanto, decidí excluir a JQuery del paquete JS nuevamente y cargarlo del CDN. Esto redujo enormemente el tiempo de compilación a menos de 4 segundos. En general, la aplicación sigue siendo extremadamente pequeña, con el código de la aplicación principal alrededor de 20kb y jQuery alrededor de 98 kb.
Tenga en cuenta que se introdujeron dos cambios con la función de nomenclatura de sprite: los sprites comienzan con el número de índice 0 en lugar de 1, por ejemplo, el primer sprite se llama "sprite_0" en lugar de "sprite_1". Esto era necesario para la consistencia y mi cordura personal: internamente el número de índice siempre fue 0 en lugar de 1. El otro cambio es que los datos de sprites exportados como ASM o archivo básico ya no etiquetarían los sprites incrementando el índice. Esto significa que un sprite mantendría su nombre sin importar si lo clasifica en la lista de sprites a una posición diferente (lo que parece obvio, pero no era así antes).
La función de nomenclatura de sprite es compatible con versiones anteriores, por lo que cuando carga un archivo SPM anterior, se aplicarán los nombres predeterminados.
El invertido Sprite (o "negativo" en Spritepad) puede verse un poco extraño en modo multicolor, pero eso no es un error. En Singlecolor, un 0 (transparente) se reemplaza por un 1 (píxel) y viceversa, pero en Multicolor tenemos dos colores más. Spritemate cambia los colores 3 y 4 en este caso, tal como lo hace Spritepad.
Esto puede ser útil cuando se trabaja con varios archivos. También un buen indicador si el archivo aún no se ha guardado. Tenga en cuenta que debido a la naturaleza cómo los navegadores guardan archivos y sistemas operativos manejan la seguridad, un archivo puede guardar con un nombre ligeramente diferente si ya existe el mismo nombre de archivo en la ubicación de descarga (por ejemplo, "mysprites (1) .spm" en lugar de "mysprites.spm").
La barra de menú parece funcionar mal para algunas configuraciones, pero el problema actualmente no es reproducible. Thx2 a Leissa para pruebas adicionales y descubrir que apagar el "bloqueo de contenido" en Firefox podría solucionar el problema. Si encuentra un problema reproducible con la barra de menú, informe la descripción aquí: https://github.com/esshahn/spritemate/issues
Este lanzamiento se centra en una mejor usabalidad. Si bien técnicamente no se agregaron características, el flujo de trabajo general debería ser mejor ahora. Por ejemplo, en lugar de tener cuatro íconos diferentes para cambiar un sprite hacia arriba, hacia abajo, hacia la izquierda o hacia la derecha, la nueva herramienta Move le permite hacerlo más intuitivo ahora. Como efecto secundario, menos íconos complican la interfaz de usuario.
La opción de borrar los píxeles ha estado en Spritemate antes (al mantener presionado 'desplazamiento' mientras se dibuja), pero ahora la herramienta 'Eraser' hace que sea más visible y más fácil de usar en un flujo de trabajo con una sola mano.
Se ha introducido una nueva opción para duplicar un sprite. Esto fue previamente posible mediante una combinación de 'copia', 'nueva' y 'pegar' (y el nuevo duplicado es de hecho exactamente esto), pero esto debería aumentar a una experiencia más intuitiva.
Hay otras mejoras, como el icono 'basura' visualmente más distinguible para eliminar un sprite. Todo combinado, Spritemate debe comenzar a sentirse más familiarizado si está acostumbrado a otros programas de pintura como Photoshop.
Aunque no se habían agregado muchas características, me llevó bastante tiempo terminar este lanzamiento. Tuve que revertir mucho código para una nueva característica realmente genial que no pude trabajar de manera confiable. Debido a eso, tuve que mantener dos ramas de código y características de fondo en la versión estable. Finalmente decidí poner la nueva característica en espera y centrarme en otros.
No tuve la oportunidad de trabajar en Spritemate durante meses debido a que mis cosas comerciales chuparon todo mi tiempo libre. Además, la retroalimentación se detuvo recientemente, lo que tampoco me motivó demasiado. Finalmente revisé el tráfico para el spritemate y me sorprendió la cantidad constante de usuarios. Así que decidí dedicar más tiempo a este proyecto nuevamente. En cualquier caso, si te gusta Spritemate, puedes marcar una gran diferencia haciéndome saber, ya sea por correo (Ingo en AWSM DOT DE) o enviándome un tweet ( @AWSM9000). ¡Déjame saber cómo puedo hacer que Spritemate sea mejor para ti!
Spritemate guarda la configuración localmente ahora. Puede funcionar un poco inestable y sé al menos un caso en el que funciona el código, pero no debe en cuanto a mi comprensión (pero quién soy yo para juzgar al desarrollador ...). De todos modos, la base para más opciones de configuración se ha establecido para futuras actualizaciones.
Spritemate ahora está en beta pública. Gracias a todos los probadores beta que ayudaron a encontrar errores y sugerir características y mejoras. Consulte la documentación en GitHub para obtener una descripción general de la función.
Las acciones más comunes han recibido teclas de acceso rápido para acceso rápido. El uso de teclas de acceso rápido en un navegador siempre es un poco complicado, ya que el navegador toman muchas combinaciones (como CMD/CTRL + C para "Copiar"). Por lo tanto, algunos atajos pueden parecer menos intuitivos. Estas funciones están disponibles presionando las teclas ahora:
(1,2,3,4) - Establezca uno de los cuatro bolígrafos/colores disponibles (f) - Toggle FullScreen On/Off (D) - Alternar entre los modos de "dibujar" y "llenar" (z) - deshacer, (shift + z) = redo (m) - togar singleColor/multicolor (cursor izquierda, derecha) - navegar a través de la lista sprite (thx2 wiebo)
Alternar superposiciones de sprite en la ventana de vista previa. El siguiente sprite se usará como superposición. La ventana de vista previa muestra tanto los sprites como la ventana del editor muestra el otro sprite con una visibilidad reducida (como el desollado de cebolla). Tenga en cuenta que actualmente la información de superposición de sprite se almacena solo en formato de spritemate nativo.
