Defold for Playable Ads

aglitchman · December 19, 2023, 12:44pm

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:

Downloads bob.jar and uses it to build the project for the HTML5 platform.
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.

aglitchman · June 26, 2021, 10:24pm

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.

Lex · June 29, 2021, 11:36am

Great work, thanks!

aglitchman · July 1, 2021, 1:33pm

Version 1.0.2:

Supports building the project on Windows.
Prints version of Java.
Passes FB preview tool test.

AarrrBee · July 1, 2021, 2:38pm

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

aglitchman · July 1, 2021, 3:07pm

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

github.com

aglitchman/defold-playable-ads/blob/master/playable_ad/gulpfile.js#L161

    
      
            });
            cmd.on("error", function (err) {
              // skip
            });
          }
          
          
function buildGame(cb) {
            const cmd = spawn(
              "java",
              [
                "-jar", playableAdDir + "/" + bobJarPath,
                "--email", "foo@bar.com",
                "--auth", "12345",
                "--texture-compression", "true",
                "--bundle-output", playableAdDir + "/" + bundleJsWebPath,
                "--platform", "js-web",
                "--archive",
                "distclean",
                "resolve",
                "build",
                "bundle",

i.e.:

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

aglitchman · July 1, 2021, 9:28pm

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

britzl · July 1, 2021, 9:53pm

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

aglitchman · July 2, 2021, 9:56am

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.

Lex · July 7, 2021, 10:57am

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?

britzl · July 7, 2021, 3:58pm

What does the browser developer console say?

Lex · July 7, 2021, 4:06pm

This is what I get:

Which point me to

and

britzl · July 7, 2021, 4:24pm

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

Mathias_Westerdahl · July 7, 2021, 4:26pm

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

Is the file there?
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?

britzl · July 7, 2021, 4:29pm

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

Mathias_Westerdahl · July 7, 2021, 4:30pm

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

Lex · July 7, 2021, 4:30pm

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.

Lex · July 8, 2021, 5:51pm

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?

Pkeod · July 8, 2021, 6:57pm

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

aglitchman · July 8, 2021, 8:35pm

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.