feuerwerk

0 Fork 0

Table of Contents

The canvas
Shapes and rings
The tab
The inspector
Layers and groups
Scaling, turning and mirroring
Gradients and textures
Combining shapes
Wearing it
Nine-slice and sort line
Known limits

A vector art asset is a picture you draw instead of upload. It holds shapes — rings of points with bezier handles — and the editor rasterises them into a picture that is worn exactly like a texture: a sprite names it in its Texture row, a tile can be built from it, a shader samples it, a particle source emits it. Nothing on that path knows it was drawn; see Textures for the contract behind it.

Making one. + → Vector art creates the asset; it stands in the assets panel under Vector drawings. A double click on its row opens the Vector art tab. Like a font, a vector drawing is not placed in a scene — it is worn by something that is.

The canvas

Every drawing has a canvas, 256x256 units by default, set in the inspector as the rows Canvas width and Canvas height (up to 4096). It is two things at once:

The frame. Whatever a shape reaches past the edge is not in the picture. There is no mask and no clipping rule to learn — the picture is the canvas.
The measure. A new sprite wearing the drawing is that many units wide and high, the same way a sprite is measured by the pixels of an uploaded image.

The picture is drawn at twice the canvas resolution, so zooming in does not turn to mush at once. It is still a picture, not a curve: zoom in far enough and the edges soften. A drawing that is meant to be seen big wants a bigger canvas, not a different setting.

Shapes and rings

A drawing is made of shapes, drawn in order — the last one lies on top. A shape has a fill colour, an opacity and, if you want one, an outline (colour and width). The shapes stand on layers and can be put into groups, see Layers and groups.

Each shape is built from one or more rings. A ring is a chain of points, and it is either closed or open:

A closed ring is filled and, with an outline, drawn around.
An open ring is outline only. A shape whose rings are all open is a line, not an area.

A second ring inside another cuts a hole into it, which is how a ring-shaped or a hollow letter-like form is made. Holes work by containment: a ring inside a ring is a hole, a ring beside it is a second area of the same shape.

A point may carry two handles, in and out, and the segment between two points is a curve as soon as one of its two ends has a handle — so a sharp point may stand right beside a curved side. What a point is decides what dragging one of its handles does to the other:

Type	Handles	Dragging one handle
Straight	none	— both sides of the point are straight
Corner	free	leaves the other where it is, so the curve breaks at the point
Smooth	in line	turns the other to the opposite side and keeps its length
Symmetric	in line, same length	mirrors the other exactly

The type only steers the next drag; it changes nothing that is drawn.

The tab

The toolbar holds Select, Pen, Paint, Point, the magnet and Fit; the view pans and zooms like the Texture tab, and the checkerboard behind the canvas is what is transparent. With Paint the Point menu makes way for Handles, see Gradients and textures.

Pen draws a new shape:

A click puts a straight point down; dragging while putting it down pulls both handles out, mirrored, so a curve is drawn in one gesture and the point is symmetric.
A click on the first point closes the ring and ends the shape.
Esc ends the line where it is, leaving an open ring.

Select edits what is there:

Drag a point, a handle, or the whole shape — by its fill or by its line. A shape that stands in a group brings the whole group along, and with several shapes selected a drag on one of them moves all of them, as one undo step.
The selection stands in a frame with eight squares and a knob: the squares scale it, the knob turns it, see Scaling, turning and mirroring.
A double-click on a segment puts a new point there, picked; press it again to drag it. On a curved segment the curve is split, not cut: both halves together draw exactly what was drawn before.
Delete takes the picked point away, and so does Delete point in the menu a right-click on a point opens; the same menu sets the point's type. A ring left without a point goes with it, a shape left without a ring too.
Alt on a straight point makes it symmetric, and a point with handles straight again.
Ctrl+click (Cmd on a Mac) or Shift+click adds a shape to the selection or takes it out again. With Select, Shift pans the view only beside the shapes; the middle button pans anywhere. The shapes selected alongside show their outline; only the one clicked last shows its points and handles. A plain click on a shape outside the selection selects that shape alone, or its group; a click on a shape of the selection keeps the selection and makes that shape the one with the points.
Without a picked point Delete removes the selected shapes, also when they were picked in the list of the inspector. A click inside a shape, on its line or on another shape drops the pick.

