How to make an ad, start to finish
Read it in order and you will go from an empty canvas to a file an ad network accepts, without needing to know what any of this meant beforehand. Every chapter is on this page — use the contents to jump straight to what you need.
Start here
What this tool makes, which editor to open, and the shape of the work ahead.
What you are building
A playable ad is a small, self-contained interactive ad. It ships as a single HTML file that an ad network drops into a slot in someone's game. The viewer taps it, plays a few seconds of something, and lands on a screen inviting them to install.
Play Ads Maker builds those files in your browser. There is no game engine to install, no code to write, and nothing to upload before you can start — you open an editor, place objects on a phone-shaped canvas, say what happens when they are tapped, and export.
Everything runs on your machine
The editor, the preview and the export all run in your browser. Your artwork and your video are never uploaded to us — see Saving your work for what that means for keeping and moving projects.
Choosing an editor
There are three editors. They share a canvas, an object set and an export flow, so most of this guide applies to all of them — but you pick one when you create a project and a project cannot be switched to another afterwards. Pick by what you are starting with.
An idea for something the viewer plays
Playable Maker — scenes, mechanics and events.
A video you already have
Video Playable Maker — your footage, cut with interactive breaks.
Just the final install screen
End Card Maker — a single card, portrait and landscape.
| Start with | Open |
|---|---|
| An idea for something the viewer plays | Playable Maker — scenes, mechanics and events. |
| A video you already have | Video Playable Maker — your footage, cut with interactive breaks. |
| Just the final install screen | End Card Maker — a single card, portrait and landscape. |
Not sure? Start with the end card
It is one screen, it takes ten minutes, and it teaches you the canvas, the object list and the export flow. Everything you learn there is the same in the other two editors.
Your first ad, end to end
The whole job, at a glance. Each step has a chapter of its own further down — this is the map, not the detail.
- 1
Pick a format and open the editor
From the Formats menu, or the Start building button. The editor opens on an empty phone-sized artboard with one scene already in it.
- 2
Start from a card design
Rather than an empty canvas, pick a ready-made layout and change the words and the artwork. It is much faster than placing everything yourself, and the spacing is already right.
- 3
Add and arrange your objects
Images, text, buttons, shapes. Drag them on the canvas, or type exact positions in the panel on the right.
- 4
Make it move
Give objects an entry animation so they arrive rather than simply being there, and an idle animation so the screen is never completely still.
- 5
Say what taps do
Select an object, add a Click trigger, and give it actions — go to another scene, swap an image, open the store.
- 6
Play it
Press Play in the bar at the bottom and use your own ad the way a viewer would. Fix what feels wrong, press Play again.
- 7
Set where the tap goes
Your App Store and Google Play links, in Project settings. An ad that plays beautifully and installs nothing is a wasted ad.
- 8
Export
Tick the networks you are shipping to. You get one file per build, checked against each network's size limit before it downloads.
- 9
Download a copy
Save a .pam file. That is your project — the thing you reopen tomorrow and back up.
The editor
A tour of the window: what each panel is for, and where to look for a control.
The five areas
Every editor uses the same window. Once you know these five areas you know where anything lives.
Header (top)
The format you are in, the File menu, where your work is stored, and Export.
Toolbar (under the header)
Undo and redo, zoom, the grid and snapping, and the toggles for selection outlines and the mini preview.
Left panel
Your project's structure: the scene list, the objects in the selected scene, and the interactions on them.
Canvas (middle)
The artboard. Drag, resize and rotate here; this is exactly what the viewer sees.
Right panel
Everything about the one thing you have selected. Empty until you select something.
| Area | What it is for |
|---|---|
| Header (top) | The format you are in, the File menu, where your work is stored, and Export. |
| Toolbar (under the header) | Undo and redo, zoom, the grid and snapping, and the toggles for selection outlines and the mini preview. |
| Left panel | Your project's structure: the scene list, the objects in the selected scene, and the interactions on them. |
| Canvas (middle) | The artboard. Drag, resize and rotate here; this is exactly what the viewer sees. |
| Right panel | Everything about the one thing you have selected. Empty until you select something. |
The right panel is where the detail lives
If you are hunting for a setting, select the object it belongs to and look right. Almost nothing in this tool is hidden in a menu.
Scenes
A scene is one screen of your ad. The scene list at the top of the left panel is your ad's running order, and clicking a scene shows it on the canvas.
How many scenes you get depends on the editor. A playable can have as many as it needs, and you move between them with actions. An end card project is a single card by design — the button offers to replace the card rather than add another.
On a scene card:
- Click to open it on the canvas.
- Double-click the name to rename it. Names are for you, not the viewer — call it Win screen, not Scene 3.
- Hover for Duplicate and Delete. Duplicate is how you build a losing screen that matches your winning one.
Which scene opens first
A new project starts on its first scene. Once you have several, Project settings → General lets you choose the one the ad opens on.
The object list
Under the scenes is every object in the current scene, top of the list nearest the viewer. Drag to restack them — that is how you get a headline to sit over a background instead of under it.
Each row has a hide toggle and a lock toggle. Hiding is for working on something behind a full-screen overlay; locking is for a background you keep dragging by accident. Locked objects can still be selected and read, they just cannot be changed until you unlock them.
Name things as you go
Twenty objects called Image is how a scene becomes unworkable. Renaming takes two seconds now and saves ten minutes when you are wiring interactions later.
Canvas, grid and snapping
- Zoom — the dropdown in the toolbar, or the fit-to-screen button beside it to bring the whole artboard back.
- Grid — a toggle, a cell size and a settings popover. Handy for eyeballing consistent margins.
- Snap — objects snap to the grid and to other objects' edges and centres as you drag. Leave it on; it is what keeps a layout from ending up a pixel off everywhere.
- Selection — hides the selection outlines so you can judge the design without them.
- Preview — a small live copy of the artboard you can drag anywhere, so you can watch the ad while working on a panel.
The artboard is 375 × 667 by default — a phone. You can change it in the bar at the bottom, either from the presets or by typing a size.
Keyboard shortcuts
On a Mac, use Cmd wherever Ctrl is written. Arrow keys nudge only when you are not typing in a field.
Building a screen
Objects, artwork, layout and the animation that stops a screen sitting still.
Adding objects
Add Object at the bottom of the object list opens the catalog. Everything you can place is in there, in one grid.
The ones you will use constantly:
Image
Artwork, logos, screenshots, characters.
Text
Headlines, body copy, prices, scores.
Button
Anything meant to be tapped. Fill it with a colour, an image, or both.
Shape
Rectangles, ellipses, stars, rings and more — badges, panels and dividers without importing artwork.
| Object | Use it for |
|---|---|
| Image | Artwork, logos, screenshots, characters. |
| Text | Headlines, body copy, prices, scores. |
| Button | Anything meant to be tapped. Fill it with a colour, an image, or both. |
| Shape | Rectangles, ellipses, stars, rings and more — badges, panels and dividers without importing artwork. |
And the ones that earn their place in a specific moment:
Animated Sprite
A character or effect that loops through frames, or a sprite sheet.
Particle Effect
Confetti, sparks, coins, smoke. Start from a preset and adjust.
Audio
Music or a sound effect, with trim, fade and volume.
Overlay
A colour wash over the whole canvas — dim the screen behind a dialog.
Parallax BG
A tile that scrolls forever. Gives depth behind a scene.
Timer
A countdown that can fire an interaction when it reaches a number or runs out.
Scrolling Text
A looping ticker.
| Object | Use it for |
|---|---|
| Animated Sprite | A character or effect that loops through frames, or a sprite sheet. |
| Particle Effect | Confetti, sparks, coins, smoke. Start from a preset and adjust. |
| Audio | Music or a sound effect, with trim, fade and volume. |
| Overlay | A colour wash over the whole canvas — dim the screen behind a dialog. |
| Parallax BG | A tile that scrolls forever. Gives depth behind a scene. |
| Timer | A countdown that can fire an interaction when it reaches a number or runs out. |
| Scrolling Text | A looping ticker. |
Every scene already has a background
You do not add one. Select the background in the object list to give it a colour or an image — it is pinned to the bottom of the stack and cannot be deleted. It is also the one object that can carry a different image per orientation, which is what a wide screen usually wants.
Each of these has a section of its own
The tables above are for picking one. The objects in detail goes through every setting on every object, and what each one is actually for.
Bringing in artwork
Select an image object and use the upload card in the right panel — or drop a file straight onto it. The same card appears anywhere artwork is wanted: a scene background, a button fill, sprite frames, a parallax tile.
Import the same file twice and it is stored once, so reusing a logo across ten scenes costs one copy in the exported file.
What to bring:
- PNG for anything with transparency.
- JPEG for photographs and full-screen backgrounds — much smaller than a PNG of the same thing.
- WebP where you want PNG quality at JPEG size.
- MP3, WAV, OGG or M4A for audio, or pick from the built-in sound library.
Size is the whole game
Most networks cap a playable at 5 MB, and that budget includes every image. A 4000px hero downscaled to 1200px before you import is the single most effective thing you can do — and the export step can compress on the way out if you overshoot.
Position, size and layers
Drag on the canvas for speed, and type in the right panel's General tab for precision — x, y, width, height, rotation and the anchor point the object rotates and scales around.
Stacking order is the object list: drag a row up to bring it forward. If something has vanished, it is usually behind something else rather than gone.
Keep away from the edges
Networks render your ad on every phone shape there is, and the very edge of the canvas is where a rounded corner or a notch eats your artwork. Keep anything that must be read a comfortable margin inside.
Portrait and landscape
You design in portrait. Most networks also require the ad to work in landscape, and the bar at the bottom has Add landscape for exactly that.
The landscape layout starts as a copy that follows your portrait one. Move an object in landscape and that one object stops following, in that one layout — so you can nudge the two things that need it and leave everything else linked.
Several networks will not take a portrait-only ad
Export tells you before it builds, and points at the fix. Adding the landscape layout early costs less than discovering it at the end.
Animation and effects
With a drawn object selected, the right panel has three tabs. General is position and properties. Animate is movement. FX is filters. A few objects show their settings directly instead — see The objects in detail for which, and why.
Animation comes in three phases, and an object can use all three:
- Entry — how it arrives. Slide from any side, fade, pop, bounce.
- Idle — what it does while it sits there. Float, pulse, shake, spin, glow.
- Exit — how it leaves. Slide out, fade out, shrink.
FX are filters applied to the object — drop shadow, outline, glow, blur, colour adjustment, and stylised looks like CRT and glitch. They are the cheapest way to make flat artwork look intentional.
Idle animation on your call to action
A gentle pulse on the button is the difference between a screen the viewer reads and a screen the viewer taps. One object, one setting.
The objects in detail
Every object you can place, what it is really for, and the settings that decide whether it reads as finished.
Constraints: answering a different screen
Your ad has to run in portrait and landscape, and constraints are how you say what each object should do when the frame changes shape. One setting per axis, in the General tab.
Start
Its distance from the left or top edge. A logo in the corner.
End
Its distance from the right or bottom edge. A button pinned to the bottom.
Stretch
Both margins, so it grows with the frame. Backgrounds, full-width bars.
Center
Its offset from the middle line, at the size you gave it. Badges, centred headlines.
Scale
Position and size as a proportion of the frame. Artwork that should shrink with the screen.
| Constraint | It holds |
|---|---|
| Start | Its distance from the left or top edge. A logo in the corner. |
| End | Its distance from the right or bottom edge. A button pinned to the bottom. |
| Stretch | Both margins, so it grows with the frame. Backgrounds, full-width bars. |
| Center | Its offset from the middle line, at the size you gave it. Badges, centred headlines. |
| Scale | Position and size as a proportion of the frame. Artwork that should shrink with the screen. |
The default is Center, and it is wrong for most of a layout
A call to action left on Center drifts away from the bottom edge the moment the frame gets taller. The editor does not guess this on purpose — a button along the bottom looks identical, to the software, to a headline near the top. You say it once, and every screen size after that follows.
Image, Text, Button and Shape
The four you will use constantly. Most of what an ad is will be these.
Image — a static picture. Asset, fit, tint, blend mode, corner radius, border, and built-in blur and darken.
Fill
Stretches the picture to the box. The default — and it will squash a logo.
Contain
Fits the whole picture inside the box. May leave gaps. What a logo wants.
Cover
Fills the box and crops the overflow. What backgrounds and photographs want.
None / Scale down
The picture's own size, or smaller if it does not fit.
| Fit | What it does |
|---|---|
| Fill | Stretches the picture to the box. The default — and it will squash a logo. |
| Contain | Fits the whole picture inside the box. May leave gaps. What a logo wants. |
| Cover | Fills the box and crops the overflow. What backgrounds and photographs want. |
| None / Scale down | The picture's own size, or smaller if it does not fit. |
Use an image's own Blur and Darken before the FX tab
They are part of drawing the picture rather than an extra filter pass over it, so they cost less — and on a full-screen background, that difference is worth having.
Text — rendered copy, with line breaks. Beyond the obvious font settings:
- Line height is a multiplier of the font size, not a pixel value. 1.2 is the default.
- Vertical align and padding are the layout. If your copy sits at the top of a tall box and you wanted it centred, that is the vertical align setting, not dragging the box.
- Text overflow decides what happens to copy that does not fit — visible, clipped, or an ellipsis.
- Stroke is how a headline survives a busy background. A two or three pixel outline keeps white copy legible over photography, and unlike a drop shadow it is not a filter pass.
Button — a tappable surface with a label. Not a text object on a shape: it is one object whose surface and label are laid out together, which is why the label stays centred as you resize it.
- Fill type is colour, image, or both. The blend mode only does anything in both mode, because that is the only one with two layers to combine.
- Tint multiplies the surface and leaves the label alone, so your copy stays legible whatever you do to the background.
- The button's own shadow is not the FX drop shadow. This one is part of what the button is: it draws behind the surface only, never behind the label, and it cannot be animated. For a shadow that moves, use the FX tab.
- The label defaults to no wrapping and an ellipsis, so long copy is truncated rather than allowed to escape the surface.
Shape — eleven vector primitives, drawn at render time rather than loaded. They stay crisp at any size, recolour instantly and add nothing to your file size. Each offers only the settings it actually reads:
- Rectangle — corner radius, clamped to half the shortest side as you resize.
- Star — points, from 3 to 20, and an inner ratio for the waist between the arms.
- Polygon — sides, from 3 to 12.
- Ring — an inner ratio for the hole.
- Arrow, Chevron and Cross — a thickness, as a fraction of the box. These are the shapes drawn as bands of a form rather than solid areas.
- Ellipse, Triangle, Diamond and Heart — no extra settings. Fill, stroke and blend mode are on all eleven.
Reach for a shape before an image
Every flat panel, badge, divider and scrim is a shape. The same thing as a PNG is an asset to load, a resolution to pick and a colour you cannot change your mind about later.
Animated Sprite and Particle Effect
An animated sprite is a frame sequence — for character animation and anything where the motion is baked into artwork rather than achieved with the Animate tab. Frames come either as individual images, played in list order, or as one sprite sheet with columns, rows and a frame count.
FPS
12 reads game-like, 24 reads film-like.
Start and end frame
An end frame of −1 means the last one, so the range keeps following the sequence as you add frames.
Ping pong
Plays forwards then backwards without repeating the end frames.
Frame count on a sheet
Zero means the whole grid. Set it when the last row is only partly filled, so blank cells are not played as empty frames.
Fit
Stretch, contain or cover only — an animation drawn at each frame's natural size would jump about whenever one frame differed.
| Setting | Worth knowing |
|---|---|
| FPS | 12 reads game-like, 24 reads film-like. |
| Start and end frame | An end frame of −1 means the last one, so the range keeps following the sequence as you add frames. |
| Ping pong | Plays forwards then backwards without repeating the end frames. |
| Frame count on a sheet | Zero means the whole grid. Set it when the last row is only partly filled, so blank cells are not played as empty frames. |
| Fit | Stretch, contain or cover only — an animation drawn at each frame's natural size would jump about whenever one frame differed. |
A loop count of zero never completes
Zero means loop forever, so the Animation Complete trigger never fires and whatever you wired to it never happens. The interactions panel warns you where it can.
A particle effect is the deepest object in the editor and also the one with the best shortcut: start from a preset. There are twenty-eight, and they are real starting points rather than demos — Confetti, Sparkle, Snow, Fire, Rain, Coins, Stars, Bubbles, Explosion, Impact, Smoke, Embers, Leaves, Waterfall, Tap Burst, Pixie Dust, Hearts, Gold Rain, Win FX, Electric, Level Up, Fireworks, Aurora, Cursor Trail, Hover FX, Vortex, Galaxy and Portal.
Pick one, then adjust. Editing anything marks the effect as custom; the preset name is only ever a label, and the settings are the truth.
The settings that change the most:
- Emitter shape — point, rectangle, circle, cone, edge or ring, sampled inside the object's own box. Resizing the object resizes the emitter.
- Burst — a fixed count all at once, instead of a rate over time. What an explosion or a tap effect wants.
- Max particles caps how many are alive and sets the sprite pool the renderer keeps, so it bounds cost as much as looks.
- Simulation space — local carries live particles along when the emitter moves, world leaves them where they were born. That is the difference between a trail behind a moving object and a cloud stuck to it.
- Colour comes as one solid, a gradient from birth to death, a random pool each particle keeps for life, or a multi-stop gradient across its life.
- Optional modules — turbulence, trails, glow, an attractor point, the viewer's cursor, and sub-emitters. Each is off until you switch it on, so an effect only pays for what it uses.
Prewarm is what makes weather look right
It runs the effect forward before the first frame is drawn, so your scene opens on snow that is already falling rather than on an empty sky filling up. Snow ships with six seconds of it, rain with three. Any ambient effect wants it; a burst does not.
Sub-emitters multiply
Two hundred particles each leaving five behind is a thousand sprites a frame. It is the fastest way to build something that runs beautifully on your laptop and stutters on a mid-range phone.
Overlay, Parallax, Audio, Timer and Scrolling Text
Overlay — a flat colour wash across the whole canvas. It has no position or size to set because it is always the canvas, so it keeps its own rotation and scale.
- Opacity here runs 0–100, matching the background rather than the 0–1 opacity on other objects.
- It is a legibility tool as much as a mood one. A dark wash at thirty percent under a headline makes white copy readable over any photograph, and one object does it for the whole scene.
- A multiply overlay in a warm colour is a colour grade.
Parallax BG — a tiling image that scrolls forever. Layer two or three at different speeds and you have depth for the cost of three images.
- The tile repeats in both axes, so its edges have to meet. Artwork that does not tile will show a visible seam every repeat.
- Offset is what stops two layers looking like one image. Two layers cut from the same artwork read as a single repeated picture unless one of them is offset.
- Tint is the depth cue. A far layer tinted toward the sky colour recedes; the same layer untinted sits in the same plane as the near one.
- Direction presets are not stored — they are read back from the two speeds, which are the only truth. Picking one writes the speeds; typing speeds lights up whichever preset now matches.
Audio — a sound file. Not drawn, so it has no box worth setting; it sits in the object list and plays.
- Looping returns to your start point, not to the start of the file — so a trimmed loop stays trimmed.
- Mute and volume are kept separate, so muting does not lose the level you set.
- Most placements start an ad muted by policy. Design so the ad works in silence and treat sound as a bonus.
Timer — a countdown or count-up, drawn as digits. Deliberately short on settings: a countdown is a handful of digits, so there is nothing to wrap or align. It defaults to thirty seconds, counting down, in a monospaced face so the digits do not shift about as the numbers change.
- Four formats — the bare number of seconds, mm:ss, hh:mm:ss, or a compact 0m 50s reading.
- The At Second mark is read off the clock face as displayed, so 10 means when it shows 10 whichever way it is counting.
- Repeat fires at every multiple instead of once. A fifty-second countdown marked at 10 fires at 40, 30, 20 and 10 — never at the start or the end, where it would double up with Timer End.
Scrolling Text — a marquee, styled with the same font settings as a text object.
- Speed is always positive — the direction setting decides which way it travels.
- The separator is drawn in the middle of the gap. Leaving it empty is what a repeated sentence wants; a bullet is what a ticker wants.
- Pause on hover applies during playback only. In the editor the pointer is over things constantly, and stopping for it would make the speed impossible to judge.
A timer needs somewhere to lead
Wire Timer End to something — a scene change, a button appearing, End Ad. A countdown that runs out and does nothing tells the viewer their attention was not needed.
What things cost
Every object is drawn again on every frame, and a phone has far less to spend on that than the machine you are designing on. Roughly, from cheapest to most expensive:
Cheap
Shapes, text, scrolling text, timers, overlays, and an image's built-in blur and darken.
Moderate
Image objects, Animate-tab animations, parallax layers, animated sprites.
Expensive
Stacked FX filters, particle effects at high particle counts, sub-emitters, and backdrop blur.
| Cost | What sits there |
|---|---|
| Cheap | Shapes, text, scrolling text, timers, overlays, and an image's built-in blur and darken. |
| Moderate | Image objects, Animate-tab animations, parallax layers, animated sprites. |
| Expensive | Stacked FX filters, particle effects at high particle counts, sub-emitters, and backdrop blur. |
Test on a real phone, not the preview
A desktop browser will happily run something a mid-range Android will not. This is the same advice as the size limit, for the same reason: the thing you are building is watched on hardware you are not using.
Reference: Image, Text, Button, Shape, Background
The five objects most ads are built from. Every control in each one, what it does, and what to set it to.
Image
A piece of artwork on the canvas — your hero character, a logo, a badge, a screenshot. Header reads Image · Configure image properties, and it has all three tabs.
Its cards, in the order they appear: Identity, Asset, Layout, Appearance, Border, Effects, Anchor Point, Transform, Visibility.
Asset
The picture itself. Before you choose one, the card is a dashed upload box — click it or drop a file on it.
Accepts PNG, JPG, WebP and GIF. Once a file is chosen the box is replaced by a preview thumbnail with the filename and size in KB beneath it — watch that number, it is what your export budget is made of.
Swaps the artwork and keeps everything else — position, size, animations, events all stay. This is how you re-export a piece of art without rebuilding the object.
Clears the artwork and puts the upload box back. The object stays where it is with all its other settings.
Starts at: Fill
How the picture is sized inside the object's box when the two are different shapes. Fill stretches it to the box exactly, distorting it if the shapes disagree. Contain fits the whole picture inside, leaving gaps. Cover fills the box completely and crops the overflow. None draws it at its true pixel size. Scale Down is None or Contain, whichever comes out smaller.
Which Fit to use
Cover for anything that must fill a space with no gaps, like a background panel — it crops, so keep the important part near the middle. Contain for a logo or a badge, where seeing all of it matters more than filling the box. Avoid Fill on anything with a face or a circle in it.
Appearance
Starts at: Normal
All twenty-four modes. See the shared chapter for what each group does.
Range: 0–100%Starts at: 100%
How solid the image is.
Starts at: #FFFFFF
Multiplies the artwork by this colour. White leaves it alone.
Border
Drawn around the object's box, on top of the artwork, hugging the rounded corners.
Range: 0–100pxStarts at: 0px
Rounds the corners, and clips the artwork to that rounding — so this is also how you get a circular avatar out of a square photo. Set it to half the width on a square image and you have a circle.
Range: 0–20pxStarts at: 0px
Thickness of the outline. At 0 no border is drawn, whatever the colour is set to.
The outline's colour.
Effects
Two quick adjustments that need no setup. For anything more, use the FX tab.
Range: 0–50pxStarts at: 0px
Softens the whole image. Useful for pushing a backdrop behind the thing you want looked at.
Range: 0–100%Starts at: 0%
Lays black over the image. The reliable way to make white text readable on a busy photo — 30 to 40% is usually enough.
Text
Words on the canvas — a headline, a subtitle, a score, a label. Header reads Text · Configure text properties, with all three tabs.
Its cards: Identity (which holds the words themselves), Layout, Typography, Paragraph, Appearance, Anchor Point, Transform, Visibility.
Typography
What the letters look like.
Starts at: Inter
Ten typefaces: Inter, Arial, Helvetica, Verdana, Tahoma, Trebuchet MS, Georgia, Times New Roman, Courier New and Impact. All of them are drawn into the export, so none of them depends on the viewer's device having the font.
Range: 8–400px
Height of the letters. On a phone-sized artboard a headline is usually 40–72, body copy 16–24. Below about 14 is unreadable on a real phone.
Range: −20 to 100pxStarts at: 0px
Extra space between letters. Negative tightens. A little positive spacing — 1 or 2 — makes all-caps text much easier to read.
Starts at: Regular
Light (300), Regular (400), Medium (500), Semibold (600), Bold (700) or Black (900). Not every typeface has every weight — the closest available one is drawn.
Starts at: Normal
Normal or Italic.
Starts at: None
None or Strikethrough. Strikethrough is what you want for a crossed-out original price beside a discount.
Range: 0.8–3×, in steps of 0.05Starts at: 1.2×
Spacing between lines, as a multiple of the font size. 1.2 to 1.4 suits most copy; tighten toward 1 for a big headline, open up past 1.5 for small print.
Starts at: None
Re-cases the text as it is drawn without changing what you typed. None, UPPERCASE, lowercase or Capitalize. Because it does not touch the content, you can switch it off later and get your original casing back.
Paragraph
How the block of text sits inside the object's box.
Starts at: Left
Left, Center, Right or Justify — horizontal alignment within the box.
Starts at: Top
Top, Middle or Bottom — where the block sits in the object's height. Set Middle plus Center align and the text is centred in its box no matter how many lines it runs to.
Starts at: On
Breaks lines so the text fits the object's width. Switch it off and the text runs in one line, ignoring the box edge.
Starts at: Visible
What happens to text that does not fit the box. Visible lets it spill out. Clip cuts it off hard at the edge. Ellipsis cuts it off and adds a … so it reads as deliberately shortened.
Range: 0–200pxStarts at: 0px
Inner margin between the text and the box edge, on all four sides. Raise it when text is sitting on a coloured panel and touching the sides.
Appearance
Colour of the letters themselves.
Range: 0–20pxStarts at: 0px
An outline drawn around each letter. 2 to 4px of a dark stroke is the standard trick for keeping white text legible over artwork you do not control.
The outline's colour. This control only appears once Stroke Width is above 0.
Range: 0–100%Starts at: 100%
How solid the text is.
Check text on a real phone
Text that reads comfortably on your monitor is often too small on the device the ad actually runs on. Preview at phone size before you settle the sizes — the canvas is bigger than the thing it is standing in for.
Shape
A vector primitive — a rectangle, circle, star, arrow and so on. Shapes are drawn from a path as the ad runs rather than loaded from a file, so they add essentially nothing to your export size and stay sharp at any scale. For panels, dividers, progress bars, badges and highlight rings, a Shape beats an imported PNG on every count.
Header reads Shape · A vector primitive, drawn at any size, with all three tabs. Cards: Identity, Layout, Shape, Paint, Anchor Point, Transform, Visibility.
Shape
Which primitive, and the settings that particular primitive uses. Only the relevant controls are shown — a circle is never offered a corner radius.
Starts at: Rect
Eleven shapes in a four-across grid: Rect, Circle, Tri, Star, Polygon, Diamond, Heart, Arrow, Chevron, Cross and Ring.
Range: 0 to half the shortest side
Rounds the corners. Rect only. Push it to the maximum on a square and you get a circle.
Range: 3–20
How many points the star has. Star only. 5 is the classic star.
Range: 3–12
How many sides the polygon has. Polygon only. 6 gives a hexagon, 8 an octagon.
Range: 0.05–0.95, in steps of 0.01
How deep the star's points cut in. Star only. Low values give long spiky points; high values give a fat, nearly round star.
Range: 0.05–0.95, in steps of 0.01
How big the hole in the middle is, as a fraction of the shape. Ring only. A thin ring is a progress track; a fat one is a donut.
Range: 0.05–0.9, in steps of 0.01
How heavy the band is, as a fraction of the box. Arrow, Chevron and Cross only.
A shape fills whatever box you give it
Shapes are drawn to the object's Width and Height, so a star in a wide box is a wide star — not a round one with empty bars either side. If you want it undistorted, keep Width and Height equal.
Paint
The shape's colour, its outline, and how it mixes down.
Starts at: On
Whether the inside is painted. Switch it off and add a stroke to get a hollow outline — which is how you draw a highlight ring around something.
The interior colour. Appears only when Fill is on.
Range: 0–40pxStarts at: 0px
Thickness of the outline around the shape's edge.
The outline colour. Appears only when Stroke Width is above 0.
Range: 0–100%Starts at: 100%
How solid the shape is.
Starts at: Normal
How the shape mixes with what is underneath. Multiply darkens, Screen lightens.
Fill off and no stroke draws nothing
Turn the fill off without adding a stroke and the shape becomes invisible — the panel warns you in amber when this happens. It is still there and still selectable from the object list, so nothing is lost; it simply has nothing to draw.
Background
The bottom layer of the scene. Every project has exactly one — you do not add it and you cannot delete it, you select it from the object list. It has no tabs and no Layout card, because it always covers the whole artboard.
Header reads Background · Configure the project background. Cards: Identity, Colour, Image, Image Adjustments, Appearance.
Colour
A flat colour painted under everything else. It shows wherever an image does not reach, so it is worth setting even when you are using a picture — pick something from the artwork and letterboxed edges stop looking like a mistake.
Starts at: Normal
How the background image mixes with the colour beneath it. Twenty-four modes, same set as elsewhere.
Image
Optional artwork drawn over the colour. Click the upload box or drop a file onto it.
The background picture. Removing it puts the fill back to colour only. Since this image covers the entire screen it is usually the largest single file in the ad — compress it hard before uploading.
Starts at: Cover
Cover fills the screen and crops the overflow — right for almost every background. Contain fits the whole image in, showing the colour at the edges. Stretch distorts it to fit exactly. Auto draws it at its natural size.
Starts at: Center
Which part is kept when Cover crops: Center, Top, Bottom, Left, Right, Top Left, Top Right, Bottom Left or Bottom Right. If your artwork's subject is near the top, set Top and it survives the crop on tall screens.
Image Adjustments
These move the background image alone, not the colour under it or anything else in the scene.
Range: 0–360°Starts at: 0°
Turns the image. Watch the corners — a rotated image leaves triangles of background colour showing unless it is scaled up to compensate.
Range: 0–300%Starts at: 100%
Stretches the image horizontally. Also how you zoom past the edges after rotating.
Range: 0–300%Starts at: 100%
Stretches the image vertically.
Appearance
Applied over the finished background — colour, image and all.
Range: 0–100pxStarts at: 0px
Softens the whole background. A blurred photo is one of the easiest ways to get a rich backdrop that does not compete with your copy.
Range: 0–100%Starts at: 0%
Darkens the background so text laid over it stays readable. Between blur and this, almost any photo can be made to carry white text.
Art-directing landscape separately
In landscape, a line at the top of the panel tells you the background is still following the portrait one. Change the image or the colour and landscape gets its own, leaving portrait untouched — useful when a tall composition simply does not work wide. A Follow portrait button re-links them.
Reference: Sprite, Audio, Timer, Marquee, Overlay, Parallax
The objects that move or set a mood on their own — frame animation, sound, countdowns, scrolling copy, colour washes and scrolling backdrops.
Animated Sprite
A sequence of images played in order, like a flipbook — a character running, a coin spinning, a chest opening. This is how you get hand-drawn animation into an ad that the animation library on the Animate tab cannot produce.
Header reads Animated Sprite · Play a sequence of frames, with all three tabs. Cards: Identity, Source, Preview, Playback, Layout, Appearance, Anchor Point, Transform, Visibility.
Source
Where the frames come from. Two ways to supply them.
Starts at: Frame by Frame
Frame by Frame takes one image per frame. Sprite Sheet takes a single image holding every frame in a grid. Both play identically — switching between them keeps whatever the other one holds, so you can try one and go back.
Frame by Frame mode. Pick several images at once — they are sorted by filename before being added, so an export numbered frame_01 to frame_24 arrives in the right order. Each frame becomes a row you can drag to reorder, replace, or delete.
Sprite Sheet mode. One image containing all the frames. Cells are read left to right, then top to bottom — the layout every exporter produces.
Range: 1–64
Sheet mode. How many cells across the grid is.
Range: 1–64
Sheet mode. How many cells down the grid is.
Range: 0 to columns × rowsStarts at: 0
Sheet mode. How many cells to actually use. Leave at 0 to use the whole grid. Set it when the last row is only partly filled — a 5×5 sheet holding 22 frames would otherwise play three blank cells.
The line under the Source card
Once frames exist, a summary appears: how many frames there are, and how long one loop lasts at the current speed. That duration is the number to match when you are timing a sound or a scene against the animation.
Preview
Plays the sprite on the canvas so you can judge the timing without running the whole ad.
The blue round button. Runs the sequence on the canvas with your current Playback settings applied.
The square button. Halts playback and returns to the start.
Drag to hold any single frame. The counter at the right reads Frame n / last. This is the way to find the exact frame number you want to use as a Start or End Frame.
Playback
How the sequence runs.
Range: 1–60 FPSStarts at: 12 FPS
Frames shown per second. 12 reads as game-like, 24 as film-like. Past 60 the frames go by faster than most screens refresh, which is why the slider stops there.
Starts at: On
Starts as soon as the scene is entered. Switch it off and the sprite waits on its first frame until a Play Sprite action fires — which is how you make an explosion happen on a tap rather than on arrival.
Range: 0–10000ms, in steps of 50Starts at: 0ms
Holds the first frame for this long before playing. Give a group of sprites different delays and they stop looking mechanically synchronised.
Range: 0 to the last frameStarts at: 0
First frame of the range to play. Numbering starts at 0, so a 24-frame sequence runs 0 to 23.
Range: 0 to the last frame
Last frame of the range, included in the play. Use these two to pull a single move out of one long sheet.
Starts at: Off
Plays the range back to front. A chest opening becomes a chest closing without a second set of art.
Starts at: Off
Runs forwards then backwards, returning the way it came. Good for a breathing or hovering idle, where a plain loop would snap back at the end.
Starts at: On
Repeats when it reaches the end. Off plays once and holds the last frame — right for an explosion or a one-shot reveal.
Range: 0 and upStarts at: 0
How many times to repeat. 0 means forever. Appears only when Loop is on.
A sprite that loops forever never finishes
Loop Count 0 means the sprite has no end, so it will never fire an Animation Complete trigger. If you are waiting on a sprite to finish before moving to the next scene, give it a real loop count or switch Loop off.
Appearance
Starts at: Stretch
Stretch fills the box exactly. Contain fits the whole frame in, leaving gaps. Cover fills the box and crops.
Starts at: Normal
How the sprite mixes with what is behind. Screen on a black-background effect sheet drops the black out entirely.
Range: 0–100%Starts at: 100%
How solid the sprite is.
Starts at: #FFFFFF
Multiplies the frames by this colour. One white sprite sheet plus four tints gives four coloured variants at no extra file size.
Sprites are the most expensive thing you can add
Twenty-four frames is twenty-four images in the export. Cut the frame count before you cut quality — most loops read fine at 12 FPS with 8 to 12 frames, and a sprite sheet compresses far better than the same frames as separate files.
Audio
A sound. Nothing is drawn, so there are no tabs, no Layout card and no FX — it has no position on the canvas and appears in the object list only.
Header reads Audio · Configure sound playback. Cards: Identity, Source, Preview, Playback, Trim, Fade, Loading, Enabled.
Most networks start the ad muted
Phones and ad networks block sound until the viewer interacts. Treat audio as a bonus that rewards a tap, never as something the ad needs in order to make sense — and always design the ad to work in silence.
Source
Opens the audio picker, where you can browse the built-in library or upload your own file. Once chosen, the card shows the filename with its size in KB and its length.
Swap the sound keeping every other setting, or clear it back to the picker.
Preview
Auditions the sound in the editor without running the ad. Play/pause, stop, and a scrubber with the current position against the total length.
Hear it and find a moment in it. The position readout is what you use to work out Trim points.
Playback
Starts the sound when its scene is entered. With it off, the sound waits for a Play Audio action.
Repeats from the start point on reaching the end. What a music bed wants; what a sound effect does not.
Plays silently. The volume you set is remembered for when it is unmuted, so this pairs with a mute button wired to the Mute Video style actions.
Range: 0–100%
Loudness. Keep a music bed well under your effects — around 30 to 40% — so taps still register over it.
Range: 0.25–4×, in steps of 0.05Starts at: 1×
Playback rate, which changes the pitch with it. Slight changes on a repeated effect stop it sounding identical every time.
Trim
Play only part of the file. Cheaper than editing the audio elsewhere and re-uploading.
Range: 0 to the file length, in steps of 0.1sStarts at: 0s
Where playback begins. Trims silence off the front of a file, which is the usual reason an effect feels late.
Range: 0 to the file length, in steps of 0.1sStarts at: 0s
Where playback stops. 0 means play to the end of the file. A line under the fields tells you how much of the file will actually play.
Fade
Range: 0–5000ms, in steps of 50Starts at: 0ms
Ramps up from silence at the start. A few hundred milliseconds removes the click a hard start can make.
Range: 0–5000ms, in steps of 50Starts at: 0ms
Ramps down before the end. It needs an end to aim at, so it waits until the file's length is known.
Loading
How much is fetched before the sound is asked to play. None keeps the ad lightest but may delay the first play. Metadata fetches just the header. Auto fetches the file up front, so the first play is instant. Use Auto for a sound that must land exactly on a tap.
Enabled
Starts at: On
Off silences the sound entirely. It is the same switch as the eye icon beside the object in the list.
Timer
A countdown or count-up drawn on the canvas. Use it to put pressure on a decision — an offer expiring, a round running out — or simply to show elapsed time.
Header reads Timer · A countdown, and a clock to hang the scene off, with all three tabs. Cards: Identity, Layout, Countdown, Type, Background, Anchor Point, Transform, Visibility.
Countdown
Range: 1s and up
How long the timer runs for, in seconds.
Starts at: Down
Down starts at the duration and falls to zero — urgency. Up starts at zero and climbs — elapsed time, like a stopwatch on a challenge.
How the number reads: Seconds (plain, like 90), mm:ss (01:30), hh:mm:ss (00:01:30) or 1m 30s (compact). A line under the field shows the opening reading in the format you chose, so you can pick by seeing it.
The timer holds still in the editor
On the canvas it shows its starting reading rather than counting, so your layout does not shift under you while you work. It runs for real when the ad plays.
Type
The same ten typefaces. Pick a monospaced face like Courier New — in a proportional font the digits are different widths, so the whole timer jiggles sideways every time a number changes.
Range: 8–400px
Size of the digits.
Light through Black.
Colour of the digits.
Background
Starts at: Off
Draws a panel behind the digits. Off leaves them sitting on whatever is behind them.
The panel's colour. Appears only when the background is on.
Range: 0 to half the shortest side
Rounds the panel's corners. At maximum on a wide box you get a pill. Appears only when the background is on.
Scrolling Text
A marquee: copy that travels across its own box on an endless loop. Good for a ticker of features, a stream of review quotes, or a band of moving text behind a headline.
Header reads Scrolling Text · Copy that travels across its own box on a loop, with all three tabs. Cards: Identity, Layout, Content, Type, Scroll, Background, Anchor Point, Transform, Visibility.
Content
The copy that scrolls. It repeats end to end forever, so write one phrase rather than a paragraph.
Drawn in the middle of the gap between repeats — a bullet, a star, a dash. Leave it empty for a plain gap. Without one, a repeating phrase can read as one run-on sentence.
Starts at: None
None, UPPERCASE, lowercase or Capitalize, applied as it is drawn.
Type
The same ten typefaces.
Range: 8–400px
Size of the copy.
Light through Black.
Normal or Italic.
Colour of the copy.
Range: −20 to 100px
Space between letters.
Range: 0–20pxStarts at: 0px
Outline around each letter.
The outline's colour. Appears only when Stroke Width is above 0.
Scroll
← Left, → Right, ↑ Up or ↓ Down. Left is the conventional ticker.
Range: 0–400 px/s
How fast the copy travels. 40 to 80 is readable; above about 150 it becomes texture rather than text. At 0 the copy stands still and the panel says so in amber.
Range: 0–400px
Space between the end of one repeat and the start of the next. The separator sits in the middle of this gap.
Starts at: Off
Stops the scroll while a pointer rests on it. Applies to the exported ad only — in the editor it keeps moving so you can still judge the speed.
Background
Starts at: Off
Draws a band behind the copy. Off leaves it travelling over whatever is behind it.
The band's colour. Appears only when the background is on.
Range: 0 to half the shortest side
Rounds the band's corners. Appears only when the background is on.
The copy is clipped to the box either way
Background on or off, the object's box is the window the text travels in and out of. Make the box the width you want the marquee to be — not the width of the text.
Overlay
A flat colour washed across the whole canvas. It covers everything, so it is used for dimming the scene behind a popup, tinting a scene to signal a state change, or as the thing a fade-to-black animation moves.
Header reads Overlay · Wash the canvas with a colour. There are no tabs, no Layout and no Anchor Point — it always covers the full canvas. Cards: Identity, Overlay, Transform, Visibility.
Overlay
The colour washed over the canvas. Black for a dim, white for a flash, a brand colour for a tint.
Range: 0–100%Starts at: 100%
How strong the wash is. 50 to 70% black is the usual setting for dimming a scene behind a dialog so the dialog reads clearly.
Starts at: Normal
How the wash mixes with the scene. Multiply darkens richly without flattening to grey; Screen lifts everything toward the colour.
Transform
An overlay turns on its own settings rather than the shared transform, in the same way the background does.
Range: 0–360°Starts at: 0°
Turns the wash.
Range: 0–300%Starts at: 100%
Stretches it horizontally.
Range: 0–300%Starts at: 100%
Stretches it vertically.
Layer order matters more than usual here
An overlay dims everything below it in the object list and nothing above it. Put your popup above the overlay and the background objects below, and you get the standard dimmed-dialog look in one move.
Parallax BG
A tiled image that scrolls forever. Stack two or three at different speeds — clouds slow, hills medium, ground fast — and you get depth from flat artwork. It is the standard way to make an endless-runner backdrop.
Header reads Parallax BG · A tiled layer that scrolls forever. There are no tabs: the scroll is its animation and never stops, so a second animation would fight it, and filtering an endlessly repeating tile costs a full pass every frame for little gain. Cards: Identity, Tile Image, Layout, Scroll, Tile, Appearance, and — only when fullscreen is off — Anchor Point and Transform, then Visibility.
Your tile must be seamless
The image repeats in both directions, so its left edge has to meet its right and its top meet its bottom. If it does not, the seam scrolls past in plain sight every few seconds. Most image editors have an offset filter to check this before you upload.
Tile Image
The image that repeats. A narrow strip tiles just as well as a big square and costs far less in the export.
Layout
Starts at: Fullscreen Off
Fullscreen On locks the layer to the whole canvas, like a background. Fullscreen Off gives it its own box, which is what you want for a band of scrolling scenery partway up the screen.
The layer's box. Shown only when fullscreen is off. Turning fullscreen on keeps the box you had and gives it back when you turn fullscreen off again.
Scroll
Starts at: On
Off holds the tiles still, so the layer becomes a static repeating pattern — a useful way to use this object as wallpaper.
← Left, → Right, ↑ Up, ↓ Down or ↘ Diagonal presets. Typing speeds by hand lights none of them up, which is deliberate — a custom speed is not pretending to be a preset.
Range: Any value, in steps of 5 px/s
Horizontal scroll rate. Negative reverses the axis, 0 holds it still.
Range: Any value, in steps of 5 px/s
Vertical scroll rate. Same rules.
How to get convincing depth
Give each layer a different speed, with the nearest one fastest — something like 20, 60 and 140 px/s across three layers. The eye reads the speed difference as distance without any further work.
Tile
Range: 0.05 and up, in steps of 0.05Starts at: 1
Tile width relative to the image's own size. 1.0 is its true size, below 1 packs in smaller tiles, above 1 blows them up.
Range: 0.05 and up, in steps of 0.05Starts at: 1
Tile height, same scale.
Range: Pixels, in steps of 5Starts at: 0px
Where the repeat starts horizontally. Two layers cut from the same image look like the same picture twice until one of them is offset.
Range: Pixels, in steps of 5Starts at: 0px
Where the repeat starts vertically.
Appearance
Range: 0–100%Starts at: 100%
How solid the layer is.
Starts at: #FFFFFF
Multiplies the tile by this colour; white leaves it alone. Washing the far layers toward your sky colour is what makes them sit behind the near ones — the trick landscape painters call aerial perspective.
Reference: Particle Effect
Confetti, fire, snow, sparkles and coin showers. The biggest panel in the editor, every card explained — start from a preset and change one thing at a time.
How a particle effect works
A particle effect is a machine that keeps throwing out small images. The machine is called the emitter. Each thing it throws is a particle: it is born somewhere, it moves, it changes colour and size as it ages, and then it dies. Nothing is hand-animated — you describe the rules and the effect follows them, differently every time it runs.
That is why there are so many controls. Each card here answers one question about the machine: where particles are born, how many, how fast they leave, what pulls on them, what they look like, and how long they last.
Do not build one from scratch
Start from a preset that is close to what you want, then change one card at a time. Twenty-eight presets cover most of what an ad needs, and adjusting one is far quicker — and far more likely to work — than setting seventeen cards from zero.
The panel reads Particle Effect · Emit and animate particles. There are no tabs: the effect is already its own animation, and the FX filters would run across every particle at once rather than over anything meaningful.
Its cards in order: Identity, Preset, Preview, Layout, Emitter, Emission Curve, Particle Shape, Color, Size & Opacity, Lifetime, Velocity, Physics, Rotation, Turbulence, Trail, Glow, Attractor, Cursor, Sub-Emitter, Anchor Point, Transform, Visibility.
Preset and Preview
Preset
A grid of ready-made effects, four across, each with an icon. Clicking one replaces every setting below with that preset's.
Twenty-eight effects: Confetti, Sparkle, Snow, Fire, Rain, Coins, Stars, Bubbles, Explosion, Impact, Smoke, Embers, Leaves, Waterfall, Tap Burst, Pixie Dust, Hearts, Gold Rain, Win FX, Electric, Level Up, Fireworks, Aurora, Cursor Trail, Hover FX, Vortex, Galaxy and Portal. The active one is outlined in blue.
Picking a preset overwrites your changes
It replaces every setting in every card below. Choose the preset first, then tune. Once you change anything, the effect is marked as custom and no preset stays highlighted.
Preview
Runs the effect on the canvas so you can judge it without playing the whole ad.
Clears every live particle and starts again from nothing. Use it after a change — otherwise particles born under the old settings are still on screen confusing the picture.
Emitter and Emission Curve
Emitter
Where particles are born, and how many.
The region particles are born in. Point — all from one spot, for a fountain or a burst. Rect — anywhere in the object's box, for rain or snow across the screen. Circle — anywhere in a disc. Cone — from a point within a spread of angles, for a jet or a spray. Edge — along a line, for a waterfall lip. Ring — around the rim of a circle, for a portal.
Range: 0–180°Starts at: 30°
How wide the spray is, measured out from the centre line — so 30 gives a 60° spread in total. At 180 the cone is a full circle and stops being a cone. Cone only.
Range: 0–600pxStarts at: 200px
How long the birth line is. Edge only.
Range: 0–600pxStarts at: 100px
How wide the birth ring is. Ring only.
Starts at: Off
Emits a fixed number all at once and then stops, instead of emitting steadily. This is the difference between an explosion and a bonfire.
Range: 1–1000Starts at: 40
How many particles the burst throws. Appears only when Burst Mode is on.
Range: 0–500 per second
How many particles are born each second when emitting steadily. Hidden when Burst Mode is on.
Range: 1–1000Starts at: 250
The ceiling on how many can be alive at once. When it is reached, nothing new is born until something dies. Hidden when Burst Mode is on.
Range: 0–10s, in steps of 0.1Starts at: 0s
Waits this long after the scene is entered before the first particle.
Local — particles follow the emitter, so moving it drags the whole effect along. World — particles stay where they were born, so a moving emitter leaves a trail behind it. World is what makes a rocket's exhaust hang in the air.
Particle count is the main performance cost in an ad
A thousand live particles is genuinely expensive on an older phone. Most effects read just as well at 60 to 150. If the preview stutters on your machine it will be far worse on a mid-range device — cut Emission Rate or Max Particles first.
Emission Curve
How the emission rate varies over time, instead of holding steady.
Starts at: Constant
Constant emits evenly. Sine swells and fades smoothly, good for a flickering fire. Ramp Up starts slow and builds. Ramp Down starts strong and tails off — the shape most celebrations want. Burst Wave emits in repeating pulses.
Range: 0.1–10s, in steps of 0.1
How long one pass through the curve takes. Hidden when the curve is Constant.
Repeats the curve. Off runs it once and holds where it ended. Hidden when the curve is Constant.
Starts at: Off
Runs the effect forward before its first frame is shown, so a scene opens on snow already falling rather than on an empty sky with flakes starting at the top.
Range: 0–10s, in steps of 0.2
How much time to simulate in advance. Set it to roughly how long a particle takes to cross the screen. Appears only when Prewarm is on.
Shape, Color, Size and Lifetime
Particle Shape
Starts at: Circle
What each particle is drawn as: Circle, Square, Star or Image. The three built-in shapes cost nothing and are tinted by the Color card.
Your own artwork per particle — a petal, a coin, a logo mark. Appears only when Shape is Image. The image is tinted too, so white artwork takes colour best; a red image cannot be tinted blue.
Color
A strip under the mode buttons previews the colour a particle passes through over its life, so you can judge the setting without hunting for one on the canvas.
Solid — one colour for life. Gradient — fades from a birth colour to a death colour as it ages, which is how an ember cools as it rises. Random — each particle picks from a pool you define, for confetti. Multi-Stop — a full gradient with as many stops as you like.
The single colour. Solid mode only. Only opacity changes as the particle ages.
Start and end colours. Gradient mode only.
A list of swatches; each particle picks one at random. Add and remove entries with the buttons beside them. Random mode only.
A gradient with positioned stops, for a colour path more complex than birth-to-death. Multi-Stop mode only.
Starts at: Normal
Four options, named for what they are used for: Normal, Add (bright / fire), Screen (soft glow) and Multiply (shadow). Add stacks brightness where particles overlap, which is exactly what makes fire and sparks glow.
Size & Opacity
Particles change size and fade as they age. Both ends are set here.
Range: 0–400px
How big a particle is when it appears.
Range: 0–400px
How big it is when it dies. Larger than birth for smoke that billows; smaller for a spark that shrinks away.
Range: 0.2–5×, in steps of 0.05Starts at: 1×
Width against height. Below 1 gives tall thin particles — rain. Above 1 gives wide flat ones.
Starts at: Linear
How the size travels between the two: Linear, Ease In, Ease Out, Pop, Bounce or Pulse. Pop and Bounce overshoot on the way, which gives a satisfying snap to a burst.
Range: 0–1, in steps of 0.01
Opacity when it appears. Start at 0 to have particles fade in rather than pop into existence.
Range: 0–1, in steps of 0.01
Opacity when it dies. Set this to 0 in almost every case — particles that vanish abruptly at full opacity are the single most common thing that makes an effect look unfinished.
Lifetime
How long a particle lives, as a range. Each one picks a random value between the two, so they do not all die together.
Range: 0.05–20s, in steps of 0.1
Shortest a particle can live.
Range: 0.05–20s, in steps of 0.1
Longest it can live. Keep a gap between Min and Max — identical values make every particle die in lockstep, which reads as mechanical.
Velocity, Physics and Rotation
Velocity
How fast particles leave the emitter, and in which direction.
Range: 0–2000 px/s
Slowest launch speed.
Range: 0–2000 px/s
Fastest launch speed. A range rather than one number is what keeps a burst from looking like a solid expanding ring.
A circular dial showing the arc particles are launched into, drawn between the two angles below. Easier to read than the numbers.
Range: 0–360°
One edge of the launch arc. 0° is to the right, 90° is down, following screen coordinates.
Range: 0–360°
The other edge. Set 0 and 360 to fire in every direction; set both to 270 to fire straight up.
Range: 0–8×, in steps of 0.05Starts at: 0×
Stretches each particle along the direction it is travelling, in proportion to its speed. A little of this turns round dots into streaks and sells speed instantly — it is how rain and sparks are drawn.
Range: −360 to 360°/sStarts at: 0°/s
Makes particles circle the emitter instead of flying straight out. This is the whole of a vortex or a galaxy effect. Negative reverses the spin.
Physics
The forces acting on particles once they are moving.
Range: −2000 to 2000 px/s², in steps of 10Starts at: 0
Constant sideways pull. Use a little to suggest wind.
Range: −2000 to 2000 px/s², in steps of 10
Constant vertical pull. Positive pulls down — confetti and coins need this. Negative pulls up, which is what makes smoke rise and embers float.
Range: 0–8 per second, in steps of 0.005Starts at: 0
Slows particles the faster they are going, as air resistance does. A small amount makes an explosion decelerate convincingly instead of flying off at full speed forever.
Range: −2000 to 2000, in steps of 10
A sideways push that builds as the particle ages, rather than acting from birth. Good for smoke that starts straight and then drifts.
Range: −2000 to 2000, in steps of 10
The same, vertically.
Rotation
Range: −1440 to 1440°/s, in steps of 5
Slowest spin rate.
Range: −1440 to 1440°/s, in steps of 5
Fastest spin rate. Set Min negative and Max positive and particles tumble both ways, which is what confetti does.
Turbulence, Trail, Glow, Attractor, Cursor and Sub-Emitter
Six optional systems, each behind its own checkbox and each off by default. Every one of them costs performance, so switch on only what the effect actually needs.
Turbulence
Appears when: Enable turbulence is ticked
A flowing, invisible field that pushes particles around, so they wander instead of travelling in straight lines.
Starts at: Off
Switches the whole system on.
Range: 0–300
How hard the field pushes. Small values give a gentle drift — the difference between falling snow and a blizzard.
Range: 0.0005–0.05, in steps of 0.0005
How large the swirls are. Small numbers give big, slow swirls; large numbers give tight, chaotic jitter.
Range: 0–3, in steps of 0.01
How fast the field itself churns. At 0 the field is frozen and particles follow fixed paths through it.
Trail
Appears when: Enable trails is ticked
Draws a tail behind each particle along the path it took.
Starts at: Off
Switches trails on. This is one of the more expensive options — each particle becomes a short ribbon rather than a single dot.
Range: 2–64 segments
How far back the tail reaches. More segments is a longer, smoother tail and more work per frame.
Range: 0.5–20px, in steps of 0.25
How thick the ribbon is.
Thins and dims the older end, so it reads as trailing away rather than as a line being dragged along. Leave this on in nearly every case.
Glow
Appears when: Enable glow is ticked
Starts at: Off
Adds a soft halo around each particle.
Range: 0–2, in steps of 0.05
How bright the halo is. Pairs naturally with the Add blend mode for fire, magic and electricity.
Attractor
Appears when: Enable attractor is ticked
A fixed point that pulls particles toward it or pushes them away.
Starts at: Off
Switches the attractor on.
Attract pulls particles in — how coins fly to a wallet, or sparks converge on a logo. Repel pushes them away, for a shockwave clearing the screen.
Range: Plus or minus the canvas width
Where the attractor sits horizontally, measured from the emitter.
Range: Plus or minus the canvas height
Where it sits vertically.
Range: 0–1000
How hard it pulls or pushes.
Range: 0–2000px
How far its influence reaches. Particles outside this distance ignore it entirely.
Cursor
Appears when: Attract To Cursor / Touch is ticked
The same idea as the attractor, but following the viewer's finger or pointer. This is what makes an effect feel interactive rather than decorative.
Starts at: Off
Particles are pulled toward wherever the viewer is touching.
Range: 0–1000
How strongly the touch point pulls.
Range: 0–2000px
How close a particle must be to be affected.
Sub-Emitter
Appears when: Spawn Sub-Particles On Death is ticked
Each particle bursts into smaller particles when it dies. One firework shell becoming a shower of sparks is exactly this.
Starts at: Off
Switches the second stage on. This multiplies your particle count — 100 particles each spawning 20 is 2000 — so keep both numbers modest.
Range: 1–30
How many children each dying particle produces.
Range: 1–100px
How big the children are.
Circle, Square or Star. There is no Image option for children.
One colour for all the children.
Range: 0–1000 px/s, in steps of 10
How fast the children fly outward.
Range: 0.05–10s, in steps of 0.05
How long the children live. Keep it short — a secondary burst that lingers muddies the effect.
A recipe for a satisfying tap burst
Emitter Point with Burst Mode on and about 40 particles; Velocity 200 to 600 across the full 0–360° arc; Gravity Y around 800; Alpha At Death 0; Size At Death smaller than birth; Air Drag around 2. That is a confetti pop, and every celebration effect is a variation on it.
Reference: the Animate and FX tabs
Every animation in the library with its own settings, and all twenty-four visual effects with every slider each one has.
The Animate tab
Motion added from a library rather than keyframed by hand. You pick an animation, and it appears in a list with its own timing and settings. An object can carry several at once — a Fade In, a Float and a Fade Out will run as an entry, an idle and an exit.
The tab has two sub-tabs of its own. Library is where you choose an animation to add. Settings is where you tune the ones already on the object. Adding from the library switches you to Settings automatically.
Animations are grouped into three phases, and the phase decides when it runs.
The three phases.
Entry
Once, as the object arrives — when its scene is entered or the object is shown.
Idle
Continuously, while the object is on screen. This is the one that loops.
Exit
Once, as the object leaves — when the scene changes or the object is hidden.
| Phase | When it runs |
|---|---|
| Entry | Once, as the object arrives — when its scene is entered or the object is shown. |
| Idle | Continuously, while the object is on screen. This is the one that loops. |
| Exit | Once, as the object leaves — when the scene changes or the object is hidden. |
Library — Entry animations
Played once as the object appears.
Moves in from the left edge.
Moves in from the right edge.
Moves in from the bottom.
Moves in from the top.
Fades into view from transparent. The safest entry there is — it never fights the layout.
Scales up from a smaller size. Good on a button you want noticed.
Bounces while appearing, overshooting and settling. The most attention-getting entry, and the easiest to overuse.
Library — Idle animations
Loop for as long as the object is on screen. These are what keep an ad from looking like a still image.
Smooth drifting movement. A character that floats gently reads as alive at almost no cost.
Small rapid vibration. Signals urgency or a thing that wants tapping.
Repeated scaling in and out. The standard treatment for a call-to-action button.
Continuous rotation. Set the anchor before using this — it turns about the anchor point, not the centre, unless the anchor is centred.
A soft glow that pulses around the object.
Animated transition between two colours.
Library — Exit animations
Played once as the object leaves.
Slides out to the named edge. Four separate entries in the library.
Fades away before disappearing.
Scales down out of view.
Settings — Timing
Every animation has this card, whatever it does.
Range: 0ms and up
How long one run takes. 200–400ms suits most entries and exits; much longer and the ad feels sluggish. An idle loop can be far slower — a float of 2000 to 3000ms reads as gentle rather than nervous.
Range: 0ms and up
How long to wait before starting. Giving several objects increasing delays — 0, 100, 200 — staggers them into a sequence instead of everything landing at once.
How the speed changes through the run. Linear is a constant rate and looks mechanical. Ease In starts slow. Ease Out starts fast and settles — the most natural for something arriving. Ease In Out does both, which suits movement between two resting points.
Settings — Playback
Repeats the animation. Idle animations are looped by default; entry and exit animations normally should not be.
Alternates direction, so it plays forwards then backwards rather than snapping back to the start. Appears only when Loop is on. Nearly always worth ticking on a float or a pulse.
Below Timing and Playback, each animation shows a card with settings particular to what it moves. Which one you get depends on the animation you added.
Settings — per-animation cards
Range: Pixels
Where the movement starts and ends, for the slide animations. These are offsets from the object's placed position, so a Slide Left entry starts at a negative X and ends at 0.
Range: 0–2, in steps of 0.01
Start and end size multipliers, for Pop In, Bounce In, Pulse and Shrink. 1 is the object's normal size.
Range: Degrees
Start and end angles, for Spin. For a continuous rotation set From 0 and To 360 with Loop on.
Range: 0–1, in steps of 0.01
Start and end transparency, for Fade In and Fade Out. 0 is invisible, 1 fully solid.
The drift range for Float — how far it wanders on each axis, and optionally how much it tilts as it goes. Small numbers: 4 to 12 pixels is usually plenty.
The vibration range for Shake. A few pixels with a degree or two of rotation reads better than a large purely horizontal shake.
Range: Strength 0–10, in steps of 0.1
The glow's colour and how far it pulses between. Pair a low From with a moderate To for a breathing halo.
The two colours Color Shift moves between.
Stagger, do not synchronise
Four objects animating in with identical timing looks like a slide transition. Give each one a Delay 80 to 150ms after the last and the same four animations read as a designed sequence. This single habit improves more ads than any other animation advice.
Idle animations never stop
An idle animation runs for the entire life of the scene. Several looping at once — a pulse, a float and a spin on different objects — compete for attention and end up cancelling each other out. Pick one thing to move and let the rest hold still.
The FX tab
Visual filters applied to the finished object, after everything on the General tab. They stack: add three and all three are applied in the order they appear in the list.
The tab opens on a searchable library of twenty-four effects grouped into six categories. Click one to add it. Added effects appear in a list above, each of which you can expand to reach its settings, toggle off temporarily, or remove.
Effects are expensive — use them sparingly
Every effect is a full pass over the object every frame. One or two on a couple of objects is fine; a stack of five on several objects will stutter on a mid-range phone. Where a static look will do, bake it into the artwork instead.
Every effect's shared control
Starts at: On
Every effect has this at the top of its settings. Switching it off keeps the effect and all its settings but stops it drawing — the quickest way to see what an effect is contributing.
FX — Appearance effects
Drop Shadow
A soft shadow behind the object.
How the shadow mixes with what is behind it.
The shadow's colour.
Range: 0–1, in steps of 0.01
How strong the shadow is.
Range: 0–100px
Softness of the edge. 0 gives a hard offset copy.
Range: 0–100px
How far the shadow is thrown from the object.
Range: 0–100px
How much the shadow expands beyond the shape.
Range: 0–360°
Which direction the shadow falls. Keep it consistent across every object in a scene — mismatched light directions are noticeable even when nobody can say why.
Outline
A line drawn around the object's silhouette.
The outline's colour.
Range: 0–1, in steps of 0.01
How solid the outline is.
Range: 0–100px
How heavy the line is.
Range: 0.01–1, in steps of 0.01
How smooth the outline is. Lower is cheaper and more angular; there is rarely a visible difference above about 0.5.
Hides the object and keeps only the outline, leaving a hollow silhouette.
Glow
A coloured halo around the object.
The glow's colour.
Range: 0–20×, in steps of 0.1
How far the glow spreads outward.
Range: 0–20×, in steps of 0.1
How far it bleeds inward over the object.
Range: 0–100px
The overall size of the halo.
Range: 0.01–1, in steps of 0.01
Smoothness against cost.
Keeps only the glow, hiding the object itself.
Range: 0–1, in steps of 0.01
Overall strength of the glow.
Bevel
A raised or engraved edge, lit from one side.
Range: 0–100px
How deep the edge appears.
Range: 0–360°
Which direction the light comes from.
Colour of the lit edge.
Range: 0–1, in steps of 0.01
How bright the lit edge is.
Colour of the shaded edge.
Range: 0–1, in steps of 0.01
How dark the shaded edge is.
Reflection
A mirrored copy beneath the object, as though it were standing on a polished surface.
Flips the reflected copy, as a real mirror would.
Range: 0–100%
How much of the object is reflected, from the bottom up.
Range: 0–100px
How much the reflection ripples. A little suggests water.
Range: 0–100px
How far apart the ripples are.
Range: 0–1, in steps of 0.01
How visible the reflection is. Keep it well under half — a reflection as strong as the object reads as a mistake.
FX — Color effects
Color Adjust
The standard image corrections. The most broadly useful effect in the list.
Range: 0–2×, in steps of 0.01Starts at: 1×
Below 1 darkens, above 1 lightens.
Range: 0–2×, in steps of 0.01Starts at: 1×
Below 1 flattens toward grey, above 1 deepens darks and brightens lights.
Range: 0–2×, in steps of 0.01Starts at: 1×
0 is fully grey, above 1 intensifies the colour.
Range: −180 to 180°
Shifts every colour around the colour wheel. How you get a blue variant of a red asset without new artwork.
Removes all colour.
A cool, darkened night-time grade.
A warm brown vintage grade.
Inverts every colour to its opposite.
Color Overlay
A solid colour laid over the object.
Range: 0–1, in steps of 0.01
How strongly it covers. At 1 the object becomes a flat silhouette of that colour, which is a quick way to make a shadow shape.
Gradient
A two-colour gradient laid over the object.
Linear or radial — a directional sweep, or one that radiates from a centre.
The two colours of the gradient.
Range: 0–1, in steps of 0.01
Each stop's transparency. Setting one end to 0 gives a fade-out rather than a colour change.
Range: 0–1, in steps of 0.01
Where each colour sits along the gradient. Moving them closer together sharpens the transition.
Range: 0–360°
Direction of the sweep. Linear type only.
Range: 0–1, in steps of 0.01
Overall strength of the gradient.
Replaces the object's colours entirely rather than tinting over them.
Color Replace
Swaps one specific colour for another — recolouring a jersey or a logo without touching the source file.
The colour in the artwork you want to replace.
What matching pixels become.
Range: 0–1, in steps of 0.01
How close a pixel must be to count as a match. Raise it until shaded areas of the same colour are caught too, but not so far that it starts eating neighbouring colours.
FX — Blur effects
Blur
A plain Gaussian blur.
Range: 0–100px
How heavy the blur is.
Range: 1–8
How many passes are used. Higher is smoother and more expensive; 2 to 4 is usually indistinguishable from 8.
Blur both axes together, or each one separately.
Range: 0–100px
Per-axis amounts. Appear only when Direction is set to the separate mode. Blurring one axis only gives a convincing motion streak.
Stops the blur pulling transparency in from outside the object, which otherwise darkens or fades the edges.
Motion Blur
Directional smearing, as though the object were moving.
Range: −100 to 100px
Horizontal smear amount and direction.
Range: −100 to 100px
Vertical smear.
Sampling detail against cost.
Range: −1 to 1, in steps of 0.01
Shifts the smear so it trails behind the object rather than being centred on it.
Zoom Blur
Streaks radiating out from a point — a rush toward or away from the viewer.
Range: −1 to 1, in steps of 0.01
How far the streaks reach. Negative pulls inward instead of pushing out.
Range: 0–1, in steps of 0.01
Where the zoom originates, as a fraction of the object. 0.5, 0.5 is the middle.
Range: 0–500px
A protected zone at the centre that stays sharp. Use it to keep a logo readable while everything around it streaks.
Lets the effect reach with no outer limit.
Range: 1–1000px
Where the effect stops. Appears only when Infinite Radius is off.
Radial Blur
A circular, spinning smear.
Range: −180 to 180°
How far around the smear travels.
Range: 0–1, in steps of 0.01
The point it spins about.
Sampling detail.
Removes the outer limit.
Range: 1–1000px
Where it stops. Appears only when Infinite Radius is off.
Backdrop Blur
Blurs what is behind the object rather than the object itself — frosted glass. Use it on a panel to lift a dialog off a busy scene.
Range: 0–50px
How heavily the backdrop is blurred.
Range: 1–8
Smoothness against cost.
Avoids edge darkening at the object's boundary.
FX — Lighting effects
Bloom
Makes bright areas glow and bleed, the way an overexposed photograph does.
Range: 0–1, in steps of 0.01
How bright a pixel must be to bloom. Lower catches more of the image; too low and everything glows into mush.
Range: 0–5×, in steps of 0.1
How intense the bleed is.
Range: 0–3×, in steps of 0.1
Overall brightness of the result.
Range: 0–30px
How far the glow spreads.
Range: 1–8
Smoothness against cost.
Bloom Simple
A cheaper bloom with one control. Prefer this one unless you need the threshold.
Range: 0–30px
How much the bright areas spread.
God Rays
Volumetric shafts of light.
Parallel rays coming in at an angle, or rays radiating from a point.
Range: −180 to 180°
Direction the rays travel. Parallel mode only.
Range: 0–1, in steps of 0.01
Where the rays originate. Radiating mode only.
Range: 0–1, in steps of 0.01
How bright the rays are.
Range: 0.5–10, in steps of 0.1
How many rays there are.
Range: 0–1, in steps of 0.01
Overall visibility of the effect.
FX — Stylize effects
CRT
An old television look — scanlines, curvature, noise and a vignette in one effect.
Range: 0–10, in steps of 0.1
How much the picture bows outward.
Range: 0–10px, in steps of 0.1
Thickness of the horizontal lines.
Range: 0–1, in steps of 0.01
How dark the lines are against the picture.
Draws the lines vertically instead.
Range: 0–1, in steps of 0.01
How much static is mixed in.
Range: 1–20px
How coarse the static grain is.
Range: 0–1, in steps of 0.01
How far the corner darkening reaches in.
Range: 0–1, in steps of 0.01
How dark the corners get.
Range: 0–1, in steps of 0.01
How soft the vignette's edge is.
Glitch
Displaced slices and channel separation — digital corruption.
Range: 1–30
How many bands the image is cut into.
Range: 0–300px
How far the bands are pushed sideways.
Range: −180 to 180°
Which way the bands are displaced.
What fills the space a displaced band leaves behind.
Makes every band the same height rather than random ones.
Range: 1–64px
The thinnest a band may be.
Range: −50 to 50px each
Six sliders that offset each colour channel independently, producing the coloured fringing that sells the glitch.
RGB Split
Separates the three colour channels — chromatic aberration, on its own.
Range: −100 to 100px
Displacement of the red channel.
Range: −100 to 100px
Displacement of the green channel.
Range: −100 to 100px
Displacement of the blue channel. A few pixels in opposite directions on red and blue is the classic look; more than that becomes a glitch.
Pixelate
A retro blocky look.
Square pixels, or separate width and height for rectangular ones.
Range: 1–100px
How large each block is. Square mode.
Range: 1–100px
Block width and height separately. Rectangular mode.
Noise
Grain and texture over the object.
Range: 0–1, in steps of 0.01
How visible the grain is.
Range: 1–100
How coarse the grain pattern is.
Which noise pattern is generated.
Range: 0–1, in steps of 0.01
Cuts the noise to hard on-or-off rather than a smooth range. Appears for the patterns that use it.
Range: −100 to 100
Shifts the pattern across the object.
Range: −100 to 100
How far into the pattern is sampled.
FX — Distortion effects
Twist
Spirals the object around a point.
Range: −10 to 10, in steps of 0.1
How hard the twist is. Negative twists the other way.
Range: 0–1000px
How far out the twist reaches. Beyond this the image is untouched.
Range: 0–1, in steps of 0.01
The point it twists about.
Bulge / Pinch
Pushes pixels outward or pulls them inward from a centre.
Range: −1 to 1, in steps of 0.01
Positive bulges the middle outward, negative pinches it inward. A small bulge is a cheap cartoon exaggeration on a face or a button.
Range: 1–1000px
How far the distortion reaches.
Range: 0–1, in steps of 0.01
Where the distortion is centred.
Shockwave
An expanding ring of distortion. The one effect here built to be animated — Wave Position is what you move.
Range: 0–3s, in steps of 0.01
How far through its travel the wave is. This is the value that animates — at 0 the wave has not started, at 3 it has passed.
Range: 0–100px
How strongly the wave displaces pixels.
Range: 1–500px
How wide the ring of distortion is.
Range: 0–5×, in steps of 0.05
How much the wave front brightens as it passes, which sells it as energy rather than a lens artefact.
Range: 0–2000 px/s, in steps of 10
How fast the ring expands.
Range: 0–1, in steps of 0.01
Where the wave starts.
Lets the wave expand without limit.
Range: 1–2000px
Where it stops. Appears only when Infinite Radius is off.
Reference: the Playable object
The game at the centre of a playable ad. Four tabs, twelve mechanics, and every rule each one lets you set.
The four tabs
A Playable object is the game itself — the thing the viewer actually plays. You choose its mechanic when you add it, and the inspector's header changes to match: Tap Target · Tap what appears, before the time runs out, or Spin the Wheel · One press, one prize.
Whichever mechanic you chose, the panel has the same four tabs. Two of them are particular to the mechanic, and two are the same everywhere.
Rules
How the game is played — board size, goal, timing, difficulty. Different for every mechanic.
Pieces
Which of your objects the game uses for its parts, and which text objects display the score, timer and lives.
Sounds
A sound per game event. Every slot is optional; an empty one is silent.
General
Identity, Layout and Visibility — the usual placement controls for the game's area on the canvas.
| Tab | What it holds |
|---|---|
| Rules | How the game is played — board size, goal, timing, difficulty. Different for every mechanic. |
| Pieces | Which of your objects the game uses for its parts, and which text objects display the score, timer and lives. |
| Sounds | A sound per game event. Every slot is optional; an empty one is silent. |
| General | Identity, Layout and Visibility — the usual placement controls for the game's area on the canvas. |
The pieces are your own objects
A playable does not come with artwork. You place Images, Buttons and Shapes on the canvas as usual, then bind them on the Pieces tab as the game's targets, tiles or slots. That is why everything about how a piece looks lives on the piece's own inspector, not here — the Rules tab only decides behaviour.
Pieces — Read-outs
Every mechanic has this card at the bottom of its Pieces tab. Bind a Text object to each slot and the game writes into it as it plays, keeping the font and effects you gave it.
A Text object whose copy is replaced with the score each frame.
Seconds remaining. Left alone when the round has no clock.
Only written while lives are limited.
Sounds
One slot per game event, the set depending on the mechanic — a hit, a miss, a win, a combo. Click a slot to open the audio picker, or the × beside it to clear it. Sound is what makes a move feel like it landed, and a hit with no sound feels broken even when it works.
Tap Target, Drag & Drop and Reveal
Tap Target — Rules
Targets appear on a grid, the viewer taps them before they disappear, and a score builds against a clock.
Range: 1–6
How many rows the spawn grid has.
Range: 1–6
How many columns. Rows times columns is how many places a target can appear.
Range: 1–100
Hits needed to win the round.
Range: 5–120s
How long the round lasts. Running out of time below the target score loses it.
Range: 0.3–4s, in steps of 0.1
How long a target waits to be tapped before vanishing. Shorter is harder.
Range: 0.2–3s, in steps of 0.1
How often a new target appears.
Range: 1–8
How many can be on screen together. More than a couple turns the round hectic.
Pulses a hint pointer over a waiting target. An ad that looks like it is doing nothing gets closed — leave this on.
Range: 0.5–6s, in steps of 0.5
How long to wait before hinting. Appears only when the nudge is on.
Range: 0–60%
How often a target that must not be tapped appears instead. Adds risk to what is otherwise pure speed.
Drag & Drop — Rules
Items appear in a tray and must be carried to the zone they belong in.
Range: 1–4
Rows in the tray items appear in.
Range: 1–6
Columns in the tray.
Range: 1–100
Correct drops needed to win.
Range: 0–120s
Round length. 0 runs with no clock at all, which suits a puzzle you want thought about rather than rushed.
Range: 0.2–3s, in steps of 0.1
How often a new item appears.
Range: 1–8
How many items may be waiting to be moved.
Runs a hint pointer from a waiting item to the zone it belongs in — which also teaches the mechanic without a word of instruction.
Range: 0.5–6s, in steps of 0.5
Delay before hinting.
Range: 0–10
Wrong drops allowed before the round is lost. 0 is unlimited.
Reveal — Rules
A covering sits over a panel and the viewer clears it away — a scratch card, or tiles that break.
How the covering comes off — scratched away with a brush, or broken off in tiles. The cards below change with this choice.
Range: 4–40%
Brush width, as a share of the panel's shorter side. Brush style only.
Range: 8–60
How finely the covering is divided. Higher is smoother to look at and heavier to draw. Brush style only.
Range: 1–8 each
The tile grid. Tile style only.
Range: 0–30%
The line left between tiles. Zero butts them together. Tile style only.
Range: 10–100%, in steps of 5
How much has to come off before the round is won. Around 60% feels complete without becoming a chore.
Range: 0–120s
Round length. 0 runs with no clock.
Spin the Wheel, Timing and Quiz
Spin the Wheel — Rules
One press, one prize. The simplest mechanic in the set.
The wedge the wheel is fixed to stop on. The outcome is decided, not random — which is the point. The viewer should win the thing your ad is selling.
Range: 1–8s, in steps of 0.5
How long the spin lasts. Around 2 to 3 seconds is enough tension without testing patience.
Range: 1–12
How far it travels before it starts slowing. More reads as a harder throw.
Range: 1–5
How many presses the player gets.
Range: 0.5–6s, in steps of 0.5
How long before the spin button starts pulsing for an idle viewer.
Timing — Rules
A marker travels along a track and the viewer taps when it is in the zone.
How the marker moves along the track.
Range: 0.1–4×, in steps of 0.05
How fast it travels.
Range: 0–1×, in steps of 0.02
Added after every hit. Zero runs the whole round at one pace. A small amount makes a round that gets harder as it goes.
Bouncing reads as a meter being watched. Switched off the marker starts over from the beginning each time, which reads as something passing by.
Range: 4–60%
How much of the track counts as a hit.
Range: 0–100%
Where the zone's middle sits along the track.
Off, the round is a rhythm — the same spot, learned. On, it is a test of reaction.
Range: 40–100%
Of its previous size, after every hit. 100% leaves it alone.
Range: 0–80%, in steps of 5
The middle of the zone, worth two points instead of one. Zero turns the distinction off.
Quiz / Choose — Rules
Ask a question, offer answers, keep score. The questions themselves are set on the Pieces tab.
Range: 0 to the number of questions
Below this the round ends as a loss. The score is shown either way.
How the answer cards are arranged. The rows follow from how many answers a question has.
Range: 0–3s, in steps of 0.1
How long the right answer is highlighted before moving on. Long enough to register, short enough not to stall.
The message shown on a pass. {score} and {total} are filled in — so "You got {score} of {total}!" becomes "You got 4 of 5!".
The message shown when the pass mark was missed.
Range: 0.5–6s, in steps of 0.5
How long before idle answers start blinking.
Blast and Match Cascade
Blast — Rules
Tap a group of touching tiles of the same colour and they clear.
Range: 3–12 each
The board size. Bigger boards need more taps to show progress — keep it small for an ad.
Range: 0–30%
Between cells, as a share of one cell, so the board reads the same at any size.
Range: 2 to however many tiles you bound
How many different tile colours are in play. Fewer makes big groups easier to find.
Range: 0 to a quarter of the cells
Obstacles that cannot be tapped; they break when a group clears beside them. Needs a blocker piece bound on the Pieces tab.
Range: 2–5
How many touching tiles are needed to clear.
Range: 0–99
Total taps allowed. 0 for a round that cannot be lost.
Range: 2–15
A group this size or larger stamps the combo banner.
Range: 1–100
Multiplied by the group's size again, so one big group beats three small ones.
What ends the round — a score, or clearing a certain colour.
Which tile the goal is asking for. Appears only for a colour goal.
How much of it is needed.
Match Cascade — Rules
Swap two gems to line up three, and let the board fall into the gaps.
Range: 3–12 each
Board size.
Range: 0–30%
Space between cells, as a share of one cell.
Range: 3 to however many gems you bound
How many gem colours are in play.
Range: 3–5
How many in a row are needed to clear.
Range: 0–99
Total swaps. A swap that makes no line is free. 0 for a round that cannot be lost.
Starts at: Off
A line of four leaves a rocket, five leaves a bomb. Off by default, deliberately — 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.
Range: 1–100
Multiplied by how deep into a cascade the match landed, so a chain beats the same gems cleared one at a time.
A score, or clearing a certain colour.
Which gem the goal asks for. Only gems cleared in a line count — a rocket's row does not.
Range: 1–999
How many are needed.
A hand mimes a swap that would actually work, once swapping stops.
Lane Battle, Lane Drive and Idle Tycoon
Lane Battle — Rules
Deploy units, march them up the lanes, and break the enemy tower.
Which way your units travel. Vertical reads as a card battler, horizontal as a tower defense.
Range: 1–4
Parallel corridors units walk down. Deploys go to the emptiest one.
Range: 0–20
How much deploy meter the player has the moment the round begins.
Range: 1–20
The meter's ceiling.
Range: 0–4 per second, in steps of 0.1
How fast the meter recharges. This is the main difficulty dial.
Range: 1–500
What the player is knocking down. Reaching zero wins the round.
Range: 0–500
0 means your tower cannot fall — a pure attack round with nothing at stake, which is often right for an ad.
Range: 0–180s
0 runs with no clock — the round then ends only when a tower does.
A list you add to. Each wave has Sends (which unit), At (0–180s, when), Lane (counted from the left, or the top when marching across) and How many (1–6).
Hints a deploy when nothing has happened.
Lane Drive has no Rules or Pieces tabs of its own. The template is built on a Runner object called Road, so the lanes, look, car, traffic, coins, lives, time limit, hint hand and sounds are all set in the Runner's inspector. The Runner's Presets card can also turn it into a different runner game in one click.
The score plate and the lives counter at the top are ordinary text objects showing `{score}` and `{lives}`, the two variables the Runner writes to.
Idle Tycoon — Economy
Build it, collect what it earns, upgrade it, buy the next one. This mechanic's first tab is called Economy rather than Rules.
Range: 0–5000, in steps of 5
What the player begins with. Enough to afford the first plot immediately — an idle game that opens with nothing to do has lost already.
Range: 1–500, in steps of 5
What one collectable note is worth.
Range: 1–12
How many notes a building drops at a time.
Range: 0–4
How many times a plot can be improved.
Range: 10–160, in steps of 2
How close the collector must get to sweep a note up. Generous is better — precision is not the fun here.
Range: 120–3000, in steps of 20
How fast the collector chases the finger.
What finishes the round — a number of plots built, or an amount of money earned.
How many plots, or how much money. The range follows the goal you picked.
Tune for about fifteen seconds of play
Whatever the mechanic, a playable ad gets a handful of seconds before the viewer decides. Set the goal so a reasonably engaged person wins in ten to twenty seconds — a round nobody finishes never shows them the end card, which is the whole point of the ad.
Reference: Scene, Video Background and Break
The scene panel and its transitions, plus the two objects that only exist in the video playable editor.
Scene
Click a scene in the scene list — rather than an object on the canvas — and the inspector shows the scene's own settings. Header reads Scene · Configure scene properties, with two tabs: General and Transition.
General
The scene's name, shown read-only here. Rename it from the scene list instead, by double-clicking its row.
Range: 0.5–30s, in steps of 0.5
How long this card is held when the ad is exported as a video. End cards only — a normal scene has nothing to time, and a video segment's length comes from its footage. It counts toward the total duration networks cap the whole ad at.
Transition
How the scene arrives and how it leaves. Entry and exit are set separately, each with its own type and settings.
Starts at: None
Twelve types: None, Fade, Slide, Zoom, Rotate, Blur, Pixelate, Bloom, RGB Split, CRT, Glitch and Flash. Set once for entry and once for exit.
The button beside the dropdown. Replays the transition on the canvas — a transition lasts under a second, so seeing it once is rarely enough to judge it.
Range: 0.1–3s, in steps of 0.1
How long the transition takes. Every type has this. 0.3 to 0.5s suits almost every case; longer makes the ad feel slow, and you have very little time to spend.
Which way the scene slides — Left, Right, Up or Down. Slide only.
Range: 0.2–1, in steps of 0.05
How far the scene zooms from. Lower means a bigger zoom. Zoom only.
Range: −360 to 360°, in steps of 5
How far the scene rotates. Rotate only.
Range: Blur 0–50px · Bloom 0–5
How heavy the effect is. Blur and Bloom.
Range: 1–50px
How large the blocks grow before the scene changes. Pixelate only.
Range: 0–50px
How far the colour channels separate. RGB Split only.
Range: 0–10, in steps of 0.1
How strong the scanline effect is. CRT only.
Range: 0–10, in steps of 0.1
How broken the picture goes. Glitch only.
White or Black — the colour the screen flashes through. Flash only.
End cards have no exit transition
The ad never leaves the end card, so nothing would ever trigger its exit. The slot is not shown at all rather than shown and ignored.
Keep transitions quiet
Fade at 0.3s is right for most scene changes. The showy ones — Glitch, CRT, RGB Split — are worth exactly one appearance in an ad, to mark the single moment that matters. Used on every change they stop meaning anything and just cost time.
Video Background
The footage a video playable is built around. It exists only in the Video Playable editor, where it replaces the ordinary Background. Header reads Background · The footage this ad is built around. No tabs. Cards: Identity, Source, Fit & Framing, Playback, Audio, Appearance.
Source
Accepts MP4, WEBM and MOV. Drop a file on the box or click to browse. Once loaded, the card shows a preview of the footage with its size and duration.
If the file is large enough to threaten your export budget, an amber note appears here and stays. It is deliberately persistent — the toast is long gone by the time the export dialog tells you the build is too big.
Swap the footage, or clear it.
Video is almost always the biggest file in the ad
Networks cap the whole build at a few megabytes and your footage has to fit inside that with everything else. Compress hard before uploading — short, small and heavily compressed beats long and pristine every time, because nobody sees the ad at all if it is rejected for size.
Fit & Framing
Fill crops the footage to the artboard, filling it completely. Fit keeps all of the frame and leaves a gap.
What goes in the space Fit leaves. Blurred video repeats the footage blurred behind itself — the treatment vertical video gets everywhere, and it always looks intentional. Solid colour uses the backdrop colour from Appearance. Appears only when Fit is selected.
Range: 1–80px
How heavily the filler copy is blurred. Enough that it reads as texture rather than as a second video. Appears only with Blurred video.
Playback
Restarts the footage instead of holding on the last frame when it ends.
Audio
Starts at: On
Leave this on. Mobile browsers refuse to autoplay video with sound, so an unmuted ad may not start at all. The runtime turns sound on at the viewer's first tap.
Range: 0–100%
How loud the footage plays once unmuted.
Appearance
The colour painted beneath everything — the whole artboard before a video is attached, and the gap filler afterwards. Labelled Background Colour while there is no video.
Range: 0–100%Starts at: 0%
Darkens the footage so copy laid over it stays readable. Essential over bright or busy video.
Range: 0–100%Starts at: 100%
How solid the footage is.
Break
A break stops the video at a moment you choose and hands control to the viewer. It is what makes a video playable interactive rather than just a video — the footage runs, pauses at the interesting moment, the viewer does something, and the footage continues.
Header reads Break · Stop the video and hand it to the viewer. Nothing is drawn, so there are no tabs. Cards: Identity, Timing, How it resumes, Skip, Visibility.
Timing
Range: 0 to the footage length, in steps of 0.001s
The moment in the video the break fires, in seconds from the start of the source file. Times are measured against the whole file, not the trimmed clip, so moving a trim handle never silently rewrites a time you set on purpose.
Starts at: Off
Off means the break fires once per view. On means looping footage stops here on every pass.
Break at the moment of tension
The break should land exactly where a viewer would want to act — the instant before the shot is taken, the jump is made, the match is won. A break placed during a calm stretch just feels like the video stopped working.
How it resumes
What the viewer has to do to get the video going again.
Five ways out of the break. Each one is explained by a line under the dropdown once selected.
Any tap on the ad resumes it. The lowest-friction option, and the one that works before you have placed anything.
Only a tap on the object you pick resumes it. Use it when the break is asking for a choice between two things.
Which object must be tapped. Appears only with Tap an object.
The viewer holds for a moment; letting go early does not resume it. Good for charging a shot or drawing a bow.
Range: 0.1–10s, in steps of 0.1Starts at: 1s
How long the hold must last. Appears only with Press and hold.
No input at all — the video resumes on its own. A beat to let something be read, rather than an interaction.
Range: 0.1–30s, in steps of 0.1Starts at: 3s
How long the pause lasts. Appears only with Wait.
Nothing in this card ends the break. Wire a Resume Video action to any object's event and that is what continues the ad. Use it when the break contains a small interaction of your own.
Skip
Offers a way past the break. A break with no way out is the fastest way to lose a viewer, and several networks require one — leave this on unless you have a specific reason not to.
What the skip control says. Appears only when skipping is allowed.
Range: 0–15s, in steps of 0.1
How long the skip stays hidden before appearing. Zero offers it the moment the break opens. A second or two gives the viewer a chance to engage before being handed an exit.
A break needs footage under it
A break placed on a scene with no video can never fire, and the panel tells you so rather than quietly doing nothing. This can happen if you move a break between scenes.
Making it interactive
Triggers and actions — the whole logic system, and it is two lists and no code.
How it works
There is one idea to learn: when this happens, do that. The when is a trigger, the that is an action, and a trigger can carry several actions that all run together.
Select an object and open the Interactions section in the left panel. Add a trigger, then add actions to it.
A worked example — a button that ends the ad and sends the viewer to the store:
- 1
Select the button
On the canvas or in the object list.
- 2
Add a Click trigger
In the Interactions section of the left panel.
- 3
Add the Open URL action
This is the tap that leaves the ad. The destination comes from your project's store links, so you set it once for the whole ad rather than on every button.
- 4
Add End Ad beside it
Tells the network the ad is finished. Both actions are on the same trigger, so both run on the one tap.
Triggers
Which triggers an object offers depends on what it is. A button has taps; a timer has its clock; a sprite has the end of its animation.
Click
The viewer taps the object.
Double Click
Two quick taps.
Hold
The viewer presses and holds.
Animation Complete
A sprite finishes its last loop.
Burst Complete
A particle burst finishes.
At Second
A timer passes a mark you choose.
Timer End
A timer runs out.
Game Start
The playable's mechanic begins.
Valid Move / Invalid Move
The player gets it right, or wrong.
Halfway / Time Warning
Progress markers, for hints and urgency.
Game Win
The player wins — usually where you reveal the end card.
Game Lose
The player loses — usually where you offer a retry.
| Trigger | Fires when |
|---|---|
| Click | The viewer taps the object. |
| Double Click | Two quick taps. |
| Hold | The viewer presses and holds. |
| Animation Complete | A sprite finishes its last loop. |
| Burst Complete | A particle burst finishes. |
| At Second | A timer passes a mark you choose. |
| Timer End | A timer runs out. |
| Game Start | The playable's mechanic begins. |
| Valid Move / Invalid Move | The player gets it right, or wrong. |
| Halfway / Time Warning | Progress markers, for hints and urgency. |
| Game Win | The player wins — usually where you reveal the end card. |
| Game Lose | The player loses — usually where you offer a retry. |
Actions
What a trigger can do. You can add each kind once per trigger.
Go To Scene
Moves to another scene.
Show / Hide Object
Reveals or hides any object in the scene.
Move Object
Slides an object to a position, over a duration.
Play / Stop Audio
Music or a sound effect, with volume and looping.
Play / Stop Sprite
Starts or stops an animated sprite.
Swap Image
Changes an image to a different asset.
Swap Text
Changes what a text object says.
Play Animation
Runs an object's entry, idle or exit animation on cue.
Restart Scene
Puts the scene back to how it started.
Open URL
The tap that leaves the ad for the store.
Set Link Parameter
Records a value to send with the click — see Click-through.
End Ad
Tells the network the ad is over.
Retry Ad
Starts the playable again after a loss.
| Action | What it does |
|---|---|
| Go To Scene | Moves to another scene. |
| Show / Hide Object | Reveals or hides any object in the scene. |
| Move Object | Slides an object to a position, over a duration. |
| Play / Stop Audio | Music or a sound effect, with volume and looping. |
| Play / Stop Sprite | Starts or stops an animated sprite. |
| Swap Image | Changes an image to a different asset. |
| Swap Text | Changes what a text object says. |
| Play Animation | Runs an object's entry, idle or exit animation on cue. |
| Restart Scene | Puts the scene back to how it started. |
| Open URL | The tap that leaves the ad for the store. |
| Set Link Parameter | Records a value to send with the click — see Click-through. |
| End Ad | Tells the network the ad is over. |
| Retry Ad | Starts the playable again after a loss. |
Some actions belong to one editor
The video controls — pause, resume, jump, replay, mute — only appear in the video editor, and Retry Ad only in the playable editor. You will only ever be offered what the format can do.
Playing it back
Press Play in the bar at the bottom and the ad runs in the canvas for real — animations, sounds, interactions and all. Press Stop to go back to editing.
While it is running the editing panels go quiet on purpose, so you cannot nudge an object mid-playthrough. Use the floating preview from the toolbar if you want to watch it small while you work.
Play it more often than feels necessary
A screen that looks right often plays wrong — a button too small for a thumb, an animation half a second too slow. Playing it after every change catches those while they are still one change away.
Playables: mechanics and scenes
Specific to Playable Maker — the ready-made game rules and how to wire a flow.
Starting from a mechanic
The hard part of a playable is the rules — scoring, win and lose, what counts as a correct move. Those come ready-made. Open Add Object and pick from Playable Templates; the mechanic arrives with its pieces already on the canvas, and you replace the artwork with yours.
Tap Target
Taps what appears. Whack-a-mole, shooting, harvesting.
Drag & Drop
Sorts things into zones. Cooking, recycling, dress-up, storage.
Spin the Wheel
Presses to win. Wheels, loot boxes, gacha, slots.
Reveal
Scratches to uncover. Scratch cards, fog of war, mystery boxes.
Timing
Taps at the right moment. Power bars, skill checks, rhythm, fishing.
Quiz / Choose
Picks the right answer. Trivia, would-you-rather, branching.
Lane Battle
Spends a meter to send a unit. Tower defence and auto-battlers.
Blast
Taps a group of touching tiles of one colour. Toon Blast and its kin.
Match Cascade
Swaps two to line up three. The largest playable-ad genre there is.
Idle Tycoon
Taps to build, drags to collect. Idle theme parks, empires, malls.
Lane Drive
Steers between lanes. Highway overtaking, endless runners, gate runners.
| Mechanic | The player |
|---|---|
| Tap Target | Taps what appears. Whack-a-mole, shooting, harvesting. |
| Drag & Drop | Sorts things into zones. Cooking, recycling, dress-up, storage. |
| Spin the Wheel | Presses to win. Wheels, loot boxes, gacha, slots. |
| Reveal | Scratches to uncover. Scratch cards, fog of war, mystery boxes. |
| Timing | Taps at the right moment. Power bars, skill checks, rhythm, fishing. |
| Quiz / Choose | Picks the right answer. Trivia, would-you-rather, branching. |
| Lane Battle | Spends a meter to send a unit. Tower defence and auto-battlers. |
| Blast | Taps a group of touching tiles of one colour. Toon Blast and its kin. |
| Match Cascade | Swaps two to line up three. The largest playable-ad genre there is. |
| Idle Tycoon | Taps to build, drags to collect. Idle theme parks, empires, malls. |
| Lane Drive | Steers between lanes. Highway overtaking, endless runners, gate runners. |
The mechanic's own panel has Rules and Pieces tabs — Rules is how it behaves, Pieces is which objects on your canvas play which part. A score display, a hint pointer or a lives counter is just a text object you point the mechanic at.
Pick by the gesture, not by the genre
The rules draw no artwork of their own — every visible thing in a mechanic is an ordinary object you can restyle, animate or replace. So a zombie game is Tap Target with a zombie on it, a tower defence is Lane Battle reskinned, and a fruit slicer is Tap Target again. Choose the mechanic whose gesture matches yours, then make it look like your game.
Some pieces sit off the canvas on purpose
Cards, units and targets are stamped out fresh for each one that appears during play, so the original stands aside rather than showing up as a spare in the corner of every ad. It is still in the object list, still in the Pieces tab, and still yours to edit.
One mechanic per scene
A scene runs one set of rules. If you want a second game, add a second scene — which is also how you build a two-round playable.
Wiring the flow
A playable is usually three or four scenes: an opening screen, the game, a win screen and a lose screen. You connect them with the mechanic's outcome triggers.
- 1
Select the mechanic
In the object list of your game scene.
- 2
On Game Win, Go To Scene → your win screen
This is where the install button lives, and where most of the converting happens.
- 3
On Game Lose, Go To Scene → your lose screen
Then put a Retry Ad action on a button there, so a player who lost gets another go instead of a dead end.
- 4
Give the scenes a transition
The scene's own panel has a Transition tab — fade, slide, zoom and more. It is what stops a scene change looking like a page reload.
Always give losing a way forward
A player who loses and is left on a screen with nothing to tap is a wasted impression. Retry, or a straight route to the store.
Video playables
Specific to Video Playable Maker — your footage, cut with interactive breaks.
Footage and the clip editor
This editor starts from a video. Select the scene's video background and bring in an MP4, WebM or MOV; it is fitted into the phone-shaped artboard rather than the artboard being reshaped to it.
The Clip editor at the bottom of the window is the timeline. Scrub the playhead, trim the start and end, set the playback speed, and see every object in the scene laid out against time.
MP4 travels, WebM does not
iPhones will not decode WebM. Bring MP4 unless you have a specific reason not to — the editor warns you when a file will not play everywhere.
Video is heavy
The footage is inlined into the exported HTML, and the whole file usually has to fit in 5 MB. Trim to the seconds that matter and lean on the export step's compression.
Breaks
A break is what makes the video playable. At a moment you choose, the video stops and hands control to the viewer — and only carries on once they have done something.
A break resumes on:
- Tap — anywhere.
- Object — a specific thing being tapped. The one to use when you have put a button on screen.
- Hold — a press held for a duration.
- Timeout — after a set time, whether or not they acted.
- Manual — only when an action of yours resumes it.
Breaks can be skippable, with your own label and a delay before the skip appears. Objects you want visible during a break are ordinary objects given a time range on the timeline.
The end screen
Add End Card in the scene list gives the project the screen it finishes on. It is designed exactly like an end card project — start from a card layout, change the words, place your install button.
One per project: once it exists the button says so, because an ad has one ending.
End cards
Specific to End Card Maker — the screen that earns the install.
One card, done well
An end card project is a single screen. Rather than an Add Scene button you get Replace Card, and the template picker restyles the card in place.
Start from a layout in the catalog. There are sixty of them and they are built the way end cards that work are built — one clear promise, one obvious button.
What belongs on it:
- One line saying what the app is or what the viewer just won.
- One button, large, high contrast, with a verb on it — Play Now, Get It Free.
- Your icon or a screenshot, so the store page looks like the ad they just saw.
Leave things off
A crowded end card converts worse than a plain one. If something on the card is not helping the viewer decide to install, it is competing with the thing that is.
Do the landscape layout here
An end card is the screen most likely to be shown in both orientations, and it is one screen — adding the landscape layout is a few minutes' work.
Where the tap goes
Store links and click parameters. Get this wrong and nothing else matters.
Your store links
Project settings → Click-through holds two fields: your App Store link and your Google Play link. Two, because which one is right is only knowable on the device the ad is playing on — the ad picks at the moment of the tap.
Set them once and every Open URL action in the project uses them. There is no per-button URL to keep in sync.
Some networks do the redirect themselves
On several networks the tap is handed to their SDK, which sends the viewer to the store using its own campaign link — your URL is not used at all. Fill both fields anyway: the same project may also be exported for a network that does use them.
Click parameters
Parameters are values sent along with the click, so what happened inside the ad reaches your analytics. There are two kinds.
- Fixed — the same value every time. A creative name, a campaign id.
- Recorded — a value written while the ad plays, by a Set Link Parameter action. Which answer they picked, which prize they won, how far they got.
You add and edit parameters in the export flow's Click-through step. Export checks them for you and warns about a parameter that is never recorded, one recorded but never sent, and duplicates.
Exporting
Turning the project into the files a network will accept, and the checks along the way.
The three steps
Export in the header opens a three-step flow. It does not let you download something a network will reject.
- 1
Targets
Tick the networks you are shipping to. Networks whose requirements this project cannot meet are shown greyed with the reason, not hidden.
- 2
Click-through
Confirm your store links and your parameters. This is the last chance to catch an ad that goes nowhere.
- 3
Size
See what each build weighs against its network's limit, and compress if you are over.
Networks
Fourteen destinations, including a Web preview build for checking your own work. Networks that want byte-identical files share one build — ticking Unity, AppLovin and Chartboost produces one file for all three, not three copies.
Web preview
Opens by double-clicking. For your own testing and client sign-off — no network accepts it.
Unity Ads
5 MB. Needs a store link and a landscape layout.
AppLovin
5 MB. Needs a landscape layout.
ironSource
4 MB — the tightest budget of any network. Needs landscape.
Meta / Facebook
5 MB.
Google Ads
5 MB, delivered as a ZIP.
TikTok / Pangle
5 MB, delivered as a ZIP.
Mintegral
5 MB. Reports start and end events, so the ad needs an End Ad action.
Vungle / Liftoff
5 MB. Also reports start and end events.
Moloco, Chartboost, InMobi
5 MB. Landscape required.
| Network | Notes |
|---|---|
| Web preview | Opens by double-clicking. For your own testing and client sign-off — no network accepts it. |
| Unity Ads | 5 MB. Needs a store link and a landscape layout. |
| AppLovin | 5 MB. Needs a landscape layout. |
| ironSource | 4 MB — the tightest budget of any network. Needs landscape. |
| Meta / Facebook | 5 MB. |
| Google Ads | 5 MB, delivered as a ZIP. |
| TikTok / Pangle | 5 MB, delivered as a ZIP. |
| Mintegral | 5 MB. Reports start and end events, so the ad needs an End Ad action. |
| Vungle / Liftoff | 5 MB. Also reports start and end events. |
| Moloco, Chartboost, InMobi | 5 MB. Landscape required. |
Export the Web preview first
Double-click the file, open it on your phone, hand it to someone else. Catching a problem here costs nothing; catching it after a network review costs days.
Getting under the limit
The size step compresses the exported copy only — your project's artwork is never touched, so you can compress hard, look at the result, and change your mind.
- Off — exactly what you imported.
- Balanced — WebP at high quality, images capped at 2048px. Try this first; it is usually invisible.
- Aggressive — heavier compression, images capped at 1440px. For when a network's limit is not negotiable.
- Custom — set image quality, maximum dimensions and video bitrate yourself, and skip individual assets that must stay pristine.
If you are still over
Look for the one enormous asset rather than shaving everything. A full-screen background exported as PNG instead of JPEG, or ten seconds of video where three would do, is usually the whole problem.
What export checks
Blockers stop the build; warnings let it through but are worth reading. Each one points at the step that fixes it.
- A missing landscape layout, where the network requires one.
- No click-through at all, or a store link that is not a valid URL.
- A network needing a store link that has not been given one.
- Parameters that are never recorded, never sent, or duplicated.
- No End Ad action, on a network that reports when the ad finishes.
- A playable that can only ever report one outcome — usually a missing lose path.
Saving your work
Where your project lives, and how to keep it safe and move it.
Your work stays on your machine
We do not take your project. Your scenes, your artwork and your video are stored in your own browser on your own computer, and are not uploaded to us — which is why you can build an unannounced campaign here without it leaving your desk.
The editor saves to that browser storage continuously as you work, so a closed tab or a crashed browser does not cost you the session. Reopen the editor and your work is where you left it. If a newer unsaved draft is found when you open a project, you are offered the chance to restore it.
Browser storage is not a backup
It belongs to one browser on one machine. Clearing site data, a private window, a new laptop, a colleague's screen — none of them have your project. Download a .pam copy for anything you would be upset to lose.
The .pam file
A .pam file is your whole project in one file — every scene, every setting, and every image, sound and video packed inside it. Nothing is linked or referenced elsewhere, so it works on a machine that has never seen your assets.
It is the real answer to backing up, moving between computers, sending a project to a colleague, and keeping a version of last month's campaign you can go back to.
The File menu in the header:
- Download a copy — writes the .pam. Do this whenever you finish something.
- Open project file… — loads one back. You can also drop a .pam onto the editor's header.
- New project — clears the canvas to start fresh. It asks first, because anything not downloaded is gone.
A .pam belongs to its editor
A playable project opens in the playable editor. Open it in the wrong one and it tells you so rather than importing something half-right.
A habit worth having
Download a copy at the end of every session, and name it with a date. It costs three seconds and it is the difference between a bad afternoon and a lost week.
Making ads that work
What tends to perform, drawn from how the format is actually watched.
The things that matter most
- Playable in three seconds. Nobody reads an instruction screen. If the first thing on screen is not something to tap, you have lost most of your audience before the ad begins.
- One mechanic. A viewer has a few seconds and no patience for learning two things. Do the single most interesting thing your game does.
- Show, do not tell. A pointer animating on the thing to tap teaches faster than a sentence explaining it — and does not need translating.
- Let them win. The playable is an advertisement, not a challenge. A player who wins is a player in a good mood looking at your install button.
- Make the button obvious. Big, high contrast, a verb on it, and gently animated. When in doubt, larger.
- Test on a real phone. Everything is comfortable with a mouse on a large screen. Thumbs on a 5-inch screen are the actual audience.
Before you ship
- Played it start to finish, and lost on purpose to check the losing path.
- Store links filled in for both platforms.
- Landscape layout added and looked over.
- Every build under its network's size limit.
- Opened the Web preview build on an actual phone.
- Downloaded a .pam copy.
Where to go next
The rest of the site, and how to reach a person.
Keep going
That is the whole tool
The rest is practice. Open an editor, start from a card layout, and have something playable in front of you within the hour.
