Documentation

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.

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. 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. 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. 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. 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. 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. 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. 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. 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. 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.

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

Nudge the selection 1px↑↓←→
Nudge furtherShift↑
UndoCtrlZ
RedoCtrlShiftZ
Show or hide the gridCtrl'
Turn snapping on or offCtrlShift'

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.

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.

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.

What every object shares

Before the individual objects: a few things belong to all of them. Learning these once is most of learning the editor, because a headline and a button are configured through the same panel.

Every object has a box — position, size, rotation, scale, opacity — and an anchor point it rotates and scales around, given as a fraction of the box. The anchor is the setting people skip and then fight: a badge that should spin in place but is anchored to its top-left corner will orbit instead. Set it to describe the thing — the centre for a badge, the bottom edge for anything standing on ground.

Not every object gets every tab, and the reasons are good ones. A particle effect is already its own animation; an overlay is one flat colour with no shape for a filter to act on.

Image, Text, Button, Shape, Animated Sprite, Scrolling Text, Timer

General, Animate, FX — the full set.

Particle Effect, Overlay, Parallax BG, Audio

Settings shown directly, with no tab bar.

Playable

Rules (or Economy), Pieces, Sounds and General — its own set.

The object list is the stacking order

There is no bring-to-front setting. If your headline is hidden behind a background image you do not need a control, you need to drag its row up the list.

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.

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.

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.

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.

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: the controls every object has

Identity, Layout, Anchor Point, Transform and Visibility appear on almost every object. Read this once and the other reference chapters only have to cover what is new.

How to read the inspector

The inspector is the column on the right. It shows the settings for whatever is selected — click an object on the canvas or in the object list and the panel fills with that object's controls. Click empty canvas and it empties again.

Every inspector is built the same way. At the top is a header with the object's type and a one-line description. Under that, most objects have three tabs: General, Animate and FX. Under the tabs is a stack of collapsible cards, each holding a group of related controls. Click a card's heading to fold it away — useful on a long panel like the Particle Effect's.

The three tabs, and what belongs in each. Objects that cannot be animated — Background and Audio, for instance — show no tabs at all, just a single stack of cards.

General

What the object is and how it looks standing still: its name, its artwork, where it sits, its colours, its size.

Animate

Motion added from a library — a bounce, a pulse, a slide-in — with timing and playback settings per animation.

FX

Visual filters stacked on top: blurs, glows, colour grades, distortions. Applied to the finished object, after everything in General.

Controls come in a handful of shapes and they behave consistently wherever they appear. Learning the six of them here means every later chapter is just a list of what each one does.

The kinds of control you will meet.

Slider

Drag the handle. The current value, with its unit, is printed at the right of the label. One drag is one undo step, not one per pixel moved.

Number box

Type a value, or use the small up and down arrows at its right edge. Values outside the allowed range are pulled back to the nearest end.

Dropdown

Click it and pick from the list. Always a fixed set of choices.

Segmented buttons

A row of two to four choices, all visible at once. Same idea as a dropdown, used when the options are short enough to show.

Checkbox

On or off. Some of them reveal more controls underneath when switched on — a shadow's colour and blur only appear once the shadow is enabled.

Colour field

A square swatch beside a hex box. Click the swatch for your system colour picker, or type a hex code like #FF3B30 into the box.

Why some controls are missing

Panels only show what the current setting actually uses. A circle has no Corner Radius because a circle has no corners; a button set to fill with colour shows no image controls. If a control you expected is absent, something above it in the same card is set to a value that does not use it.

Greyed-out controls

The whole panel goes read-only in two cases. If the object is locked, a Locked badge appears in the header — unlock it from the object list. If the preview is playing, a Playing badge appears — press stop and the controls come back.

Identity

The first card on nearly every object. It holds the object's name, and on a few types the one piece of content that is the object — a text object's words, a button's label.

Identity

Display NameText

Starts at: The object type, numbered — Image 1, Image 2

What this object is called in the object list, and in every dropdown that asks you to pick an object — event actions, animation targets, playable pieces. Press Enter to commit, Escape to cancel. Two objects cannot share a name: ask for one that is taken and a number is added.

Text ContentText

Text objects only. The words that are drawn. Press Enter inside the box for a new line — it does not commit. Click away, or press Escape to throw the edit away.

Button TextText

Starts at: Get Started

Buttons only. The label drawn on the button. Enter commits, Escape cancels.

Name things as you go

Image 7 tells you nothing when you are three scenes deep wiring a tap action. Rename the moment you add it — hero-art, cta-button, coin-burst — and every dropdown that lists objects becomes readable.

Layout — position, size and constraints

Where the object sits and how big it is. The numbers are in canvas pixels, measured from the artboard's top-left corner, and they are the same numbers that change when you drag the object around.

Layout

XNumber

Range: 0 to the artboard width minus this object's width

Horizontal position of the object's left edge, in pixels from the left of the artboard. Larger moves right. It is clamped so the object stays fully on the artboard — type a number past either end and it settles at the furthest it can go.

YNumber

Range: 0 to the artboard height minus this object's height

Vertical position of the top edge, in pixels from the top of the artboard. Larger moves down, not up. Clamped the same way as X.

WidthNumber

Range: 20px to the full artboard width

How wide the object's box is. What the box does with that width depends on the object — an image obeys its Fit setting, a text object reflows if Word Wrap is on, a shape simply redraws itself to fill it. The 20px floor is there so an object can never be shrunk to something you cannot grab again.

HeightNumber

Range: 20px to the full artboard height

How tall the object's box is.

HorizontalDropdown

Starts at: Left

The constraint that decides what X and Width do when the screen is a different shape from the artboard. Options are Left, Right, Left & right, Centre and Scale.

VerticalDropdown

Starts at: Top

The same rule for Y and Height. Options are Top, Bottom, Top & bottom, Centre and Scale.

Why an object will not go off the edge

X and Y are clamped to keep the object fully on the artboard, so you cannot park it just outside the frame by typing a negative number. To bring something in from off-screen, do not move it out — add a Slide In animation on the Animate tab, which starts the object beyond the edge and is not bound by these limits.

Constraints in one sentence each

Left or Top pins that edge and keeps the size. Right or Bottom pins the opposite edge — what you want for a close button in the corner. Left & right, or Top & bottom, pins both, so the object stretches. Centre keeps it centred at its original size. Scale grows and shrinks everything proportionally, which is the safest choice for a big piece of artwork.

The link notice at the top of the card

