Skip to content
Rengy
Menu

Tutorials · Worlds and Levels · Chapter 5

Hills

75 minutes Uses: SpriteShape

By the end

  • Two hills, hills-west and hills-east, each a closed, smoothed Sprite Shape typed point by point, in place of the vale’s two grey ground Blocks
  • Turf laid along every face within 60° of up, and earth tiled under it at its own size
  • Collision from the same outline, its top on the walking line, with the Collider beside it giving its rules
  • The ravine’s lips, lip-west and lip-east, in place of its two grey walls: a slab along the top, the slab’s end on the shoulder, darker earth at twice its size
On this page

Reference

When to reach for a Sprite Shape

The vale is still walked on grey: ground-block-west and ground-block-east, and the ravine’s walls, ravine-block-west and ravine-block-east. This chapter replaces all four with Sprite Shapes: hills that roll, and the lips either side of the ravine.

Reach for a Sprite Shape for ground that follows a line no grid does: a slope, a crest, a hill’s rounded end. Its outline is one list of points, and the edge art, the fill and the collision all come from it, so they cannot drift apart when a point moves. Chapter 2’s tiles stay the tool for anything built on a grid, and chapter 6’s Polygon for a filled outline with no edge art of its own.

What collides, what draws, what sorts: with Collide ticked and a Collider on its node, a Sprite Shape collides as a row of boxes along its outline, and the Collider gives only their rules; it draws bands of edge art along its faces, corner pieces at its sharp turns, and its fill inside; and it sorts as one node on its Sort Layer. On Ground, tiles draw over it, and a shape added later draws over one added before.

The preset

  1. Double-click scenes/vale.ron in Assets. Select ground-block-west, press Delete, and press Delete in the box that asks; do the same for ravine-block-west, ravine-block-east and ground-block-east.
  2. Select vale, press + Add node and choose Sprite Shape: the menu lists it after Line.
The vale at 200% round the hut with the four Blocks gone, the ground under the walking line dark: a new node, Sprite Shape, selected under vale; in the Viewport a line from the origin’s west to its east with a square handle at each end, a band of flat white 16 deep hanging under the line, its east half under the hut’s step tiles, and four green boxes under it; the Inspector shows Name Sprite Shape, Position 0.0 and 0.0, and its ColliderComponent: Kind Rectangle, Size 64.0 and 64.0, Polygon, Step 32.00 u, Offset 0.0 and 0.0, dimmed, then Solid ticked, One Way unticked, Layer pilgrim, Include Layers and Exclude Layers Nothing
A new Sprite Shape: two points, one band of flat white, and its collision boxes.

The preset is a ledge 128 wide, from -64 to 64 on the walking line, at the origin: two points, one band of edge art with no picture, so flat white, 32 along and 16 deep, on every face, From 0° To 360°, and Collide ticked. Beside it, a Collider with all it comes with. A node Add node puts here stands at 0, 0, so each of its points is a place in the world. It is on Sort Layer 0, Sky, so the hut’s step, on Ground, draws over it.

The Collider beside it is not decoration. Without one, the shape draws as ground and nothing collides with it, and Problems says: “This Sprite Shape has Collide on and no Collider on its node, so nothing collides with it — add a Collider here: it gives the Layer, One Way and Material, and the shape gives the boxes”. With one, the Collider’s own shape is not read: its Kind, Size, Polygon and Offset rows are dimmed, and their hover says why.

Drawing the outline

An outline is drawn in the Viewport, point by point, and every point is also a row of the Inspector’s Points list, numbered from [0], where it can be typed exactly.

