Skip to content

Tutorials · Particle Effects · Chapter 4

Where particles are born

25 minutes Uses: ParticleEmitter

By the end

  • Rain from a line across the sky (rain), fog from a box along the street (fog), a ring on the well’s rim (well_ring)
  • The fountain’s jet from a cone
  • Shape and its fields, and Sort Layer
On this page

Shapes

Every emitter so far was born at its node, one point. Shape spreads out where particles are born, and only where: Direction and Spread still aim them. The rain is the first user of it. It falls from the whole width of the sky, so it is born along a line just above the window.

  1. Select Town, press + Add node, and choose Particles. Rename it rain.
  2. Set its Position to 320 and -12, just above the top of the window.
  3. Set Rate to 120, Lifetime to 1.1, Speed to 340, Direction to 0.12 and 1, down and a little to the right, Spread to 0.04 and Gravity to 200.
  4. Set Start Color to 0.7, 0.82, 0.9, alpha 0.7, and End Color to 0.7, 0.82, 0.9, alpha 0.5: the same pale blue, only a little clearer at the end.
  5. Set Start Size to 2. End Size stays at 2.
  6. Set Capacity to 144 and Sort Layer to 8, and drag art/soft-dot.png onto Texture.
  7. Open the Emission Shape group. Set Shape to Line and Length to 720.
rain selected, its Inspector narrowed with the search box, shape, to the Particle Emitter’s Emission Shape group: Shape Line in a drop-down, and Length 720.00; in the Viewport, at the very top edge of the town, a green arrow points down from the node with thin violet aim lines beside it and two small blue squares, the rest of the town still
The rain’s Shape rows: Line, Length 720.

The rain node sits above the top of the window, and so does its line, so the Viewport shows only the tip of the node’s own green arrow at the top edge, the thin violet lines of its aim, and the two small blue squares at their ends. The Line itself, which the Viewport draws as a violet line, and its handles lie up out of the picture with it. The pictures that follow show a Line and the other shapes in plain view.

Close up of the middle of the sky, dark above and cloud banks and the tops of the mountains below: small pale specks scattered across the whole width of the picture, among a few stars, and the top of the first chimney’s smoke at the bottom left
Close up, two seconds in: from a Line, the drops are scattered across the whole width of the sky.
The same close-up with the rain from a Point: a single thin column of pale dots running from the top centre of the picture down to the bottom, leaning a little to the right, the stars and the smoke as before
For comparison, Shape Point: one thin stream, all from one spot.
Shape
Where in the emitter’s neighbourhood each particle is born. It decides nothing else: Direction and Spread still say which way a particle flies, even from a Cone. Point is the node itself, as before. Line is a straight line along the world’s x, centred on the node. Box is a rectangle. Circle is a disc. Cone is a wedge that opens along Direction. Each but Point has numbers of its own, below. In the Viewport a selected emitter’s shape is drawn in violet, with handles you can drag.
Length
A Line’s length from one end to the other, in world units. 720 is the window’s 640 and a little more, so no end of the rain shows.
Size
A Box’s full width and full height, in world units: x and y. The fog’s is 680 and 20, a long thin strip.
Radius
A Circle’s radius, or how far down a Cone’s wedge the particles are born, in world units. The well’s ring is 12.
Angle
A Cone’s full opening, in radians, centred on Direction, as Spread is. 0.25 is about fourteen degrees.
Edge Only
On a Box or a Circle: tick it and particles are born on the outline alone, and the middle stays empty. A Box’s outline is walked by length, so a long side gets more than a short one.

To see where each shape puts a particle, here is the rain’s emitter held still, moved into the open sky and given a Speed and a Gravity of 0, so that nothing moves, a Lifetime of 3, a Size of 6 and a solid colour, so that about a hundred and eighty big dots stand where they were born. Each picture changes only the Shape, and these numbers are not the town’s: they are chosen to make each shape large.