Working in landscape, a line above the numbers tells you whether this object is still following its portrait placement. Move it and the link breaks — landscape gets its own position and portrait stops affecting it. A Follow portrait button puts it back.

Anchor Point

The anchor is the point the object turns and scales about. Picture a pin pushed through the object: rotation spins it around the pin, and scaling grows it away from the pin. Move the pin and the same rotation looks completely different.

By default the pin is in the middle. A door that swings needs it on the hinge edge; a bar that grows upward from the floor needs it at the bottom.

Anchor Point

Show Anchor In PreviewCheckbox

Starts at: Off

Draws a crosshair on the canvas while this object is selected, so you can see where the pin is. You can drag that crosshair directly instead of typing numbers.

PresetsButtons

A three-by-three grid of dots, laid out the way they sit on the object. Click one to snap the anchor to that spot — the corners, the edge midpoints, or the centre. The active one is filled in blue.

Anchor XNumber

Range: 0 to 1, in steps of 0.05Starts at: 0.5

How far across the object the pin sits. 0 is the left edge, 0.5 the middle, 1 the right edge. The anchor cannot leave the object.

Anchor YNumber

Range: 0 to 1, in steps of 0.05Starts at: 0.5

How far down the object the pin sits. 0 is the top edge, 1 the bottom.

An off-centre anchor changes every animation

Move the anchor away from the middle and an amber note appears in the card. It is there because rotation, scale and any animation that rotates or scales all pivot on this point. A spin that looked right centred will swing in a wide arc once the anchor is in a corner. If an animation is behaving strangely, check the anchor first.

Transform

Rotation and scale, applied around the anchor point. These are separate from Width and Height: Width changes the box the object is drawn into, Scale multiplies the whole thing afterwards, artwork and border and all.

Transform

RotationSlider

Range: 0–360°Starts at: 0°

Turns the object clockwise about its anchor. 0 and 360 look identical standing still.

Scale XSlider

Range: 0–300%Starts at: 100%

Stretches the object horizontally. 100% is its natural width, 200% double, 0% invisible.

Scale YSlider

Range: 0–300%Starts at: 100%

Stretches the object vertically. Set both to the same number to grow it without distorting it.

Scale or size?

For artwork, prefer Width and Height — the image is drawn at the size you asked for and stays crisp. Reach for Scale when you want a pop or a squash, especially one an animation will drive, because an animation can move Scale and cannot move Width.

Visibility

Visibility

VisibleCheckbox

Starts at: On

Whether the object is drawn at all. Off removes it from the canvas and the exported ad, but keeps it in the project — it is still in the object list and can still be switched back on mid-ad by a Show/Hide Object action. That pairing is how a reward popup that appears on a win is built: place it, switch it off, and have the win turn it on.

On an Audio object this card is called Playback

The same switch, renamed, because an invisible sound is a meaningless idea — there, off means the sound does not play.

Opacity, Tint and Blend Mode

Most objects carry an Appearance card with some combination of these three. They do the same thing everywhere they appear, so they are described once here.

Appearance

OpacitySlider

Range: 0–100%Starts at: 100%

How solid the object is. 0% is fully transparent — still there, still tappable by an event, just not drawn. This is the value a fade animation moves.

TintColour

Starts at: #FFFFFF

Multiplies the object's colours by this one. White leaves it untouched — that is what the default means, not 'tint it white'. A grey darkens everything evenly; a strong colour pushes the whole object toward that hue. Best on white or pale artwork, where it acts as a recolour.

Blend ModeDropdown

Starts at: Normal

How this object's pixels mix with whatever is behind them. Normal simply covers. Multiply darkens and is how you paint a shadow. Screen and Linear Dodge lighten and are how you paint a glow or a flare. Overlay and Soft Light boost contrast without flattening the layer underneath.

All twenty-four blend modes, grouped by what they do. The ones worth knowing are in the first three rows; the rest are there for parity with the art tools your source files came from.

Plain

Normal

Darkens the layers below

Multiply, Darken, Color Burn, Linear Burn, Subtract

Lightens the layers below

Screen, Lighten, Color Dodge, Linear Dodge

Boosts contrast

Overlay, Hard Light, Soft Light, Linear Light, Pin Light, Vivid Light, Hard Mix

Compares the two

Difference, Exclusion, Negation, Divide

Swaps one property only

Color, Saturation, Luminosity — each keeps the rest of what is underneath

A cheap, convincing glow

Put a soft white blob on a Shape or Image above your artwork, set Blend Mode to Screen, and pull Opacity down to about 40%. It costs nothing at runtime and reads better than a real glow filter on most artwork.

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.

Upload boxUpload

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.

ReplaceButtons

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.

RemoveButtons

Clears the artwork and puts the upload box back. The object stays where it is with all its other settings.

FitDropdown

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

Blend ModeDropdown

Starts at: Normal

All twenty-four modes. See the shared chapter for what each group does.

OpacitySlider

Range: 0–100%Starts at: 100%

How solid the image is.

TintColour

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.

RadiusSlider

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.

WidthSlider

Range: 0–20pxStarts at: 0px

Thickness of the outline. At 0 no border is drawn, whatever the colour is set to.

ColorColour

The outline's colour.

Effects

Two quick adjustments that need no setup. For anything more, use the FX tab.

BlurSlider

Range: 0–50pxStarts at: 0px

Softens the whole image. Useful for pushing a backdrop behind the thing you want looked at.

DarkenSlider

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.

Font FamilyDropdown

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.

Font SizeNumber

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.

Letter SpacingNumber

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.

Font WeightDropdown

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.

Font StyleButtons

Starts at: Normal

Normal or Italic.

DecorationButtons

Starts at: None

None or Strikethrough. Strikethrough is what you want for a crossed-out original price beside a discount.

Line HeightSlider

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.

Text TransformDropdown

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.

Text AlignButtons

Starts at: Left

Left, Center, Right or Justify — horizontal alignment within the box.

Vertical AlignButtons

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.

Word WrapCheckbox

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.

Text OverflowDropdown

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.

PaddingNumber

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

Text ColorColour

Colour of the letters themselves.

Stroke WidthSlider

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.

Stroke ColorColour

The outline's colour. This control only appears once Stroke Width is above 0.

OpacitySlider

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.

Button

A tappable surface with a label on it — your call to action, a Play Now, a Retry. A button is a surface plus text, so it has both a Fill card and a full Label card with its own typography.

