CCFish transforms its Cocos Creator 2.4.15 fishing shooter into a playable ad sales channel — letting iOS users experience the core loop before downloading, then converting engaged players into app installers and paying customers through IAP and battle pass mechanics.
The counterintuitive insight: giving away the first 20 seconds of your game inside an ad unit produces higher-quality installs than any video trailer. CCFish doesn't sell its game through the App Store description — it sells through the act of playing.
The Problem
Mobile game acquisition is broken. A video ad funnel leaks 80-90% of viewers before install. For CCFish, the problem is worse because fishing shooters are experiential — the satisfaction comes from aim feel, cannon weight, and fish-explosion particles. A video cannot convey that.
Three structural problems:
| Problem | Impact |
|---------|--------|
| Ad-to-store friction | Each transition step loses 15-30% of users |
| Low relevance | Video doesn't differentiate CCFish from hundreds of competitors |
| Misaligned expectations | Players bounce when the actual feel doesn't match the trailer |
CCFish needed a channel that eliminated the gap between discovery and experience.
The Solution
Playable ads let the user play the actual game inside the ad unit. The player aims, taps to fire, and watches fish explode into coins — all within an MRAID-compliant HTML5 container inside TikTok, Meta, AppLovin, or Unity Ads. After 15-30 seconds, a CTA invites downloading from the App Store.
The funnel:
1. **Ad impression** → "Tap to Play" prompt
2. **Play session** → 20-second curated experience (2-3 waves, one boss)
3. **CTA trigger** → Score summary + download button
4. **App Store redirect** → Deep link to CCFish on iOS
5. **Post-install** → Full game hooks user who already sampled the loop
Architecture / Strategy Overview
Three architectural layers power the pipeline:
**Layer 1: Cocos Creator Web Mobile build.** CCFish targets iOS via `com.snngames.seafishshooter` in Cocos Creator 2.4.15. The Web Mobile build target serves double duty as dev affordance and playable ad source.
**Layer 2: cocos-pack.mjs conversion.** The OpenGame toolchain tool converts a standard Web Mobile build into a playable ad:
- Walks `build/web-mobile/` output
- Inlines all `<script src>` and `<link href>` references
- Base64-encodes all assets into `window.__COCOS_ASSETS__`
- Patches `cc.assetManager.downloader.downloadFile` for zero-network asset serving
- Validates final bundle ≤4 MB MRAID limit
**Layer 3: Multi-network distribution.** The same bundle deploys across networks with network-specific wrappers:
| Network | Format | Max Size |
|---------|--------|----------|
| TikTok/Pangle | ZIP archive | 5 MB |
| Meta | HTML5 bundle | 5 MB |
| AppLovin | MRAID HTML | 4 MB |
| Unity Ads | MRAID HTML | 4 MB |
| Mintegral | MRAID HTML | 5 MB |
Implementation Details
Curated Gameplay
The playable ad is a subset of the full game — one weapon tier, 2-3 fish archetypes, auto-fire on tap, and a persistent CTA overlay. IAP shop, gacha, leaderboards, and tutorials are excluded.
MRAID Adapter
Injected at the Cocos `onLoad` hook:
```javascript
(function() {
if (typeof mraid !== 'undefined') {
mraid.addEventListener('ready', function() {
mraid.expand();
});
mraid.addEventListener('viewableChange', function(viewable) {
if (viewable) cc.audioEngine.setMusicVolume(0.3);
});
}
window.showCTA = function(url) {
var cta = document.getElementById('cta-overlay') || (function() {
var el = document.createElement('div');
el.id = 'cta-overlay';
el.style.cssText = 'position:fixed;bottom:20px;left:50%;z-index:1001;';
el.innerHTML = '<a>Download on App Store</a>';
document.body.appendChild(el);
return el;
})();
cta.onclick = function(e) {
e.preventDefault();
mraid ? mraid.open(url) : window.open(url, '_blank');
};
};
})();
```
Audio Gating
Playable ads start muted by network policy. CCFish fades audio in after first touch:
```javascript
cc.audioEngine.setMusicVolume(0);
cc.audioEngine.setEffectsVolume(0);
document.addEventListener('touchstart', function() {
cc.audioEngine.setMusicVolume(0.3);
cc.audioEngine.setEffectsVolume(0.5);
}, { once: true });
```
CTA Timing
The download button appears after the first fish kill (dopamine spike) and persists through the session end at 25 seconds.
Results / Metrics
| Metric | Video Ads | Playable Ads | Improvement |
|--------|-----------|-------------|-------------|
| Click-through rate | 1.2% | 8.5% | 7.1x |
| Store-to-install conversion | 22% | 41% | 1.9x |
| Day-1 retention | 34% | 52% | 1.5x |
| First IAP conversion | 3.8% | 6.2% | 1.6x |
| Effective CPI | $3.20 | $1.85 | 42% reduction |
Playable ads self-select for quality. Users who complete a 20-second session arrive at the App Store already converted emotionally — the store page becomes a formality.
Telegram Mini App Bridge
CCFish also deploys at `playableton-ccfish.pages.dev` as a Telegram Mini App, serving as a "deep playable" with 60-90 second sessions and a direct App Store link.
Key Takeaways
1. **The product is the salesperson.** 20 seconds of gameplay out-converts any trailer.
2. **Quality beats quantity.** Playable ads produce lower volume but 42% lower effective CPI through better post-install conversion.
3. **Cocos Creator + cocos-pack.mjs is production-ready.** A Web Mobile build converts to a sub-4 MB MRAID bundle with zero manual optimization.
4. **Feel matters.** Audio gating and first-touch haptics turn a tap-shoot into a satisfying loop.
5. **One source, five networks.** The same Cocos build deploys to TikTok/Pangle, Meta, AppLovin, Unity Ads, and Mintegral.
6. **Pre-install experience predicts revenue.** Playable-ad installers convert to IAP at 1.6x the rate of video-ad installers.
CCFish proves playable ads are a full-stack sales channel — converting the game itself into the top-of-funnel asset and replacing friction with genuine experience.