يتمّ عرض هذا الموقع بشكل أفضل في متصفّح حديث مع تمكين JavaScript.

[JS] Playable Ad: Rendering issue on iPhone Facebook App

warmanw

Hi guys,

We are building our first playable ad with spine animations.

Output file is single HTML file with inlined JSON and images.

We include the spine-ts runtime into the HTML.

We use 3.6 runtimes (we had issues inlining files in 3.8 )

we use modified export from 3.8.

Currently all works fine on android facebook app or on desktop

But on iOS facebook app we get attachments visible and white at the start, regardless of their visibility in the animation.

Note that attachments that are visible i animation are normally shown. the background itself is also in the spine, so why it is not white??

Nate

The latest 3.6 runtimes are more than a year old and we probably won't do fixes on such old runtimes code, so my initial reaction would be to try to use the latest (currently 3.8). Can we help you get it working with 3.8?

warmanw

That was my initial reaction too. but devs said inlining was removed starting from 3.7

will be back with more info.

Nate

Everything can be inlined in 3.8: the runtime JS and even images, data (JSON or binary), and atlas data. Here's the commit in 3.8 for supporting data URIs:
https://github.com/EsotericSoftware/spine-runtimes/commit/8e0a2e0c75e43e83e7e6426039805519cedac329#diff-048b021a4bd36c00f0ad023061cb5837

Here's examples of the Spine Player using inlined skeleton data, images, and atlas:
spine-runtimes/spine-ts/player/example at 3.8
You can see it in action here:
http://n4te.com/x/7520-6cuO.txt.html
If you view source, you'll see everything is in the file except the runtime, but you could just replace the runtime script with inline JS. You may not be using the Spine Player, but the same stuff can work with other spine-ts code. Just let us know if we can help! :cooldoge:

warmanw

Thanks for the time Nate.. will try to fix the issue 3.8 ourselves if no success will write back here.

ok we updated runtimes. and using correct version of json.

On androids and iPhone7 browsers it opens nicely on.While on iphone10 it doesnt load or what. Whole screen is white.

No errors are thrown.

I can share the html file via email. if you guys by the chance have time to check it.

Nate

Hmm, that's odd. Do our demos work where your stuff doesn't? Eg here or here.

Sure, please email the HTML and we'll check it out ASAP!

warmanw

We checked also your examples but it seems they also not work on Facebook app.. on mobile

Any idea where we can look at?

Mario

I'm afraid I have zero experience with JS playbale ads. Is there any way to debug the JavaScript execution when the ad executes on the device? Without that kind of debugging it's going to be impossible to say why things are failing.