Has anyone tried making a playable ad in playcanvas for facebook?
Recommended ad size under 2MB. An empty published project from playcanvas is taking around 960 KB which is almost half of the recommended size. Is there a way to have more optimized engine footprint?.
Any kind of help would be greatly appreciated.
Thanks Uday
Is that 2MB restriction compressed or uncompressed? Just tested with a black project template and it comes to 256KB downloaded for the client when it’s all gzipped by the server:
It has to be a single html file encoded with base64 and inline with javascripts. Thats what I understood from the above link.
Btw thanks for the quick response.
Have you managed to find a way to package the app as a single HTML file? It’s something other users are having trouble with.
With playcanvas we didn’t try to package, but prior to playcanvas we used Google web designer to create playable ads where were successful in generating a single html by inlining all external references into the index.html.
So we are assuming we could do something similar once we have published project from playcanvas.
In which case, to answer your question directly: If the engine code is inlined with the HTML, it should be compressed by the server if GZIP is enabled (learn more about this here: https://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/). This should compress the 960KB of engine code to be about 233KB.
AFAIK, the 2MB recommended size is referring to the amount of data that the user will download which will be 233KB for the engine, not 960KB.
TL;DR enabled gzip on the server where you are hosting the ad and use Chrome’s developer tools to measure how much is downloaded by the user, not the package size on the file system. 
I recommend trying this will a very simple project first. From what I can gather, it’s not easy to manually inline everything into a single HTML file with PlayCanvas.
Hi, thanks for all your tips so far. I’ve been looking into this as well and unfortunately we can’t make any changes to the Facebook ad server. We can’t use any dynamic asset loading or HTTP requests either.
When uploading an ad it only accepts a single HTML file only with a size limit of 2 mb. Taking all this into consideration is it possible for everything to work even if we manage to inline everything into a single HTML? Will there be any possible issues that come up after inlining the engine files?
Are you using the PlayCanvas editor or are you going the pure code route?
Thanks for your quick reply! I am using the editor and then trying to inline everything post build.
From my understanding, that will be difficult given the number of files involved. If you look at something the like the Flappy Bird project https://playcanvas.com/project/375389/overview/flappy-bird, fork it and export the build, you will see what I mean.
It looks like you should be able to do this with a script via several passes. There’s config.json that has URLs to the resource files (audio, images etc) that will need to be fixed up to use base64 instead and then that can be inline in the HTML file along with all the other JSON and scripts.
Issues that I will see are having to tweak the loading and setup scripts to use direct JSON data rather than an async load to a file.
It actually looks a lot more doable than I first looked at it as I originally thought that all the materials were separate JSON files.
You’re right, the number of files make it very difficult, especially since if we need to make changes in editor or assets we might have to redo all the manual inlining every single build. As of now I’m trying to use Node.js and various grunt plugin scripts to inline everything. Will update here if I’m successful or learn anything that could be of use.
Actually, I make it 240KB. 
Notice I’m using the embed link otherwise you pick up the ‘bottom bar’ which isn’t part of the app. This is of the form:
https://playcanv.as/e/p/U2GpmgH9/
Notice the /e/
1 Like
Oops! 
2020020200202
1 Like