Tutorials · Worlds and Levels · Chapter 7

Made to measure

When to reach for a Mesh

The sky

1. With scenes/vale.ron open, select sky-block, press Delete, and press Delete in the box that asks; do the same for banner-block.
2. Select vale, press + Add node and choose Mesh: the menu lists it after MultiMesh. Rename it sky and leave its Position at 0, 0. It comes white, a 64-unit square of four Vertices and the Indices 0 1 2 0 2 3.
3. Press Add component and choose ParallaxComponent. Type its Factor 1, 1, and leave the rest as it comes.
4. In the Mesh, press + beside Vertices twice, for six. Open each of [0] to [5] and type its Position and Color from the table below; leave each Uv as it is.
5. Press + beside Indices six times, for twelve, and type the six new ones 1 4 5 1 5 2. Tick Opaque. Leave Texture at none, Color white and Sort Layer on Sky.

Vertices

The Mesh’s points, each opened by its arrow to show its rows; + adds one at the end, and the bin takes one off. They have no handles in the Viewport: they are typed here, or made from a Polygon with Make a Mesh.

The vertex’s Position, Uv and Color

Position is the point’s place in the node. Uv is which point of the Texture is drawn at it, 0, 0 the picture’s top-left corner and 1, 1 its bottom-right; with no Texture nothing reads it. Color is the point’s own colour, typed in linear light, blended across every triangle the point is a corner of.

Indices

Which points make each triangle, three at a time, counted from 0 in the order of Vertices. While a count is not a multiple of three, Problems says so: “This Mesh has 7 Indices, which is not a multiple of three, so the last 1 make no triangle and are not drawn — each triangle is three Indices”. An Index past the last point is named too, and its triangle not drawn.

The Mesh’s Texture

The picture the triangles are drawn with, each point showing the part its Uv names; none draws flat colour, the points’ own.

The Mesh’s Color

A tint multiplied with every point’s own colour. White as the preset comes, so the sky’s points show as they are typed.

The Mesh’s Sort Layer

The sorting layer the Mesh draws on: the sky on Sky, behind everything.

The Mesh’s Opaque

Draws the triangles without blending, for a backmost shape nothing shows through. The sky is ticked: nothing is behind it.

The Parallax’s Factor

How much of the camera’s motion the node is carried along by, across and up and down. At 1 it moves as the camera does, so it holds still on the screen; at 0.5, half as far, so it drifts behind.

The Parallax’s Repeat X

Copies the pictures and tilemaps under the node side by side so the layer never runs out, ticked as it comes. It copies no mesh: the sky is drawn once, and needs no copy, since it moves with the camera.

The sun under the sky

1. In the Hierarchy, drag sun onto sky: it becomes the sky’s child, carried with it. Type its Position -80, -45, a place on the screen.

Clouds and a town

1. Copy both pictures above into art, and press Refresh in Assets.
2. Double-click art/gothic-horror-clouds.png in Assets: the Sprite sheet tab opens on it. If its top and foot are cut off, pick 200% from the zoom menu at the tab’s foot to see it whole.

1. Type Cell 256 and 108, and Margin 0 and 0: one cell, the picture’s rows 0 to 107. Click it, type band beside Name it, and press Name it.
2. Double-click art/gothic-horror-town.png: the tab opens on it. Again, if its top and foot are cut off, pick 200% from the zoom menu at the tab’s foot.

1. Type Cell 256 and 96, and Margin 0 and 16: the houses, rows 16 to 111. Click the cell, type skyline and press Name it.
2. Type Cell 256 and 64, and Margin 0 and 112: the ground, rows 112 to 175. Click the cell, type ground and press Name it.

1. Select vale, press + Add node and choose Parallax: a Parallax with a Sprite beside it. Rename it clouds and type its Position 0, -42. In the Parallax, type Factor 0.9, 1 and Autoscroll -4, 0; leave Repeat X ticked.
2. In its Sprite, drag art/gothic-horror-clouds.png onto Texture, type band in Atlas Region and Size 256, 108, and set Color to 1.0, 0.86, 0.78, alpha 0.5. Leave its Sort Layer on Sky.
3. Select vale again, and add a second Parallax: town, at Position 0, -16, Factor 0.5, 1. In its Sprite, drag art/gothic-horror-town.png onto Texture, type skyline in Atlas Region and Size 256, 96, and set Sort Layer to Far.
4. Right-click town in the Hierarchy and choose Duplicate: town copy appears straight after it. Rename it town-ground, type its Position 0, 64, and in its Sprite type ground in Atlas Region and Size 256, 64, and tick Opaque.

The Parallax’s Autoscroll

World units a second the node drifts on its own, on top of what Factor carries it: the clouds’ -4, 0 drifts them west.

Pictures tied on one Sort Layer

Front and back are the Sort Layer first, whatever the Hierarchy’s order. Two pictures tied on one Sort Layer draw in the order of their textures, not the scene’s: on Far, the clouds would draw over the town whichever came first in the Hierarchy. So the clouds stay on Sky, as their Sprite comes, where they draw over the sky, since a mesh draws before a picture it ties with, and under the sun and the town on Far. To put one picture in front of another, give it a later Sort Layer.

The banners

1. Select vale and add a Polygon. Rename it banner-1 and type its Position 2432, -104. 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, top left, bottom left, bottom right, top right, onto [0], [1], [3] and [4] of the table below. Double-click the bottom edge halfway along: a point goes in there, between the two bottom corners. Drag it up to 0, 36, the notch.
3. In the Inspector, type each point from the table, so all five are exact.

1. Under the Polygon’s rows, press Make a Mesh. The Polygon is replaced by a Mesh of its five points and three triangles, the Indices 4 0 1 4 1 2 2 3 4.
2. In the Mesh, drag art/banners.png onto Texture, and set Sort Layer to Props.
3. Open each of the five Vertices and type its Uv from banner-1’s row of the table below.
4. Do the same for banner-2, banner-3 and banner-4, selecting vale before each add: banner-2 at Position 2464, -104, banner-3 at Position 2496, -104 and banner-4 at Position 2528, -104, each typing its own row. Set banner-4’s Mesh Color to 0.9, 0.9, 1.0, alpha 1; leave the rest white.

Make a Mesh

Under a Polygon’s rows: replaces the Polygon with a Mesh of the triangles it is drawn with, each point’s Uv where it stands in the outline’s box and every point white. Its Color, Texture, Sort Layer and Opaque come across, so the Mesh looks as the Polygon did. A Mesh has no Fit, so a Polygon set to Tile comes out stretched, and the button’s hover says so. One undo puts the Polygon back. It is greyed on a node that already has a Mesh, and on an outline of fewer than three points.

A rope between two poles

1. Add a Shape three times, for the table below, selecting vale before each add, so all three are its children: rename each, type its Position, and in its Shape type its Size and Anchor.
2. Give each Color 0.147, 0.064, 0.022, alpha 1 and Outline Color 0.033, 0.013, 0.005, alpha 1, a dark wood, which chapter 10 gives the signposts too, Outline 1, and set Sort Layer to Props. Press Ctrl+S.

In the game

The sky, the planes and the banners

Check it works