Playable Ads made with Defold? For Facebook Ads?

Questions
#3

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

#4

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.

2 Likes
#5

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:

    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:

5372a43707.png834Ɨ308

and there is some JS code in index.html:

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?

#6

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.

2 Likes
#7

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!

3 Likes
#8

Updated 2021-06-22: look at this topic.

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.

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

If you succeed, Iā€™ll make a complete asset out of this project.

10 Likes
Happy 2021!
#9

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, 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ā€

2 Likes
#10

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

Now going to try it on my ā€œrealā€ gameā€¦

4 Likes
#11

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

2 Likes
#12

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 :grinning:

Here is the link: 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:

51f1513e0c.png1456Ɨ1394

10 Likes
#13

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ā€¦
10 Likes
#14

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

You can check it in the Facebook Feed by this link: 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
photo_2019-04-26 07.18.02.jpeg591Ɨ1280 70.4 KB

9 Likes
#15

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
Screenshot 2019-04-30 at 09.02.43.png1130Ɨ468 69.3 KB

ā€œ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!

11 Likes
Back to Defold after 2 years, "Bouncy Catapult" hypercasual prototype
#16

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ā€¦

3 Likes
#17

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.

2 Likes
#18

HI! Still works? Can you share the engine_template.html?

#19

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

Iā€™m running the following commands:

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?

#20
1 Like
#21

What a shame, playable ads can be very efficient (judging by your own benchmark :slight_smile: ).

Iā€™ll try to fix it then. Any pointer about where the error could come from?

#22

I added info to the README to point that I didnā€™t update the project for the newest Defold versions.

To fix it you should update html5/engine_template.html + the code in the gulpfile.js.

Updated 2021/07/01:
For the newcomers: look at the new topic about this asset.

2 Likes