Defold for Playable Ads

This toolset 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 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 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. And share your results!

What is a playable ad?

A playable ad 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). Usually, the main requirement for your ad is to be a single HTML file, 2-5MB in size.

How to shrink your game size

  1. Use the Defold App Manifest generator to keep only the necessary parts of the engine.
  2. Keep only the core mechanic of your game and all assets that it requires.
  3. Toy with the Project / Compress Archive option. Zstd, used by this tool, compresses plain data better than a compressed LZ4 stream.
  4. Install the latest version of the Zstd executable (i.e. Zstd 1.5.0 has better compression than Zstd 1.4.x).
  5. Contribute to this project and help to find new ways to do better: encode/decode binaries into/from text, compression, or even build the Defold engine with the -Os switch etc.

Ideas to implement

  1. Make an editor script to simplify the build process.
  2. Make an HTML5 template for all ad networks.
  3. Test the performance of a playable ad made with Defold.
  4. Implement MRAID and test an ad in Unity Ads.
20 Likes

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

Great work, thanks!

2 Likes

Version 1.0.2:

6 Likes

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

3 Likes

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

i.e.:

      "--platform", "js-web",
      "--settings", "my-settings.ini",
      "--archive",
2 Likes

I accidentally found this recommendation from AppLovin:

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

It’s quite interesting :thinking:

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.

3 Likes

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

I get a black screen:

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?

What does the browser developer console say?

This is what I get:

Which point me to

and

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

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?

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

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

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.

1 Like

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:

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

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

1 Like

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.

2 Likes