How to upload on FB Playable > 2 mb

Post reply
0 favourites
From the Asset Store
Take And Upload Photo and screenshotting
$12 USD
You can upload screenshots and photos to your server very easily.
ArteeStudioCR's avatar
ArteeStudioCR

  • If im exporting my game as playable into 1 HTML file, it gives me 4mb file. that is not complete with the requirement of facebook that asking file less than 2mb

    But we are also can upload ads as zip files

    Probably I could upload the game as zip, but how to do it?

    Do we need to just export it as a usual HTML 5 game?

  • I tried an empty game, with just one simplest sprite, touch plugin, and facebook plugin, with almost no code, and it gives me 1.4 MB playable file.

    it is does not have errors about the size on the facebook, but there is still just a blank screen.

    and actually, it is just a blank game, it is useless itself. if to add a code to it, the size goes higher than 2mb. a

    Ashley please tell me, is it possible to use construct 3 for making playable ads for facebook?

    it is a very important question for me now, because I have a job offer where I will need to do this kind of ad, and if it is not possible, I will skip this offer

  • when you export the file, try taking the spritesheet you get from the project and run it once or 2 times through the tinypng dot com software. it converts rgb format images to cmyk format colors if the image isn't to complex like shadows etc will look the same and save u some 40-80% file size on that image.

    that can bring ur project down to the size requirements.

    depending on what you are loading you said an advertisment... i would use a iframe and import the image/advertisement from a outside source. that way your project should not contain nothing inside. but just the event sheet.

    1mrpaul1 i just did a test on my end with a 2mb multiplayer game .. and the exported playable ad for facebook is 500kb there is something weird you are doing on your end.

  • it converts rgb format images to cmyk format colors if the image isn't to complex like shadows etc will look

    cmyk colors scheme has more size

    anyway, the code itself costs more than 3 mb plus 500 kb sounds plus 500 kb images

    I hope you know that you got to see the uncompressed size of the html5 file of the playable ad? there is the problem, construct making big code files

    if to upload the game as zip file, we need different game structure

    And anyway, if to handle the limits, there is just blank screen. Facebook is blocking construct games probably

  • > it converts rgb format images to cmyk format colors if the image isn't to complex like shadows etc will look

    cmyk colors scheme has more size

    anyway, the code itself costs more than 3 mb plus 500 kb sounds plus 500 kb images

    I hope you know that you got to see the uncompressed size of the html5 file of the playable ad? there is the problem, construct making big code files

    if to upload the game as zip file, we need different game structure

    And anyway, if to handle the limits, there is just blank screen. Facebook is blocking construct games probably

    facebook shouldn't block construct games, as the game export is html5 not .c3p

    in my test i did export as a playable ad tho not as a facebook game. il test it again and come back to u but it seems u are trying to upload a full game now and not just an advertisement.

    however last time i checked instant games on facebook, they where taking in consideration the zip file size and not the size unpacked. maybe they changed that.

    cause on my 2nd test now i did got a 800kb instant game zip file but unpacked is 2.4mb considering that the c3runtime.js is 1.7mb the rest of the game is around 700kb images and code. im guessing in order to create a very small facebook game now, you need to host everything in ur project externally. that is the only solution i can think of.

    (as for the cmyk profile image yes it is larger, but when u have pngs with transparency u actually save size just try running that image through the image recompressor once exported ul see it works it might be something else and not cmyk but that is how i seen the file profile once imported in photoshop as the original file was RGB color and after conversion turned into cmyk but size difference was around 80% less heavy.)

  • A new empty project exported to HTML5 with advanced minification is just 210kb zipped. Even uncompressed it's about 500kb. Anything above that is the content of your project, which is up to you, not Construct.

    The technical restrictions on single-file Facebook Playable Ads are strange and contradictory. They set a maximum file size, and then also impose rules that cause the file size to increase, such as having to encode binary resources as text in base64. Even so, a new empty project exported as a playable ad with advanced minification is 166kb compressed, or again 500kb uncompressed.

    Facebook have been impossible to get hold of for any questions I had or for any technical support with quirks with their tooling. Do they count the compressed size? If not why not, since they seem concerned about the file size? Compressing it would be an obvious thing to do. IIRC, there was an option to use a zip of a HTML5 export; try using that if you can. Otherwise I'm afraid you will just have to work within the confines of their (partially documented and contradictory) limits. As far as I can see the engine overhead is reasonably low given how many features it has - and is certainly less than the 1.4mb you stated - so you'll just have to be careful with every single thing you add to the project.

  • A new empty project exported to HTML5 with advanced minification is just 210kb zipped. Even uncompressed it's about 500kb. Anything above that is the content of your project, which is up to you, not Construct.

    The technical restrictions on single-file Facebook Playable Ads are strange and contradictory. They set a maximum file size, and then also impose rules that cause the file size to increase, such as having to encode binary resources as text in base64. Even so, a new empty project exported as a playable ad with advanced minification is 166kb compressed, or again 500kb uncompressed.

    Facebook have been impossible to get hold of for any questions I had or for any technical support with quirks with their tooling. Do they count the compressed size? If not why not, since they seem concerned about the file size? Compressing it would be an obvious thing to do. IIRC, there was an option to use a zip of a HTML5 export; try using that if you can. Otherwise I'm afraid you will just have to work within the confines of their (partially documented and contradictory) limits. As far as I can see the engine overhead is reasonably low given how many features it has - and is certainly less than the 1.4mb you stated - so you'll just have to be careful with every single thing you add to the project.

    yeah, 2mb for html got to be without compression

    it is just impossible to make something normal in the 2mb, base 64, which, as you said makes images even bigger

    have all code in one HTML file and put all images and sounds into separated asset folders, when exporting facebook playable, will be a possible solution

    As long as you said, base 64 makes the size of the images bigger. and images can't be minified

    So, minified code and compressed png images will keep the size of the game inside 5 mb

    Your current playable ads working without errors (it is still not working in the facebook console, but maybe will work in the real advert. company)

    But when I'm trying to export the game as usual html5, with asset folders and upload it as zip, I'm getting these errors

    Where again this blocked "blob: data"

    JS::call("DevsiteEventLoggerUtils", "register", ...) did not fire because it has missing dependencies.

    DevsiteEventLoggerUtils is ready

    __call__DevsiteEventLoggerUtils.register__46 is waiting for __elem_072b8e64_0_3_bx

    __elem_072b8e64_0_3_bx is not defined

    Subsequent non-fatal errors won't be logged; see fburl.com/debugjs.

    errorListener NedATFsdorL.js?_nc_x=SuOiPW6rEN4:58

    NedATFsdorL.js?_nc_x=SuOiPW6rEN4:43 [Report Only] Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src *.facebook.com *.fbcdn.net *.facebook.net *.google-analytics.com *.google.com 127.0.0.1:* 'unsafe-inline' blob: data: 'self' connect.facebook.net".

    b.construct NedATFsdorL.js?_nc_x=SuOiPW6rEN4:43

    NedATFsdorL.js?_nc_x=SuOiPW6rEN4:43 [Report Only] Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src *.facebook.com *.fbcdn.net *.facebook.net *.google-analytics.com *.google.com 127.0.0.1:* 'unsafe-inline' blob: data: 'self' connect.facebook.net".

    b.construct NedATFsdorL.js?_nc_x=SuOiPW6rEN4:43

    NedATFsdorL.js?_nc_x=SuOiPW6rEN4:43 [Report Only] Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src *.facebook.com *.fbcdn.net *.facebook.net *.google-analytics.com *.google.com 127.0.0.1:* 'unsafe-inline' blob: data: 'self' connect.facebook.net".

    b.construct NedATFsdorL.js?_nc_x=SuOiPW6rEN4:43

    inpage.js:1 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.fbsbx.com') does not match the recipient window's origin ('null').

    _postMessage inpage.js:1

    contentscript.js:1 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.fbsbx.com') does not match the recipient window's origin ('null').

    _postMessage contentscript.js:1

    contentscript.js:1 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.fbsbx.com') does not match the recipient window's origin ('null').

    _postMessage contentscript.js:1

    box2d.wasm.js:1 Failed to load resource: the server responded with a status of 404 ()

    fbsbx.com/developer/tools/playable-preview/preview-asset/style.css:1 Failed to load resource: the server responded with a status of 404 ()

    supportcheck.js:1 Failed to load resource: the server responded with a status of 404 ()

    fbsbx.com/:1 Access to script at 'https://www.fbsbx.com/developer/tools/playable-preview/preview-asset/scripts/main.js' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

    fbsbx.com/developer/tools/playable-preview/preview-asset/scripts/main.js:1 Failed to load resource: net::ERR_FAILED

    fbsbx.com/:1 Access to script at 'https://www.fbsbx.com/developer/tools/playable-preview/preview-asset/scripts/register-sw.js' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

    fbsbx.com/developer/tools/playable-preview/preview-asset/scripts/register-sw.js:1 Failed to load resource: net::ERR_FAILED

    fbsbx.com/:1 Access to script at 'https://www.fbsbx.com/developer/tools/playable-preview/preview-asset/scripts/offlineclient.js' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

    fbsbx.com/developer/tools/playable-preview/preview-asset/scripts/offlineclient.js:1 Failed to load resource: net::ERR_FAILED

    box2d.wasm.js:1 Failed to load resource: the server responded with a status of 404 ()

    supportcheck.js:1 Failed to load resource: the server responded with a status of 404 ()

    style.css:1 Failed to load resource: the server responded with a status of 404 ()

    fbsbx.com/:1 Access to internal resource at 'https://www.fbsbx.com/developer/tools/playable-preview/preview-asset/appmanifest.json' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

  • 1mrpaul1 here is a quote from instant games FAQ

    instant games FAQ for devs

    as i said in my 1st post, the solution is to have the "loader" be under 1 mb or loading in 5 seconds or less but the content inside can be 200mb that means, you can have a pre-loading screen and then fetch inside it the project u really want to load, from a different hosting location. similar to a iframe or a download manager.

    the simplest solution would be for client version protocol automatic update...

    meaning you upload the same game with version 1.0 loads instant since will be empty.

    and then request the latest version 1.1 and the update will happen on client side without you having to modify the instant facebook game hosted client file.

    hope this all thing makes sense and helps you.

  • GeorgeZaharia - Instant Games are a different service to Playable Ads. They have different requirements.

    1mrpaul1 - you'll have to contact Facebook about issues with their service, their restrictions, or their test tool. It's all under their control, and there's nothing we can do about it. As far as I'm aware, Construct complies with the restrictions stated.

  • 1mrpaul1 - you'll have to contact Facebook about issues with their service, their restrictions, or their test tool. It's all under their control, and there's nothing we can do about it. As far as I'm aware, Construct complies with the restrictions stated.

    facebook can live without us very well, we need them, so, if you can't help, they will also not. and I know that many C3 users told Facebook about the issue a long time ago, but nothing changed

    it is very sad. hard to find a job for C3 developers, we are needed only for making playable ads, but without Facebook, can't even do this job.

    while C3 can be a powerful tool for making payables, especially with 3D

  • hey there guys, i kept looking at this issue with playable ads it seems they have unlocked more than 2mb now 

    For Zip Files
