spritemate is a browser based sprite editor for the Commodore 64
Spritemate is a new sprite editor for the Commodore 64. It works with most modern browsers on Windows, Mac and Linux and is pure JavaScript and HTML - no plugins. All data is processed on client side only. Spritemate supports importing and exporting of the most common file formats for the Commodore 64 (e.g. SpritePad) and can be used as viewer and editor on almost any device with a browser.
Spritemate is still in development. If you like it, let me know ;) Feel free to submit pull requests or submit ideas, bugs, requests in the issues section. Cheers!
Latest stable version: https://spritemate.com/
Beta version: https://beta.spritemate.com/
Video of an earlier version: https://www.youtube.com/watch?v=n59axaEQDWE
You can use yarn
to run this project locally
$ cd spritemate
$ yarn
$ yarn run dev
Or use npm
$ cd spritemate
$ npm install
$ npm run dev
Symbol | Shortcut | Function |
---|---|---|
- | Loads a file. Supported formats: Spritemate (SPM), SpritePad (SPD, SPR) |
|
- | Saves a file. Supported formats: Spritemate (SPM), SpritePad 2.0 & 1.8.1 (SPD), ASM source (TXT) |
|
z | Undo. For when you screwed up. | |
shift + z | Redo. For when you realized it wasn't that bad | |
d | Draw pixels | |
f | Flood fill | |
e | eraser | |
m | move |
Symbol | Shortcut | Function |
---|---|---|
m | Toggle between singlecolor and multicolor mode | |
- | Shift sprite left | |
- | Shift sprite right | |
- | Shift sprite up | |
- | Shift sprite down | |
- | Flip sprite horizontal | |
- | Flip sprite vertical | |
- | Toggles grid display on/off | |
- | Zooms window in/out | |
1,2,3,4 | Select individual color, transparent, multicolor 1 or multicolor 2 | |
shift + mouse | delete pixel |
Symbol | Shortcut | Function |
---|---|---|
- | Stretches sprite horizontally | |
- | Stretches sprite vertically | |
- | Overlay next sprite | |
- | Zooms window in/out |
Symbol | Shortcut | Function |
---|---|---|
- | Create new sprite | |
- | Delete selected sprite | |
- | Copy sprite | |
- | Paste sprite | |
- | Toggles grid display on/off | |
- | Zooms window in/out | |
cursor left & right | cycle through sprite list |
Initially I wanted to remove jQuery and jQuery UI from this project and replace it with Vanilla JS. Build time had grown to 10 seconds, which I found quite annoying. Replicating jQuery's modal functionality was more challenging than anticipated, therefore I decided to exclude jQuery from the JS bundle again and load it from the CDN. This greatly reduced compile time to under 4 seconds. Overall the app remains extremely small, with the main App code around 20kb and jQuery around 98kb.
Note that two changes were introduced with the sprite naming feature: sprites start with index number 0 instead of 1, e.g. the first sprite is called "sprite_0" instead of "sprite_1". This was necessary for consistancy and my personal sanity - internally the index number always was 0 instead of 1. The other change is that sprite data exported as ASM or BASIC file would not label the sprites by incrementing index anymore. This means that a sprite would keep its name no matter if you sort it in the sprite list to a different position (which seems obvious, but wasn't like this before).
The sprite naming feature is backwards compatible, so when you load an older SPM file, default names will be applied.
The sprite invert (or "negative" in SpritePad) might look a bit strange in multicolor mode, but that's no bug. In singlecolor, a 0 (transparent) gets replaced by a 1 (pixel) and vice versa, but in multicolor we have two more colors. Spritemate switches colors 3 and 4 in this case, just as SpritePad does.
This can prove helpful when working with several files. Also a good indicator if the file hasn't been saved yet. Note that due to the nature how browsers save files and operating systems handle security, a file might save with a slightly different name if the same file name already exists in the download location (e.g. "mysprites (1).spm" instead of "mysprites.spm").
The menu bar does seem to malfunction for some setups, but the issue currently is not reproducable. Thx2 to leissa for additional testing and finding out that turning off "content blocking" in Firefox might fix the problem. If you encounter a reproducable issue with the menu bar, please report the description here: https://github.com/Esshahn/spritemate/issues
This release focuses on better usabality. While technically no features were added, the overall workflow should be better now. For example, instead of having four different icons for shifting a sprite up, down, left or right, the new move tool lets you do this more intuitive now. As a side effect, less icons complicate the UI.
The option to erase pixels has been in Spritemate before (by holding down 'shift' while drawing), but now the 'eraser' tool makes it more visible and easier to use in a one-handed workflow.
A new option to duplicate a sprite has been introduced. This was previously possible by a combination of 'copy', 'new' and 'paste' (and the new duplicate is in fact exactly this), but this should add to a more intuitive experience.
There are other improvements, like the visually more distinguishable 'trash' icon to delete a sprite. All combined, Spritemate should start to feel more familiar if you are used to other paint programs like Photoshop.
Although not many features had been added, it took me quite a while to finish this release. I had to revert a lot of code for a really cool new feature that I didn't get to work reliably. Because of that, I had to maintain two code branches and backport features into the stable version. I finally decided to put the new feature on hold and focus on others instead.
I didn't get any chance to work on Spritemate for months due to my commercial stuff sucking away all my free time. Also, feedback was stopping recently, which didn't motivate me too much either. Eventually I checked the traffic for Spritemate and was suprised about the steady amount of users. So I decided to dedicate more time to this project again. In any case, if you like Spritemate, you can make a hell of a difference by letting me know, either by mail ( ingo at awsm dot de ) or by sending me a tweet ( @awsm9000 ). Let me know how I can make Spritemate better for you!
Spritemate saves settings locally now. It might work a bit wonky still and I know about at least one case where the code works but should not as to my understanding (but who am I to judge the developer...). Anyway, the foundation for more configuration options has been layed for future updates.
spritemate is now in public beta. Thanks to all the beta testers who helped find bugs and suggest features and improvements. Please check out the documentation on Github to get a feature overview.
The most common actions have received hotkeys for quick access. Using hotkeys in a browser is always a bit tricky, as many combinations are taken by the browser (like CMD/CTRL + C for "copy"). Therefore some shortcuts might seem less intuitive. These functions are available by pressing keys now:
(1,2,3,4) - set one of the four available pens/colors (f) - toggle fullscreen on/off (d) - toggle between "draw" and "fill" modes (z) - undo, (shift + z) = redo (m) - toggle singlecolor/multicolor (cursor left, right) - navigate through sprite list (thx2 Wiebo)
Toggle sprite overlays in preview window. The following sprite will be used as overlay. The preview window shows both sprites and the editor window shows the other sprite with reduced visibility (like onion skinning). Please note that currently sprite overlay information is stored in native spritemate format only.