The point pressed last — or put down last with the Pen — is picked and drawn filled. The Point menu in the toolbar shows its type and turns it into another one, as one undo step:

Straight takes both handles away.
A straight point that becomes Corner, Smooth or Symmetric first grows handles along the line between its two neighbours, a third of the way to each.
Smooth and Symmetric line the handles up on the direction between them, so the curve keeps its general course; Smooth keeps each length, Symmetric gives both their mean.
Corner leaves the handles where they are and sets them free.

A point put on a curved segment is smooth, since the split leaves its handles in line; a symmetric point at either end of that segment becomes smooth, because the split shortens one of its handles.

The magnet snaps to 8 units while it is lit; it is off by default. It is the same switch the graph tabs carry. Fit brings the whole canvas back into view.

One gesture is one undo step — dragging a point across the canvas is a single entry in the undo history, not one per mouse move. While a gesture runs, the drawing is redrawn once per frame rather than once per mouse event, which is what keeps a fast drag from falling behind the pointer.

The inspector

Selecting a shape — in the tab or in the list — gives it its own rows:

LAYERS lists the layers of the drawing, see Layers and groups.
SHAPES lists the shapes of the layer that is worked on, each row painted with the shape itself, the whole canvas scaled into the swatch, so a row also says where on the canvas its shape sits. The topmost row is drawn last, the way a layer list reads. A group stands over what is in it, its rows one step in. Ctrl or Shift on a row adds its shape to the selection, as Ctrl+click does in the tab.
Forward / To front / Backward / To back move the selected shape through that order, among the rows of its own group or layer, and a row can be dragged to another place in the list, also one that was not selected before: it is selected when the mouse button goes up. A double-click on a name edits it right in the row.
Group and Ungroup stand under the order buttons. On the row under the pointer and on the selected ones, the copy mark (two squares) puts a copy of the shape right above it, on the same spot, and selects the copy; the ✕ removes that shape. The same list is used for the layers of a tilemap and the layers and frames of pixel art; there its header also has a + that adds one. Shapes have none, they are drawn with the Pen.
TRANSFORM shows where the frame of the selection stands and how big it is, turns it by a number and mirrors it, see Scaling, turning and mirroring.
COMBINE holds the four boolean operations, see below.
VECTOR SHAPE carries Name, Layer once the drawing has more than one, Fill type with what that type needs, Opacity and an Outline switch; with the switch on, Line type and Line width appear. The switch gives and takes away the outline rather than hiding it, and a width of zero is no outline, so the row stops at 0.1.
With several shapes selected, Delete shapes at the bottom removes them all. There is no button that adds a shape (#293): a shape without points could not be given any, the Pen draws a new one.

With several shapes selected, the order buttons and the style rows are those of the one clicked last. A dragged colour or opacity slider is one undo step, not one per pixel of the drag. Selecting the asset instead of a shape shows the same list under the asset's own rows, with nothing selected.

Layers and groups

A layer is a stack of shapes with a name and an eye. Every drawing has at least one, and the layers are drawn bottom to top like the shapes on them.

One layer is the one worked on, marked in the LAYERS list. The Pen puts new shapes on it, and the SHAPES list shows what is on it. A click on a layer's row picks it; selecting a shape, in the tab or in the list, picks the layer that shape stands on.
The eye hides a layer. A hidden layer is neither in the tab nor in the picture a sprite wears, and its shapes cannot be pressed in the tab. The Pen does not draw on a hidden layer; its hint says so.
+ in the header adds a layer right over the one worked on, ✕ on a row removes that layer with everything on it (the last layer stays), a double-click on a name edits it, and a row is dragged to another place in the stack.
Layer in the VECTOR SHAPE rows moves the selected shapes on top of another layer. A group that is selected as a whole goes as a group.

A group holds shapes and further groups. It is there to keep things together and has no place, size or style of its own: its shapes stay where they are on the canvas.

Group (or Ctrl+G) puts the selected shapes into a new group, where the topmost of them stood. A group all of whose shapes are selected goes in as one, so groups nest. Shapes of two layers cannot share a group.
Ungroup (or Ctrl+Shift+G) takes the selected groups away and leaves what was in them in their place. With no whole group selected it takes the group the selected shape stands in.
In the tab a click on a shape of a group selects the whole outermost group, and a drag moves it. The clicked shape is the one that shows its points, so it can still be edited in place. Ctrl+click or Shift+click adds or takes out single shapes, also of a group.
In the list a click on a group's row selects everything in it; a click on a shape's row selects that shape alone, which is how one shape of a group is moved or restyled by itself. The copy mark on a group copies it with all that is in it, the ✕ removes all of it.
Dragging a row moves it within its group, into another one or out. The marker starts where the row would start, so it shows which group the row joins. At the end of a group the same gap belongs to the group and to the list around it: drag right to stay in the group, left to leave it.
A group is never empty. The group that loses its last shape goes with it.
The order buttons move a group selected as a whole among its neighbours, and a single shape among the shapes of its own group.
Combining shapes works across groups. The result stays where the lowest shape stood.

A drawing saved before there were layers opens with all its shapes on one layer.

Scaling, turning and mirroring

With Select, whatever is selected stands in a frame: one shape, several shapes, a group. The frame is the same selection a drag moves, so what goes together when dragged is also scaled, turned and mirrored together. A shape of a group picked by its row in the list has a frame of its own.

The eight squares scale. A corner scales both directions with the opposite corner staying where it is, a square on an edge only the direction it stands on. Shift keeps the proportions, Alt scales about the middle of the frame instead.
The knob over the frame turns the selection round the middle of the frame. Shift turns in steps of 15 degrees.
The frame stands a little off the shapes, so its squares never cover a point: a point or a handle of the shape under the pointer is always the one that is taken.
TRANSFORM in the inspector does the same by number: X and Y are the left and top edge of the frame, Width and Height its size, and Rotate by turns it by the degrees typed in. A number can be typed or dragged. Flip horizontal and Flip vertical mirror the selection about the middle of its frame.
One pull, one typed number, one flip is one undo step, however many shapes it took along.
The magnet puts a pulled square on the grid.

Nothing of this is stored as a transformation. The points and handles of the shapes are rewritten, so a scaled or turned shape is an ordinary shape again:

After a turn the frame is upright again, and Rotate by reads 0. To take a turn back, undo it or turn by the same degrees the other way.
Coordinates are kept to a thousandth of a canvas pixel.
The outline keeps its width. A line of two pixels is two pixels at every size of its shape.
Gradients go along: both ends of a gradient are moved, scaled and turned with the shape. A gradient squeezed in one direction keeps its bands square to its axis.
A picture fill is scaled and mirrored with the shape. Turned, its tile stays upright and takes the room the turned tile reaches over: the picture itself does not turn.
A frame cannot be pulled thinner than one canvas pixel, and not through its opposite side. Mirroring is what the two Flip buttons are for.

Gradients and textures

Fill type says what the inside of a shape is painted with, Line type the same for the outline:

Type	Fill	Outline	Rows under it
Solid color	yes	yes	Fill, or Line color
Linear gradient	yes	yes	the stop bar and the picked stop
Radial gradient	yes	yes	the stop bar and the picked stop
Texture	yes	no	Texture

Switching is one undo step. A new gradient runs from the shape's colour (or the line's) to white, across the middle of the shape. Changing between linear and radial keeps the colours and lays the gradient out anew. The solid colour stays on the shape underneath, so Solid color brings back exactly the colour it had.
The stop bar shows the gradient over a checkerboard, with a marker under it for every colour stop. A click on a marker picks that stop, dragging it moves it along. A click on the bar anywhere else adds a stop there, in the colour the gradient already has at that place, so adding one changes nothing until it is edited. Stop color, Stop opacity and Stop position edit the picked stop; Remove stop takes it out, down to the two a gradient needs.
Texture offers the uploaded textures and their frames. Drawings are left out: a drawing filled with a drawing, itself included, would have to be rasterised while it is being rasterised.
Opacity still scales the whole shape, on top of each stop's own opacity.

