One Layout Engine, Four Shapes

Solo widescreen, solo portrait, split screen and a focus view, all produced by the same function.

The game has to work on a 4K monitor, a phone in portrait, a phone in landscape, and a split screen with two boards. Rather than four code paths, there is one function that computes slots.

What a slot is

A slot describes one player's playfield: the cell size, the well's position and dimensions, and the rectangles for the hold panel, next queue and stats.

Every drawing function takes a slot. Nothing downstream knows whether it is rendering a solo run, the left half of a duel, or a shrunken opponent board.

The four shapes

Solo widescreen. Hold and stats to the left, next queue to the right, well centred. Used when there is horizontal room.

Solo portrait. Hold and next as a strip above the well, stats in a line, the well taking the rest.

Versus split. Two equal slots side by side with a centre column carrying the match clock and running score.

Versus focus. Your well at full size with the opponent's at half scale beside it, floors aligned so stack heights compare directly. Used when there is not enough width for two full boards.

Choosing between them

Available width and height, after subtracting whatever the on-screen controls occupy. Each shape has a target aspect ratio, and the cell size is the minimum of what the width and height allow.

The landscape problem

The subtlety is that the on-screen controls do not always eat the same axis. A bar across the bottom costs height; thumb clusters at the edges cost width.

On a landscape phone, reserving 128 pixels of height for a control bar left cell sizes around ten pixels — unplayable. Moving the controls to the sides and taking the reservation from the width instead produced seventeen pixel cells in the same viewport.

That is why the layout function takes a parameter describing where the pad is, rather than assuming.

Read next

• Building a Game With No Dependencies At AllNo engine, no framework, no library, no build step for the game itself. What that costs and what it buys.
• Rendering: Sprite Caches and Layer BakingDrawing four hundred glowing blocks per frame is slow. Drawing four hundred cached bitmaps is not.
• Every Sound Is Generated, Not RecordedOscillators, filtered noise and a reverb impulse built from decaying random numbers. No audio files anywhere.
• The Soundtrack Is a Sequencer, Not a FileA four-bar progression with drums, bass, arpeggio and a lead, whose tempo and arrangement climb with your level.
• Why the Simplest Games Outlive Everything Around ThemForty years of hardware generations have discarded nearly everything. A few rectangles survived all of them.
• How a 1989 Cartridge Got a World ChampionshipA small side event grew into a competitive scene that repeatedly broke what the game was thought capable of.