Skip to content

Playable ad best practices

Last updated 16 October 2026

1. Sell it in three seconds

  • Gameplay on the first frame. No title screen, no “tap to start” wall. The scene is already moving when the ad opens.
  • A hand cue within one or two seconds on the exact object to touch, and the object itself glows or bounces.
  • One short line of text at most. “Swap to match!” works; a paragraph of instructions doesn’t get read.
  • Two or three points of focus, with important UI above or below the play area, not at the sides.

In Flood Rescue water is already pouring in on the first frame while a hand points at the first swap. Two of our own early builds failed this rule and are in the playbooks as warnings: a shooter whose first frame had no enemy in view, and a survivor game whose first frame was empty until the enemies spawned.

2. One mechanic, the real one

Pick the single verb the player repeats (swap, merge, drag to aim, pull a pin) and build it properly: real match-3 cascades and refills, real tower targeting, real physics for coins and lava. A playable that fakes a mechanic the game doesn’t have sells a game the player won’t find after installing.

Knight Pin Rescue runs its gold and lava on a physics engine, so a wrong pin really lets the lava through. Coco's VIP Lounge deals real blackjack, with the dealer standing on 17; it rigs the order of the cards, never the rules.

3. Reward in two or three inputs

The first payoff lands before the player has decided whether they like it: a special piece on the first match-3 swap, a merge within about two seconds, a row cleared by the first block. Grid Drop opens on a nearly full board, so the hinted first drop clears a row and a column at once. Then escalate.

4. Three beats, then stop

  1. An easy win in the first five seconds that teaches the mechanic.
  2. A twist that adds one thing: a booster, a new enemy, a timer that speeds up.
  3. A climax: a boss, a big chain, a last-second save or a near miss, then the end card.

Interactive play runs 15 to 30 seconds for casual games and up to about 40 for midcore. If the player stops touching the screen for three seconds, the hand comes back; after about ten, the game moves on by itself. Night Swarm follows this shape: level-up cards at about 5, 12 and 19 seconds, a boss at 25.

5. Design the fail

A casual player should win the early beats, a skilled one should win clearly, and doing nothing should lose or reach the end card anyway. The loss is designed, not an accident: Knight Pin Rescue ends level three on a near miss, and in Flood Rescue an idle player watches the King get swept away.

Too hard is the more common mistake. Our first crowd runner wiped a casual player out by second eight; the playbook now says to balance it so a random player reaches the final stairs.

6. The end card

  • On both outcomes. Win and lose each get an end card with the store button.
  • Three or four elements: the game’s icon or logo, one benefit line, rating stars, a large centered button that pulses.
  • The whole card is a button. A tap anywhere on it opens the store.
  • Animated, not flat: the confetti, the coin rain or the character’s reaction keeps playing behind it.
  • A small in-game button (“Play now”) can show during play too, in a corner, after the first seconds.

7. Readable on a phone

  • Characters at least about 10% of the screen height, bosses and tanks 15 to 18%. Tiny units on a big board look cheap even when they animate well.
  • Text at least 14 px on a phone, measured to fit the width; two callouts never stack on each other.
  • Keep the top ~48 px free of anything critical (notches and status bars cover it) and put buttons and the hand in the lower third, where thumbs are.
  • In portrait, fit the width and extend the scene vertically; never crop the sides. Handle rotation.

8. Size budgets per network

Meta caps a single HTML file at 2 MB; the other networks in our export allow 5 MB. Everything is inlined, and base64 encoding adds about a third to every asset, so plan the budget before making art: we aim for about 4.5 MB on 5 MB networks and 1.8 MB when Meta matters. Rough costs inside an export:

