Skip to content
Rengy
Menu

Tutorials · Particle Effects · Chapter 15

Particles on a phone

25 minutes Uses: ParticleEmitter

By the end

  • Why big, soft particles cost more than many small ones on a phone
  • The town budgeted: the fog smaller and thinner, the rain and the fountain thinner, the chimneys slower, the sparks’ trail shorter
  • The statistics overlay read for instances, and the town previewed at the Android tier and exported
On this page

Reference

What a particle costs

A phone’s graphics chip draws the screen in tiles, and it pays for every pixel it writes: once for each thing drawn over it. A particle is a small picture drawn over whatever is behind it, and a big soft one writes every pixel of its square, even its nearly clear edges. The town’s fog is the example. A fog puff at its full size, 72 units wide, covers a square of about 5000 square units, and the fog keeps more than fifty of them alive along the street, so the street is written over many times. A spark three units wide covers 9. One puff writes what hundreds of sparks do.

So the cost of an effect is not how many particles it has but how much it covers: the number alive, times the area each one writes. Many small sparks are cheap, and a few big soft puffs are not.

Counting it

The editor counts what it draws. This is the statistics overlay of Light and Shadow’s chapter 14, read for particles.

  1. Open Render and tick Render statistics. A panel appears over the Viewport’s top right.
  2. Press F5, wait five seconds, and read the rows from passes to instances. Press F5 again to stop.
The statistics panel’s first four rows, five seconds into Play, for the town as chapter 14 left it: passes 7, draws 26, batches 11 broke on a texture, instances 1055
Five seconds into Play, before the budget: instances 1055.
passes
The passes the whole frame is drawn in, the town’s and the post chain’s included. Each is a tile flush on a phone. 7 here.
draws
The frame’s draw calls. Particles that share a texture, a blend and the lighting ticks are drawn in one call, so each emitter with its own look is at least one. 26 here.
batches
How many batches the pictures were gathered into, and why a run could not merge with the next: 11 broke on a texture, since the town draws from many different pictures.
instances
The small pictures drawn this frame: every sprite is one, every live particle is one, and each ghost of a particle’s Trail is one more. This is the row a particle budget moves.

Draws are what the chip is asked to do, and instances are how much each request fills. A town can have few draws and a thousand instances, as this one does. The budget below cuts instances, not draws, and what it saves is mostly in the area each instance covers, which the overlay does not count: the fog is the biggest of that.

A budget for the town

Five effects get thinner. The rule is chapter 1’s: Capacity is Rate times Lifetime, with a little room.

  1. Select fog and set Start Size to 32, End Size to 48, Rate to 5 and Capacity to 40.
  2. Select rain and set Rate to 80 and Capacity to 96.
  3. Select forge_sparks and set Trail to 1.
  4. Select chimney_a and set Rate to 8 and Capacity to 32. Do the same on chimney_b.
  5. Select fountain_jet and set Rate to 60 and Capacity to 80.
  6. Press Ctrl+S, then press F5, wait five seconds, and read instances again. Press F5 again to stop.
The statistics panel’s first four rows, five seconds into Play, after the budget: passes 7, draws 26, batches 11 broke on a texture, instances 841
After the budget: instances 841, with the same 26 draws.

Instances fell from 1055 to 841, and draws did not move. Counting every live particle in the town at five seconds, and adding up each one’s size times its size, gives 581 particles covering about 267000 square units before the budget, and 463 covering about 110000 after: a fifth fewer particles, and about two fifths of the area.

The street from the forge to the right-hand edge, before the budget: broad, soft grey puffs of fog lying along the paving, overlapping one another, with the forge’s fire at the left, the fountain’s stones and the well’s base above the fog and the street’s gold and green paving below
For comparison, the fog before: big puffs piled along the street.
The same strip after the budget: smaller, fainter puffs, further apart, along the paving, and the street between them clear
After: smaller, fewer and fainter puffs, and the street still hazed.
EffectBeforeAfterWhy it matters
The fog, fogStart Size 48, End Size 72, Rate 8, Capacity 64Start Size 32, End Size 48, Rate 5, Capacity 40The biggest writer of pixels in the town. A puff a third narrower writes under half the pixels, and there are fewer of them.
The rain, rainRate 120, Capacity 144Rate 80, Capacity 96Each drop is tiny, so rain costs by its count: a third fewer drops is a third fewer pictures, and fewer splashes to follow them.
The sparks’ trail, forge_sparksTrail 3Trail 1A Trail of 3 draws each spark and three ghosts behind it, four pictures. 1 draws it and one ghost: half as many.
The chimneys, chimney_a and chimney_bRate 12, Capacity 48Rate 8, Capacity 32Two plumes of soft puffs, each growing to 26 wide. A third fewer puffs, and the plume is a little thinner.
The fountain, fountain_jetRate 80, Capacity 112Rate 60, Capacity 80Small drops: a quarter fewer, and the jet still reads.

