Merge Guard playable ad demo · PixiJS

A 30-second merge-defense playable: summon heroes onto a 5×3 board, drag two identical heroes together to merge them into a stronger one, and hold the gate against a wave and a boss. Everything — art, effects, sound — is generated in code, so each network build is a single self-contained HTML file.

Builds

Each build ships exactly one adapter: FbPlayableAd.onCTAClick() for Meta, ExitApi.exit() for Google, mraid.open() with ready/viewable handling for MRAID networks (Unity Ads, AppLovin…). The build fails if a file exceeds the budget or references anything external.

Under the hood

• Vector art baked once. Heroes (3 types × 4 ranks), enemies, shots and sparks are drawn with Graphics and baked into textures at start-up; the scene is plain sprites that Pixi batches together.
• Zero allocations in the frame loop. Enemy sprites are created for the whole wave up front; shots and sparks live in fixed-size slot pools backed by typed arrays.
• Scripted randomness for onboarding. The first two summons are always the same hero, so the merge tutorial can appear on time; after that summons are random.
• Rules apart from rendering. Board and merge rules, enemy path, wave schedule and game flow are pure modules covered by tests; the view only reports “dropped hero from cell A onto cell B”.
• Ad lifecycle. Waits for the network to be ready, pauses the ticker and audio when the ad is hidden, unlocks audio on the first tap, fits a 720×1280 logical field into any screen and orientation.

Source on GitHub Open full screen with perf overlay 3D demo on three.js →