# FB Playable ads not working with phaser 3?

**URL:** <https://phaser.discourse.group/t/fb-playable-ads-not-working-with-phaser-3/4032>\
**Category:** Phaser 3\
**Created:** [October 23, 2019, 12:03pm UTC](https://phaser.discourse.group/t/fb-playable-ads-not-working-with-phaser-3/4032 "2019-10-23T12:03:11Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Coatl](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/coatl/32/2176_2.png) [@Coatl](https://phaser.discourse.group/u/Coatl)\
**Post date:** [October 23, 2019, 12:03pm UTC](https://phaser.discourse.group/t/fb-playable-ads-not-working-with-phaser-3/4032/1 "2019-10-23T12:03:11Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Coatl](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/coatl/32/2176_2.png) [@Coatl](https://phaser.discourse.group/u/Coatl)\
**Post date:** [October 23, 2019, 3:33pm UTC](https://phaser.discourse.group/t/fb-playable-ads-not-working-with-phaser-3/4032/2 "2019-10-23T15:33:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dranitski](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/dranitski/32/2285_2.png) [@dranitski](https://phaser.discourse.group/u/dranitski)\
**Post date:** [December 3, 2019, 9:48pm UTC](https://phaser.discourse.group/t/fb-playable-ads-not-working-with-phaser-3/4032/3 "2019-12-03T21:48:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Coatl](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/coatl/32/2176_2.png) [@Coatl](https://phaser.discourse.group/u/Coatl)\
**Post date:** [December 4, 2019, 8:26am UTC](https://phaser.discourse.group/t/fb-playable-ads-not-working-with-phaser-3/4032/4 "2019-12-04T08:26:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dranitski](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/dranitski/32/2285_2.png) [@dranitski](https://phaser.discourse.group/u/dranitski)\
**Post date:** [December 4, 2019, 10:29am UTC](https://phaser.discourse.group/t/fb-playable-ads-not-working-with-phaser-3/4032/5 "2019-12-04T10:29:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Coatl](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/coatl/32/2176_2.png) [@Coatl](https://phaser.discourse.group/u/Coatl)\
**Post date:** [December 4, 2019, 10:42am UTC](https://phaser.discourse.group/t/fb-playable-ads-not-working-with-phaser-3/4032/6 "2019-12-04T10:42:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dranitski](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/dranitski/32/2285_2.png) [@dranitski](https://phaser.discourse.group/u/dranitski)\
**Post date:** [December 4, 2019, 1:39pm UTC](https://phaser.discourse.group/t/fb-playable-ads-not-working-with-phaser-3/4032/7 "2019-12-04T13:39:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![shniqq](https://avatars.discourse-cdn.com/v4/letter/s/958977/32.png) [@shniqq](https://phaser.discourse.group/u/shniqq)\
**Post date:** [May 5, 2020, 3:01pm UTC](https://phaser.discourse.group/t/fb-playable-ads-not-working-with-phaser-3/4032/8 "2020-05-05T15:01:38Z")

</div>

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.](https://phaser.discourse.group/t/facebook-playable-ads-how-to-load-texture-atlas/6208)  
Or maybe @Coatl did you end up using atlases and have a solution?

---

<div class="post-metadata">

**Author:** ![dranitski](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/dranitski/32/2285_2.png) [@dranitski](https://phaser.discourse.group/u/dranitski)\
**Post date:** [May 11, 2020, 11:28pm UTC](https://phaser.discourse.group/t/fb-playable-ads-not-working-with-phaser-3/4032/9 "2020-05-11T23:28:59Z")

</div>

seems youve already found a solution [there](https://phaser.discourse.group/t/facebook-playable-ads-how-to-load-texture-atlas/6208/2)

---

<div class="post-metadata">

**Author:** ![Ahmad-fares2002](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/ahmad-fares2002/32/7336_2.png) [@Ahmad-fares2002](https://phaser.discourse.group/u/Ahmad-fares2002)\
**Post date:** [January 31, 2023, 3:23pm UTC](https://phaser.discourse.group/t/fb-playable-ads-not-working-with-phaser-3/4032/10 "2023-01-31T15:23:44Z")

</div>

could you share the webpack problem you had?

---

<div class="post-metadata">

**Author:** ![Ahmad-fares2002](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/ahmad-fares2002/32/7336_2.png) [@Ahmad-fares2002](https://phaser.discourse.group/u/Ahmad-fares2002)\
**Post date:** [January 31, 2023, 3:23pm UTC](https://phaser.discourse.group/t/fb-playable-ads-not-working-with-phaser-3/4032/11 "2023-01-31T15:23:46Z")

</div>

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