HTML5 target stuck at loading assets if sound/font files included

Help
#14

But it’s better than the whole game broken… haha

Now I have a workaround, maybe this is useful for who need it fast/waiting for this fix:

  1. Use haxe-howler, download here : https://github.com/adireddy/haxe-howler, or

    haxelib install howlerjs

  2. While the stuck caused by generated code of OpenFL, we must do something about assets type:

template type of assets can prevent the game to try to load assets at the preloader.

and dont forget to include dependency

<dependency path="dependencies/howler.min.js" />

That’s it, good luck!

#15

I’m experiencing the same bug despite the fact I’m not using any sound.

On old generation tablet, loading get stucks.

#16

Can you tell if a JavaScript error is occurring, or what might be going on?

There was a fix recently in Lime, which included a patched “Std.is” implementation from the Haxe dev branch, on Safari it would fail, while other browsers worked fine. It’s possible that an older tablet could also be vulnerable to this issue, I’m not sure which versions you’re using

#17

IPad 2 but a quite recent IOS version and a Samsung Galaxy Tab 3.

On the Samsung Galaxy 3, I can’t get a click whereas the hovering works fine. Since I’m using the lib for production. I think I should downgrade to the latest stable lime instead of using the alpha version. However, I don’t know which is the latest ? Is it any 2.0 stable release ?

#18

@Masadow Are you using Flixel? because it does use sound (beep/flixel.ogg/wav) even when you don’t. If you are, the solution is to delete the sound files from your assets (it won’t cause errors AFAIK). I had the same issue on openfl-html5 many months ago.

About the thread (sound and HTML5) I saw (over FGL) that .m4a files might make good candidates for html5 stuff (with little tweaking, mostly instead of the .mp3 format which is legally problematic). Loading properly formated .ogg / .m4a files per html5 browser target without it breaking should be theoretically possible.

#if Android-device-name

might be useful (only for the tricky devices of course). It might also help with other device-specific issues (like lag).

#19

I’m seeing both of these issues occur for me (font and sound causing game not to load). First, I’ll address the font side since I’ve got temp fix.

Fonts are actually working just fine for me in every web browser (Chrome, Firefox, Safari, IE on all platforms) except when using Android. The game never finishes loading here. It does generate the correct JS (as mentioned above in previous post) and does render correctly on Android if you can get beyond the loading issue.

The problem seems to lie in Preloader.hx (or one of those related classes). I think it’s attempting to do a load on the TTF files and hangs. If you modify function load() in Preload.hx, you can add a case in the switch to handle fonts:

#if js
case FONT:
urls[ i ] = null;
types[ i ] = null;
#end

By setting these to null, it seems to skip them properly later in the pipeline and allows Android to complete the load and start the game along with all the other browsers. I’m assuming we wouldn’t want fonts to be part of the load process anyway, since they are embedded into the js code and there’s nothing to load. Hopefully this helps some openfl devs get to the issue quickly.

As far as sound goes, I only have issues on Windows mobile devices (IE11). Windows phones will not finish preloading if ANY audio is present. I have the load problem with other browsers depending on what sound formats are provided; for instance Chrome on PC will do this if an OGG is not provided (even if MP3/M4A is). Again in Preloader.hx, I see it is stripping the extension and replacing it with OGG only (maybe windows mobile has a problem with this?). This should be okay since the browsers (with soundjs) will fall back to other formats, but if you don’t provide fallback formats then the preload will not finish always complete.

I’d like to provide OGG and fallback to M4A (but I saw elsewhere in soundjs’s alternate extension array M4As are not present) or just go solo M4A, so not sure if that will work in openfl (yet?). I don’t care about MP3 all that much since M4As and OGGs are better for web. I don’t want to get into the sound playback support boat in this thread, so I’ll seek out a more appropriate place to continue, but it is related.

So hopefully some of the testing I’ve done this week will help some devs figure these hiccups out. Can answer more questions or provide more if needed : )

Happy hunting.

#20

Hi @jonnym

Thanks for the rundown

