Welcome to the StageBot Screen Drawing & Animation Tool!
This tool lets you create drawings, arrange elements, and build simple frame-by-frame animations. Everything happens right in your browser!
The Workspace:
Canvas (Center): This is your main drawing area (480 pixels wide, 320 pixels tall).
Left Panel: Contains drawing tools, layer controls.
Right Panel: Contains animation controls and thumbnails.
Bottom Panel (Parts Drawer): Contains elements you can combine.
1. Basic Drawing & Tools (Left Panel - "Tools & Options")
BG (Background Color): Click the color box to change the background color of your canvas.
Color: Click this color box to choose the color for drawing tools (Brush, Line, Shapes) or for selected objects.
Size: Use the slider to change the thickness of the Brush, Eraser, or shape outlines.
Tool Dropdown: Choose your active tool:
Select: Allows you to click, move, resize, and rotate objects already on the canvas. You need this tool active to interact with existing objects.
Brush: Freehand drawing.
Eraser: Erases parts of drawings made with the Brush tool.
Line, Rect (Rectangle), Circle: Click and drag on the canvas to draw these shapes. They will use the currently selected Color and Size for their outline.
↩️ Undo / ↪️ Redo: Step backwards or forwards through your recent actions (like drawing, moving, coloring). Keyboard shortcuts Ctrl+Z (Undo) and Ctrl+Y (Redo) also work!
Image: Click "Choose File" to upload your own JPG, PNG, or GIF image onto the canvas.
Clear: Wipes the entire canvas clean (you'll be asked to confirm). This also clears all animation frames.
Download PNG: Saves the currently visible canvas as a single 480x320 PNG image file.
2. Adding Elements (Bottom Panel - "Parts Drawer")
This panel contains categories of elements.
Simply click on any small image in the drawer.
It will be added to the center of your canvas.
You can then use the Select tool to move, resize, or rotate it.
3. Working with Layers (Left Panel - "Layers")
Every item you draw or add (shapes, drawings, parts, uploaded images) becomes a separate "layer".
The list shows layers from top to bottom (the top item in the list is the front-most item on the canvas).
Selecting: Click the name of a layer in the list to select that object on the canvas (it will get a blue border). The selected layer name appears bold.
Layer Buttons: Next to each layer name, you have small buttons:
↑ (Up Arrow): Moves the layer one step forward (closer to the front).
↓ (Down Arrow): Moves the layer one step backward.
Ab (Rename): Lets you type a new name for the layer.
👁️ / 🚫 (Eye / No Symbol): Hides or Shows the layer on the canvas.
🔓 / 🔒 (Unlock / Lock): Locks the layer. A locked layer cannot be selected, moved, or edited on the canvas (useful to avoid accidental changes). Unlock it to edit again.
4. Creating Animations (Right Panel - "Animation Frames")
This tool lets you create animations by capturing snapshots (frames) of your canvas state.
Workflow:
Set up Scene 1: Arrange your objects on the canvas for the first moment of your animation.
Click 🎬 Capture Frame: This saves the current canvas state. A small thumbnail image representing this frame will appear below the buttons. The main canvas might dim slightly, and the button text changes to ✏️ Edit Canvas.
Click ✏️ Edit Canvas: This "unlocks" the main canvas so you can make changes for the next frame.
Make Changes: Move objects, draw, change colors, etc., to create the look for your second frame.
Click 🎬 Capture Frame: This saves the second frame. A new thumbnail appears.
Repeat: Click ✏️ Edit Canvas, make changes for frame 3, click 🎬 Capture Frame, and so on for as many frames as you need.
Reviewing:
Use the ⏪ Prev and Next ⏩ buttons to step through your captured frames on the main canvas.
You can also click directly on any thumbnail to jump to that frame. The currently displayed frame's thumbnail will have a blue border.
💾 Download Frames (PNG): When you're done creating frames, click this button.
It will go through each frame you captured, one by one.
For each frame, it will generate a full-size (480x320) PNG image and trigger a download.
You will likely need to approve each download in your browser.
This might take a little while if you have many frames. The canvas will update to show each frame as it's being processed.
The downloaded files will be named frame_001.png, frame_002.png, etc.
(Note: You might see some errors pop up in the background during download, but if the images download correctly, you can usually ignore those.)
Important Tips:
Saving Progress: This tool doesn't automatically save your work if you close the browser tab. Use the "Download PNG" or "Download Frames (PNG)" buttons to save your images.
Multiple Downloads: Your browser might ask for permission to download multiple files when using "Download Frames". Make sure to allow it.
Performance: Adding many very complex parts or hundreds of animation frames might make the tool run slower.
Refreshing: If something seems stuck, try refreshing the browser page (but be aware this will clear your current canvas and frames unless you downloaded them).
Have fun creating!