+## Quick Start
+
+1. Visit [spritemate.com](https://spritemate.com/) (or run locally with `npm run dev`)
+2. Click the **Draw** tool (or press **D**)
+3. Select a color from the **Palette** window
+4. Draw pixels on the 24×21 canvas in the **Editor** window
+5. Watch your sprite update in real-time in the **Preview** window
+6. Save your work via **File → Save** menu
+
+Try the example files in the `examples/` directory to explore features!
+
## Features
* choose from the 16 colors of the C64 palette
@@ -28,21 +38,109 @@ Video of an earlier version: https://www.youtube.com/watch?v=n59axaEQDWE
* copy, paste, duplicate
* window based GUI
* save window layout
+* VICE snapshot monitor for extracting sprites from memory dumps
* import & export Spritemate format
* import & export SpritePad 2.0 format
* import & export SpritePad 1.8.1 format
+* import VICE snapshot files (.vsf)
* export as ASM source (KICK and ACME)
* export as hex or binary notation source
+* export as BASIC 2.0 listing
* keyboard shortcuts
-## Backlog
+## Technology Stack
+
+* **TypeScript** - All source code converted to TypeScript
+* **Vite** - Modern build tool with fast development server
+* **jQuery & jQuery UI** - Window management and UI components (loaded from CDN)
+* **HTML5 Canvas** - Sprite rendering
+* **Local Storage** - Browser-based persistence for settings and window layouts
+
+No server required - runs entirely client-side in your browser.
+
+## Supported File Formats
+
+### Import Formats
+| Format | Extension | Description |
+|--------|-----------|-------------|
+| Spritemate | `.spm` | Native JSON format (recommended for work in progress) |
+| SpritePad 2.0 | `.spd` | Binary format compatible with SpritePad 2.0 |
+| SpritePad 1.8.1 | `.spr` | Legacy binary format for SpritePad 1.8.1 |
+| VICE Snapshot | `.vsf` | Memory dump from VICE emulator (for sprite extraction) |
+
+### Export Formats
+| Format | Extension | Description |
+|--------|-----------|-------------|
+| Spritemate | `.spm` | Native JSON format (recommended) |
+| SpritePad 2.0 | `.spd` | Binary format compatible with SpritePad 2.0 |
+| SpritePad 1.8.1 | `.spd` | Legacy binary format for SpritePad 1.8.1 |
+| Assembly Source | `.txt` | KICK ASS and ACME syntax, hex and binary notation |
+| BASIC 2.0 | `.bas` | BASIC 2.0 listing for direct use on C64 |
+| PNG Image | `.png` | Right-click on preview window to save sprite as image |
+
+## VICE Snapshot Monitor
+
+Spritemate includes a powerful VICE snapshot monitor written by [Elliot Tanner](https://github.com/elliot2) that allows you to extract sprite data directly from VICE emulator memory dumps. This feature is perfect for analyzing existing C64 programs or extracting sprites from games.
+
+A [tutorial video of the Snapshot Monitor](https://www.youtube.com/watch?v=UdFc7yFCZGw) can be found on youtube.
+
+### How to Use
+
+1. In VICE emulator, save a snapshot file (`.vsf` format)
+2. In Spritemate, open the **VICE Monitor** from the menu bar
+3. Load your snapshot file
+4. Use monitor commands to inspect and extract sprites
+
+### Monitor Commands
+
+| Command | Description | Example |
+|---------|-------------|---------|
+| `help` | Display all available commands | `help` |
+| `mem n` | Show memory at address n | `mem 0x400` |
+| `edit n v [...]` | Edit memory values | `edit 0x400 0x01 0x02` |
+| `vic` | Show VIC-II (graphics chip) memory | `vic` |
+| `vid The Commodore 64 sprite editor
+ + + + +- 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. -
- -- If you're unfamiliar with the Commodore 64 or haven't created sprites for it before, some stuff might strike you as odd. This is due to the technical restrictions of this computer. For example, you can use only one foreground and one background color per sprite at a resolution of 24 by 21 pixels. Even worse, that background color is shared between all sprites. You can switch to a multicolor mode giving you four colors in total, but at the downside of half the horizontal resolution (now only 12 by 21 pixels). -
-These restrictions often make creating art for the C64 a challenge. Modern painting programs do not support those modes and because of that Spritemate was created.
- - - -- An overview of the features already implemented -
-- Here are some features I'd like to work on next. If you got an idea how to improve Spritemate, let me know! -
- -| Symbol | -Shortcut | -Decription | -
|---|---|---|
| - | 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 (toggle) | -Draw pixels. Hold shift to delete pixels. | -|
| d (toggle) | -Flood fill | -|
| f | -Toggle fullscreen window mode | -|
| - | Open Settings window to change the color palette | -|
| - | Shows the documentation which you are reading right now | -|
| - | Displays the splash window | -
| Symbol | -Shortcut | -Description | -
|---|---|---|
| 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 transparent, individual color, multicolor 1 or multicolor 2 | -
| Symbol | -Shortcut | -Description | -
|---|---|---|
| - | Stretches sprite horizontally | -|
| - | Stretches sprite vertically | -|
| - | Overlays the next sprite | -|
| - | Zooms window in/out | -
| Symbol | -Shortcut | -Description | -
|---|---|---|
| - | Create new sprite | -|
| - | Remove selected sprite | -|
| - | Copy sprite | -|
| - | Paste sprite | -|
| - | Toggles grid display on/off | -|
| - | Zooms window in/out | -|
| - | cursor left & right | -cycle through sprite list | -
Spritemate supports various file formats, each with a dedicated use case.
- - - -This should be pretty straight forward as Spritemate identifies the file format by its suffix. Just make sure that the file suffix (like *.spd for SpritePad data) matches the ones listed below.
- - - -When saving data, choose the file format which suits your use case the best. Note that you can enter a name for your file in the save dialog, but you can't choose where to save it to. Due to browser security (which is a good thing), your file is saved to the default download location of your browser. Chances are you're a smart kid, so you'll figure that out.
- -JSON file format and therefore quite handy if you like to play around with the generated data on a modern platform. Also the only option that saves all your work and keeps information unique to this editor, like sprite overlays. Generally the recommended file format as long as you're not finished working on your sprites yet.
- -SpritePad is probably the most common sprite editing software on Windows. Files are saved as C64 compatible binaries, with minor differences:
-SpritePad 1.8.1: saves your sprite data including color information and simple sprite overlays (overlay next sprite). Not recommended if you work with overlay lists as this information can't be handled by SpritePad. Recommended if you want a standard, slim binary to import into your C64 assembly project.
-SpritePad 2.0: pretty similar to 1.8.1, but with the addition of storing animation information. Spritemate can read and write this format, but be aware that since animation is not a feature yet, that data is ignored when imported from SpritePad.
- -Gives you a text file containing 6502 assembly code to import right into your C64 projects. Syntax formatting for KICK Assembler and ACME Assembler is provided, choose your favorite.
- - - - -Spritemate video tutorial on YouTube
-- Download & fork Spritemate on Github: github.com/Esshahn/spritemate
-Ingo Hinterding: awsm on csdb, my website www.awsm.de and Twitter: @awsm9000
- -Report bugs, ideas & requests to ingo (at) awsm (dot) de
- -The Commodore 64 sprite editor, v${this.config.version.toFixed( - 2 - )}
- - - - -