Dragging a point
Each point of the selected shape is a square handle: drag it. A drag snaps to the grid while Snap is on; the hills are drawn with Snap off.
Inserting a point
Hover an edge: it lights, and a ring shows where a point would go. Double-click, and a point goes there, between the two it joins, in the list’s order too. It is put exactly on the edge, not snapped; drag it afterwards.
Deleting a point
Hover a point and press Delete or Backspace: that point goes, not the node. A shape keeps the points it needs to draw: at that many, the status line says “This outline keeps at least 2 points — move off its points to delete the node”.
The first points
An outline with fewer points than it needs to draw, two for a Sprite Shape, has no edge to double-click. 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.
The Sprite Shape’s Points
The outline’s control points, in order, each a place in the node: [0], [1] and on, each row an x and a y to type, with arrows to move it and a bin; + beside Points adds one.
Closed
Joins the last point back to the first: a shape with an inside, which a fill and a body of collision need. Unticked, it is a line, a ledge drawn left to right with its art on top.
Smooth
Rounds the outline into a curve through its points; unticked, it runs straight from point to point. A curve is straight wherever four points in a row are in line.
Reverse
Turns the points’ order round. On an open line it moves the art to the other side, a ledge into a ceiling. A closed shape is read round the same way whichever way it was drawn, so Reverse changes nothing it draws.

The hills

hills-west runs from x -92 to 1916 and hills-east from 2084 to 2908. Each lies at y 2 wherever something stands on the walking line: his start and the hut, the signs, the mere, the market, and where it meets a lip or the chapel’s floor. Between them hills-west rolls: west of the mere a crest, its top point 544, -30, and a dip, its bottom point 736, 14; east of the mere a crest, its top point 1632, -24. hills-east is flat, since the market leaves it nowhere wide enough to roll. Each end turns down under what stands beside it, and each hill is 320 deep below the walking line, as the Blocks were.

  1. Rename the new node hills-west. Leave its Position at 0, 0.
  2. With Snap off, drag the preset’s two points onto [0] and [55] of the table below, then double-click the edge between them and drag each new point to its place, in the table’s order, until it holds 56.
  3. In the Inspector, type each point’s x and y from the table, so every point is exactly where the table puts it.
  4. Tick Closed and Smooth.
Points+0+1+2+3+4+5+6+7
[0] to [7]-92, 28-89, 15-79, 5-66, 2-40, 20, 264, 2160, 2
[8] to [15]256, 2352, 2416, 0480, -16544, -30608, -22672, 0736, 14
[16] to [23]800, 5864, 2928, 21056, 21184, 21312, 21376, 21440, 2
[24] to [31]1504, 01568, -141632, -241696, -161760, 01824, 21864, 21890, 2
[32] to [39]1903, 51913, 151916, 281916, 641916, 1281912, 1921888, 2561840, 304
[40] to [47]1760, 3201568, 3201376, 3201184, 320992, 320800, 320608, 320416, 320
[48] to [55]224, 32032, 320-40, 320-80, 288-92, 224-92, 160-92, 96-92, 52

hills-west’s points, eight to a row: point [13] is in the row [8] to [15], under +5. The outline goes up its west end, east along its top, down its east end and back west along its foot.

hills-west selected and framed at 40.9%: a long brown hill with a band of turf along its top and a green ring of collision boxes all round its outline, rising in a crest, dipping and rising in a second crest, its ends rounded down, a square handle on each of its points; the Inspector shows Position 0.0 and 0.0 and its ColliderComponent with Kind, Size, Polygon and Offset dimmed
hills-west, the chapter’s end: a handle on each of its 56 points.
  1. Do the same for hills-east: select vale first, so the new shape is its child and not hills-west’s, then + Add node, Sprite Shape, renamed hills-east, its 31 points from the table below, Closed and Smooth ticked.
Points+0+1+2+3+4+5+6+7
[0] to [7]2084, 282087, 152097, 52110, 22136, 22176, 22240, 22368, 2
[8] to [15]2496, 22624, 22752, 22816, 22856, 22882, 22895, 52905, 15
[16] to [23]2908, 282908, 642908, 1282904, 1922880, 2562832, 3042752, 3202560, 320
[24] to [30]2368, 3202176, 3202120, 3042092, 2562084, 1922084, 1282084, 64

Each flat runs over four or more points at y 2, so the curve is straight there. Each crest and dip is at least 160 wide, and the hills are never steeper than 0.39 up for each across. Each end turns down on a radius of 26, wide enough for the turf, 12 deep, to bend through it.

Turf along the top

