Graphic Editor Toolbar - AbstractPolygon/vcs-game-maker-absply GitHub Wiki
This tool row appears on every tab with an editable graphics component. Every tool with a hotkey shows it in brackets, and the Hotkeys page lists them all. Thin vertical dividers split it into sections, listed here from left to right. A tab can add extra controls to some of them, and the Sprites tab moves Image files to the left end of the row, before History.
View
Sits at the left end of the row. What is in it depends on the tab, but every tab has these two:
Zoom — resizes the pixel grid.
Grid toggle (') — shows/hides the pixel grid overlay.
History
Undo (Ctrl+Z) / Redo (Ctrl+Y) — step backward/forward through this graphic's edit history.
Drawing tools
Color swatch — sits just before Move and starts empty (a dashed box). Click it to pick a color from the palette. On a graphic with row colors, drawing gives the rows you draw on this color, and with Pencil or Fill selected, clicking or dragging across a row color bar paints those rows with it. The Eyedropper fills it from a graphic, and picking a color in the Quick colors bar sets it too.
Move (V) — hold-drag a selection (see Selection tools) to relocate its pixels elsewhere on the canvas, leaving the vacated cells transparent.
Eraser (E) — erases pixels.
Pencil (B) — the default single-pixel draw tool.
Fill (G) — flood-fills the clicked cell's connected region. On a row color bar it fills the run of neighboring rows that have the clicked row's color.
Eyedropper (I) — click a graphic, or a row on a row color bar, to take its color and put it in the color swatch (before Move). On a graphic with row colors that is the clicked row's color; on a DPC+ background, an empty cell gives the color of its background row.
Line (L) — drag to draw a straight line. Hold Shift to snap to 45° angles.
Rectangle (R) — drag to draw a rectangle outline. Hold Shift to constrain it to a square.
Oval (O) — drag to draw an oval outline. Hold Shift to constrain it to a circle.
Dragging Pencil, Eraser, Line, Rectangle, Oval, Move, or a selection tool off the canvas cancels that stroke instead of drawing it - nothing from the abandoned stroke is kept.
Selection tools
Rectangle select (M) / Circle select (C) / Polygon select (P) — the marquee selection tools, for choosing the cells that Move, Flip and Delete then act on. With Rectangle select or Circle select, drag to select a filled box or ellipse of cells; a plain click with no drag selects nothing. With Polygon select, click to place each vertex, then double-click to close the shape and select everything inside it. Hold Shift while dragging (for Polygon select, while placing the first point) to add the new area to whatever is already selected, instead of replacing it.
Working with a selection:
- Switching to a drawing tool (Pencil, Eraser, Fill, Line, Rectangle, Oval) from a selection tool or Move also clears the selection. Switching between the selection tools and Move keeps it.
- Escape — clears the current selection (and cancels an in-progress, not-yet-closed polygon).
- Delete / Backspace — clears the pixels inside the current selection (the selection itself stays, so you can move or delete again). Does nothing with no selection, and never asks to delete the card the graphic belongs to.
- Clicking anywhere outside the graphic's canvas (other than on this toolbar, so switching tools keeps your selection) deselects the selection tools too.
Mirror and flip
Mirror draw horizontally / Mirror draw vertically — two on/off buttons just left of Flip. With one on, whatever you draw on one side of the graphic is also drawn flipped on the other side (left/right for horizontal, top/bottom for vertical); with both on it is drawn in all four corners. It works with Pencil, Eraser, Line, Rectangle, Oval and Fill, and one Undo takes away a stroke and its mirror image together. The Move tool, imports, flips and resizes are not mirrored. The setting is shared by every graphic editor in the app and resets when the page is reloaded.
Flip horizontally (Shift+H) / Flip vertically (Shift+V) — mirrors the whole graphic, or only the selected pixels when a selection is active.
Image files
Export to image (Shift+E) / Import from image (Shift+I) — saves the current frame as a PNG, or loads pixel data in from an image file. On the Sprites tab this section (with Import from Aseprite, below) sits at the left end of the toolbar, before History, instead of at the end.
Import from Aseprite (Sprites and Title tabs only) — imports a sprite strip image plus its Aseprite-exported .json sheet data. On the Sprites tab this creates a whole new animation for each frame tag defined in the .json (or one animation from all frames if there are no tags); on the Title tab it imports into the currently selected card and only supports a single animation (a .json with more than one frame tag is rejected). Either way, each frame's duration is converted from the .json's milliseconds to game frames. A "Replace animations" switch (Sprites) or "Replace frames" switch (Title) controls whether the import lands alongside existing content or replaces it; on the Title tab, Keep row and box colors gives replacing frames the row colors and picture background of the frames they replace.
Size
Only on tabs where the graphic's row count can be changed.
Set height (H) — opens a menu to resize the graphic, optionally scaling its contents to fit (the row colors, where a graphic has them, are scaled along with the pixels) or applying the new height to every other frame in the same animation at once.
Quick colors
On the Sprites, Background and Title tabs, a divider under the row separates it from the Quick colors bar, a shortlist of palette colors for painting row colors. Click a swatch to arm it, then click or drag across the row color strip. Drag swatches to reorder them, Alt-click to remove one, use the plus button to add a color, and use the chevron to collapse the bar.