The Paint tool shows the two handles of the selected shape's paint, and Handles in the toolbar says whose: the fill's or the outline's. A click on another shape shows its handles.

Type	The square handle	The round handle
Linear	where the first colour is	where the last colour is
Radial	the centre	where the circle reaches the last colour
Texture	one corner of a tile	the opposite corner

Before the first and past the last colour of a gradient, the end colours hold.
A texture always repeats. When it is switched on, one tile covers the whole shape, so the picture fills it exactly once; a smaller tile repeats it across the shape. Dragging the round handle past the square one mirrors the picture.
Dragging a whole shape with Select takes its gradients and its tile along, and so does scaling, turning or mirroring it. Dragging a single point does not.
Each handle dragged is one undo step, and the magnet snaps the handles too.

Combining shapes

Select two or more shapes (Ctrl+click) and press one of the four buttons under COMBINE:

Button	What is left
Union	Everything any of the shapes covers.
Subtract	The lowest shape, with every shape above it cut out.
Intersect	Only what all of the shapes cover.
Exclude	What an odd number of them covers: the overlaps are cut out.

The result replaces the lowest shape of the selection, the one drawn first. It keeps that shape's name, fill, gradient or texture, opacity, outline and place in the drawing order; the other shapes are gone. The note under the buttons names it. Which shape was clicked first does not matter.
It is an ordinary shape again, not a compound that remembers its parts. To change the parts, undo: the whole operation is one undo step.
Curves survive (#208). The shapes are sampled first — each curve cut into straight pieces that stay within 0.2 canvas pixels of it — but the result is put back together as curves: a side nothing crossed comes back with exactly the points and handles it had, and a curve that was cut keeps the piece of itself up to the cut. Only where the clipping really drew a new edge is there a corner. The two points of a cut are the clipper's own, and it crosses the sampled pieces rather than the curves, so they can sit up to the sampling tolerance off the curve they came from.
Every shape is read the way it is painted, by the even-odd rule: a ring inside a ring is a hole and stays one. A result can have holes, and islands inside those holes.
An open line cannot be combined — it has no inside. The buttons stay off while one of the selected shapes holds an open line, and with a single shape selected.
A result of nothing is refused with a message, for example Intersect on shapes that do not overlap. The drawing stays as it was.

The clipping is done by Clipper2 (the clipper2-ts port, Boost licence), the project's first geometry library. Putting the curves back is ours: every sampled point remembers which curve it came from and where on it, so a run of result points that walks one curve is cut out of that curve again with de Casteljau.

Wearing it

A sprite's Texture row offers every picture of the project: the uploaded textures, their frames, and the drawings, sorted by name. Picking a drawing there is all there is to it — the sprite shows it, and every change in the tab reaches it by itself, because a changed drawing is a new picture.

Two differences to an uploaded picture, both from the picture path: a drawing has no frames (frames are rectangles cut out of a sheet, and there is no sheet), and it is not stored as an image — the project file holds the shapes, and the picture is rasterised again after a reload.

Nine-slice and sort line

A drawing can be nine-sliced and given a sort line, exactly as a texture frame (Textures), for a panel or a button drawn with curves (#308). The settings sit on the asset, under Nine-slice and Sorting in its inspector, in canvas pixels: a 16 px border of a 256 canvas is a sixteenth of it, whatever resolution the picture is rasterised at. Nine-slice scale is a row of the asset, as on a texture.

The tab draws the borders that are set as dashed lines and the sort line in yellow, but they are not dragged there: the arrow and the pen own the canvas. Type the numbers in the inspector. Changing the canvas size keeps the numbers, and they are held inside the new size when drawn.

Known limits

A texture fill always repeats. Pixi turns a non-repeating picture fill into a repeating one, so "once, then nothing" is not offered; the tile starts out covering the whole shape instead.
A radial gradient is a circle. It cannot be squeezed into an ellipse.
A collider does not follow the drawing. A sprite wearing vector art collides with its box or with a shape you give it by hand, as with any picture; taking the outline as a collider shape is #188.
No SVG import (#189).
A group has no transformation of its own, and neither has a shape: scaling and turning rewrite the points, and no angle or scale is remembered afterwards.
A turned picture fill does not turn its picture, and an outline is never scaled.
The knob can lie outside the tab when the frame touches the upper edge of the view. Pan or zoom out to reach it, or use Rotate by.
A group cannot be hidden or locked, only a layer can be hidden, and a layer has no opacity.
The groups of a layer are always shown unfolded.
The shapes are edited in the inspector, not in a panel of their own like the tilemap's (#191).
No runtime nodes for drawing at play time. A sprite can still swap its drawing through the ordinary texture property.

Using the editor

Working on the code