Spritesheet Editor Tutorial file -------------------------------- The first time you download this program execute Reg.bat once WARNING: Don't save as GIF or JPG to avoid (massive) loss of color data! - Sections - I To make a single sprite II Spritesheets III Functions in the editor you should know about IV Supported formats V Batch Animation output ------------ I: To make a single sprite (for the first time) 1. Create the sheet Editor -> New... The sheets color is determined by your current color Choose a bitmap size larger than what you need The sheet will be created and you will see a small frame Its like a small window that reflects a part of the entire sheet. 2. Resizing the frame Choose a more fitting width and height, preferrably the width and height you desire your sprite to be The width and height settings are on the left side on the "Animation Data" board. This board has all the values that define the frame Increase width and height. 3. Zooming Its the scrollbar in the middle at the top Zoom in 10x. (You can also just press Shift+F3) 4. Sheet viewer Press Ctrl+X to toggle the Sheet Viewer, its the whole sheet (bitmap) Use right mouse button to drag it around so you can see the part you are working on clearly Left click (and drag) lets you move the frames position Middle click toggles solid or transparent fill for the rectangle 5. Drawing Use mousewheel to select Pencil (or click on it, or press F2) Try drawing with white color on the frame, You'll see on the sheet viewer that you are drawing inside the rectangle Press Ctrl+Z and undo your action(s) Right click somewhere to read the color (aka lift color) 6. Tips Since you probably are going to work in this file again, use Save Settings When the file is reopened these settings are reloaded, and the layout you set will be restored Also, when you move around the sheet, and want to get back the saved settings just press Ctrl+F1 That should get you started :) ------------------------------------------------------------------------------- II: Spritesheets (Starting with a large animation sheet) 1. Drag the spritesheet file onto the editor window (not a spritesheet) A new spritesheet window will open up 2. Pan around the frame and find the top left of the first sprite 3. Set width and height to the sprites size (or adjust if unknown) so the frame encases the sprite perfectly 4. Look at Animation Data panel Set Frames to the amount of frames you have Press Ctrl+W to jump to the next (second) frame You will probably arrive in somewhere between the first and the next sprite or in "nowhere land" This is because deltaX is default 16 pixels Increase deltaX so that you encase the second sprite perfectly Press Ctrl+Q to go to the previous frame Press [Return] to start the animation If you did this right you would see your own animation running And the result will depend on the accurasy of your work, and that the distance between all the frames/sprites are exactly the same deltaX is the X increasement for each frame number 5. If the animation is flawed use Panning and Copy frame/Paste frame ------------------------------------------------------------------------------- III: Functions in the editor you should know about 1. Mouse Leftclick is [selected tool] Rightclick is usually read/lift color Middlebutton is ALWAYS panning Ctrl+Middlebutton is ALWAYS crop view Mousewheel is ALWAYS browse tools 2. Keyboard Look at menus for keycodes/shortcuts a) When frame has focus Ctrl+ = zoom in Ctrl- = zoom out N = next frame B = previous frame F = toggle restrict to frame P = set symmetry point, twice: give focus to symmetry choices X = toggle except color Return = start/stop animation Return used when symmetry choices has focus = gives focus to frame number = select tool [number] Ctrl+Shift+S = Save as copy Arrow keys = Panning, Ctrl=Frame size, Alt=Offsets b) Global Ctrl+Tab = switch between sheets 3. Settings Save settings saves the current layout for this file Load settings loads the layout you have saved for this file Custom settings: The only difference is you choose the name of the settings This is very handy for large spritesheet projects, since the editor saves EVERYTHING Note: Settings does not include the bitmap, only settings 4. Colors Doubleclick on the current color to get the standard window swatch To copy colors fast between projects rightclick on the current color and select Copy color then on the other project do the same, choose Paste color 5. Swatch panel (bottom) Its a panel describing all the colors used in the current frame Hover over your frame and watch how the color you hold over are selected in the tab Click on a color in the tab to read/lift it Right on the color to find out how many times its used in the frame, and where its last found 6. Tools a) Panning lets you move (translate) the window/frame that reflects the spritesheet you are working on Notice how OffsetX and OffsetY react to your panning, also look at the Spritesheet View. Hold Ctrl to draw a rectangle and release to crop your view frame to that part of the sheet Other ways to use the panning tool: Arrow keys Shift+Left click and drag (with ANY tool) b) Pencil tool lets you draw pixels onto the frame Factor defines how much pressure you draw with, 255 is a pure color, 0 is no change Feather defines how much you affect 4 nearby pixels Moving feather determines whether Feather will be added when you click and hold -draw Right click to read/lift a color from the frame Ctrl+click = Draw with a random color Alt+Click = Draw from undo buffer (not undoable) c) Blender Pencil reads the four nearby pixels and the middle one and draws the average value Factor has been implemented to determine the weight of the blending (onto the original pixel) Feather now blends four nearby pixels using the feather-factor value Right click to read/lift the average/blended color d) Lighten/darken draws with the same R G and B values onto the sheet only using Factor Thus Factor 255 is pure white/black Left mousebutton = Lighten Right mousebutton = Darken Feather does the same for four nearby pixels using the feather-factor value e) Replace Color replaces all colors matching the one you select on the frame with your current color It only replaces within the frame Hold Ctrl to make it switch colors (it will replace col1 with col2 and col2 with col1) Hold Alt to make it replace colors NOT matching the selected color f) Fill Color Fills a colorspace with the current color Hold Alt to make it fill border (inside) Hold Ctrl to make it fill border (outside) NOTE: Filling with restrict to frame off MAY crash the program, do NOT used on unsaved work! As it is now filling using large areas may crash because of stack overflow, Ill fix this later g) Paster tool Left click to paste from copybox to the selected area Ctrl+Left = paste masked Alt+Left = paste filtered Right click to draw a rectangle to copy something Ctrl+Right = copy to both copybox and cliboard h) Symmetry tools P: Lets you set the symmetry point, click on the frame to set the point Symmetry X: Draw symmetrically on the X axis Symmetry Y: Draw symmetrically on the Y axis Symmetry X,Y: Draw symmetrically around the point (X,Y) Mirror mode: Usually you would set a symmetry point and draw symmetrically from that point Mirror mode is symmetry from between the set pixel and the the left or top pixel The reference point is in the middle of 2 pixels instead of a pixel Use mirror mode if you are drawing a pattern i) Except color function When enabled you will never be able to affect that color on the sheet when drawing Later on ill add tolerance for R G and B 7. Drawmodes Sets the pens/drawers behavior Standard operation is CopyPen You pros know how to use this Most people only need CopyPen and Invert 8. Blitmodes A blit operation is direct image copying Its used when pasting images The blitmodes you see are all the available Windows Rasterizer operations The standard operation is SrcCopy (source copy), its a direct source copy. How to use SrcAnd and SrcPaint: The most useful operation using these are shown in blittertest.bmp Framesize is 21x28 The first frame is the "original" sprite Second frame is a mask i made Third frame is a background i want to blit my sprite on Fourth frame is the result a) To make the mask: First frame Lift the background color Copy and paste it to exception color, enable it Copy the first frame Go to second frame Paste into the second frame Fill frame with white color (255,255,255) Turn off except and replace the background color with black (0,0,0) b) Three blitting operations Copy the third frame into the fourth (SrcCopy) Copy the second frame into the fourth (SrcPaint) Copy the first frame into the fourth (SrcAnd) Done. A much better way is to just lift bgcolor from first frame and paste filtered into fourth frame But unless you change the backcolor the sprite will be damaged (or you can draw the rest) 9. Copy & Paste a) Copy/Paste Frame Copy frame (noflip): Copies the current frame as it originally is, this means FlipX or FlipY will not affect the copy Paste frame: Pastes Note that "Copy frame" and "Paste frame" are internal functions, you cannot use them to paste to another sheet, or another application. Use the clipboard functions for that. b) Copy frame to clipboard Copies the frame (exactly as you see it) to the clipboard c) Paste from clipboard Its exactly as it says The first one pastes into the frame, but does not overshoot or resize to fit to the frame The second one resizes the clipboard data to fit into the frame d) Copy full image to clipboard Copies the entire spritesheet (bitmap) to the clipboard 10. Revert Reverts the entire sheet to the original If you opened a bitmap, and made alot of changes, revert will undo everything 11. Undo and Redo You can undo any actions 16 times (remember this value) You can redo any undo'd action one time 12. Animation This part of the editor is basic at the moment, and Im not sure what I should add however you should be aware of these functions: deltaX: frames X increasement * framenumber deltaX: frames Y increasement * framenumber Frames: the amount of frames your sprite animation consists of Interval: the time in milliseconds before jumping to the next frame Rev: Reverse, after reaching the last frame the animation will play backwards and start over 13. Grid Ctrl+G = Toggle Grid Ctrl+H = Set Grid data Grid size is the width and height of the grid OffsetX,OffsetY is the starting point for the grid, usually 0,0 14. Flipped frame Note that flipping is the same as zooming, in the sense that it doesnt affect the image its just a helper, however if you Copy to clipboard with FlipX or Y on, you can paste a flipped image (elsewhere). 15. Menu functions a) Copy animdata to clipboard Copies the current animation panel data to clipboard, in other words your current animation for your sheet can be pasted in a forum along with the sheet Other people that use this program can view your animation: b) Paste animdata from clipboard For example a forum post contains animation data copy it using your browser and paste it while having the spritesheet on the post open You are now able to view the animation c) Fill frame Fills the frame with your current color Supports factor (Panning's factor value) and Except color d) Invert frame Inverts all pixels on the frame e) Count total colors used Counts color used totally (on the entire sheet) f) Randomizer chooses color from swatch If this is enabled, a random color from the swatch is chosen whenever a color is generated randomly, either by rightclick on color and select Random color, or drawing randoms with the pencil g) Offset Sheet Offsets the entire sheet by (x, y) The default x, y is the last x, y you clicked on on the sheet. h) Canvas Size Resizes the sheet to (w, h) and cuts off at the right and bottom The default w and h is the last x, y you clicked on on the sheet. WARNING: This operation is currently not undoable! 16. Sheet viewer a) Entire sheet Sheet viewer will show the entire spritesheet b) Tiled frame Sheet viewer will show the current frame tiled (3x3) Very useful when making tilable sprites/backgrounds IV: Supported formats 1. Supported formats a) Standard Windows Bitmap (.bmp) b) Device-Independent Bitmap (.dib) c) graphics interchange format (.gif) d) Joint Photographic Experts Group (.jpg) e) Portable Network Graphics (.png) f) Tag Image File Format (.tif) V: Batch Animation output Saves your current animation frames to a folder with a filename of your choosing 10 frames example: C:\Batch\MyLink0000.png -> MyLink0009.png Output supports both zooming and flipping Select GIF output and you will get the choice of getting an animated GIF assembled ------------------------------------------------------------------------------- website: http://ssedit.fwsnet.net last edited 04.05.06 written by gonzo