An animation creation tool that allows users to do pixel art, and make animations from that pixel art.
You can try it out: Here!
Developed by Andrew Rubinstein, with default icon artwork done by @ThePixelSlime1 (see images/PixelSlime1Icons)
This is where you create your sprites using the tools described below. To use the pixel color left click, and to use the background color right click.
These are meant to organize animations, so that for instance if you wish to create the animations for a game you may organize the groups so each group is all the animations for one character in the game.
You can add new animation groups at any time by pressing the “Add Animation Group” button.
You can delete an existing animation group by selecting the animation you want to delete by left clicking on it, and then pressing the “Delete Animation Group” button.
You can clone, or copy an existing animation group by left clicking the animation you wish to clone to select it, and then clicking the “Clone Animation Group” button
Animations are groups of sprites(small images, for more see below) that make up a single small flip book of sprites, or frames.
You can add new animations at any time by pressing the “Add Animation” button, or when you haven’t created one yet by pressing the “Add Sprite” button.
You can delete an existing animation by selecting the animation you want to delete by left clicking on it, and then pressing the “Delete Animation” button.
You can clone, or copy an existing animation by left clicking the animation you wish to clone to select it, and then clicking the “Clone Animation” button
both will take the contents of the drawing screen, and save them to a new sprite, and save that sprite within a new animation.
You can switch between animations by clicking on them, and the animation’s sprites will show up in the sprite selector so you can update, or add to them.
You can also drag and drop animations to rearrange the order they are dislayed
The Sprite Selector is used to manage existing sprites, and save new ones to animations
To add a new sprite press the “Add Sprite” button, which will create a new sprite with the image on the drawing screen, and add it to the currently selected animation
To update an existing sprite simply press the “Save Sprite” button, and whatever is on the drawing screen will be saved to the currently selected sprite.
To delete an existing sprite simply press the “Delete Sprite” button, and the currently selected sprite will be deleted from the animation(no undoing sprite deletion).
Drag, and drop existing sprites to change their order in the animation.
The Color Palette is a tool found above the main drawing screen to select the color used for drawing.
The first two colors shown are the selected pixel, and background colors.
Around the pixel color is a red border, and around the background color is a blue one.
You can either click on the color you wish to use to select the color (right clicking will update the background color), or select by pressing one of the number keys 0-9.
When you select a color you will notice it’s red green blue, and transparency values popup in the text box in the color text box,
you can change on of these values and press Update, or the enter key to save the new color to the palette
*You can switch tools by clicking on them, or by holding alt, and pressing the up and down arrow keys.
The Pen Tool is used to draw curved lines of the color selected in the color palette, like a pen on pixelated paper.
To draw click, if the mouse is dragged while the left mouse button is held down it will act like dragging a pen across paper.
To set the width of the line the pen tool draws simply type a number into the textbox, and press enter when the desired value is reached, or press update
When this box is checked the pen tool will leave circular marks with a radius of the pen width, when it is not checked the tool will leave square shaped marks with a lenght, and width of the selected line with
This value dictates the density of the pixels drawn by the pen tool, 1 will draw a pixel everywhere, 0.1 will draw pixels 10% of the time, and so on.
The Fill Tool is used to change all adjacent pixels of one color to the color selected in the color palette.
Click on a pixel, and all adjacent pixels of the same color will change to the selected color on the color palette.
Ignore differences in alpha values when checking color.
The Line Draw Tool is used to draw straight lines on the screen.
Depress, and hold left mouse button as you drag you’ll see a preview of the line that will be drawn, release the left mouse button when you are satisfied to draw.
See Pen Tool options descriptions
The Rectangle Tool is used to draw a rectangle of the color selected in the color palette.
To draw press, and hold the mouse where you want one corner of the rectangle to begin, drag till the preview of the rectangle is the size you wish.
Release the mouse to draw the rectangle previewed to the screen.
See Pen Tool options descriptions
The Oval Tool is used to draw an oval of the color selected in the color palette.
To use the Oval Tool press, and hold the mouse where you want the oval to begin, drag till the preview rectangle is the size you wish.
Release the mouse to draw an oval within the rectangle previewed to the screen.
See Pen Tool options descriptions
The Copy Tool is used to copy all the pixels within a selection rectangle to the clipboard to paste later.
To copy, press and hold the mouse where you want one corner of the rectangle to begin, drag till the preview of the rectangle completely surrounds the area you wish to copy while holding the left mouse button.
Release the button to copy the area within rectangle to the clipboard.
When checked if the pasted image has any transparent or translucent pixels it will treat them as if putting a translucent sheet over the existing image.
When not checked the pasted image will overwrite any color data on the drawing screen.
When checked instead of copying a rectangle created by dragging across the screen the data that will be copied is the pixel data within the selection made by the selection tool.
The Paste Tool is used to paste pixels saved in the clip board to the screen.
To use simply click where you wish to paste on the screen.
A rectangle will show exactly where the contents of the clipboard will be copied.
By default the paste feature will blend colors pasted according to transparency, but if alt is held it will ignore transparency.
The Drag Tool is used to drag groups of pixels around the screen once they have already been drawn.
To use the Drag Tool click on one of the pixels in the group you wish to drag, and simply drag it to a new location on the screen.
When checked All adjacent pixels to the one clicked on will be automatically selected to be dragged. When not checked the selection made by the Selection Tool will be selected to be dragged
When this, and Auto Select When Dragging is too only pixels of the same color as the one clicked on will be dragged
When checked Drag data will respect the transparency of the dragged pixels, and blend them with the pixels they are dragged on top of
When checked this will allow the user to drop dragged pixels outside the selected area, otherwise they will only be dropped onto the selected area made in the selection tool
Simply click on the drawing screen to redo the last action you have undone.
If slow mode is turned on then the undo operation will be animated.
*You can also always (with any tool selected) press the r key on the keyboard to redo.
Simply click on the drawing screen to undo the last action you performed.
If slow mode is turned on then the undo operation will be animated.
*You can also always (with any tool selected) press the u key on the keyboard to undo.
Click on a pixel, and set the current drawing color.
*Note pressing shift will reset color chosen, but pressing the “Update” button, or enter will save the selected color to the palette so it can be reselected, and pressing shift won’t lose the picked color
The Eraser Tool operates much like the pen tool, just drag the cursor across the area to be erased while holding down the mouse button.
Click, and hold down the mouse button on a portion of the graphic, then drag your mouse to rotate.
When checked pixels adjacent to the pixel clicked on will be automatically selected for rotation.
When checked, and Auto Select is also checked only pixels of the same color will be automatically selected
When checked rotation tool will not anti-alias the rotations, and as such will only rotate in 90 degree increments
When checked any pixels rotated outside of selection made with the Selection Tool will be put onto the screen, if not these pixels will be disregarded
When clicking on a group of pixels this tool will automatically outline them with the selected color
Used to create, delete, rearrange, and control transparency on entire layers of the drawing screen. Click on a layer in the list to select it for editing.
Drag, and drop them to rearrange their order. The sliders control transparency used when rendering each layer, and the checkboxes control whether or not a layer will be rendered.
Use this tool to create a selection area which you may not draw outside of (also works with drag, copy, and rotation tools see them for instructions)
When checked each time you click on the screen another point in a polygonal area will be added to the selection, anything within the polygonal area is selected, otherwise a dragged rectangular selection will be made
Click this button to reset the selection made
Undo setting the last point added to the selection polygon when polygonal selection is checked
Displays value of x zoom, y zoom is auto calculated to keep pixel aspect ratio 1:1
Update zoom in text box, and press enter to set the x zoom manually
Automatically zooms screen to make the sprite’s height the same as the screen height, auto calulate’s x zoom to keep pixel aspect ratio 1:1
Automatically centers screen view to show middle of working sprite
Saves what is currently rendered to the drawing screen as a png with the file name supplied in the textbox
Saves the currently selected animation as a gif with the file name supplied in the textbox
Saves all data in project to one binary file that can be loaded by sprite creator at a later time using the “Choose project to load” button
Set the width, and height of the current drawing space in pixels
When checked the current image data will be resied to fit the new resolution using anti-aliasing. Otherwise the existing pixel data will remain in it’s current state on the newly sized canvas.
1.) If you click on the clipboard its contents will rotate 90 degrees so no antialiasing will be applied.
2.) Its contents will be filled by using the copy tool, and it shows a preview of what will be pasted with the paste tool
1.) cd to webserver directory
2.) run npm install
3.) run node app.js
4.) navigate to 127.0.0.1:5000 to see running app