Header reads Button · Configure button properties, with all three tabs. Cards: Identity (holding Button Text), Layout, Fill, Label, Border, Shadow, Appearance, Anchor Point, Transform, Visibility.

A button does nothing until you wire it

Adding a button does not by itself make anything happen when it is tapped. Go to the Events panel, add a trigger of On Tap pointing at this button, and give it an action — usually Open URL for the store link. Without that it is a decorative rectangle.

Fill

What the button's surface is painted with.

Fill TypeButtons

Starts at: Color

Color paints a flat colour. Image uses artwork — for a button drawn by your artist. Both draws the image over the colour and mixes them with a blend mode.

Background ColorColour

The surface colour. Shown for Color and Both.

Upload / Replace / RemoveUpload

The button's artwork, handled exactly like an Image's asset. Shown for Image and Both.

Object FitDropdown

Starts at: Fill

How the artwork is sized inside the button — Fill, Contain, Cover, None or Scale Down, same meanings as on an Image. Shown once artwork is chosen.

Blend ModeDropdown

Starts at: Normal

How the image combines with the background colour beneath it. Shown only when Fill Type is Both — it has nothing to mix otherwise.

Label

The text on the button. Every typography control a Text object has, applied to the label — so the wording is set in Identity, and everything about how it looks is here.

Font FamilyDropdown

Starts at: Inter

The same ten typefaces as a Text object.

Font SizeNumber

Range: 8–400px

Label size. 16–20 suits most call-to-action buttons.

Letter SpacingNumber

Range: −20 to 100px

Space between letters.

Font WeightDropdown

Light through Black. A call to action usually wants Semibold or Bold.

Font StyleButtons

Normal or Italic.

Line HeightSlider

Range: 0.8–3×

Line spacing, for labels that run to two lines.

Text TransformDropdown

Starts at: None

None, UPPERCASE, lowercase or Capitalize, applied as it is drawn.

Text ColorColour

Label colour. Keep it well clear of the fill colour — this is the single most common contrast failure in an ad.

Stroke WidthSlider

Range: 0–20pxStarts at: 0px

Outline around each letter of the label.

Stroke ColorColour

The outline colour. Appears only when Stroke Width is above 0.

Text AlignButtons

Left, Center, Right or Justify.

Vertical AlignButtons

Top, Middle or Bottom, within the button's height.

PaddingNumber

Range: 0–200px

Gap between the label and the button's edge. Raise it if the text is crowding the sides.

Word WrapCheckbox

Wraps a long label onto a second line.

OverflowDropdown

Starts at: Visible

Visible or Ellipsis — a button is a fixed surface, so a label that does not fit is shortened with a … rather than cut mid-letter. There is no Clip option here for that reason.

Border

CornersButtons

Three presets: Square (0), Rounded (12px) and Pill (fully rounded ends). Pill stays a pill when you resize the button, where a fixed radius would drift back toward a rectangle.

RadiusSlider

Range: 0 to half the button's shortest side

Corner rounding. The slider's top end moves with the button's size, because a radius beyond half the shortest side cannot be drawn — so the number shown is always the one actually in effect.

WidthSlider

Range: 0–20pxStarts at: 0px

Outline thickness around the button.

ColorColour

Outline colour. Appears only when Width is above 0.

Shadow

One drop shadow cast by the button's surface. The label stays crisp — the shadow is not cast by the text.

Enable ShadowCheckbox

Starts at: Off

Turns the shadow on. Everything below appears only once this is ticked.

ColorColour

Shadow colour. A dark version of the background it falls on reads better than pure black.

OpacitySlider

Range: 0–100%

How strong the shadow is.

BlurSlider

Range: 0–60px

Softness. 0 is a hard-edged offset shape; higher values give the soft lift most buttons want.

Offset XSlider

Range: −60 to 60px

Horizontal displacement. Positive moves the shadow right.

Offset YSlider

Range: −60 to 60px

Vertical displacement. A small positive value — 2 to 6 — reads as the button floating above the screen.

Appearance

OpacitySlider

Range: 0–100%Starts at: 100%

How solid the whole button is.

TintColour

Starts at: #FFFFFF

Multiplies the surface — background colour and image both. White leaves it unchanged. The label is deliberately not tinted, so your copy stays legible whatever you do here.

Make it big enough to hit

Aim for at least 44 by 44 canvas pixels of tappable area. A button that looks fine on a desktop preview can be genuinely hard to hit with a thumb, and a missed tap on your only call to action is a lost install.

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.

Shape TypeButtons

Starts at: Rect

Eleven shapes in a four-across grid: Rect, Circle, Tri, Star, Polygon, Diamond, Heart, Arrow, Chevron, Cross and Ring.

Corner RadiusSlider

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.

PointsSlider

Range: 3–20

How many points the star has. Star only. 5 is the classic star.

SidesSlider

Range: 3–12

How many sides the polygon has. Polygon only. 6 gives a hexagon, 8 an octagon.

WaistSlider

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.

Hole SizeSlider

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.

ThicknessSlider

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.

FillCheckbox

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.

Fill ColourColour

The interior colour. Appears only when Fill is on.

Stroke WidthSlider

Range: 0–40pxStarts at: 0px

Thickness of the outline around the shape's edge.

Stroke ColourColour

The outline colour. Appears only when Stroke Width is above 0.

OpacitySlider

Range: 0–100%Starts at: 100%

How solid the shape is.

Blend ModeDropdown

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

Background ColourColour

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.

Blend ModeDropdown

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.

Upload / Replace / RemoveUpload

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.

SizeDropdown

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.

PositionDropdown

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.

RotationSlider

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.

Scale XSlider

Range: 0–300%Starts at: 100%

Stretches the image horizontally. Also how you zoom past the edges after rotating.

Scale YSlider

Range: 0–300%Starts at: 100%

Stretches the image vertically.

Appearance

Applied over the finished background — colour, image and all.

BlurSlider

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.

Dark OverlaySlider

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.

Frames Come FromButtons

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.

Add FramesUpload

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.

Choose SheetUpload

Sprite Sheet mode. One image containing all the frames. Cells are read left to right, then top to bottom — the layout every exporter produces.

ColumnsNumber

Range: 1–64

Sheet mode. How many cells across the grid is.

RowsNumber

Range: 1–64

Sheet mode. How many cells down the grid is.

FramesNumber

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.

Play / PausePreview

The blue round button. Runs the sequence on the canvas with your current Playback settings applied.

StopPreview

The square button. Halts playback and returns to the start.