A shape’s edge art is a list of bands, each laid along the faces that point its way. The preset’s one band is on every face; the hills’ is turf, on their tops and slopes and nowhere else. art/turf.png, art/earth.png, art/slab.png, art/slab-end.png and art/slab-start.png came with the starter.

  1. Select hills-west. In its Edges, open [0], the preset’s band.
  2. Drag art/turf.png onto its Texture. Set From 30° and To 150°, Size 32, 12, Offset 2, and Color 0.92, 1.0, 0.88, alpha 1.
  3. Set the Sprite Shape’s Sort Layer to Ground.
The Inspector on hills-west narrowed with its search box to edges: the SpriteShapeComponent, Reverse, Art, Edges with 1 items and its +, its [0] with up, down and bin buttons: Texture turf.png, From 30.00 deg, To 150.00 deg, Size 32.0 and 12.0 u, Offset 2.00 u, and a pale green Color; Add component
hills-west’s band of turf, the search box narrowing the Inspector to edges.
Edges
The bands of edge art, each for the faces whose outward direction lies in its range. A face takes the first band in the list whose range holds it, and a face no band covers draws no edge art: a gap shows where the ranges leave one. The art runs along the outline as one strip through every bend, mitred at its joints, its picture repeated a whole number of times along each run.
The edge’s Texture
The band’s picture, repeated along it; none draws flat white.
The edge’s From and To
The range of directions, in degrees, a face points out of the shape for this band to cover, as the Inspector shows them: 0° points right and 90° up, 180° left and 270° down. The turf’s 30° to 150° is every face within 60° of up: the hills’ tops and slopes, and not their ends or their foot.
The edge’s Size
One repeat of the picture: its length along the edge, by its depth into the shape. The turf is 32 along and 12 deep.
The edge’s Offset
Moves the band out from the outline, away from the shape. The turf’s 2 puts its top 2 above the spline, where the collision’s top is.
The edge’s Color
A tint over the band’s picture, alpha included: the turf’s is a faint green.
The Sprite Shape’s Sort Layer
The sorting layer the whole shape draws on, its edges, corners and fill together. All four shapes here are on Ground, under the figures and the props.

Earth under it

  1. In the Fill fold, tick Fill. Drag art/earth.png onto its Texture, and set Fit to Tile.
  2. Leave Tile Scale at 1, and set Color to 0.80, 0.72, 0.62, alpha 1. Leave Opaque unticked.
Fill
Fills the inside of the outline. A closed shape’s inside is what its points enclose.
The fill’s Texture
The fill’s picture, laid as Fit says; none fills with flat Color.
The fill’s Fit: Stretch and Tile
Stretch, as it comes, spreads the picture once across the shape’s whole extent: on a hill 2008 wide, a smear. Tile repeats it at its own size times Tile Scale, counted from the node’s origin, so two shapes at the origin tile alike and their earth lines up.
The fill’s Tile Scale
World units each pixel of the picture covers under Tile: 1 draws it at its own size, 32 units a repeat for the 32-pixel earth; 2 at twice that, 64.
The fill’s Color
A tint over the fill, alpha included: the hills’ earth is darkened a little.
The fill’s Opaque
Draws the fill without blending, for ground nothing should show through: its see-through parts, and a see-through Color, come out dark instead of showing what is behind. Unticked here; chapter 13 ticks it.

What collides

  1. Leave Collide ticked. Set Step to 8, Thickness to 24 and Surface Offset to 2.
  2. Do the same for hills-east: its band, Sort Layer, fill and collision as hills-west’s.
