# Playable Ads made with Defold? For Facebook Ads?

**URL:** <https://forum.defold.com/t/playable-ads-made-with-defold-for-facebook-ads/41773>\
**Category:** Questions\
**Created:** [January 27, 2019, 11:28pm UTC](https://forum.defold.com/t/playable-ads-made-with-defold-for-facebook-ads/41773 "2019-01-27T23:28:58Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![marat.giliazov](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/marat.giliazov/32/12364_2.png) [@marat.giliazov](https://forum.defold.com/u/marat.giliazov)\
**Post date:** [January 27, 2019, 11:28pm UTC](https://forum.defold.com/t/playable-ads-made-with-defold-for-facebook-ads/41773/1 "2019-01-27T23:28:58Z")

</div>

With Defold you can produce very lightweight and well-optimised builds, both mobile and HTML5 from the same sources.

One idea tickles my brain for the past few days - is it possible to produce Playable Ads with Defold? Playable Ads have self-explaining name - the ad you can play, technically they are tiny HTML5 games. I heard such ads have very good conversions rates, so just imagine - you build iOS/Android game and with cost of pressing few buttons also build a Playable Ad for it, from the same sources. Sounds intriguing!

And not so long ago Facebook added the ability to upload playables to their system. Here are [requirements](https://www.facebook.com/business/help/412951382532338?helpref=faq_content), some important points:

- Playable should not require mraid.js.
- A single file for playable ad that contains all assets as part of that single HTML file and assets should be data **URI compressed**. (Javascript, CSS, images, sounds).
- Playable asset size should be less than **2 MB**.
- No dynamic asset loading through external network is permitted.
- Tips for combining into **one file-encode image into base64 string** , integrate js into index.html.
- Playable HTML5 should not contain any JS redirect.
- Playable should not make any HTTP request.

I’m not very familiar with Defold’s HTML5 tech stack, is there any requirement impossible to reach with Defold?

---

<div class="post-metadata">

**Author:** ![Pkeod](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pkeod/32/606_2.png) [@Pkeod](https://forum.defold.com/u/Pkeod)\
**Post date:** [January 28, 2019, 2:00am UTC](https://forum.defold.com/t/playable-ads-made-with-defold-for-facebook-ads/41773/2 "2019-01-28T02:00:50Z")

</div>

> A single file for playable ad that contains all assets as part of that single HTML file

Might be a little annoying to do manually if it is possible to do. Assuming it is you would probably also want to manually exclude WASM runtime.

---

<div class="post-metadata">

**Author:** ![marat.giliazov](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/marat.giliazov/32/12364_2.png) [@marat.giliazov](https://forum.defold.com/u/marat.giliazov)\
**Post date:** [January 28, 2019, 8:29pm UTC](https://forum.defold.com/t/playable-ads-made-with-defold-for-facebook-ads/41773/3 "2019-01-28T20:29:21Z")

</div>

Manual job is not a big issue and any manual routines can be automated, the main question is if it’s possible at all.

---

<div class="post-metadata">

**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [January 28, 2019, 8:53pm UTC](https://forum.defold.com/t/playable-ads-made-with-defold-for-facebook-ads/41773/4 "2019-01-28T20:53:56Z")

</div>

Sure, it’s possible. You need to strip the engine from anything you don’t need, use texture compression and in general be very smart with the assets you use. And create a script that takes care of packaging the whole thing in a single .html file.

---

<div class="post-metadata">

**Author:** ![marat.giliazov](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/marat.giliazov/32/12364_2.png) [@marat.giliazov](https://forum.defold.com/u/marat.giliazov)\
**Post date:** [April 18, 2019, 10:12pm UTC](https://forum.defold.com/t/playable-ads-made-with-defold-for-facebook-ads/41773/5 "2019-04-18T22:12:18Z")

</div>

I’m back on this again. Ok, I see how to inline css and js into html-file, need to rework such pieces of code:

```lua
    function load_engine() {
		var engineJS = document.createElement('script');
		engineJS.type = 'text/javascript';
		if (Module['isWASMSupported']) {
		    engineJS.src = 'PlayableAd_wasm.js';
		} else {
		    engineJS.src = 'PlayableAd_asmjs.js';
		}
		document.head.appendChild(engineJS);
	}

```

That’s clear. But I don’t fully understand how Defold packs assets for HTML5, like images, fonts, sounds etc? Can’t find anything related in the docs. As I see there is **archive** folder:  
 ![](https://puu.sh/DgDGE/5372a43707.png)  
and there is some JS code in index.html:

```lua
var extra_params = {
		archive_location_filter: function( path ) {
			return ("archive" + path + "");
		},
		
		splash_image: "splash_image.png",
		custom_heap_size: 268435456,
		disable_context_menu: true
	}

```

And I’m not 100% sure what it does.. gives the reference to function returning path to file in archive.. so, how can I inline this stuff into my resulting HTML? is it ever possible?

---

<div class="post-metadata">

**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [April 19, 2019, 5:27am UTC](https://forum.defold.com/t/playable-ads-made-with-defold-for-facebook-ads/41773/6 "2019-04-19T05:27:56Z")

</div>

I’m not 100% sure of the process but I guess the code in dmloader.js needs to be modified to support loading from an embedded string.

We should add this as a bundle option.

---

<div class="post-metadata">

**Author:** ![marat.giliazov](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/marat.giliazov/32/12364_2.png) [@marat.giliazov](https://forum.defold.com/u/marat.giliazov)\
**Post date:** [April 19, 2019, 5:39am UTC](https://forum.defold.com/t/playable-ads-made-with-defold-for-facebook-ads/41773/7 "2019-04-19T05:39:26Z")

</div>

Aha, I found where this path-function parameter is used in dmloader.js, later archive-files seem to be loaded via HTTPRequest. Code is not obfuscated or minified here, so I believe I can rewrite it to work as I need. I’ll put updates with the progress here, thanks!

---

<div class="post-metadata">

**Author:** ![aglitchman](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/aglitchman/32/19432_2.png) [@aglitchman](https://forum.defold.com/u/aglitchman)\
**Post date:** [April 22, 2019, 7:01am UTC](https://forum.defold.com/t/playable-ads-made-with-defold-for-facebook-ads/41773/8 "2019-04-22T07:01:47Z")

</div>

**[Updated 2021-06-22: look at this topic.](https://forum.defold.com/t/defold-for-playable-ads/68689)**

Defold is too heavy for playable ad (in my opinion). PixiJS and any other lightweight JS engine are much better for this.

But I made the project as a demonstration that Defold can fit into [one HTML file that less than 2mb](https://aglitchman.github.io/defold-playable-ads/).

Now you just need to do a playable ad and submit it to Facebook for approval 😀

> **[GitHub - indiesoftby/defold-playable-ads: Make playable ads with Defold! It's a project with...](https://github.com/indiesoftby/defold-playable-ads)**
>
> Make playable ads with Defold! It's a project with Gulp tasks to bundle the Defold game into a single HTML file.

If you succeed, I’ll make a complete asset out of this project.

---

<div class="post-metadata">

**Author:** ![marat.giliazov](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/marat.giliazov/32/12364_2.png) [@marat.giliazov](https://forum.defold.com/u/marat.giliazov)\
**Post date:** [April 22, 2019, 2:12pm UTC](https://forum.defold.com/t/playable-ads-made-with-defold-for-facebook-ads/41773/9 "2019-04-22T14:12:29Z")

</div>

Wow! It works! I’ve used it on “Linker” sample project, there is a resulting one-html-file [http://anvil-games.com/defold/ad/playable\_ad.html](http://anvil-games.com/defold/ad/playable_ad.html), it weights 2.4mb and canvas scaling need to be fixed, but in common script worked like a charm, thanks!

The only thing was to change “projectTitle” in “gulp file.js”

---

<div class="post-metadata">

**Author:** ![marat.giliazov](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/marat.giliazov/32/12364_2.png) [@marat.giliazov](https://forum.defold.com/u/marat.giliazov)\
**Post date:** [April 22, 2019, 2:40pm UTC](https://forum.defold.com/t/playable-ads-made-with-defold-for-facebook-ads/41773/10 "2019-04-22T14:40:17Z")

</div>

Update: I’ve missed two additional things:

- add embed=“compressed” in html template (already fixed in repo by @aglitchman)
- set app manifest in project settings

So after doing this the resulting html is 1.85mb! success! [http://anvil-games.com/defold/ad/playable\_ads.html](http://anvil-games.com/defold/ad/playable_ads.html)

Now going to try it on my “real” game…

---

<div class="post-metadata">

**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [April 22, 2019, 4:58pm UTC](https://forum.defold.com/t/playable-ads-made-with-defold-for-facebook-ads/41773/11 "2019-04-22T16:58:02Z")

</div>

Great! Very nice work on this! What if you apply texture compression on the assets as well?

---

<div class="post-metadata">

**Author:** ![marat.giliazov](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/marat.giliazov/32/12364_2.png) [@marat.giliazov](https://forum.defold.com/u/marat.giliazov)\
**Post date:** [April 22, 2019, 8:01pm UTC](https://forum.defold.com/t/playable-ads-made-with-defold-for-facebook-ads/41773/12 "2019-04-22T20:01:02Z")

</div>

I’ve removed all sounds and music, throw away some sprites to reduce the size of atlas and came up with 2.4mb build size. Then played around with compression settings in texture\_profile but this did not show a significant changes, but limiting the “Max Texture Size” did the trick (and as for 2mb ad the resulting quality is ok imo) - 1.99mb 😀

Here is the link: [http://anvil-games.com/defold/ad/BouncyCatapult.html](http://anvil-games.com/defold/ad/BouncyCatapult.html) - it’s a full game currently, just without sounds. So as for ad there is still some assets to be stripped.

And Facebook Ads manager “eats” the resulting HTML:  
 ![](https://puu.sh/DinWw/51f1513e0c.png)

---

<div class="post-metadata">

**Author:** ![aglitchman](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/aglitchman/32/19432_2.png) [@aglitchman](https://forum.defold.com/u/aglitchman)\
**Post date:** [April 24, 2019, 8:59am UTC](https://forum.defold.com/t/playable-ads-made-with-defold-for-facebook-ads/41773/13 "2019-04-24T08:59:57Z")

</div>

> [@aglitchman](#):
>
> But I made the project as a demonstration that Defold can fit into [one HTML file that less than 2mb](https://aglitchman.github.io/defold-playable-ads/).

I’ve updated the project:

- Added info on how to use it in your game
- Added comments in the html5 template
- Added compression for archive data
- Now 7-zip is used for deflate compression
- And so on…

---

<div class="post-metadata">

**Author:** ![marat.giliazov](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/marat.giliazov/32/12364_2.png) [@marat.giliazov](https://forum.defold.com/u/marat.giliazov)\
**Post date:** [April 26, 2019, 5:21am UTC](https://forum.defold.com/t/playable-ads-made-with-defold-for-facebook-ads/41773/14 "2019-04-26T05:21:56Z")

</div>

Hey-hey, first playable ad is approved and live!

You can check it in the Facebook Feed by this link: [https://fb.me/1F1L1cv4wlv0TPM](https://fb.me/1F1L1cv4wlv0TPM) (seems to be working only in FB mobile app; and I don’t know for how long the link will be working)

But I’ve noticed some major FPS drops in it and probably right now the ad does not provide a good user experience because of lags. So I need to check this.

UPD: fixed lags by setting “Contact Impulse Limit” in physics settings

 ![02](https://forum-defold.b-cdn.net/uploads/default/original/2X/a/a5bbe9afa8226045d424bec9b5bb318cb2e29d66.jpeg)

---

<div class="post-metadata">

**Author:** ![marat.giliazov](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/marat.giliazov/32/12364_2.png) [@marat.giliazov](https://forum.defold.com/u/marat.giliazov)\
**Post date:** [April 30, 2019, 7:29am UTC](https://forum.defold.com/t/playable-ads-made-with-defold-for-facebook-ads/41773/15 "2019-04-30T07:29:21Z")

</div>

The first test with Playable Ad finished, so, just want to confirm, that it was not banned or reported by users or something else, and for sure it was successful for the game:

 ![43](https://forum-defold.b-cdn.net/uploads/default/original/2X/c/ce460a851f4f172d3c66a2f066c62fa0008da2e0.png)

“Results” here are “App Installs”, on iOS, in USA. You can see, that Cost Per Install was TWICE lower in comparison with a simple video on the same audience and placements! Well, my best CPI with video ad was around $0.7, so if be more precise, the win from playable ad was “only” 50% and not 100%. But still - very promising and inspiring!

---

<div class="post-metadata">

**Author:** ![Pkeod](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pkeod/32/606_2.png) [@Pkeod](https://forum.defold.com/u/Pkeod)\
**Post date:** [September 2, 2019, 8:50am UTC](https://forum.defold.com/t/playable-ads-made-with-defold-for-facebook-ads/41773/16 "2019-09-02T08:50:03Z")

</div>

You should make a post for this as its own thread as I was trying to find it and could not on my own! (Thank you to @d954mas for linking)

Using something like this also has other benefits…

---

<div class="post-metadata">

**Author:** ![marat.giliazov](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/marat.giliazov/32/12364_2.png) [@marat.giliazov](https://forum.defold.com/u/marat.giliazov)\
**Post date:** [March 31, 2020, 1:27pm UTC](https://forum.defold.com/t/playable-ads-made-with-defold-for-facebook-ads/41773/17 "2020-03-31T13:27:15Z")

</div>

Just in case - this still works with Editor 1.2.167.  
But few minor changes to the engine\_template.html required, as it changed during past year.

---

<div class="post-metadata">

**Author:** ![Thize](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/thize/32/24470_2.png) [@Thize](https://forum.defold.com/u/Thize)\
**Post date:** [April 6, 2021, 2:54pm UTC](https://forum.defold.com/t/playable-ads-made-with-defold-for-facebook-ads/41773/18 "2021-04-06T14:54:20Z")

</div>

HI! Still works? Can you share the engine\_template.html?

---

<div class="post-metadata">

**Author:** ![Lex](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/lex/32/23856_2.png) [@Lex](https://forum.defold.com/u/Lex)\
**Post date:** [June 21, 2021, 3:19pm UTC](https://forum.defold.com/t/playable-ads-made-with-defold-for-facebook-ads/41773/19 "2021-06-21T15:19:22Z")

</div>

Has anyone managed to make this work: [GitHub - indiesoftby/defold-playable-ads: Make playable ads with Defold! It's a project with Gulp tasks to bundle the Defold game into a single HTML file. · GitHub](https://github.com/aglitchman/defold-playable-ads) ?

I’m running the following commands:

```lua
git clone https://github.com/aglitchman/defold-playable-ads.git
cd defold-playable-ads
npm install
gulp

```

Everything works, then I start a local http  
`python -s SimpleHTTPServer 8080`

I get a blank page and an error console:

```
Uncaught TypeError: Cannot read property 'parentElement' of undefined
    at Object.removeProgress (dmloader.js:450)
    at Object._preloadAndCallMain (dmloader.js:824)
    at Array.onArchiveLoaded (dmloader.js:720)
    at Object.notifyListeners (dmloader.js:213)
    at Object.notifyArchiveLoaded (dmloader.js:235)
    at Object.onArchiveLoaded (dmloader.js:406)
    at Object.onFileLoaded (dmloader.js:398)
    at Object.onPieceLoaded (dmloader.js:346)
    at dmloader.js:318
    at request.onload (dmloader.js:91)

```

Anyone experience the same issue?

---

<div class="post-metadata">

**Author:** ![aglitchman](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/aglitchman/32/19432_2.png) [@aglitchman](https://forum.defold.com/u/aglitchman)\
**Post date:** [June 21, 2021, 3:47pm UTC](https://forum.defold.com/t/playable-ads-made-with-defold-for-facebook-ads/41773/20 "2021-06-21T15:47:25Z")

</div>

> [@Lex](#):
>
> Has anyone managed to make this work: [GitHub - aglitchman/defold-playable-ads: A project with Gulp tasks to bundle the Defold game into one HTML file.](https://github.com/aglitchman/defold-playable-ads) ?

[https://github.com/aglitchman/defold-playable-ads/issues/5#issuecomment-814190719](https://github.com/aglitchman/defold-playable-ads/issues/5#issuecomment-814190719)

[Next page](https://forum.defold.com/t/playable-ads-made-with-defold-for-facebook-ads/41773.md?page=2)