A single straight horizontal line of small white dots, so close together that they form an almost solid dotted line, across the dark sky above the cloud banks and the mountains
Line, Length 300: a straight line, centred on the node.
A rectangle of small white dots scattered evenly all through it, about three hundred units wide and a hundred and ten tall, in the dark sky above the cloud banks
Box, Size 300 and 110: dots all through a rectangle.
The same rectangle with only its outline in white dots: dots along the top and the bottom and down both sides, and the middle empty
Box with Edge Only ticked: the outline alone.
A disc of small white dots scattered evenly all through it, about a hundred and forty units across, in the dark sky above the cloud banks
Circle, Radius 70: dots all through a disc.
The same circle with only its rim in white dots: a thin ring of close dots with an empty middle
Circle with Edge Only ticked: a ring.
A wedge of small white dots scattered through it, its point at the top and opening downward, about a hundred units long and a hundred wide at its base, above the cloud banks and mountains
Cone, Angle 1.2, Radius 100, Direction 0, 1: a wedge from the node, opening down.

Fog from a box

Fog lies along the whole street, so its emitter is a long thin box on the street’s top edge. Its puffs are large and faint, and they drift only slowly to the right.

  1. Select Town, add a Particles node, and rename it fog. Set its Position to 320 and 284.
  2. Set Rate to 8, Lifetime to 7, Speed to 6, Direction to 1 and 0, to the right, and Gravity to 0. Spread stays at 0.6.
  3. Set Start Color to 0.55, 0.62, 0.66, alpha 0.25, and End Color to 0.55, 0.62, 0.66, alpha 0.
  4. Set Start Size to 48 and End Size to 72.
  5. Set Capacity to 64, Sort Layer to -5 and Blend to Screen, and drag art/smoke-puff.png onto Texture.
  6. Open Emission Shape. Set Shape to Box, Size to 680 and 20, and leave Edge Only unticked.
  7. Press Ctrl+S.
fog selected, its Inspector narrowed with the search box, shape, to the Particle Emitter’s Emission Shape group: Shape Box in a drop-down, Size x 680.0 and y 20.0, and Edge Only unticked; in the Viewport the node’s move arrows stand at the street’s top edge in the middle, and the Box is a thin violet rectangle across the street, reaching a little past the town at each end, with a small blue square on each of its four corners, two at the left and two at the right, and two more small blue squares beside the node
The fog’s Shape rows: Box, Size 680 and 20.
The street eight seconds in: faint grey wisps of fog floating along the back of the street, clearest at the left and right of the picture and behind the forge’s mouth, and passing behind the paving, the fountain’s stones and the well, with its ring of blue sparks, in front of it
Eight seconds in: a faint bank of fog along the back of the street.

Blend Screen lightens what is behind it and never darkens it, so fog over a dark street only ever brightens it. Alpha would look almost the same here, because this fog is so faint that the two came out the same to the eye. The pale smoke-puff.png, a ragged puff drawn for smoke, is what gives the fog its wisps.

A ring on the well’s rim

The well gets a ring of light round its mouth. That is not a stream from a point, and not a box: it is a circle, with its middle left empty.

  1. Select Town, add a Particles node, and rename it well_ring. Set its Position to 528 and 262, the well’s mouth.
  2. Set Rate to 36, Speed to 4, Spread to 7 and Gravity to -8. Lifetime stays at 1.2 and Direction at 0, -1.
  3. Set Start Color to 0.55, 0.9, 1, alpha 1, and End Color to 0.3, 0.5, 1, alpha 0.
  4. Set Start Size to 7 and End Size to 3.
  5. Set Capacity to 48, Sort Layer to 4 and Blend to Add, and drag art/soft-dot.png onto Texture.
  6. Open Emission Shape. Set Shape to Circle, Radius to 12 and tick Edge Only.
  7. Press Ctrl+S.
well_ring selected, its Inspector narrowed with the search box, shape, to the Particle Emitter’s Emission Shape group: Shape Circle in a drop-down, Radius 12.00, and Edge Only ticked; in the Viewport the node’s move arrows stand at the well’s mouth at the right of the town, inside a small violet ring, the Circle, with a violet line running up from the node to a small blue square, another small blue square below it and a third on the ring at the right
The ring’s Shape rows: Circle, Radius 12, Edge Only ticked.

Spread 7 is more than a whole turn, so the sparks leave in every direction, but at Speed 4 they barely leave at all: they drift up on the faint Gravity of -8 and fade. That keeps a ring a ring. Blend Add makes them glow where they cross.

