Build a Match Cascade Playable From Scratch
No code, about forty minutes, and a working playable at the end. More usefully: an explanation of why each number in the template is the number it is, so you can tell which ones are load-bearing and which are just a starting point.
In short
- The mechanic is a swap: drag a gem onto its neighbour, and if three line up they clear and the board falls into the gap.
- The cascade is the thing worth advertising. Gems falling into a gap can make a new line without the player spending a move, and that free second match is what the format has to sell.
- The template opens playable — 7 × 7, five colours, collect ten, twenty moves — so you can press Play before changing anything or adding any art.
- The defaults are arguments, not placeholders. Five colours rather than four and seven rows rather than eight are both consequences of constraints worth understanding before you override them.
- Most of the build is replacing art and tuning three numbers. The mechanic itself needs no configuration to work.
This is a complete build of one mechanic, start to finish, with nothing skipped as obvious. You will need a browser and about forty minutes. You will not need to write anything, and you do not need art to begin — the template ships with coloured placeholders precisely so the mechanic can be played before a designer has delivered a single file.
A word on what this is for. The mechanic is a match-three: swap two adjacent gems, line up three or more, they clear. It is the most-advertised mechanic in mobile gaming, and it is worth being clear-eyed about why. It is instantly legible to almost anyone, it produces a satisfying result within one action, and the cascade gives you a moment of spectacle that the player caused but did not entirely plan.
If your product does not contain something like this, build a different ad — we have written elsewhere about when the format is the wrong choice, and a match board advertising a game with no match board is the exact failure that argument is about.
What you are building
Before the clicking, the shape of the thing. The ad has four parts, and only one of them is the game.
There is a board — a grid of gems the player swaps. There is a header carrying the goal and the moves left, so the player can see what they are being asked for and how much room they have. There is a call to action, on screen the whole time rather than only at the end. And there are two end messages, hidden until the round resolves one way or the other.
The board is the part that needs no configuration. Drop the template in, press Play, and it deals a board that is guaranteed to have a valid swap on it. Everything else in this walkthrough is either replacing a placeholder with your art or changing a number that was chosen for a general case rather than for yours.
Why the gems are not on the canvas
When you add the template you will see the board frame, the header and the button — and no gems. That is deliberate rather than broken. The gems are parked off the artboard as ordinary objects, and the board copies them onto the grid when the round starts. It means each gem is a normal object you can select and restyle like anything else, rather than a setting buried in a panel. Press Play and they appear.
The build
Eight steps. The first four get you a playable round; the rest are art, tuning and export.
- 1
Open the editor and start a playable
Create a new project and choose the playable format. You are given an empty artboard at phone proportions, which is the size the ad will actually run at rather than a desktop preview scaled down.
An empty portrait canvas, with the layer list and the inspector panel either side of it.
- 2
Add the Match Cascade template
From the playable template list, choose Match Cascade — described as 'Swap two to line up three'. It builds the board, the frame, the header plates, the progress bar, the button and the end messages in one go.
A board frame in the middle, a goal plate and a moves plate along the top, a progress bar under them, and a Play Now button at the bottom. No gems yet.
- 3
Press Play before changing anything
This is the step people skip and the one that saves the most time. The round is already complete: gems deal onto the board, swapping works, matches clear, the board refills. Swipe a gem toward a neighbour, or tap one and then the other — both gestures work.
Gems fill the grid. A valid swap clears at least three, the gems above fall into the gap, and the goal counter moves. An invalid swap slides back and costs you nothing.
- 4
Make a cascade happen on purpose
Look for a swap where the gems falling into the gap will land on a second match. When it happens the chain continues without you spending a move, and a banner marks it. This is the moment the ad is selling, so it is worth seeing deliberately before you tune anything.
A second match resolving on its own after the first, with the cascade banner appearing over it rather than in the centre of the screen.
- 5
Replace the gems with your art
Open the Pieces tab. Each gem is listed by colour, and each points at one of the parked objects. Select a gem and swap its placeholder for your own image the way you would with any other object. The layout owns the box — a 96px gem is fitted into the cell rather than sizing the cell to itself, so art drawn at any resolution lands correctly.
Your art on the board when you press Play, at the same size the placeholders were, still square in the cell.
- 6
Set the goal to something legible
On the Rules tab, under Goal, is Win by — collecting a colour, or scoring. Collecting is the clearer of the two for an ad, because 'seven of ten blue' is a sentence a stranger reads instantly and a score is a number with no context. Pick the colour that reads most strongly against your board art rather than the one that happens to be first.
The goal plate reading as a fraction, counting up as you clear that colour, and the progress bar filling alongside it.
- 7
Tune the three numbers that matter
Shortest line (leave at three), Moves, and Target under the goal. The next section explains what each one does to the round. Change one at a time and play after each — a board is a system, and two changes at once make it impossible to tell which one caused what.
A round you can win comfortably by playing reasonably, and can still lose by playing badly.
- 8
Point the button somewhere and export
Select the Play Now button and set its click action to your store URL. Then export. The editor produces a single self-contained file, which is what every network wants — check it against the size limit for the network you are shipping to before you upload it.
One file, under the network's limit, that opens in a browser and plays exactly as it did in the editor.
Why the defaults are what they are
This is the part that is genuinely ours, and the reason this walkthrough is longer than a list of clicks. Each of these numbers was argued about, and knowing the argument tells you whether your case is the exception.
The template's defaults, and the constraint behind each one:
| Default | Why, and when to change it |
|---|---|
| **Board: 7 × 7** | Square, because a square grid keeps its cell size when the phone turns — a rectangular one loses over a tenth of it. Seven rather than eight because the frame art needs room: split eight ways, the board gives roughly 30px cells, small enough that taps start to miss. Seven gives about 35px. Go smaller for a simpler read; going larger costs you accuracy on a real thumb. |
| **Colours: five** | The one number that surprises people. A swap board has to be dealt with no matches already on it, and the fewer colours there are the harder that is to arrange — at four the generator spends most of its attempts rejecting boards, and the ones it accepts look conspicuously striped. Five is what makes the opening board look natural. Fewer colours does make matches easier to find, which is a real reason to drop to four for a very short ad. |
| **Shortest line: three** | The rule every player on earth already knows, which is the entire argument for it. At four or five, most boards have no valid swap at all and the round ends before the player finds one. The field allows it; we would not. |
| **Moves: 20, goal: 10** | Deliberate slack. A cascade routinely collects two or three at once, so a player who swaps badly still wins and one who swaps well wins with moves to spare. Losing stays possible, which matters — a goal that cannot be missed is a cutscene with a finger on it. Set moves to zero for a round that cannot be lost, if you want that. |
| **Special gems: off** | A line of four leaves a rocket, five leaves a bomb — and both are switched off by default. The plain three-in-a-row is the mechanic, and an ad that opens by teaching two extra rules has spent the seconds it had. The pieces are already bound, so turning them on is one checkbox rather than a puzzle. |
| **A failed swap is free** | Swapping two gems that make no line slides them back and costs no move. This is not leniency, it is feedback: a stranger's first swap is often a guess, and charging for the guess teaches them that experimenting is punished in the two seconds where you most need them experimenting. |
Twenty moves against a goal of ten is not generosity. It is room for the cascade to do the thing you are advertising.
The cascade is the advertisement
One design point worth stating on its own, because it decides how you tune everything above.
A match-three ad is not selling matching. Matching is a chore the player performs. What it is selling is the cascade — the moment the board falls into the gap, lands on a second line, and clears again without the player doing anything. They caused it, they did not plan it, and it cost them nothing. That combination is rare and it is most of the format's appeal.
In this engine a chain is worth more the deeper it goes: points are multiplied by how far into the cascade a match landed, so a chain beats the same gems cleared one at a time. The banner appears from the second link onward, and it is stamped over the chain rather than in the middle of the screen, because the point is to draw the eye to where it happened.
The tuning consequence is that your numbers should leave room for cascades to occur and to matter. A goal tight enough that every move has to count turns the ad into an exam, and an exam does not produce the moment you are paying to show. If you are unsure whether to loosen or tighten, loosen.
On the hint pointer
The template includes a hint that mimes a swap which would actually work, after the player has been idle. It is worth switching on, and worth setting late rather than early — a hand that arrives before the player has tried anything replaces their discovery with an instruction, which is the main cost of the whole device. Let them be stuck first. A hint that only appears when it is genuinely needed is help; one that appears on a timer is a tutorial nobody asked for.
Questions this raises.
How long should the round be?
Shorter than feels right. The goal of ten against twenty moves usually resolves in somewhere around fifteen to twenty-five seconds of real play, which is about the ceiling for this format. If your testing shows players consistently using most of their moves, cut the target rather than adding moves — a round that ends while the player still wanted another go is doing its job, and one that outlasts their interest is not.
Do I need to handle landscape separately?
The template already does. It carries a second arrangement where the board keeps its exact size and moves beside a column of chrome, rather than being re-measured against the shorter frame. That distinction matters: re-measuring would give a smaller board and visibly smaller gems on the same phone turned sideways. Check both orientations before exporting, but you should not need to rebuild anything.
What if my game's real board is bigger than 7 × 7?
Advertise the smaller one. The ad is a sample, not a replica, and a 9 × 9 board on a phone gives cells small enough that a thumb starts missing them — which reads to the player as the game being fiddly rather than as the ad being cramped. The mechanic is what you are demonstrating, and the mechanic is identical at seven.
Can I make the board unwinnable to push the install?
You can, and we would argue against it at some length. A round tuned past what the real game does, specifically so the player falls short, manufactures a belief about their own chances that the design knows to be false. It also tends to backfire commercially, because the install arrives on an expectation the product then contradicts. Set the target where the round is genuinely winnable and let the cascade do the persuading.
Editorial
The Play Ads Maker team
We build the editor behind this site, which means we spend our days inside the format — its constraints, its export limits, and the question of what actually makes someone tap. We write about what we learn doing it.
The fastest way to understand the format is to build one
The editor is free to open, runs in the browser, and needs no code. Start from a template and have something playable within the hour.
Keep reading
Your First Playable Ad
Most beginner guides show you a smooth path to a finished file. This one tells you what actually happens the first time, including the parts where you get stuck.
8 min readBuild an Idle Tycoon Playable
A complete build of an idle-builder ad — two gestures, three plots, and an economy that has to deliver its second building inside fifteen seconds or lose the viewer.
9 min readWhy a Button Needs to Feel Pressed
A response to a tap is not decoration. It is the only proof the player has that they caused something — and if it arrives late enough, they stop believing they did.
8 min read