The vale at 200% round the hut, hills-west selected: its turf and earth under the hut, and over them a row of narrow green collision boxes along its top, their tops on the walking line, and a column of them down its rounded west end; the Inspector shows its ColliderComponent with Kind, Size, Polygon’s Outline and Step, and Offset dimmed, and Solid ticked, One Way unticked, Layer pilgrim
hills-west’s collision, at the chapter’s end: boxes 8 long along its top, the Collider’s own shape dimmed.
The Inspector on hills-west narrowed with its search box to collision: the ColliderComponent, Polygon with Step 32.00 u dimmed, Layer pilgrim and Include Layers Nothing; the SpriteShapeComponent, Reverse, and the Collision fold: Collide ticked, Step 8.00 u, Thickness 24.00 u, Surface Off… 2.00 u; Add component
The search box on collision: the Collider’s rules, and the shape’s boxes.
Collide
Makes the outline the collision, ticked as the preset comes, beside a Collider on the same node, which gives the boxes their Layer, One Way and Material. Without a Collider nothing collides, and Problems says so. Unticked, the Collider is an ordinary box again, its own shape read.
Step
How long each collision box is along the outline. Short boxes follow a curve closely: at the hills’ 8, a box rises at most 3.1 on their steepest slope, under his Step Height, so he walks up them without catching.
Thickness
How far each box reaches into the shape, from its surface: 24 under the hills’ top.
Surface Offset
Pushes the collision surface out from the outline. The hills’ 2 puts it on y 0 wherever the spline lies at 2, where everything already stands, and the turf’s top with it; so the walking surface over the hills runs from y -32 to 12.

The ravine’s lips

The ravine’s walls become two narrow shapes, sharp-cornered, capped with slab. They are added after the hills, so on Ground they draw over the hills’ ends, which turn down under them.

  1. Select vale, press + Add node and choose Sprite Shape; rename it lip-west. Give it four points: 1888, 0; 1920, 0; 1920, 320; 1888, 320. They all sit on the 16 grid, so with Snap on, drag the preset’s two points onto the first and the last, then double-click the edge between them and drag the new point onto the second, and once more for the third; or type all four in the Inspector. Tick Closed; leave Smooth unticked.
  2. In its edge band, drag art/slab.png onto Texture and set From 45° and To 135°; leave Size 32, 16, Offset 0 and Color white as they come.
  3. Press + beside Corners, and open [0]. Drag art/slab-end.png onto its Texture; set From 20°, To 70°, Size 16, 16 and Offset -8, 8, and leave its Color white. Set Corner Threshold to 40 and Sort Layer to Ground.
  4. Tick Fill, drag art/earth.png onto its Texture, set Fit to Tile, Tile Scale to 2 and Color to 0.55, 0.48, 0.42, alpha 1. Leave the collision as it comes.
  5. Select vale again and add lip-east the same way, with its points 2080, 0; 2112, 0; 2112, 320; 2080, 320, and its corner art/slab-start.png, From 110°, To 160°, Offset 8, 8. All four shapes are now children of vale. Press Ctrl+S.
The Inspector on lip-west narrowed with its search box to corners: the SpriteShapeComponent, Smooth unticked, Reverse, Art, Corners with 1 items and its +, its [0]: Texture slab-end.png, From 20.00 deg, To 70.00 deg, Size 16.0 and 16.0 u, Offset -8.0 and 8.0 u, a white Color; Add component
lip-west’s one corner piece, the slab’s right end.
lip-west’s Art and Fill folds in the Inspector: Edges with 1 items and Corners with 1 items, each its [0] closed; Corner Threshold 40 deg on its slider; Sort Layer Ground and 4; Fill ticked; Texture earth.png; Fit Tile; Tile Scale 2.00; a light greyish beige Color; Opaque unticked
lip-west’s earth: Tile, at Tile Scale 2.
Corners
Corner pieces, each for the turns whose direction lies in its range. A corner is a turn sharper than Corner Threshold, and its direction is halfway between the two faces’ outward directions: the top-right corner of a block points up and right, 45°. The piece is drawn unturned, centred on the turn and moved by its Offset. A smoothed shape has no corners, so the hills take none.
The corner’s Texture
The piece’s picture, drawn once at each corner it covers.
The corner’s From and To
The range of directions, in degrees, a turn points for this piece to go on it: 0° points right and 90° up. lip-west’s 20° to 70° holds its top-east turn, 45°, the shoulder into the ravine, and none of its other three; lip-east’s 110° to 160° holds its top-west turn, 135°.
The corner’s Size
The piece’s size: the slab’s end is 16 by 16.
The corner’s Offset
Moves the piece from the turn, across and down: -8, 8 puts lip-west’s half its size in, under the top and off the ravine’s wall, so it ends the slab flush; lip-east’s 8, 8 does the same the other way.
The corner’s Color
A tint over the piece: white, as it comes, leaves the slab’s end as drawn.
Corner Threshold
How sharp a turn has to be, in degrees, to take a corner piece rather than the band bent round it. The lips’ turns are all 90°, sharper than their 40; the hills, smoothed, take none at any threshold.

