Skip to content
Replicant FX RFX Effects

Build a blaster

This is the long way in. By the end of it you will have built a blaster: a barrel that flashes when you pull the trigger, a reticle on a screen with a live ammo counter, a charge-up whine that climbs as you hold the trigger down, and a barrel that overheats and vents if you get greedy.

Live What you are building. Click the preview once for sound, then TRIGGER — tap it, or hold it to charge a heavy shot. Fire fast enough and it cooks.

Everything above is one show.json file, about 245 lines long, running in this page. No compiler ran. Nothing was flashed. The same file, dropped onto a board, is the prop.

You need nothing

Section titled “You need nothing”

No board, no soldering iron, no toolchain. Every step runs in the Studio, which is the engine itself compiled to WebAssembly — the same code that runs on the hardware, in your browser. Part 9 covers what changes when you want it in your hand instead of your tab.

The parts

Section titled “The parts”
1 · The Studio Where everything is. The menu bar, the six tabs, the palette, the tree, and the live preview.
2 · First light Devices, verbs and states — the smallest show that does anything, in twelve lines.
3 · The trigger A button, and a state machine with somewhere to go.
4 · Flow Steps, layers and fire-and-forget. The one idea the whole engine turns on.
5 · Heat Track one number, point the colours at it, and let the number move.
6 · The HUD A screen is a device. Draw a reticle, an ammo counter and a heat meter on it.
7 · Sound Play a file, or synthesise a tone whose pitch is an expression.
8 · The blaster Segments, a boot sequence and a low-ammo warning. The finished prop.
9 · Onto hardware The same file, on a real board. What changes, and what does not.

You will not be writing JSON

Section titled “You will not be writing JSON”

The Studio has a graphical editor: a palette of every verb the engine has, a tree of cards you fill in, and dropdown boxes for the things that have a fixed set of answers. Every part of this series is built that way — which card to open, which button to press, which box to type in.

The Studio Editor tab: a block palette down the left listing verbs grouped as Strip, Sound, Screen, Widgets, Flow and Actions; the show tree in the middle with a script card open showing an empty children list labelled 'drop here' and an add bar reading + effect, + draw, + flow, + action; the live preview on the right.
Drag a block from the palette into any list — or click ＋ effect and pick one. Neither route involves typing a brace.

A show.json file is still what comes out of it, and every part prints the file at the end so you can see what your clicking produced, check your work, or paste a whole step in if you would rather skip ahead. Read the listings as receipts, not as instructions.

The pictures are real. Every figure in this series is a photograph of the Studio taken by driving a browser at it, and every show is loaded into the engine and checked before it is published. If a listing here says the engine accepts it, the engine accepted it.