How to make a playable ad: from storyboard to network-ready HTML5

A playable ad is a small game with unusual constraints. It has to load inside someone else's app, teach itself in a couple of seconds, run smoothly on a five-year-old Android phone, fit in a few megabytes, and then pass the validators of every network you buy on. None of that is hard on its own. Doing all of it in a week is a matter of process.

This is the process we use on every build, the same four stages you see on our homepage under How we work: brief, storyboard, build, delivery. Below, each stage is broken into the decisions that actually decide whether the playable performs.

1. Write a brief that answers five questions

Most delays in playable production come from a missing answer, not from code. A useful brief covers:

• What are we selling? The store link for a game, or the brand guide and offer for a brand playable.
• Where will it run? The list of networks. It decides the packaging, the store call and the orientation from day one.
• When is it needed? A real launch date, including time for network review. Mintegral, for example, quotes three to five business days.
• What is working now? Your best video creative and its angle. A playable that builds on a proven angle is easier to win with than one that starts from nothing.
• What assets exist? Layered source art, character animations, fonts, logo files, sound effects and the music track. Reusing real game art keeps the ad honest and the schedule short.

Add the languages you need now and later. Localisation is cheap when the text is planned for and expensive when it is retrofitted.

2. Choose one mechanic and one angle

A playable shows one moment of the game, not the game. Pick the moment a stranger can understand in two seconds without text and that feels good the first time they do it.

Then pick the angle, the reason that moment is interesting:

• Satisfaction: a pan of popcorn popping in a hold-to-heat loop, as in our Pop Pop Pan concept.
• Cleverness: drawing a line and watching physics prove you right, as in Roll Home.
• Tension: a packed parking lot where only one car can move, as in Park Out.
• Precision: one swipe to cut a cake exactly in half, as in Fair Share.

The mechanic must exist in the product. Players who install for a mechanic the game does not have uninstall quickly, and misleading ads run into network and store policies. If the core loop is too deep to show, choose its most readable slice rather than inventing a new one.

3. Storyboard it on one page

The storyboard is where most of the creative decisions get made, which is why we deliver it within a day and before any code. One page, five or six frames, each with a timing:

1. Opening frame, 0 seconds. What is on screen the moment the ad appears. It should already look like a game in progress.
2. Instruction, 0 to 2 seconds. A hand or a highlight showing the exact gesture. Two or three words at most.
3. First success. The first input always works and gets a generous response.
4. Escalation. A second step that is harder, or a moment where things can go wrong.
5. Outcome. A win, or a near miss that makes the player want another go.
6. End card. Name, icon, one line of value and one button.

Agreeing these frames on paper means the review rounds that follow are about polish, not direction.

4. Prepare art and audio for a size budget

Every network in our playable ad specs checklist caps files at about 5 MB, and Meta's developer docs still flag single HTML files above 2 MB. Set the budget before exporting anything, and leave headroom under the strictest network you need.

• Images: pack sprites into sheets, export at the size they are displayed rather than the size they were drawn, and compress. Backgrounds are usually the largest single item.
• Base64 overhead: inlining a file as base64 makes it about a third larger, because every three bytes become four characters. Budget for the inlined size, not the size on disk.
• Audio: one short music loop and a handful of effects. Audio is easy to overspend on and only plays after the first tap anyway.
• Fonts: subset to the characters you use. A full font family can cost more than the art.

5. Build a lean HTML5 game

Large engines carry runtime weight a 30-second ad does not need. Plain canvas, or a light 2D renderer such as PixiJS or Phaser, leaves most of the budget for art. Whatever you use, a few structural choices pay off on every project:

• A fixed logical resolution scaled to the real viewport, with the important action kept in a safe area that survives both orientations and every aspect ratio.
• Pointer events for input, so touch and mouse behave the same. Mintegral's checker runs in a desktop browser, and your own reviewers will use laptops.
• A simple state machine: loading, intro, play, outcome, end card. It makes it easy to pause when the ad is hidden and to show the end card from any state.
• A config object for every value you might test: difficulty, timers, text, colours, which end card to show. Variants then become a config change, not a rebuild. Our guide to A/B testing playable ads covers what to put in it.
• Frame-rate discipline. Test on a mid-range Android phone from the start. Pre-render anything static, limit full-screen transparency, and keep particle counts modest.

6. Add a thin network layer

The game should not know which network it is running on. Keep everything network-specific in a small adapter with three functions: wait until the ad may start, open the store, and report the end of play where the network asks for it. Swap the adapter at build time so each output file contains exactly one, literal store call, because several validators look for that text.

// MRAID networks: AppLovin, Unity Ads, Liftoff
var Ad = {
  start: function (go) {
    function whenVisible() {
      if (mraid.isViewable()) return go();
      mraid.addEventListener('viewableChange', function v(on) {
        if (!on) return;
        mraid.removeEventListener('viewableChange', v);
        go();
      });
    }
    if (mraid.getState() === 'loading') {
      mraid.addEventListener('ready', whenVisible);
    } else {
      whenVisible();
    }
  },
  cta: function () { mraid.open(STORE_URL); },
  end: function () {}
};

// Meta and Moloco
var Ad = {
  start: function (go) { go(); },
  cta: function () { FbPlayableAd.onCTAClick(); },
  end: function () {}
};

// Google Ads (exitapi.js is loaded by a script tag in the head)
var Ad = {
  start: function (go) { go(); },
  cta: function () { ExitApi.exit(); },
  end: function () {}
};