Frame scrubberPreview

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.

SpeedNumber

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.

Auto PlayCheckbox

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.

Start DelayNumber

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.

Start FrameNumber

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.

End FrameNumber

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.

ReversedCheckbox

Starts at: Off

Plays the range back to front. A chest opening becomes a chest closing without a second set of art.

Ping-PongCheckbox

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.

LoopCheckbox

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.

Loop CountNumber

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

FitButtons

Starts at: Stretch

Stretch fills the box exactly. Contain fits the whole frame in, leaving gaps. Cover fills the box and crops.

Blend ModeDropdown

Starts at: Normal

How the sprite mixes with what is behind. Screen on a black-background effect sheet drops the black out entirely.

OpacitySlider

Range: 0–100%Starts at: 100%

How solid the sprite is.

TintColour

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

Choose AudioUpload

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.

Replace / RemoveButtons

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.

Play / Pause, Stop, ScrubberPreview

Hear it and find a moment in it. The position readout is what you use to work out Trim points.

Playback

AutoplayCheckbox

Starts the sound when its scene is entered. With it off, the sound waits for a Play Audio action.

LoopCheckbox

Repeats from the start point on reaching the end. What a music bed wants; what a sound effect does not.

MutedCheckbox

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.

VolumeSlider

Range: 0–100%

Loudness. Keep a music bed well under your effects — around 30 to 40% — so taps still register over it.

SpeedSlider

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.

Start AtNumber

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.

End AtNumber

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

Fade InSlider

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.

Fade OutSlider

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

PreloadDropdown

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

EnabledCheckbox

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

DurationNumber

Range: 1s and up

How long the timer runs for, in seconds.

CountsButtons

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.

FormatDropdown

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

Font FamilyDropdown

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.

Font SizeNumber

Range: 8–400px

Size of the digits.

Font WeightDropdown

Light through Black.

Text ColourColour

Colour of the digits.

Background

Show backgroundCheckbox

Starts at: Off

Draws a panel behind the digits. Off leaves them sitting on whatever is behind them.

Background ColourColour

The panel's colour. Appears only when the background is on.

Corner RadiusSlider

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

Text ContentText

The copy that scrolls. It repeats end to end forever, so write one phrase rather than a paragraph.

SeparatorText

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.

Text CaseDropdown

Starts at: None

None, UPPERCASE, lowercase or Capitalize, applied as it is drawn.

Type

Font FamilyDropdown

The same ten typefaces.

Font SizeNumber

Range: 8–400px

Size of the copy.

Font WeightDropdown

Light through Black.

Font StyleDropdown

Normal or Italic.

Text ColourColour

Colour of the copy.

Letter SpacingSlider

Range: −20 to 100px

Space between letters.

Stroke WidthSlider

Range: 0–20pxStarts at: 0px

Outline around each letter.

Stroke ColourColour

The outline's colour. Appears only when Stroke Width is above 0.

Scroll

DirectionButtons

← Left, → Right, ↑ Up or ↓ Down. Left is the conventional ticker.

SpeedSlider

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.

Gap Between RepeatsSlider

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.

Pause on hoverCheckbox

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

Show backgroundCheckbox

Starts at: Off

Draws a band behind the copy. Off leaves it travelling over whatever is behind it.

Background ColourColour

The band's colour. Appears only when the background is on.

Corner RadiusSlider

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

Overlay ColorColour

The colour washed over the canvas. Black for a dim, white for a flash, a brand colour for a tint.

OpacitySlider

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.

Blend ModeDropdown

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.

RotationSlider

Range: 0–360°Starts at: 0°

Turns the wash.

Scale XSlider

Range: 0–300%Starts at: 100%

Stretches it horizontally.

Scale YSlider

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

Upload / Replace / RemoveUpload

The image that repeats. A narrow strip tiles just as well as a big square and costs far less in the export.

Layout

SizingButtons

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.

X / Y / Width / HeightNumber

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

Auto scrollCheckbox

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.

DirectionButtons

← 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.

Speed XNumber

Range: Any value, in steps of 5 px/s

Horizontal scroll rate. Negative reverses the axis, 0 holds it still.

Speed YNumber

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

Scale XNumber

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.

Scale YNumber

Range: 0.05 and up, in steps of 0.05Starts at: 1

Tile height, same scale.

Offset XNumber

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.

Offset YNumber

Range: Pixels, in steps of 5Starts at: 0px

Where the repeat starts vertically.

Appearance

OpacitySlider

Range: 0–100%Starts at: 100%

How solid the layer is.

TintColour

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.

Preset gridButtons

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

Play / PausePreview

Runs the effect on the canvas so you can judge it without playing the whole ad.

RestartPreview

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.

ShapeButtons

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.

Cone Half-AngleSlider

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.

Edge LengthSlider

Range: 0–600pxStarts at: 200px

How long the birth line is. Edge only.

Ring RadiusSlider

Range: 0–600pxStarts at: 100px

How wide the birth ring is. Ring only.

Burst ModeCheckbox

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.

Burst CountSlider

Range: 1–1000Starts at: 40

How many particles the burst throws. Appears only when Burst Mode is on.

Emission RateSlider

Range: 0–500 per second

How many particles are born each second when emitting steadily. Hidden when Burst Mode is on.

Max ParticlesSlider

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.

Start DelaySlider

Range: 0–10s, in steps of 0.1Starts at: 0s

Waits this long after the scene is entered before the first particle.

Simulation SpaceDropdown

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.

Curve TypeButtons

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.

Curve PeriodSlider

Range: 0.1–10s, in steps of 0.1

How long one pass through the curve takes. Hidden when the curve is Constant.

LoopCheckbox

Repeats the curve. Off runs it once and holds where it ended. Hidden when the curve is Constant.

Prewarm (Simulate Before Visible)Checkbox

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.

Prewarm DurationSlider

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

ShapeButtons

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.

Image uploadUpload

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.

Color ModeButtons

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.

ColorColour

The single colour. Solid mode only. Only opacity changes as the particle ages.

Birth / DeathColour

Start and end colours. Gradient mode only.

Colour poolColour

A list of swatches; each particle picks one at random. Add and remove entries with the buttons beside them. Random mode only.

Colour stopsColour

A gradient with positioned stops, for a colour path more complex than birth-to-death. Multi-Stop mode only.

Blend ModeDropdown

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.

Size At BirthSlider

Range: 0–400px

How big a particle is when it appears.

Size At DeathSlider

Range: 0–400px

