# Defold for Playable Ads

**URL:** <https://forum.defold.com/t/defold-for-playable-ads/68689>\
**Category:** The Defoldmine\
**Created:** [June 22, 2021, 7:06pm UTC](https://forum.defold.com/t/defold-for-playable-ads/68689 "2021-06-22T19:06:23Z")\
**Posts on this page:** 20\
**Page:** 1

<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 22, 2021, 7:06pm UTC](https://forum.defold.com/t/defold-for-playable-ads/68689/1 "2021-06-22T19:06:23Z")

</div>

This [toolset](https://github.com/indiesoftby/defold-playable-ads) simplifies building your game into a single HTML file. All you need is to invoke a single command: _ **gulp** _.

In fact, it’s a script for the [Gulp](https://gulpjs.com/) build system, which:

1. Downloads `bob.jar` and uses it to build the project for the HTML5 platform.
2. Combines, compresses (Zstd), encodes (base64), minifies all resources into a single HTML file. Currently, it includes the only Asm.js version of a game for that (not WASM).

[Open the build result](https://indiesoftby.github.io/defold-playable-ads/index.html) online to see that it’s a single HTML file, and it doesn’t use any external resources as required. And it fits into the 2MB size.

Take a look at [how to install it and use it](https://github.com/indiesoftby/defold-playable-ads/blob/master/README.md). And share your results!

### What is a playable ad?

A [playable ad](https://learn.g2crowd.com/playable-ads) is an interactive advertisement, mostly used to promote mobile games. A playable ad acts as a demo of the game (or product), allowing users to quickly play the game directly in the ad before downloading it.

Accepted sizes for HTML5 playable ad [vary between ad networks (overview table)](https://docs.lunalabs.io/docs/playable/ad-networks/overview). Usually, the main requirement for your ad is to be a single HTML file, 2-5MB in size.

---

<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 26, 2021, 10:24pm UTC](https://forum.defold.com/t/defold-for-playable-ads/68689/2 "2021-06-26T22:24:37Z")

</div>

Version 1.0.1:

- Uses zopfli for compression to improve the compression ratio a little more.
- Logs time in console:`playable_ad_example_asmjs.js: decode 500 ms, onload() 500 ms`. It’s useful to know it if someone want to optimize the code.

---

<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 29, 2021, 11:36am UTC](https://forum.defold.com/t/defold-for-playable-ads/68689/3 "2021-06-29T11:36:40Z")

</div>

Great work, 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:** [July 1, 2021, 1:33pm UTC](https://forum.defold.com/t/defold-for-playable-ads/68689/4 "2021-07-01T13:33:31Z")

</div>

Version 1.0.2:

- Supports building the project on Windows.
- Prints version of Java.
- Passes [FB preview tool test](https://developers.facebook.com/tools/playable-preview/).

 ![image](https://forum-defold.b-cdn.net/uploads/default/original/3X/8/8/88d47346d997f8d170abc83aeb9324bb8c6a812b.jpeg)

---

<div class="post-metadata">

**Author:** ![AarrrBee](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/aarrrbee/32/24978_2.png) [@AarrrBee](https://forum.defold.com/u/AarrrBee)\
**Post date:** [July 1, 2021, 2:38pm UTC](https://forum.defold.com/t/defold-for-playable-ads/68689/5 "2021-07-01T14:38:12Z")

</div>

Thanks for this, it’s going to be very helpful.

One question - is it possible to pass parameters to Bob? At the very least, it would be useful to pass the --settings option, so I can override the default main\_collection in [bootstrap].

---

<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:** [July 1, 2021, 3:07pm UTC](https://forum.defold.com/t/defold-for-playable-ads/68689/6 "2021-07-01T15:07:53Z")

</div>

> [@AarrrBee](#):
>
> One question - is it possible to pass parameters to Bob? At the very least, it would be useful to pass the --settings option, so I can override the default main\_collection in [bootstrap].

The simplest way is to modify your copy of gulpfile.js, i.e. put your settings at this line:

> <https://github.com/indiesoftby/defold-playable-ads/blob/master/playable_ad/gulpfile.js#L161>

i.e.:

```plaintext
      "--platform", "js-web",
      "--settings", "my-settings.ini",
      "--archive",

```

---

<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:** [July 1, 2021, 9:28pm UTC](https://forum.defold.com/t/defold-for-playable-ads/68689/7 "2021-07-01T21:28:06Z")

</div>

I accidentally found [this recommendation](https://p.applov.in/playablePreview?create=1&qr=1) from AppLovin:

> If using WebGL, periodically check if WebGL is available if the initial check fails.

It’s quite interesting 🤔

---

<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:** [July 1, 2021, 9:53pm UTC](https://forum.defold.com/t/defold-for-playable-ads/68689/8 "2021-07-01T21:53:19Z")

</div>

> [@aglitchman](#):
>
> periodically check if WebGL is available if the initial check fails

Hmm, what does this mean really? Is WebGL support suddenly going to appear or what?

---

<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:** [July 2, 2021, 9:56am UTC](https://forum.defold.com/t/defold-for-playable-ads/68689/9 "2021-07-02T09:56:45Z")

</div>

> [@britzl](#):
>
> Hmm, what does this mean really? Is WebGL support suddenly going to appear or what?

I think the SDK of an ad network loads and initializes a playable ad in the background, and then Web View appears in front of your app. Maybe WebGL context is not available till that appearance… My colleagues, who use vanilla JS and WebGL for playables, said that they don’t follow this tip and everything runs well.

---

<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:** [July 7, 2021, 10:56am UTC](https://forum.defold.com/t/defold-for-playable-ads/68689/10 "2021-07-07T10:56:51Z")

</div>

Has anyone an issue running the playable in the Facebook preview test?

I get a black screen:

 ![image](https://forum-defold.b-cdn.net/uploads/default/original/3X/6/8/68ce8fc8dbb24822cb13b3a4a39bac7ab4f81502.png)

By the way, the index.html does contain the fbPlayable callback:

```
// FB requires to implement the call `FbPlayableAd.onCTAClick` in the JS code. Use it from the Defold like `html5.run("FbPlayableAd_onCTAClick()")`.
  function FbPlayableAd_onCTAClick() {
    try {
      FbPlayableAd.onCTAClick();
    } catch (e) {
      console.error(e);
    }
  }

```

The game works fine when self-hosting it. It even passes the AppLovin preview tool.

Any clue about where to look for more hints?

---

<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:** [July 7, 2021, 3:58pm UTC](https://forum.defold.com/t/defold-for-playable-ads/68689/11 "2021-07-07T15:58:00Z")

</div>

> [@Lex](#):
>
> Any clue about where to look for more hints?

What does the browser developer console say?

---

<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:** [July 7, 2021, 4:05pm UTC](https://forum.defold.com/t/defold-for-playable-ads/68689/12 "2021-07-07T16:05:43Z")

</div>

This is what I get:

 ![image](https://forum-defold.b-cdn.net/uploads/default/original/3X/f/b/fbe4fc605d8d520ac76317339e5c642910d2a89a.png)

Which point me to

 ![image](https://forum-defold.b-cdn.net/uploads/default/original/3X/3/4/341762fc37d368afac9d78104d55568649621cc9.png)

and

 ![image](https://forum-defold.b-cdn.net/uploads/default/original/3X/0/c/0c8d7b8342da6bbb42ac0bf225e3f277571620e6.png)

---

<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:** [July 7, 2021, 4:24pm UTC](https://forum.defold.com/t/defold-for-playable-ads/68689/13 "2021-07-07T16:24:05Z")

</div>

Not sure what’s going on. It seems like you’re not including all files required by Defold. Perhaps @aglitchman knows?

---

<div class="post-metadata">

**Author:** ![Mathias\_Westerdahl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/mathias_westerdahl/32/228_2.png) [@Mathias\_Westerdahl](https://forum.defold.com/u/Mathias_Westerdahl)\
**Post date:** [July 7, 2021, 4:26pm UTC](https://forum.defold.com/t/defold-for-playable-ads/68689/14 "2021-07-07T16:26:38Z")

</div>

You’re getting a 404 before that error, on the dmLoader.js file.

1. Is the file there?
2. If so, could it be problems with http vs https? E.g. how are you accessing the game? DO you have http or https in your browser window?

---

<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:** [July 7, 2021, 4:29pm UTC](https://forum.defold.com/t/defold-for-playable-ads/68689/15 "2021-07-07T16:29:09Z")

</div>

But if this is for playable ads everything should be in a single html file, even the dmloader.js I think.

---

<div class="post-metadata">

**Author:** ![Mathias\_Westerdahl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/mathias_westerdahl/32/228_2.png) [@Mathias\_Westerdahl](https://forum.defold.com/u/Mathias_Westerdahl)\
**Post date:** [July 7, 2021, 4:30pm UTC](https://forum.defold.com/t/defold-for-playable-ads/68689/16 "2021-07-07T16:30:49Z")

</div>

And, how is the html file loaded?  
http or https?

---

<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:** [July 7, 2021, 4:30pm UTC](https://forum.defold.com/t/defold-for-playable-ads/68689/17 "2021-07-07T16:30:57Z")

</div>

OK my bad, I forgot to mention that I’m using the zip archive format of the playable ad because the single html file is just over 2MB.

Still, this issue is a bit weird because I include all the files that I get from the bundle. Will do some investigation on my end.

---

<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:** [July 8, 2021, 5:51pm UTC](https://forum.defold.com/t/defold-for-playable-ads/68689/18 "2021-07-08T17:51:18Z")

</div>

OK after some investigation, it appears the Ad preview tool is broken when it comes to ZIP archive.  
The preview tool works when using the Ads Manager though. But here are the problems that I have:

 ![image](https://forum-defold.b-cdn.net/uploads/default/original/3X/2/8/280e8b6843c3cfc5fcbd285f4c405348bf228bc0.png)

Not sure if I can get around this issue? Anyway I can make it work without using XMLHttpRequest?

---

<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:** [July 8, 2021, 6:57pm UTC](https://forum.defold.com/t/defold-for-playable-ads/68689/19 "2021-07-08T18:57:30Z")

</div>

> [@Lex](#):
>
> because the single html file is just over 2MB.

Try using aggressive texture profile compression / much lower max texture size allowed while testing?

---

<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:** [July 8, 2021, 8:35pm UTC](https://forum.defold.com/t/defold-for-playable-ads/68689/20 "2021-07-08T20:35:37Z")

</div>

> [@Lex](#):
>
> Not sure if I can get around this issue? Anyway I can make it work without using XMLHttpRequest

I can add an option to the script to build a two-file game: index.html + plus .js file with all game resources. Theoretically, this should help you to pass this check.

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