// TikTok (TikTok's playable SDK script is loaded before this code)
var Ad = {
  start: function (go) { go(); },
  cta: function () { window.openAppStore(); },
  end: function () {}
};

// Mintegral
var Ad = {
  start: function (go) { window.gameReady && window.gameReady(); go(); },
  cta: function () { window.install && window.install(); },
  end: function () { window.gameEnd && window.gameEnd(); }
};

On MRAID networks, also listen for viewableChange after the start and pause the loop and the audio when the ad goes out of view. On Mintegral, define the global gameStart() and gameClose() functions the platform calls. And on every network, call Ad.cta() only from a deliberate tap on a button, never from a timer and never from the first touch of the game.

7. Package each build and check the size

A small build script turns one project into one file per network. For each target it inlines the assets, minifies the code, adds the right adapter, and writes the format the network expects:

• Single HTML for AppLovin, Unity Ads, Moloco and single-file Meta uploads.
• ZIP for Google Ads, with the orientation meta tag and the exitapi.js script tag in the head.
• ZIP with config.json for TikTok, declaring the orientation.
• ZIP with matching names for Mintegral, with every non-code asset in base64.

Measure the final file, not the folder. A build that is fine on disk can cross a limit once it is inlined.

8. Test on real phones and in each network's tool

Browser emulation catches layout problems; it does not catch a webview that drops frames or audio that keeps playing after the ad closes. Before delivery, every build should pass this list on at least one iPhone and one mid-range Android phone:

• Loads with no network connection and nothing missing.
• Plays from start to end card in both orientations, or in the one the network requires.
• No sound before the first touch; audio stops when the app is backgrounded or the ad is hidden.
• Survives an interruption, such as a notification or switching apps, and resumes cleanly.
• The store call fires once, on a deliberate tap, from every place a CTA appears.
• Nothing sits under the network's close button or in the corners it reserves.

Then run each file through the network's own checker: AppLovin's Playable Preview, the Ad Testing app for Unity Ads, Meta's Playable Preview Tool, the Google Ads HTML5 validator, TikTok's preview in Ads Manager and Mintegral's playable testing tool.

9. Review rounds and delivery

Reviews go faster when everyone plays the same thing on their own phone. We share a test link that runs in any phone browser and plan for two review rounds: the first for feel and difficulty, the second for polish and copy. Feedback works best as one consolidated list per round rather than a stream of messages.

Delivery should leave your team able to upload without asking questions. Ours includes:

• One network-ready file per network, tested on iOS and Android.
• The source files, so the playable can be updated or extended later.

Whoever builds your playable, ask for clear file names per network and a note of any settings to choose on upload. It saves a round of questions on launch day.

A realistic timeline

A typical custom playable takes five to seven working days from an approved brief:

When speed matters more than a bespoke mechanic, a ready template reskinned with your art takes about 48 hours. New hooks, end cards and languages for testing can follow as variants of the same build; see our services for how custom work, brand playables and templates fit together, and how much a playable ad costs for what drives the price.

Start a playable with us

Send us your store link, your ad networks and your deadline. You get a storyboard within a day, a test link that runs in any phone browser, two review rounds, then network-ready files plus the source. Write to info@zerind.com or use the form on our homepage.

Start a projectPlay our concepts

Related reading

• Playable ad specs by network: the 2026 checklistFile size, packaging, MRAID version, the exact CTA call and review rules for AppLovin, Unity Ads, ironSource, Mintegral, Google, Meta and TikTok, checked against each network's own documentation.
• Playable ad best practices: hooks, tutorials and end cardsWhat separates a playable that converts from one that only gets played: the opening frame, a tutorial that teaches in one gesture, honest difficulty and an end card that closes.
• How much does a playable ad cost? Pricing explainedWhere the money goes in a playable, why a template reskin and a custom build sit at different price points, and the questions to ask before you compare quotes.

Sources

Checked on 8 October 2026. Networks update their specs; always confirm against the current page before you upload.

1. IAB Tech Lab, MRAID (Mobile Rich Media Ad Interface Definitions): https://www.iab.com/guidelines/mraid/
2. Unity Ads, Playable asset specifications: https://docs.unity.com/en-us/grow/acquire/creatives/playable/specifications
3. Unity Ads, Playable ad best practices: https://docs.unity.com/en-us/grow/acquire/creatives/playable/best-practices
4. AppLovin, Creative specs and guidelines: https://support.applovin.com/en/growth/promoting-your-apps/creatives/best-practices-and-guidelines
5. Meta Business Help Centre, Playable ad specifications: https://www.facebook.com/business/help/412951382532338
6. Meta for Developers, Playable ads: https://developers.facebook.com/docs/app-ads/formats/playable-ad/
7. Google Ads Help, HTML5 and playable asset requirements for App campaigns: https://support.google.com/google-ads/answer/9981650
8. TikTok Ads Help, How to create TikTok Ad Network playable ads: https://ads.tiktok.com/help/article/how-to-create-tiktok-pangle-playable-ads
9. Mintegral Help Center, Playable test guide: https://helpcenter.mintegral.com/en/docs/playable-ad-guide
10. Moloco Help Center, Playable creative guide: https://help.moloco.com/hc/en-us/articles/24124525963799
11. Liftoff Accelerate, Interactive ad integration: https://support.accelerate.liftoff.io/hc/en-us/articles/52724569196699