How big it is when it dies. Larger than birth for smoke that billows; smaller for a spark that shrinks away.

Aspect (W:H)Slider

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.

Size CurveDropdown

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.

Alpha At BirthSlider

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.

Alpha At DeathSlider

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.

MinSlider

Range: 0.05–20s, in steps of 0.1

Shortest a particle can live.

MaxSlider

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.

Speed MinSlider

Range: 0–2000 px/s

Slowest launch speed.

Speed MaxSlider

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.

Angle dialPreview

A circular dial showing the arc particles are launched into, drawn between the two angles below. Easier to read than the numbers.

Min AngleSlider

Range: 0–360°

One edge of the launch arc. 0° is to the right, 90° is down, following screen coordinates.

Max AngleSlider

Range: 0–360°

The other edge. Set 0 and 360 to fire in every direction; set both to 270 to fire straight up.

Velocity StretchSlider

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.

Orbital VelocitySlider

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.

Gravity XSlider

Range: −2000 to 2000 px/s², in steps of 10Starts at: 0

Constant sideways pull. Use a little to suggest wind.

Gravity YSlider

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.

Air DragSlider

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.

Force X Over LifeSlider

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.

Force Y Over LifeSlider

Range: −2000 to 2000, in steps of 10

The same, vertically.

Rotation

Spin MinSlider

Range: −1440 to 1440°/s, in steps of 5

Slowest spin rate.

Spin MaxSlider

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.

Enable turbulenceCheckbox

Starts at: Off

Switches the whole system on.

StrengthSlider

Range: 0–300

How hard the field pushes. Small values give a gentle drift — the difference between falling snow and a blizzard.

Scale (zoom)Slider

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.

SpeedSlider

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.

Enable trailsCheckbox

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.

Trail LengthSlider

Range: 2–64 segments

How far back the tail reaches. More segments is a longer, smoother tail and more work per frame.

Trail WidthSlider

Range: 0.5–20px, in steps of 0.25

How thick the ribbon is.

Fade Trail Towards TailCheckbox

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

Enable glowCheckbox

Starts at: Off

Adds a soft halo around each particle.

Glow StrengthSlider

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.

Enable attractorCheckbox

Starts at: Off

Switches the attractor on.

ModeButtons

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.

Offset XSlider

Range: Plus or minus the canvas width

Where the attractor sits horizontally, measured from the emitter.

Offset YSlider

Range: Plus or minus the canvas height

Where it sits vertically.

StrengthSlider

Range: 0–1000

How hard it pulls or pushes.

RadiusSlider

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.

Attract To Cursor / TouchCheckbox

Starts at: Off

Particles are pulled toward wherever the viewer is touching.

StrengthSlider

Range: 0–1000

How strongly the touch point pulls.

RadiusSlider

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.

Spawn Sub-Particles On DeathCheckbox

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.

Burst CountSlider

Range: 1–30

How many children each dying particle produces.

SizeSlider

Range: 1–100px

How big the children are.

ShapeButtons

Circle, Square or Star. There is no Image option for children.

ColorColour

One colour for all the children.

SpeedSlider

Range: 0–1000 px/s, in steps of 10

How fast the children fly outward.

LifetimeSlider

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.

Library — Entry animations

Played once as the object appears.

Slide LeftButtons

Moves in from the left edge.

Slide RightButtons

Moves in from the right edge.

Slide UpButtons

Moves in from the bottom.

Slide DownButtons

Moves in from the top.

Fade InButtons

Fades into view from transparent. The safest entry there is — it never fights the layout.

Pop InButtons

Scales up from a smaller size. Good on a button you want noticed.

Bounce InButtons

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.

FloatButtons

Smooth drifting movement. A character that floats gently reads as alive at almost no cost.

ShakeButtons

Small rapid vibration. Signals urgency or a thing that wants tapping.

PulseButtons

Repeated scaling in and out. The standard treatment for a call-to-action button.

SpinButtons

Continuous rotation. Set the anchor before using this — it turns about the anchor point, not the centre, unless the anchor is centred.

GlowButtons

A soft glow that pulses around the object.

Color ShiftButtons

Animated transition between two colours.

Library — Exit animations

Played once as the object leaves.

Slide Left / Right / Up / DownButtons

Slides out to the named edge. Four separate entries in the library.

Fade OutButtons

Fades away before disappearing.

ShrinkButtons

Scales down out of view.

Settings — Timing

Every animation has this card, whatever it does.

DurationNumber

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.

DelayNumber

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.

EasingDropdown

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

LoopCheckbox

Repeats the animation. Idle animations are looped by default; entry and exit animations normally should not be.

Reverse on each loopCheckbox

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

Position (From X/Y, To X/Y)Number

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.

Scale (From Scale, To Scale)Slider

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.

Rotation (From, To)Number

Range: Degrees

Start and end angles, for Spin. For a continuous rotation set From 0 and To 360 with Loop on.

Opacity (From Opacity, To Opacity)Slider

Range: 0–1, in steps of 0.01

Start and end transparency, for Fade In and Fade Out. 0 is invisible, 1 fully solid.

Float (From/To X, Y, and rotation)Number

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.

Shake (From/To X, and rotation)Number

The vibration range for Shake. A few pixels with a degree or two of rotation reads better than a large purely horizontal shake.

Glow (Color, From Strength, To Strength)Slider

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.

Color (From, To)Colour

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

EnabledCheckbox

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.

Blend ModeDropdown

How the shadow mixes with what is behind it.

ColorColour

The shadow's colour.

OpacitySlider

Range: 0–1, in steps of 0.01

How strong the shadow is.

BlurSlider

Range: 0–100px

Softness of the edge. 0 gives a hard offset copy.

DistanceSlider

Range: 0–100px

How far the shadow is thrown from the object.

SpreadSlider

Range: 0–100px

How much the shadow expands beyond the shape.

AngleSlider

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.

ColorColour

The outline's colour.

OpacitySlider

Range: 0–1, in steps of 0.01

How solid the outline is.

ThicknessSlider

Range: 0–100px

How heavy the line is.

QualitySlider

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.

KnockoutCheckbox

Hides the object and keeps only the outline, leaving a hollow silhouette.

Glow

A coloured halo around the object.

ColorColour

The glow's colour.

Outer StrengthSlider

Range: 0–20×, in steps of 0.1

How far the glow spreads outward.

Inner StrengthSlider

Range: 0–20×, in steps of 0.1

How far it bleeds inward over the object.

RadiusSlider