When we use webfonts, they are not loaded initially. If you use a sample such as “AddingText”, which sets text once and moves on, it won’t work properly. Only if the text is rendered after the web font is available will it look right, so if you disable the loading, it would depend on your project and how it is written, whether you will notice the problem. I suppose we should try and see if there is a solution for waiting for web fonts to load on Android, or (worst-case) selectively disable for the user-agent

We’re using SoundJS right now, which is really finnicky about sound loading, yes, it does expect WAV, MP3 and OGG of each audio file, since none of these three formats can apply to all browsers, but I understand how this breaks down once you get into other formats like AAC, M4A, etc. I would love to see improvements in this area, I’m not sure if a newer SoundJS lib would fix it, or if we could patch it, but ultimately I would like to have an implementation of the Lime AudioSource API done in Haxe code instead using an external library, long-term I think it will give us more flexibility and feel less helpless when it comes to problems

Audio issues HTML5 target (IE Edge vs. IOS Safari)
#21

Thanks for the reply! So, when the font is embedded via the style tag in index.html (and the files moved into bin/), is this all the link-age that happens? In other words does the load() call do anything for font files, or is the browser handling this autonomously? Also, is it recommended to provide all font types (eot, woff, svg, otf)? I see all the warnings in console. If I provide any otf files, the project fails to compile.

So with only TTFs provided, it all works okay when not on Android. On Android, I can trace out that the load callback only finishes my image and sound file, and never any fonts. So I only ever end up seeing my trace (“loaded 2/5 assets”) from Preloader:update(), then it will hang indefinitely. Now if I check the same trace in another (working) browser, I see it get to “5/5” and then trace out from the Preloader:start() function.

Here’s some additional info for my process:
using openfl 2.1.7 (but same results previous versions).

application.xml:
<!-- assets -->
<assets path="assets/img" rename="img" type="image" />
<assets path="assets/fnt" rename="fnt" type="font" />
<assets path="assets/snd" rename="snd" type="sound" />

Then, in my assets directory I have:

  • img/myImage.png
  • fnt/myFirstFont.ttf
  • fnt/myFirstFont-bold.ttf
  • fnt/mySecondFont.ttf
  • snd/mySound.ogg

Then in my source code, I just have someText.defaultTextFormat = new TextFormat( “myFirstFontName” );
When I hit that line, I get no font for about <1 second, then all the fonts automatically render and work. (this sounds like what you were describing).

That’s it. As far as (pre)loading goes, it’s just using clean openfl and I haven’t done anything before the game starts, which won’t happen on my Android device. So if there is something else we should be doing or if there are more tests you’d like me to try, happy to help!

Thanks for your hard work in openfl!

UPDATE: So it seems you can get around the load stalling issues for both audio and fonts by telling your libraries to not preload by turning embedding off. Fonts and audio still work in all web browsers without changing any code. For now, this is a decent approach anyway because you typically don’t want to pre-load all your audio.

application.xml:
<assets path="assets/fnt" rename="fnt" embed="false" />
<assets path="assets/snd" rename="snd" embed="false" />

Not the end-all solution, but okay for now if you are stuck with this problem until a proper fix is implemented.

#22

And to rule out the image/sounds as problems, I stripped it to only do fonts to see the same results. If I remove fonts from my assets in the xml, it all loads correctly. If I manually copy the style tag into the HTML, the fonts will again work (which is why the Preloader:load() call seems independent to me).

#23

Yep, the CSS styles for including the webfonts is handled in the page, without being connected to the preloader. As I said, though, browsers will perform their own loading, as they wish. In a traditional website, the text will replace with the webfont when it loads, cool, but when you use canvas and blit, it isn’t that simple and you may get stuck with the wrong font rendered.

The “preload” for fonts really is just trying to detect when the fonts have been actually loaded. That’s all we need to do, I’m sure there hopefully should be a way to reliable do this with the Android stock browser as well.