Why two pictures for one slab’s end: slab-end.png is the strip’s right end, which suits lip-west’s top-east turn and faces the wrong way on lip-east’s top-west one, and a corner piece cannot be flipped. So lip-east takes slab-start.png, the strip’s left end, cut beside it.

A part of the game: him standing on the grey bridge over the ravine, the ravine’s dark slate gap below the bridge; either side a lip capped with a brown slab, its end rounded on the shoulder into the ravine, the hills’ turf meeting each lip from outside, and dark earth down the lips
The lips: each slab ends flush on its shoulder, slab-end west, slab-start east.
A close part of the game west of the ravine: the hill’s turf and fine-grained earth on the left, and the lip’s slab and coarser, darker earth on the right, its pebbles twice the size
The hill’s earth at Tile Scale 1, the lip’s at 2.

Each fill tiles its earth from the node’s origin: one repeat every 32 units on the hills and every 64 on the lips. Each lip draws its one corner piece, once, on its shoulder.

Walking the hills

Press Run game and hold D. The turf runs unbroken along the hills, and its band bends through every crest, dip and end without folding back on itself.

Two grey stand-ins still show over the hills. sky-block ends at y 0, so where the dip sinks below the walking line, the slate Background shows between them, until chapter 7 puts the sky in its place; and meadow-block crosses the east crest, until chapter 8’s meadow replaces it.

The game: from the hut he walks east over the flat, up the west crest’s slope past the sun, over the top and down into the dip beyond it, the view following him and the turf bending under his feet
Over the west crest. Watch the turf bend under him as he climbs to its top at 544, -30, and down into the dip.
A part of the game: him standing near the top of the west crest, the turf curving up from the flat on the left, over the crest under him and down towards the dip on the right, brown pebbled earth below, the sun in the grey sky beside him
On the west crest: the turf over the crest.

Dropped onto the hills from 48 above, at seven places from the hut to the market, he lands within a second on the top of their collision and stays there a second later, neither sinking nor sliding. Held, D takes him from the hut into the crypt within 25 seconds, over the crests and the dip, across the lips and the bridge: his feet never lower than y 16.5, and he never goes back west, so no box of the hills and no join with a lip or the chapel’s floor catches him.

And the try: on a copy, untick hills-west’s Collide and drop him onto its west crest’s flank, at x 600.

The game: him falling onto the west crest’s flank, and on through the hill without stopping, the view following him down into the earth and out under the hill
Collide off. Watch him fall through the hill: a second on, he is still falling, far under its top.

With Collide off, nothing under him holds him: the Collider beside the hill is its own box again, 64 square about the origin, far from x 600.

The four shapes

Fieldhills-west, hills-eastlip-westlip-east
Closed, Smoothticked, tickedticked, untickedticked, unticked
Edge Textureturf.pngslab.pngslab.png
Edge From, To30°, 150°45°, 135°45°, 135°
Edge Size, Offset32, 12; 232, 16; 032, 16; 0
Edge Color0.92, 1.0, 0.88, 1whitewhite
Cornernoneslab-end.png, 20° to 70°, 16 by 16, -8, 8slab-start.png, 110° to 160°, 16 by 16, 8, 8
Corner Threshold30, as it comes4040
Sort LayerGroundGroundGround
Fillearth.png, Tile, 1earth.png, Tile, 2earth.png, Tile, 2
Fill Color0.80, 0.72, 0.62, 10.55, 0.48, 0.42, 10.55, 0.48, 0.42, 1
Collide, Step, Thickness, Surface Offsetticked, 8, 24, 2ticked, 32, 32, 0ticked, 32, 32, 0

Each with the preset’s Collider beside it, at 0, 0. The four Blocks ground-block-west, ravine-block-west, ravine-block-east and ground-block-east are gone.

Check it works