Range: 0–100px

The overall size of the halo.

QualitySlider

Range: 0.01–1, in steps of 0.01

Smoothness against cost.

KnockoutCheckbox

Keeps only the glow, hiding the object itself.

OpacitySlider

Range: 0–1, in steps of 0.01

Overall strength of the glow.

Bevel

A raised or engraved edge, lit from one side.

ThicknessSlider

Range: 0–100px

How deep the edge appears.

AngleSlider

Range: 0–360°

Which direction the light comes from.

Light ColorColour

Colour of the lit edge.

Light StrengthSlider

Range: 0–1, in steps of 0.01

How bright the lit edge is.

Shadow ColorColour

Colour of the shaded edge.

Shadow StrengthSlider

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.

MirrorCheckbox

Flips the reflected copy, as a real mirror would.

Reflection HeightSlider

Range: 0–100%

How much of the object is reflected, from the bottom up.

Wave StrengthSlider

Range: 0–100px

How much the reflection ripples. A little suggests water.

Wave LengthSlider

Range: 0–100px

How far apart the ripples are.

OpacitySlider

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.

BrightnessSlider

Range: 0–2×, in steps of 0.01Starts at: 1×

Below 1 darkens, above 1 lightens.

ContrastSlider

Range: 0–2×, in steps of 0.01Starts at: 1×

Below 1 flattens toward grey, above 1 deepens darks and brightens lights.

SaturationSlider

Range: 0–2×, in steps of 0.01Starts at: 1×

0 is fully grey, above 1 intensifies the colour.

Hue RotateSlider

Range: −180 to 180°

Shifts every colour around the colour wheel. How you get a blue variant of a red asset without new artwork.

GrayscaleCheckbox

Removes all colour.

NightCheckbox

A cool, darkened night-time grade.

SepiaCheckbox

A warm brown vintage grade.

InvertCheckbox

Inverts every colour to its opposite.

Color Overlay

ColorColour

A solid colour laid over the object.

OpacitySlider

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.

TypeDropdown

Linear or radial — a directional sweep, or one that radiates from a centre.

Color 1 / Color 2Colour

The two colours of the gradient.

Color 1 / 2 OpacitySlider

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.

Color 1 / 2 PositionSlider

Range: 0–1, in steps of 0.01

Where each colour sits along the gradient. Moving them closer together sharpens the transition.

AngleSlider

Range: 0–360°

Direction of the sweep. Linear type only.

OpacitySlider

Range: 0–1, in steps of 0.01

Overall strength of the gradient.

Replace Original ColorCheckbox

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.

Source ColorColour

The colour in the artwork you want to replace.

Replacement ColorColour

What matching pixels become.

ToleranceSlider

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.

StrengthSlider

Range: 0–100px

How heavy the blur is.

QualitySlider

Range: 1–8

How many passes are used. Higher is smoother and more expensive; 2 to 4 is usually indistinguishable from 8.

DirectionDropdown

Blur both axes together, or each one separately.

Strength X / Strength YSlider

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.

Repeat Edge PixelsCheckbox

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.

Velocity XSlider

Range: −100 to 100px

Horizontal smear amount and direction.

Velocity YSlider

Range: −100 to 100px

Vertical smear.

QualityDropdown

Sampling detail against cost.

OffsetSlider

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.

StrengthSlider

Range: −1 to 1, in steps of 0.01

How far the streaks reach. Negative pulls inward instead of pushing out.

Center X / Center YSlider

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.

Inner RadiusSlider

Range: 0–500px

A protected zone at the centre that stays sharp. Use it to keep a logo readable while everything around it streaks.

Infinite RadiusCheckbox

Lets the effect reach with no outer limit.

Outer RadiusSlider

Range: 1–1000px

Where the effect stops. Appears only when Infinite Radius is off.

Radial Blur

A circular, spinning smear.

AngleSlider

Range: −180 to 180°

How far around the smear travels.

Center X / Center YSlider

Range: 0–1, in steps of 0.01

The point it spins about.

QualityDropdown

Sampling detail.

Infinite RadiusCheckbox

Removes the outer limit.

Outer RadiusSlider

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.

StrengthSlider

Range: 0–50px

How heavily the backdrop is blurred.

QualitySlider

Range: 1–8

Smoothness against cost.

Repeat Edge PixelsCheckbox

Avoids edge darkening at the object's boundary.

FX — Lighting effects

Bloom

Makes bright areas glow and bleed, the way an overexposed photograph does.

ThresholdSlider

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.

Bloom StrengthSlider

Range: 0–5×, in steps of 0.1

How intense the bleed is.

BrightnessSlider

Range: 0–3×, in steps of 0.1

Overall brightness of the result.

BlurSlider

Range: 0–30px

How far the glow spreads.

QualitySlider

Range: 1–8

Smoothness against cost.

Bloom Simple

A cheaper bloom with one control. Prefer this one unless you need the threshold.

StrengthSlider

Range: 0–30px

How much the bright areas spread.

God Rays

Volumetric shafts of light.

Ray ModeDropdown

Parallel rays coming in at an angle, or rays radiating from a point.

AngleSlider

Range: −180 to 180°

Direction the rays travel. Parallel mode only.

Center X / Center YSlider

Range: 0–1, in steps of 0.01

Where the rays originate. Radiating mode only.

IntensitySlider

Range: 0–1, in steps of 0.01

How bright the rays are.

Ray DensitySlider

Range: 0.5–10, in steps of 0.1

How many rays there are.

OpacitySlider

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.

CurvatureSlider

Range: 0–10, in steps of 0.1

How much the picture bows outward.

Scanline WidthSlider

Range: 0–10px, in steps of 0.1

Thickness of the horizontal lines.

Scanline ContrastSlider

Range: 0–1, in steps of 0.01

How dark the lines are against the picture.

Vertical LinesCheckbox

Draws the lines vertically instead.

Noise AmountSlider

Range: 0–1, in steps of 0.01

How much static is mixed in.

Noise SizeSlider

Range: 1–20px

How coarse the static grain is.

Vignette SizeSlider

Range: 0–1, in steps of 0.01

How far the corner darkening reaches in.

Vignette OpacitySlider

Range: 0–1, in steps of 0.01

How dark the corners get.

Vignette BlurSlider

Range: 0–1, in steps of 0.01

How soft the vignette's edge is.

Glitch

Displaced slices and channel separation — digital corruption.

SlicesSlider

Range: 1–30

How many bands the image is cut into.

