spritemate
1.0.0
Spritemate ist ein neuer Sprite -Editor für den Commodore 64. Es arbeitet mit den meisten modernen Browsern unter Windows, Mac und Linux zusammen und ist reine JavaScript und HTML - keine Plugins. Alle Daten werden nur auf der Client -Seite verarbeitet. Spritemate unterstützt das Import und den Export der häufigsten Dateiformate für den Commodore 64 (z. B. Spritzad) und kann als Zuschauer und Editor auf nahezu jedem Gerät mit einem Browser verwendet werden.
Spritemate ist noch in der Entwicklung. Wenn Sie es mögen, lassen Sie es mich wissen;) Sie können Sie gerne Pull -Anfragen oder Ideen, Fehler, Anfragen im Abschnitt "Ausgaben" einreichen. Prost!
Neueste stabile Version: https://spritemate.com/
Beta -Version: https://beta.spritemate.com/
Video einer früheren Version: https://www.youtube.com/watch?v=N59AXAEQDWE
Verwenden Sie npm
$ npm install
$ npm run dev
| Symbol | Abkürzung | Funktion |
|---|---|---|
 | - - | Lädt eine Datei. Unterstützte Formate: Spritemate (SPM), Spritepad (SPD, SPR) |
 | - - | Speichert eine Datei. Unterstützte Formate: Spritemate (SPM), Spritepad 2.0 & 1.8.1 (SPD), ASM Source (TXT) |
 | z | Rückgängig machen. Denn wenn Sie es vermasselt haben. |
 | Verschiebung + z | Wiederholen. Denn als Sie merkten, dass es nicht so schlimm war |
 | D | Pixel zeichnen |
 | F | Überschwemmungsfüllung |
 | e | Radiergummi |
 | M | bewegen |
| Symbol | Abkürzung | Funktion |
|---|---|---|
 | M | Wechseln Sie zwischen Singlecolor und Multicoloror -Modus |
 | - - | Schaltsprite links |
 | - - | Verschiebung Sprite rechts |
 | - - | Schichtsprite hoch |
 | - - | Schichtsprite nach unten |
 | - - | Flip Sprite Horizontal |
 | - - | Flip Sprite vertikal |
 | - - | Schaltet die Rasteranzeige ein/aus |
  | - - | Zoomsfenster ein-/aus |
| 1,2,3,4 | Wählen Sie individuelle Farbe, transparent, Multicolor 1 oder Multicolor 2 | |
| Verschiebung + Maus | Pixel löschen |
| Symbol | Abkürzung | Funktion |
|---|---|---|
 | - - | Strecken Sprite horizontal |
 | - - | Strecken Sprite vertikal |
 | - - | Overlay Nächstes Sprite |
| - - | Zoomsfenster ein-/aus |
| Symbol | Abkürzung | Funktion |
|---|---|---|
 | - - | Neue Sprite erstellen |
 | - - | Ausgewählte Sprite löschen |
 | - - | Kopieren Sie Sprite |
 | - - | Paste Sprite |
