How to make a playable ad

Before you start

If you’re new to the format, what a playable ad is covers the basics. Whichever way you build it, have these ready:

• The store link (Google Play, App Store or Steam). Its screenshots set the art style; its URL is where the button goes.
• The moment to sell. One core mechanic a stranger understands in three seconds: the swap, the merge, the pin you pull. Not the meta game, not the menus.
• The networks you’ll run on. Meta’s single-file limit is 2 MB; the other networks in our export take 5 MB. Most 3D builds in our showcase are over 3 MB, so if Meta matters, plan a 2D build or a lean 3D scene from the start.
• Optional material: screenshots of the level you want, a gameplay capture, your logo or character art.

The steps in Playbaker

1. Paste the link, add what you have

Create a free account and paste your store link into the composer. You can attach up to 10 images per message, a gameplay video of up to about a minute, or your own sprites and sounds. No build yet? Describe the loop in a few sentences instead. Pick 2D, 3D or leave it on Auto, and a quality level: Low for quick drafts, Medium for most builds, High for the final cut.

2. The Producer writes a plan

The Producer agent reads the store page and looks at the screenshots, picks the one mechanic that sells the game in about 30 seconds, and writes a beat sheet: the hook in the first seconds, the first reward, a twist, a climax, and an end card for a win and for a loss. If your request could go two ways (which mode to sell, 2D or 3D), it asks one question with clickable answers before spending credits.

3. Art makes the assets

Characters, backgrounds, props, music and sound effects, in the style of your screenshots. Files you upload come first: your character art replaces a generated one. In 3D, characters are rigged and animated; in 2D, moving characters get pose frames instead of one image sliding around.

4. Dev builds it

Plain HTML5 on a canvas, or three.js for 3D, with every asset packed into the file. The game waits until the ad is visible, starts sound on the first tap, and opens the store only from the button.

5. QA plays it before you do

The QA agent plays the build in a headless phone browser three ways: as a good player, as a careless one, and not at all. It captures frames from the first second to the end card, checks for errors, frame rate, sound before a tap and file size, and sends failures back to Dev with notes.

6. Play it and change it by asking

The preview runs the build on 5 real viewports (iPhone 15, iPhone SE, Pixel 8, Galaxy S24, iPad mini) in portrait and landscape. Ask for changes in a sentence (“make level two harder”, “end card text: Play free”). Each change is a new version; edits usually cost 2 to 4 credits, and you can open and restore any earlier version.

Recorded builds in our showcase took 14 to 97 minutes from the first prompt to the version you can play there, follow-up edits included. A first build at Low quality uses about 10 credits.

Exporting for each network

Pick the network in the export menu and you get the file built for it: assets inlined, images recompressed to fit the limit, the network’s tags added and the store button wired to its call.

Exporting doesn’t use credits, but it needs a paid plan (Pro from $35 a month for 50 credits). Paid plans are opening soon: the pricing page puts you on the list at today’s price, and nothing is charged.

Before you spend on it

• Run it in the network’s own preview. AppLovin has its Playable Preview; Meta’s store call, FbPlayableAd.onCTAClick(), only exists inside Meta’s own tools, so test the button there.
• Play it on a cheap phone, not only on your own. Frame rate drops first on older Android devices.
• Make two or three variants that differ in one thing (the hook, the difficulty, the end card line) so a test tells you which change mattered. Playable ad best practices lists what to vary.

Making one by hand

If you have an HTML5 developer, this is the job they take on:

1. Build the slice on a canvas, with a web game library or three.js. Keep it to one mechanic and 20 to 40 seconds.
2. Inline everything. Images, audio and libraries go into the file as data; networks reject requests to outside servers.
3. Add each network’s API. MRAID’s mraid.open() for AppLovin and Unity, FbPlayableAd.onCTAClick() for Meta, ExitApi.exit() for Google, and so on. The MRAID guide covers the start gate.
4. Package and size it per network: one HTML file here, a ZIP with a fixed layout there, under 2 or 5 MB.
5. Test in each network’s preview tool, in portrait and landscape, with sound starting only after a tap.

You get full control and no per-build fee; you pay in developer time on every new concept and every variant.

If your game is in Unity

Unity’s own route is Unity Playworks (formerly Luna): a plugin that builds playables from your Unity project, so they use the real game’s code and assets. If you have the project and a developer who knows it, that keeps the playable closest to the shipped game. Playbaker vs Unity Playworks compares the two, including where Playworks is the better pick.

Hiring a studio

Playable ad studios take a brief and deliver finished playables, quoted per project; none of the ones we checked publish prices. It’s the right call when you want a team to own the concept as well as the build. Playable ad tools compared sets AI tools, template builders, studios and in-house side by side.

Questions