OffsetSlider

Range: 0–300px

How far the bands are pushed sideways.

DirectionSlider

Range: −180 to 180°

Which way the bands are displaced.

Fill ModeDropdown

What fills the space a displaced band leaves behind.

Even BandsCheckbox

Makes every band the same height rather than random ones.

Minimum Band SizeSlider

Range: 1–64px

The thinnest a band may be.

Red / Green / Blue X and YSlider

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.

Red X / Red YSlider

Range: −100 to 100px

Displacement of the red channel.

Green X / Green YSlider

Range: −100 to 100px

Displacement of the green channel.

Blue X / Blue YSlider

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.

ModeDropdown

Square pixels, or separate width and height for rectangular ones.

Pixel SizeSlider

Range: 1–100px

How large each block is. Square mode.

Size X / Size YSlider

Range: 1–100px

Block width and height separately. Rectangular mode.

Noise

Grain and texture over the object.

StrengthSlider

Range: 0–1, in steps of 0.01

How visible the grain is.

ScaleSlider

Range: 1–100

How coarse the grain pattern is.

PatternDropdown

Which noise pattern is generated.

ThresholdSlider

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.

Offset X / Offset YSlider

Range: −100 to 100

Shifts the pattern across the object.

DepthSlider

Range: −100 to 100

How far into the pattern is sampled.

FX — Distortion effects

Twist

Spirals the object around a point.

AngleSlider

Range: −10 to 10, in steps of 0.1

How hard the twist is. Negative twists the other way.

RadiusSlider

Range: 0–1000px

How far out the twist reaches. Beyond this the image is untouched.

Center X / Center YSlider

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.

StrengthSlider

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.

RadiusSlider

Range: 1–1000px

How far the distortion reaches.

Center X / Center YSlider

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.

Wave PositionSlider

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.

AmplitudeSlider

Range: 0–100px

How strongly the wave displaces pixels.

WavelengthSlider

Range: 1–500px

How wide the ring of distortion is.

BrightnessSlider

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.

SpeedSlider

Range: 0–2000 px/s, in steps of 10

How fast the ring expands.

Center X / Center YSlider

Range: 0–1, in steps of 0.01

Where the wave starts.

Infinite RadiusCheckbox

Lets the wave expand without limit.

Maximum RadiusSlider

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.

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.

Score textDropdown

A Text object whose copy is replaced with the score each frame.

Timer textDropdown

Seconds remaining. Left alone when the round has no clock.

Lives textDropdown

Only written while lives are limited.

Sounds

Sound slotsUpload

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.

RowsNumber

Range: 1–6

How many rows the spawn grid has.

ColumnsNumber

Range: 1–6

How many columns. Rows times columns is how many places a target can appear.

Target scoreNumber

Range: 1–100

Hits needed to win the round.

DurationNumber

Range: 5–120s

How long the round lasts. Running out of time below the target score loses it.

Stays up forNumber

Range: 0.3–4s, in steps of 0.1

How long a target waits to be tapped before vanishing. Shorter is harder.

One everyNumber

Range: 0.2–3s, in steps of 0.1

How often a new target appears.

Max at onceNumber

Range: 1–8

How many can be on screen together. More than a couple turns the round hectic.

Nudge an idle playerCheckbox

Pulses a hint pointer over a waiting target. An ad that looks like it is doing nothing gets closed — leave this on.

AfterNumber

Range: 0.5–6s, in steps of 0.5

How long to wait before hinting. Appears only when the nudge is on.

Danger chanceNumber

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.

RowsNumber

Range: 1–4

Rows in the tray items appear in.

ColumnsNumber

Range: 1–6

Columns in the tray.

Target scoreNumber

Range: 1–100

Correct drops needed to win.

DurationNumber

Range: 0–120s

Round length. 0 runs with no clock at all, which suits a puzzle you want thought about rather than rushed.

One everyNumber

Range: 0.2–3s, in steps of 0.1

How often a new item appears.

Max at onceNumber

Range: 1–8

How many items may be waiting to be moved.

Nudge an idle playerCheckbox

Runs a hint pointer from a waiting item to the zone it belongs in — which also teaches the mechanic without a word of instruction.

AfterNumber

Range: 0.5–6s, in steps of 0.5

Delay before hinting.

LivesNumber

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.

StyleDropdown

How the covering comes off — scratched away with a brush, or broken off in tiles. The cards below change with this choice.

SizeNumber

Range: 4–40%

Brush width, as a share of the panel's shorter side. Brush style only.

GrainNumber

Range: 8–60

How finely the covering is divided. Higher is smoother to look at and heavier to draw. Brush style only.

Rows / ColumnsNumber

Range: 1–8 each

The tile grid. Tile style only.

GapNumber

Range: 0–30%

The line left between tiles. Zero butts them together. Tile style only.

UncoverNumber

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.

DurationNumber

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.

Always land onDropdown

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.

TakesNumber

Range: 1–8s, in steps of 0.5

How long the spin lasts. Around 2 to 3 seconds is enough tension without testing patience.

Full turnsNumber

Range: 1–12

How far it travels before it starts slowing. More reads as a harder throw.

Spins allowedNumber

Range: 1–5

How many presses the player gets.

Pulse the button afterNumber

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.

The markerDropdown

How the marker moves along the track.

Marker speedNumber

Range: 0.1–4×, in steps of 0.05

How fast it travels.

Speeds up byNumber

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.

Turn around at the endsCheckbox

Bouncing reads as a meter being watched. Switched off the marker starts over from the beginning each time, which reads as something passing by.

SizeNumber

Range: 4–60%

How much of the track counts as a hit.

PositionNumber

Range: 0–100%

Where the zone's middle sits along the track.

Move it after every hitCheckbox

Off, the round is a rhythm — the same spot, learned. On, it is a test of reaction.

Shrinks toNumber

Range: 40–100%

Of its previous size, after every hit. 100% leaves it alone.

Perfect bandNumber

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.

Correct answers to passNumber

Range: 0 to the number of questions

Below this the round ends as a loss. The score is shown either way.

Answers laid outDropdown

How the answer cards are arranged. The rows follow from how many answers a question has.

Show the answer forNumber

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.

PassedText

The message shown on a pass. {score} and {total} are filled in — so "You got {score} of {total}!" becomes "You got 4 of 5!".

FailedText

The message shown when the pass mark was missed.

Blink the answers afterNumber

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.

Columns / RowsNumber

Range: 3–12 each