The Android preview

  1. Open Render, and under Preview as choose Android. Look at the toolbar, and at the town.
  2. Open Render again, and under Post choose Game, to stop previewing.
The editor previewing the Android tier: the toolbar’s readout reads Android 5p in orange, then glow 1.00, 16.67 ms and 39 nodes; the Viewport shows the town through the game camera, dim, with the circles round the two lamps and the lantern-bat, and three thin orange circles for the particle attractors
Part of the Viewport at the game’s own tier, with Play’s particles: the first street lamp’s warm pool on the houses and street, the fire’s glow at the left, the bat with its ribbon at the top right, and the circles of the lamp lights drawn over it
The game’s own tier.
The same part of the Viewport at the Android tier: the first lamp’s pool a little dimmer on the houses and the street, and everything else, the fire, the bat and its ribbon, the smoke and the rain, much as before
The Android tier: the first lamp’s pool a little dimmer. The particles are the same.
Preview as
The tier the Viewport draws at: Desktop, Android or Android Low, a weaker phone’s. It is not saved with the project. The toolbar names it and the passes it takes, as Android 5p.
Post → Game
The project’s own tier, which an exported game uses. It is where the editor starts, and where you go back to stop previewing.

Particles draw the same at every tier. What a phone’s tier changes is how the lights and the glow are drawn: the light buffer is the screen’s own eight bits, which cut light off at 1, so a lamp of Intensity 2.4 reads a little dimmer, and the glow is a shorter chain. Light on a phone has the whole of it. So the town’s real cost on a phone is the number of pictures and the area they cover, which is what the budget cut, and a glow that is one more pass over the whole screen.

Export the town

Export writes the town to a folder of its own: your project, with its pictures prepared for the game to load, and a copy of the player that came with Rengy, named after your project. Nothing is compiled: the scripts run as they are. Exporting has the whole of it, and Crypt Knight’s export walks through the same steps.

  1. Save with File → Save all: Export copies the files as they are on disk.
  2. Click the Build tab, or choose View → Panels → Build if it is not there.
  3. In its Export section, a line under Export says where the game will be written, ending in particle-effects/dist/particle-effects/particle-effects.
  4. Press Export. When it is done, the editor opens the new folder in your file manager.
  5. Double-click particle-effects, or particle-effects.exe on Windows. On Linux, if double-clicking does not start it, run ./particle-effects in a terminal in that folder.
The editor with the Build panel open under the Viewport: Build now beside the line Interpreter, scripts run directly, nothing to build, then the Export section with Export and Cook only and the line particle-effects/dist/particle-effects/particle-effects, and a folded Cook assets; the Viewport shows the town through the game camera
The Build panel’s Export section: the Export and Cook only buttons, and under them the line particle-effects/dist/particle-effects/particle-effects

The export is the same player, running the same files, so the town looks as it did in the editor’s Play: the fireworks, the star, the bat and the well’s ring all run as scripts, with nothing built.

Everything this tutorial costs

Each chapter priced its own controls. Here they are in one place, the ones a phone feels most first.

ControlWhat it costsWhere it was taught
Start Size and End SizeThe area each particle writes, which grows with the square of its width. Soft, large, translucent and many deep is the one real price.Colour, size, fading
Rate times LifetimeThe number alive. Every live particle is drawn every frame.One emitter
Trail, the emitter’sOne more picture for each ghost, for every particle: a Trail of 3 draws each particle four times.Streaks
A material and Custom DataThe shader’s code on every pixel of every particle.Light, glow and your own look
A glowWhole-screen passes: two for each Blur Pair. Each is a tile flush on a phone.Light, glow and your own look
CollisionA test of each particle against the solids near it, which grows with how many solids the room has. Off, the room’s solids are never looked at.Collision
An attractorA distance test of each particle against it, every step.Forces
NoiseA little arithmetic for each particle, every step.Wandering
TriggerOne containment test for each particle, every step. Off, none is made.Particles and scripts
On DeathA node made for each particle that dies, a copy of the artifact, with at most 256 alive in a room at once.Particles that make particles
PrewarmTime, once, when the room opens: the seconds you ask for are simulated up front.Bursts and prewarm
CapacityMemory when the room opens, and nothing else: only the particles alive are drawn.One emitter
Texture Sheet and StretchNothing extra: the same picture, a different part of it, or a longer one.Flipbooks and spin
Unshaded and Light OnlyNext to nothing.Light, glow and your own look

Check it works