| - - | Schaltet die Rasteranzeige ein/aus |
| - - | Zoomsfenster ein-/aus |
| Cursor links und rechts | Fahrrad durch Sprite -Liste |
Anfangs wollte ich JQuery und JQuery UI aus diesem Projekt entfernen und es durch Vanille -JS ersetzen. Die Bauzeit war auf 10 Sekunden gewachsen, was ich ziemlich ärgerlich fand. Die Wiederholung von Jquerys modaler Funktionalität war schwieriger als erwartet. Daher habe ich mich entschlossen, JQuery erneut aus dem JS -Bundle auszuschließen und es vom CDN zu laden. Dies reduzierte die Kompilierungszeit auf weniger als 4 Sekunden. Insgesamt bleibt die App extrem klein und der Haupt -App -Code um 20 KB und JQuery um 98 KB.
Beachten Sie, dass zwei Änderungen mit der Sprite -Namens -Funktion eingeführt wurden: Sprites beginnen mit der Indexnummer 0 anstelle von 1, z. B. wird der erste Sprite "Sprite_0" anstelle von "Sprite_1" genannt. Dies war für die Konsistenz und meine persönliche Vernunft erforderlich - intern war die Indexnummer immer 0 anstelle von 1. Die andere Änderung besteht darin, dass Sprite -Daten, die als ASM- oder Basisdatei exportiert wurden, die Sprites nicht mehr durch Inkrementierungsindex kennzeichnen würden. Dies bedeutet, dass ein Sprite seinen Namen behalten würde, egal ob Sie ihn in der Sprite -Liste in eine andere Position sortieren (was offensichtlich erscheint, aber vorher nicht so war).
Die Sprite -Benennungsfunktion ist rückwärts kompatibel. Wenn Sie also eine ältere SPM -Datei laden, werden Standardnamen angewendet.
Der Sprite -Invert (oder "negativ" in Spritepad) sieht im mehrfarbigen Modus etwas seltsam aus, aber das ist kein Fehler. In Singlecolor wird ein 0 (transparent) durch ein 1 (Pixel) ersetzt und umgekehrt, aber in mehrfacher Löschung haben wir zwei weitere Farben. Spreitemate Switches Farben 3 und 4 in diesem Fall, genau wie Spriitepad.
Dies kann sich bei der Arbeit mit mehreren Dateien als hilfreich erweisen. Auch ein guter Indikator, wenn die Datei noch nicht gespeichert wurde. Beachten Sie, dass aufgrund der Art, wie Browser Dateien und Betriebssysteme speichern, die Sicherheit speichern, eine Datei möglicherweise mit einem etwas anderen Namen speichert, wenn derselbe Dateiname bereits im Download -Speicherort vorhanden ist (z. B. "MySprites (1) .spm" anstelle von "mysprites.spm").
Die Menüleiste scheint für einige Setups zu fehlzuingen, aber das Problem ist derzeit nicht reproduzierbar. THX2 nach Leissa für zusätzliche Tests und herauszufinden, dass das Ausschalten des "Inhaltsblockierens" in Firefox das Problem beheben kann. Wenn Sie mit der Menüleiste auf ein reproduzierbares Problem stoßen, melden Sie die Beschreibung hier: https://github.com/esshahn/spritemate/issues
Diese Veröffentlichung konzentriert sich auf eine bessere USabalität. Obwohl technisch keine Funktionen hinzugefügt wurden, sollte der gesamte Workflow jetzt besser sein. Anstatt vier verschiedene Symbole für das Verlagerung eines Sprites, nach unten, nach links oder rechts zu haben, können Sie dies jetzt intuitiver machen. Als Nebeneffekt erschweren weniger Symbole die Benutzeroberfläche.
Die Option, Pixel zu löschen, war schon einmal in Spritemate (durch das Down-Verschiebung "während des Zeichnens), aber jetzt macht es das" Radiergummi-Tool "sichtbarer und einfacher in einem einhändigen Workflow zu verwenden.
Eine neue Option zum Duplizieren eines Sprite wurde eingeführt. Dies war bisher durch eine Kombination aus "Kopie", "neu" und "Paste" (und das neue Duplikat ist genau das genau das), dies sollte jedoch zu einer intuitiveren Erfahrung führen.
Es gibt andere Verbesserungen, wie das visuell unterscheidbarere "Müll" -Symbol zum Löschen eines Sprite. Alle kombinierten, Springemate sollte sich besser vertraut fühlen, wenn Sie an andere Lackprogramme wie Photoshop gewöhnt sind.
Obwohl nicht viele Funktionen hinzugefügt worden waren, habe ich eine ganze Weile gebraucht, um diese Veröffentlichung zu beenden. Ich musste viel Code für eine wirklich coole neue Funktion zurückversetzen, die ich nicht zuverlässig zur Arbeit machte. Aus diesem Grund musste ich zwei Code -Zweige und Backport -Funktionen in der stabilen Version verwalten. Ich habe mich schließlich entschlossen, das neue Feature auf Eis zu stellen und sich stattdessen auf andere zu konzentrieren.
Ich hatte keine Chance, monatelang an Spraitemate zu arbeiten, weil meine kommerziellen Sachen meine ganze Freizeit absaugen. Außerdem hörte das Feedback in letzter Zeit auf, was mich auch nicht zu sehr motivierte. Schließlich überprüfte ich den Verkehr auf Sprüche und war über die stetige Anzahl von Benutzern überrascht. Also habe ich mich entschlossen, dieses Projekt erneut mehr Zeit zu widmen. Wenn Sie Spritemate mögen, können Sie auf jeden Fall einen verdammt guten Unterschied machen, indem Sie mich wissen lassen, entweder per Post (ingo bei awsm dot de) oder indem Sie mir einen Tweet ( @AWSM9000) senden. Lassen Sie mich wissen, wie ich Spectemate für Sie verbessern kann!
Spritemate spart jetzt lokal Einstellungen. Es mag noch ein bisschen wackelig funktionieren und ich weiß über mindestens einen Fall, in dem der Code funktioniert, aber nicht mein Verständnis (aber wer bin ich, um den Entwickler zu beurteilen ...). Auf jeden Fall wurde die Grundlage für weitere Konfigurationsoptionen für zukünftige Updates gelegt.
Spritemate ist jetzt in der öffentlichen Beta. Vielen Dank an alle Beta -Tester, die bei der Suche nach Fehlern und Vorschlägen von Funktionen und Verbesserungen geholfen haben. Bitte lesen Sie die Dokumentation in GitHub, um einen Funktionsüberblick zu erhalten.
Die häufigsten Aktionen haben Hotkeys für einen schnellen Zugang erhalten. Die Verwendung von Hotkeys in einem Browser ist immer etwas schwierig, da viele Kombinationen vom Browser genommen werden (wie CMD/Strg + C für "Kopie"). Daher mögen einige Abkürzungen weniger intuitiv erscheinen. Diese Funktionen sind jetzt durch Drücken von Tasten verfügbar:
(1,2,3,4) - Setzen Sie eines der vier verfügbaren Stifte/Farben (f) - Vollbildmodi einschalten (d) - Wechseln Sie zwischen "Zeichnen" und "Füllen" -Modi (z) - undo, (Shift + z) = Redo (M) - Toggle Singlecolor/Multicolor (Cursor Links, rechts) - Navigat durch Sprite -List (thx2 wiebo) (thx2 wiebo) (thx2 wiebo)).
Überlagerungen des Sprite -Sprite im Vorschau -Fenster. Das folgende Sprite wird als Overlay verwendet. Das Vorschau -Fenster zeigt beide Sprites und das Editor -Fenster zeigt das andere Sprite mit reduzierter Sicht (wie Zwiebelhäuten). Bitte beachten Sie, dass derzeit Sprite -Overlay -Informationen nur im nativen Spritemate -Format gespeichert werden.