We’re using a utility that is able to export out the WOFF, SVG (etc) formats, it didn’t say it didn’t support OTF, but perhaps it does not. Personally, I would prefer to have something written in Haxe for this, so we don’t have the large binaries and so we can patch this stuff. Freetype (which we use within OpenFL) should handle OTF, so if we had the algorithms down for generating these additional webfont types, we could hook that up and handle more input fonts, probably. This is better than nothing, though, generating webfonts online instead is a pain

#24

This may be migrating somewhat to a different topic regarding sound support, but I’m gonna add this here since it’s related and can always start a new thread.

I tested sound support across all platforms/browsers using the Sound class (which uses SoundJS). OGG, M4A, and MP3 files all work as they should (hooray!) as long as they are specified using unique file names, like the following:

  • sound01.ogg
  • sound02.m4a
  • sound03.mp3

So if I play any of these files, they will work fine. Now if I have sound files with the same name to engage in a fallback scenario:

  • sound.ogg
  • sound.m4a
  • sound.mp3

This part is a bit confusing. If the sound file is supported in a browser, like OGG and Chrome, then it will only play that one sound. If using Chrome, it will continue to try to play the OGG file, even if it doesn’t exist and trace a 404 error each time and won’t fallback to another type. In my test, I subsequently asked it to swap extension after a timeout (making a request for the OGG first); now intentionally playing each of the previous listed files. It will only attempt to play the OGG each time. Soundjs (maybe also openfl, since it always assumes OGG) is registering the sound name with no extension - which is okay - but it gets stuck only seeking one extension ever. Perhaps SoundJS only handles browser compatibility and not missing (or other problem) audio. If that’s true, then it’s working as expected.

Then while M4A files will play if you directly request them, M4A is not included as fallback type and won’t play otherwise. I’ve found this in my js output:

createjs.Sound.alternateExtensions = ["ogg","mp3","wav"];

Perhaps we can modify this array upstream to include “m4a” and/or other extensions? If I insert “m4a” between “ogg” and “mp3” then viola; it works!

Mostly I just wanted to explain what I found to help clarify it for others and see if there are potential fixes here, either for soundjs or openfl that would help.

#25

Set embed as “false” solved my issue.

#26

Just be aware that if embed is false, you will need to use Assets.loadBitmapData instead of Assets.getBitmapData to access the files asynchronously

#27

Hi,
my haxeflixel test project is stuck as well on iphone on the preloader screen when building to html target.
It’s seems to be working fine on Android.
I tried to add the 2 lines in the xml files and delete haxeflixel’s sound files but to no avail.

Here is the link www.yanivcahoua.com/files/endless-stealth/assets/sounds

Maybe someone can help me with that.
Thanks

#28

Anyone ?
I have moved to phaser in the meantime but I 'd love to come back to haxeflixel soon.
As I said I tried some of the options discussed in this thread but I couldn’t make it work
.

#29

@Yanifska this is the OpenFL community forum. For HaxeFlixel, you will get a good response if you open an issue on their GitHub repository. (I tried this recently and got frequent responses from the main developer.)

#30

I’m getting this with Trade Gothic Bold Extended as the culprit.

Anything I can do to fix this? It only occurs on windows in IE. Someone mentioned bitmap fonts but I can’t see any further info on how to use them in openfl?

#31

You could take a look at lime.app.Preloader and see if there’s a tweak that resolves it. Otherwise, perhaps it doesn’t like the font? :slight_smile:

#32

Yep I’m certain it doesn’t like the font, it’s only happening in IE and client has to use this font. Happy days.

I made a reduced example and by re-encoding the font with font-forge got it to work, but not in the actual game I’m making, which now sticks on Trade Gothic Standard too in IE. That didn’t happen before and even using re-encoded versions of both problematic fonts my game won’t finish preloading. However in a minimal project the re-encoded fonts work ok. Very weird.

I’ll look at the Preloader and see if I can narrow down what’s happening a bit.

#33

If need be, you might be able to cripple that part of the preloader so it continues (though the first time you render, the font might be wrong), or maybe there’s a way to get it to behave with this font