A playable ad in a zip file format is currently supported on all placements on iOS and Android.
Zip archive should contain an index.html file located at the root, for example:

./index.html
Note: Resources may be placed anywhere in the directory structure, as long as they are referenced relative to index.html. For example, the following file:
./assets/splash.png
must be references as:
<image src="assets/splash.png"/>
Any html files and JavaScript files in the zip archive should have the same constraints, although FbPlayableAd.onCTAClick() only needs to be called in one place.
The total size of uploaded files may not exceed 5MB.
The number of files inside the bundle may not exceed 100.
The size of index.html file should not exceed 2MB.

    it seems they support playable ads zip files that have 5mb and a bundle of maximum of 100 files inside it (but only limits the playable ads being visible on ios and android devices only, that means no desktop playable ads).

    hope it helps here is the link

    specifications for playable ads facebook

    now the issue i see is... how do we export using C3 playable ads as a zip? cause if we export the regular c3 project as html im guessing it won't have the 

    FbPlayableAd.onCTAClick()

    Ashley is there a way of not having the images as base64 string in current playable ads feature?

    im curious about it myself also, i don't really need the html5 ads i can find works around this, but i think would help the community that rely on this feature to get commissions which would be awesome.

    based on their specification page it seems the playable ads work the same as instant games zip files or direct 1 file with limitations of course but ... having 5 mb file range ... now sort of fixes that 2mb file problem.

    if the playable ad is not using any custom plugin the current export option should export under 2mb files.

    1mrpaul1 can i ask, how many custom plugins are you using in your playable ads? cause a minigame should be doable with just default event sheet and images using C3 if you follow those rules you should get a very small or atleast around 2mb playable ad.

  • GeorgeZaharia

    i have a technical task what i got to do and what images to use.

    from a big company that doing playable and other ads a lot. and have a vision how it got to look.

    i needed to use spine, but to save size I redone all animations in the construct's timeline, that isn't easy if you are doing skeletal animation of the human body, hard to recreate, add new characters with this animation. it also makes code bigger.

    what I can exclude - box2physics, which took about 500-600 kb.

    all other plugins took 10-20 kb

    But again, as I said, code can be minifying.

    what we need, the same playable export as now, but separated folders for sound and for images. It can help to keep the main, HTML file inside 2mb.

    it is a weird requirement from facebook, 2mb HTML file, but they are monopolists and don't care about users too much, really nothing to do with it

    google requires html5 file with the 1mb size by the way...

  • GeorgeZaharia

    i have a technical task what i got to do and what images to use.

    from a big company that doing playable and other ads a lot. and have a vision how it got to look.

    i needed to use spine, but to save size I redone all animations in the construct's timeline, that isn't easy if you are doing skeletal animation of the human body, hard to recreate, add new characters with this animation. it also makes code bigger.

    what I can exclude - box2physics, which took about 500-600 kb.

    all other plugins took 10-20 kb

    But again, as I said, code can be minifying.

    what we need, the same playable export as now, but separated folders for sound and for images. It can help to keep the main, HTML file inside 2mb.

    it is a weird requirement from facebook, 2mb HTML file, but they are monopolists and don't care about users too much, really nothing to do with it

    google requires html5 file with the 1mb size by the way...

    i asked about the size images/plugins cause if the business u working for can let you rescale down the images and lower the resolution of the playable ad, then u might be able to save some file size, as using a 16px grid size images, compared to a 256x one is a whole lot difference in size around ~70% more or less. about spine you could export spritesheets at lower scale size of the character and that could save some file size also not having to use spine plugin which is pretty big.

    when i say lower size images i mean instead of exporting a 1080p playable ad do a 400x200 one instead. or something similar. would have the same quality just small images. really small.

    also i read the playable ads guides and it seems they have a "zip package playable ads" capability that allows up to 5mb and 100 files in that 1 playable ad.. but not sure how that will be exported from C3 since current export for playable ads is just single file html5

    ** note... resizing the images to such a drastic difference might result in quality loss, unless the original files are vector images. but not sure how spine does the rescale export.

    if you find a solution to this let me know would love to know how you achieve it, and maybe a lot of other people around community.

  • ** note... resizing the images to such a drastic difference might result in quality loss, unless the original files are vector images. but not sure how spine does the rescale export.

    of cause, I'm making a lot of work with images

    but I can't make pixel art graphics.

    and compression, as in the png, doesn't work when you compile the game as playable. otherwise, the size of the images seems increasing because of the base 64 format.

    this is why I'm asking ability to use graphics from asset folders, how facebook asking

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • Seems like a perfect place for svg.

Post reply
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)