Typical asset costs inside an exported playable
AssetCost in the file
three.js with its add-ons≈ 0.8 MB
One rigged, animated 3D character≈ 0.6–0.7 MB
A full-screen background (1024 px)≈ 0.1–0.2 MB
A card or portrait (512 px)≈ 40–80 KB
An icon (160–192 px)≈ 10–20 KB
Music≈ 22 KB per second
A short sound effect≈ 10–30 KB
  • Size images for how big they’re drawn. A 1024 px image drawn at 200 px wastes most of its bytes and looks no better.
  • Draw atmosphere in code. Light, fog, particles and gradients cost almost nothing next to another big texture.
  • Keep music loops to 10–20 seconds, mono; a phone speaker won’t tell the difference.

In the showcase, 22 of 25 2D builds are under 2 MB as they are; the 3D builds run from 0.8 MB to 4.2 MB. When an export is still over the limit, ours recompresses images step by step and, for single-file networks, packs the game into a compressed file that unpacks itself; the network pages have the details.

9. Rules networks enforce

These come from the networks, not from us. AppLovin’s creative guidelines, for example, say:

  • “Each ad must be playable and must not redirect to app stores on the first tap/click.”
  • “Audio must remain muted until the first user interaction.”
  • “HTML ads must function properly in both landscape and portrait orientations.”
  • “External network calls are prohibited.”

Source: AppLovin, Best practices & guidelines, checked 16 October 2026. Meta’s playable ad docs reject files with JavaScript redirect code and expect the store button to call FbPlayableAd.onCTAClick(). On MRAID networks the game should also wait until the ad is ready and visible; the MRAID guide shows how.

10. Testing

  • Play it three ways: as a good player, as a careless one tapping anywhere, and not at all. All three must reach the end card without an error.
  • Watch it frame by frame from the first second to the end card, like an art director: is the first frame a hook, is anything overlapping, tiny or empty?
  • Check several screens and both orientations. Our preview uses 5 viewports, from the iPhone SE to the iPad mini.
  • Hold 60 fps on a mid-range phone. In 3D that means under about 100 draw calls and a capped pixel ratio; in 2D, no gradients or shadow blur redrawn every frame.
  • Vary one thing per variant: the hook, the difficulty or the end card line. Keeping every number and text in one config block at the top of the game makes a variant a one-line change.

Our QA agent runs the first three on every build before you see it. How to make a playable ad walks through the whole flow.

Genre notes

Each genre playbook adds its own rules, mostly learned from builds that failed them. The genre pages have the full beat sheets and builds to play.

  • Match-3: Seed the first board so the hinted swap makes a special. Make swipes and tap-tap swaps both work. Keep the goal reachable in 12 to 15 good moves.
  • Merge: First merge within about two seconds. Leave 20 to 30% of the cells empty, or the board jams.
  • Crowd runner: Good gates wider and on the natural path. If the crowd drops under six, a hidden rescue gate keeps a random player in the run.
  • Runner: Build it in real 3D, not a flat road faked in 2D. Make it forgiving and 25 to 30 seconds long; our first lane runner ended in six.
  • Tower defense: The first tower placement should be obviously right, and a random player should survive wave one.
  • Shooter: An enemy in view on the first frame, at least about 15% of the screen tall. Move the camera between covers; a static camera read as cheap.
  • Hidden object: Hitboxes about 1.3× the visible item. Items blended in but fair; too obvious and too tiny both hurt.
  • Arena battler: Two to four big units on the board, not a swarm: a normal unit 10 to 12% of the screen tall, a tank 15 to 18%.
  • Social casino: Real rules, rigged order: shuffle the shoe so the player wins, never break blackjack’s rules. Say “No real money” on screen.

Questions

How long should a playable ad be?

Our playbooks aim for 15 to 30 seconds of play for casual games and up to about 40 for midcore, with the end card reached by 30 to 45 seconds. An idle player should still reach it.

Should a playable ad let the player lose?

Yes, on purpose. A designed near-miss (the lava wins by one pin, the flood takes the King) gives the end card a reason to exist. Both outcomes end on the same store button.

What size should a playable ad be?

Under the network’s limit with room to spare: we plan for about 4.5 MB on 5 MB networks and about 1.8 MB when the file has to fit Meta’s 2 MB single-file limit.

Skip the checklist

Every rule here, built in.