Close up, the well: small blue-white sparks scattered round a ring above the well’s mouth, with a gap in the middle and a few drifting up above it, in front of the well’s roof and stones
Close up: a ring of light on the well’s rim.
Close up, the well with Edge Only unticked: the blue-white sparks crowded into a dense blob over the well’s mouth, with no gap in the middle
Close up, for comparison: Edge Only unticked, a filled disc.

The fountain from a cone

The last shape is for a jet. A fountain’s water leaves its spout across a small opening, not from a single point, and a Cone is a wedge opening along Direction, so it opens upward with the jet.

  1. Select fountain_jet. Open Emission Shape, set Shape to Cone, Angle to 0.25 and Radius to 3.
Close up, the fountain’s jet from a Point: a narrow stem of pale blue dots rising from the spout in front of the middle house and opening into a bush near its eaves
Close up, for comparison: the jet from a Point, chapter 3’s.
Close up, the fountain’s jet from a Cone: almost the same rising stem and bush of pale blue dots, the stem a little looser and wider than the Point’s, with more dots scattered either side of it
Close up: from a Cone, nearly the same jet, its stem a little looser and wider.

The two read alike, and that is the lesson: a wedge 3 units long is tiny beside a jet 43 units high, so it only loosens the stem of the water. A Cone earns its place when it is large, as in the pictures above: it is the shape for a spray that fans out of a nozzle or a doorway.

In front, behind

The fog has to lie behind the fountain, the well and the forge, but in front of the houses. You set that when you made it, with its Sort Layer of -5.

Sort Layer
The order things are drawn in: lower first, so further back, and a higher one is drawn over a lower. An emitter is one layer for all its particles. A new emitter starts at 10, in front of nearly everything. The numbers the town uses are in the table below, and -5 lays the fog between the houses and the fountain.
Sort LayerWhat is drawn there
-30 to -26The painted sky, clouds, mountains, far buildings and forest
-20The houses, town
-5The fog
0The street’s paving
2The forge, the fountain and the well
3The fountain’s jet, and the second lamp
4The well’s ring
8The rain
10The chimney’s smoke
The same street with the fog at Sort Layer 10: the fog now drawn over the paving, a pale haze lying across the street’s green and gold stones and over the fountain’s stones and the well’s base
For comparison, Sort Layer 10: the fog drawn over the fountain’s stones and the well.

The rain, the fog, the ring and the fountain

The rainValue
Position320, -12
Rate120
Lifetime1.1
Speed340
Direction0.12, 1
Spread0.04
Gravity200
Start Color0.7, 0.82, 0.9, alpha 0.7
End Color0.7, 0.82, 0.9, alpha 0.5
Start Size2
End Size2
Capacity144
Sort Layer8
Texturesoft-dot.png
ShapeLine, Length 720
The ground fogValue
Position320, 284
Rate8
Lifetime7
Speed6
Direction1, 0
Spread0.6
Gravity0
Start Color0.55, 0.62, 0.66, alpha 0.25
End Color0.55, 0.62, 0.66, alpha 0
Start Size48
End Size72
Capacity64
Sort Layer-5
BlendScreen
Texturesmoke-puff.png
ShapeBox, Size 680, 20, Edge Only unticked
The well’s ringValue
Position528, 262
Rate36
Lifetime1.2
Speed4
Direction0, -1
Spread7
Gravity-8
Start Color0.55, 0.9, 1, alpha 1
End Color0.3, 0.5, 1, alpha 0
Start Size7
End Size3
Capacity48
Sort Layer4
BlendAdd
Texturesoft-dot.png
ShapeCircle, Radius 12, Edge Only ticked
The fountainValue
Position320, 258
Rate80
Lifetime1.2
Speed150
Direction0, -1
Spread0.35
Gravity260
Start Color0.75, 0.9, 1, alpha 0.9
End Color0.6, 0.78, 0.95, alpha 0.2
Start Size3
End Size2
Capacity112
Sort Layer3
Texturesoft-dot.png
ShapeCone, Angle 0.25, Radius 3

Check it works

Part 1 ends here: a town with smoke, water, rain, fog and a ring of light. Curves and gradients begins making them look real.