Code Monkey home page Code Monkey logo

spritemate's Introduction

Spritemate

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: http://spritemate.com/

Beta version: http://beta.spritemate.com/

Video of an earlier version: https://www.youtube.com/watch?v=n59axaEQDWE

Features

  • choose from the 16 colors of the C64 palette
  • draw pixels on a 24x21 pixel (singlecolor) or 12x21 pixel (multicolor) canvas
  • C64 mode restrictions (number of colors per sprite, global sprite colors)
  • delete, fill, shift left, right, up, down, flip horizontal & vertical, move, erase
  • check your sprite in the preview window
  • display grid in editor
  • multiple sprites
  • double width & height sprites
  • stacked sprite layers (sprite overlays)
  • sprite sorting
  • undo & redo
  • copy, paste, duplicate
  • window based GUI
  • save window layout
  • import & export Spritemate format
  • import & export SpritePad 2.0 format
  • import & export SpritePad 1.8.1 format
  • export as ASM source (KICK and ACME)
  • export as hex or binary notation source
  • keyboard shortcuts

Backlog

  • animation
  • export animation as GIF
  • import & export PNG images
  • select and move pixels
  • touch controls and tablet optimization
  • and tons of other stuff

Menu toolbar

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

Editor window

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

Preview window

Symbol Shortcut Function
- Stretches sprite horizontally
- Stretches sprite vertically
- Overlay next sprite
- Zooms window in/out

Sprite list window

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

Some useful hints

  • Rearrange sprites by dragging them to the desired position
  • Save a sprite as PNG by right clicking on the Preview window image

How to run

You can use yarn to run this project locally

$ cd spritemate
$ yarn
$ yarn start

Or use npm

$ cd spritemate
$ npm install
$ npm start

History

Check out the "about" menu option in Spritemate to get a release changelog.

spritemate's People

Contributors

andrea avatar esshahn avatar mist64 avatar nurpax avatar zoeb avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.