The board size. Bigger boards need more taps to show progress — keep it small for an ad.

GapNumber

Range: 0–30%

Between cells, as a share of one cell, so the board reads the same at any size.

Colours dealtNumber

Range: 2 to however many tiles you bound

How many different tile colours are in play. Fewer makes big groups easier to find.

BlockersNumber

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.

Smallest groupNumber

Range: 2–5

How many touching tiles are needed to clear.

MovesNumber

Range: 0–99

Total taps allowed. 0 for a round that cannot be lost.

Combo atNumber

Range: 2–15

A group this size or larger stamps the combo banner.

Points per tileNumber

Range: 1–100

Multiplied by the group's size again, so one big group beats three small ones.

Win byDropdown

What ends the round — a score, or clearing a certain colour.

ColourDropdown

Which tile the goal is asking for. Appears only for a colour goal.

TargetNumber

How much of it is needed.

Match Cascade — Rules

Swap two gems to line up three, and let the board fall into the gaps.

Columns / RowsNumber

Range: 3–12 each

Board size.

GapNumber

Range: 0–30%

Space between cells, as a share of one cell.

Colours dealtNumber

Range: 3 to however many gems you bound

How many gem colours are in play.

Shortest lineNumber

Range: 3–5

How many in a row are needed to clear.

MovesNumber

Range: 0–99

Total swaps. A swap that makes no line is free. 0 for a round that cannot be lost.

Special gemsCheckbox

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.

Points per gemNumber

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.

Win byDropdown

A score, or clearing a certain colour.

ColourDropdown

Which gem the goal asks for. Only gems cleared in a line count — a rocket's row does not.

TargetNumber

Range: 1–999

How many are needed.

Nudge an idle playerCheckbox

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.

MarchDropdown

Which way your units travel. Vertical reads as a card battler, horizontal as a tower defense.

LanesNumber

Range: 1–4

Parallel corridors units walk down. Deploys go to the emptiest one.

Starts atNumber

Range: 0–20

How much deploy meter the player has the moment the round begins.

MaximumNumber

Range: 1–20

The meter's ceiling.

RefillsNumber

Range: 0–4 per second, in steps of 0.1

How fast the meter recharges. This is the main difficulty dial.

Enemy healthNumber

Range: 1–500

What the player is knocking down. Reaching zero wins the round.

Your healthNumber

Range: 0–500

0 means your tower cannot fall — a pure attack round with nothing at stake, which is often right for an ad.

DurationNumber

Range: 0–180s

0 runs with no clock — the round then ends only when a tower does.

Enemy WavesButtons

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).

Nudge an idle playerCheckbox

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.

Starting moneyNumber

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.

Note valueNumber

Range: 1–500, in steps of 5

What one collectable note is worth.

Notes per buildingNumber

Range: 1–12

How many notes a building drops at a time.

Upgrades per plotNumber

Range: 0–4

How many times a plot can be improved.

Pickup radiusNumber

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.

Follow speedNumber

Range: 120–3000, in steps of 20

How fast the collector chases the finger.

Ends onDropdown

What finishes the round — a number of plots built, or an amount of money earned.

TargetNumber

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

Scene NameText

The scene's name, shown read-only here. Rename it from the scene list instead, by double-clicking its row.

Hold forNumber

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.

TransitionDropdown

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.

Play buttonPreview

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.

DurationSlider

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.

DirectionDropdown

Which way the scene slides — Left, Right, Up or Down. Slide only.

ScaleSlider

Range: 0.2–1, in steps of 0.05

How far the scene zooms from. Lower means a bigger zoom. Zoom only.

AngleSlider

Range: −360 to 360°, in steps of 5

How far the scene rotates. Rotate only.

StrengthSlider

Range: Blur 0–50px · Bloom 0–5

How heavy the effect is. Blur and Bloom.

Pixel SizeSlider

Range: 1–50px

How large the blocks grow before the scene changes. Pixelate only.

DistanceSlider

Range: 0–50px

How far the colour channels separate. RGB Split only.

IntensitySlider

Range: 0–10, in steps of 0.1

How strong the scanline effect is. CRT only.

CorruptionSlider

Range: 0–10, in steps of 0.1

How broken the picture goes. Glitch only.

Flash ColorDropdown

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

Choose VideoUpload

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.

Size warningPreview

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.

Replace / RemoveButtons

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

FitButtons

Fill crops the footage to the artboard, filling it completely. Fit keeps all of the frame and leaves a gap.

Fill the gap withButtons

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.

Backdrop BlurSlider

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

LoopCheckbox

Restarts the footage instead of holding on the last frame when it ends.

Audio

Start mutedCheckbox

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.

VolumeSlider

Range: 0–100%

How loud the footage plays once unmuted.

Appearance

Backdrop ColourColour

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.

Dark OverlaySlider

Range: 0–100%Starts at: 0%

Darkens the footage so copy laid over it stays readable. Essential over bright or busy video.

OpacitySlider

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

Break atNumber

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.

Break every timeCheckbox

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.

Resume whenDropdown

Five ways out of the break. Each one is explained by a line under the dropdown once selected.

Tap anywhereDropdown

Any tap on the ad resumes it. The lowest-friction option, and the one that works before you have placed anything.

Tap an objectDropdown

Only a tap on the object you pick resumes it. Use it when the break is asking for a choice between two things.

Object to tapDropdown

Which object must be tapped. Appears only with Tap an object.

Press and holdDropdown

The viewer holds for a moment; letting go early does not resume it. Good for charging a shot or drawing a bow.

Hold forNumber

Range: 0.1–10s, in steps of 0.1Starts at: 1s

How long the hold must last. Appears only with Press and hold.

WaitDropdown

No input at all — the video resumes on its own. A beat to let something be read, rather than an interaction.

Wait forNumber

Range: 0.1–30s, in steps of 0.1Starts at: 3s

How long the pause lasts. Appears only with Wait.

An event resumes itDropdown

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

Let the viewer skipCheckbox

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.

Button textText

What the skip control says. Appears only when skipping is allowed.

Show afterNumber

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. 1

    Select the button

    On the canvas or in the object list.

  2. 2

    Add a Click trigger

    In the Interactions section of the left panel.

  3. 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. 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.

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.

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.

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. 1

    Select the mechanic

    In the object list of your game scene.

  2. 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. 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. 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.

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. 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. 2

    Click-through

    Confirm your store links and your parameters. This is the last chance to catch an ad that goes nowhere.

  3. 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.

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.

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.