All case studies

Nonogram Picross — teaching elimination without a tutorial

The technique that solves a nonogram is crossing squares out, not filling them in. Beginners almost never do it, so the controls had to teach it.

Nonogram Picross — teaching elimination without a tutorial
Client
In-house title
Platform
WebGL / browser
Engine
Unity
Genre
Puzzle
Unity WebGLC#unique-solution generatorgzip compressionApache

The challenge

Nonograms look like a colouring activity and are actually a constraint satisfaction problem. The numbers beside each row and above each column describe runs of filled squares, and the player's job is to find the single arrangement that satisfies every row and every column at once. That gap between how it looks and what it is creates the first problem: new players approach it as guesswork, make a plausible-looking fill, and build an entire board on a wrong assumption they cannot later locate.

The second problem is the one that decides whether the game is fair at all: generation. A nonogram with more than one valid solution is not a logic puzzle — it is a game where the player has to guess at some point and then hope. And unlike a sudoku, where uniqueness is fairly easy to reason about, a nonogram generated by taking a picture and counting its runs very often produces a clue set that several different pictures satisfy. A player who solves it correctly and is told they are wrong, or who reaches a board state where no deduction is available, has been handed a defective puzzle. They will blame themselves first and the game second, and then leave.

Third is a teaching problem that is specific to this genre. The core solving technique is not filling squares, it is eliminating them. Experienced players cross out cells that cannot be filled, and that negative information is what narrows the remaining space until a row becomes forced. Beginners almost never do this — they look only for cells they can fill, run out of obvious moves early, and conclude the puzzle is too hard. The game has a technique to convey, and it cannot do it with a tutorial nobody reads.

Fourth, nonograms punish a single mis-click permanently if the board has no way to distinguish "I know this is empty" from "I have not decided yet". Without an explicit cross-out state, a player's accumulated reasoning lives only in their head, and one interruption erases it.

And fifth, this is a browser build with no install step, so there is no sunk cost. A visitor who cannot see how to begin within thirty seconds closes the tab.

Our approach

Uniqueness was treated as a generation requirement rather than a hope. A puzzle is only accepted if exactly one arrangement satisfies all of its row and column clues — which means the player can always reach the answer by deduction and never has to guess. This is the single most important decision in a nonogram implementation, because the alternative is not "a harder puzzle", it is a puzzle that cannot honestly be solved. It also lets the game make a promise it can keep: if you are stuck, the information is on the board.

The cross-out state was given equal weight to the fill state rather than treated as an optional marker. A player can mark a square as definitely empty, and that mark is as visually committed as a filled square. This is what externalises the solving process: the board holds the player's reasoning instead of their memory, so they can stop mid-puzzle, come back, and still know what they had worked out. It also means an interruption costs nothing, which matters for a game played in short breaks.

More importantly, making cross-out a first-class action is how the game teaches its own core technique. A player who can eliminate squares will eventually try eliminating squares, discover that a row becomes forced once enough cells are excluded, and learn the actual method without a tutorial explaining it. Building the technique into the controls teaches it faster than any instruction screen, and nobody can skip past it.

Clue presentation was designed for scanning rather than reading. Row clues sit tight against the left edge of their row and column clues against the top of their column, so the eye can follow a line from the clue to the cells it governs without losing its place. In a puzzle where the entire activity is relating a number to a line of squares, any ambiguity about which clue belongs to which line is a direct cost to solving speed.

Filled, crossed and undecided are three visually distinct states, not two states and an absence. An undecided cell reads as genuinely neutral, so a half-solved board shows at a glance where the remaining work is — which is what lets a player pick up a puzzle they left twenty minutes ago.

No timer and no move limit. The entire activity is deduction, and both a clock and a penalty push players toward guessing, which is precisely the behaviour a logic puzzle must not reward.

On the technical side the build ships gzip-compressed, identified by reading the magic bytes rather than assuming Brotli like several others in the library, with its own server rule declaring that encoding so the browser decompresses natively instead of falling back to the slower JavaScript path. The canvas is responsive, fixed to the full stage with the game scaling its own UI, so it fills the player page at any window size without cropping.

The result

Every puzzle has exactly one solution, verified at generation. That is what makes the game a logic puzzle rather than a guessing game — the player can always reach the answer by deduction, and the game can honestly say the information is on the board.

The cross-out state carries the same visual weight as a fill, which externalises the player's reasoning onto the board. A half-solved puzzle can be left and resumed without losing what you had worked out.

Making elimination a first-class action also teaches the technique that separates a beginner from a solver. A player who can cross out squares discovers on their own that rows become forced once enough cells are excluded — no tutorial required.

Three distinct states, not two: filled, crossed and genuinely undecided, so a partly-solved board shows at a glance where the remaining work is.

Clue layout is built for scanning, with each clue tight against the line it governs, because the whole activity is relating a number to a row of squares.

No timer and no move limit — a clock pushes players toward guessing, which is the one behaviour a logic puzzle must never reward.

Loads with native gzip decompression and fills the stage at any window size. Playable on this site right now, with no download and no account.