FB Playable ads not working with phaser 3?

Hello, I am trying with my colleagues to complete the process of placing playable ads on Facebook. The game is made with Phaser 3 webpack and everything works fine in the browser, but in the FB ad preview, there is just a black quadratic screen. It means, the game starts succesfully and the initial scene is created (the game config has black background and size 1000x1000), but no image asset gets loaded, or the ‘onload’ event (or similar) doesn’t fire. There are even no errors in the console when running it in the preview. The game just stops prior to loading.

At first, I have tried to load the assets in the normal way, using load.image or load.multiatlas, but it didn’t work too (throwing some facebook errors). Currently, I am using textures.addBase64 method with all the assets in one .js file, or even in the index.html itself. The game is now simplified to the point of just loading and displaying three images in the browser. But even this doesn’t work in the FB preview. Phaser succeeds to start the image loading process, but then something blocks it from completing it.

We have sent reports to facebook, but they are not actually responding for weeks. I am becoming somewhat desperate.
As for the initial question whether playable ads could work with phaser 3 - they can, because certain companies do use it, but maybe they modified the phaser 3 code?

1 Like

OK, it seems we have resolved the problem. We had simply an error in webpack config.
Anyway, normal images don’t seem to work, they are needed in base64 format. (Either a special file, or inline in the index.html.) The textures.addBase64 method is used to load them.

1 Like

Can you please share what you fixed to run playable on facebook preview page?

I have an issue with that as well - my playables work fine in browsers and on devices as well as in another ad networks but show nothing in Facebook playable ad preview window

How do you load the images? That’s the main problem, as I said. Skip the loading in the preload phase and use textures.addBase64 method in the create phase. Don’t do any other stupid mistakes (as I did) and you are good to go, I suppose.

1 Like

thanks, what about sounds? Do you use sounds in your playable and how do you load them if so?

I haven’t used sounds in playables so far. I suppose, base64 format is needed for them too, but that’s just my speculation.

1 Like

The problem was in XHR requests when loading assets. XHR requests inside Facebook playable preview are just timing out without server-side errors, but in my case XHR timeout was zero so the Playable hanged on preloading state

hey @dranitski, I know this is an old thread, but could you tell us how you got around the XHR problem? We are facing the same issue… See here.
Or maybe @Coatl did you end up using atlases and have a solution?

seems youve already found a solution there

could you share the webpack problem you had?

Hello guys,
if you made any playable could I have a template to use?