Tutorials · Worlds and Levels · Chapter 6

Water and stone

When to reach for a Polygon

The fallen tower

1. Copy the picture above into art, and press Refresh in Assets.
2. Double-click art/gothic-horror-tiles.png in Assets. The Sprite sheet tab opens on it.

1. In the Grid band, type Cell 254 and 154, and Margin 784 and 22. The line under them reads 1 x 1 cell: the grid’s one cell is the tower alone.
2. Click the cell, the tower, in the picture. Under Regions, type tumbled in the box beside Name it, and press Name it. tumbled is listed under it.

The Sprite sheet tab’s Cell and Margin

How the tab cuts the picture into a grid: Cell is one cell’s width and height, in the picture’s pixels; Margin is the blank border before the first cell, across and down. The tower is 254 wide and 154 tall, starting 784 pixels across and 22 down, so it is x 784 to 1038 and y 22 to 176 of the sheet. These numbers are only the tab’s way of cutting: what is kept is the region named from them.

Name it

Names the cells selected, as one rectangle, a region of the picture, and writes it into the picture’s settings beside it, where every Sprite that shows the picture can name it in its Atlas Region. Its hover says the rectangle: 254x154 at 784, 22. A name already on the sheet is refused, and the bin beside a region takes it off.

The cliff, traced

1. With scenes/vale.ron open, select cliff-block, press Delete, and press Delete in the box that asks; do the same for mere-block.
2. Select vale, press + Add node and choose Sprite. Rename it cliff, and type its Position 1200, 48: 48 under where the grey cliff stood, so the tower’s top is in view while he walks and its foot is behind the hills.
3. In its Sprite, drag art/gothic-horror-tiles.png onto Texture and type tumbled in Atlas Region. Type Size 254, 154, the region’s, and Anchor 0.5, 1, so it stands on its foot.
4. In the Sprite’s Physics shape fold, leave Alpha above at 8, Tolerance at 2 px and Min area at 16, and press Generate physics shape. The line under it says it wrote 14 vertices, and a PolygonComponent appears under the Sprite.
5. Press the bin on the SpriteComponent’s head, and Remove in the box that asks. The Polygon stays, white.
6. In the Polygon, drag art/earth.png onto Texture and set Fit to Tile; leave Tile Scale at 1. Set Color to 0.16, 0.15, 0.20, alpha 1, which darkens the earth to a dark brown, set Sort Layer to Back, and tick Opaque.

Generate physics shape

Under a Sprite’s Physics shape fold: traces the edge of the picture the Sprite shows, at its Size and from its Anchor, and writes the outline into the node’s Polygon, adding one if it has none. With an Atlas Region it traces that region alone, not the whole sheet: the whole sheet traces to another outline, of 49 points. Alpha above is how opaque a pixel must be to count, 8 as it comes; Tolerance how far, in pixels, the outline may stray from the traced edge to save points, 2 px; Min area the smallest island worth an outline, 16 square pixels. The line under the button says how many points it wrote. One undo takes it back.

The Polygon’s Points

The outline, in order, each point a place in the node. The last joins the first: a Polygon is always closed. Its points are dragged in the Viewport, or typed in this list, [0] onwards.

The Polygon’s Texture

The picture the outline is filled with, laid as Fit says; none fills with flat Color.

The Polygon’s Fit: Stretch and Tile

Stretch, as it comes, spreads the picture once across the outline’s whole extent. Tile repeats it at its own size times Tile Scale, counted from the node’s origin.

The Polygon’s Tile Scale

World units each pixel of the picture covers under Tile: 1 draws it at its own size, the earth’s 32 pixels a repeat of 32 units; 2 at twice that.

The Polygon’s Color

A tint over the fill, alpha included: alpha under 1 lets what is behind show through. White as it comes. A colour is light, typed in linear light: see below.

The Polygon’s Sort Layer

The sorting layer the Polygon draws on. The cliff is on Back, behind the mere on Water and the hills on Ground.

The Polygon’s Opaque

Draws the fill without blending, for a backmost shape nothing shows through: its see-through parts, and a see-through Color, come out dark instead of showing what is behind. The cliff is ticked: only the sky is behind it.

The mere, drawn

1. Select vale, press + Add node and choose Polygon: the menu lists it after Sprite Shape. Rename it mere, and type its Position 1200, 0. Click the Viewport tab, since the Sprite sheet tab is still in front of it, and press Frame: the square is in the middle of the view.
2. With Snap off, drag the square’s four corners, in the order the list holds them, top left, bottom left, bottom right, top right, onto [0] to [3] of the table below.
3. Double-click the top edge, the one from [3] back to [0], halfway along: a point is inserted after [3]. Drag it near [4]. Double-click the edge from [4] back to [0] and drag the new point near [5].
4. In the Inspector, type each point’s x and y from the table, so every point is exactly where the table puts it.

1. Drag art/mere.png onto Texture, set Fit to Tile and Tile Scale to 2.
2. Set Color to 0.263, 0.571, 0.831, alpha 0.7, from the table in the next section, and Sort Layer to Water. Leave Opaque unticked. Press Ctrl+S.

The first three points

A Polygon with fewer than three points draws nothing, and Problems says so: “This Polygon has 2 points, and it takes three to enclose anything, so it draws nothing — click in the Viewport to place its points, or add them under Points”. While one is selected, a plain click in the Viewport puts its next point where the click lands, rather than picking a node in front of it, each click one step to undo. To stop drawing, select another node in the Hierarchy.

Colours in linear light

Typed in linear light

A Color is light, not a screen number. The game adds light up in linear light and writes the frame as screen numbers, which brightens all but the ends: a light of 0.263 shows as 0.55, so a colour typed as its screen numbers draws paler than chosen. A colour chosen by its screen numbers is typed as the light that shows as them. In the picker’s F mode, as this tutorial gives every colour, the numbers are the light; its U8 mode shows the screen’s, out of 255. The sky, the meadow and the signposts in the chapters ahead are given the same way, each with the screen numbers it shows as. Alpha is not light, and is typed as it is.

In the game

The two Polygons

Check it works