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

Help
#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

#34

Hello - I am having the same problem with my html5 game not loading on ios because of the sounds.

I’ve build a version that uses the haxe-howler, and it runs on my local, but when I upload the game to my website it crashes because “Uncaught ReferenceError: Howl is not defined”

I am quite new to html5, could you tell me what I might do to fix this please ?

the game is here.
http://magneticboots.com/h5/fooboo/bin/

thanks in advance for any help !

-Jerry

#35

aha. fixed. index.html didn’t reference howler when I compiled it - had to cut and paste it !

Shouldn’t openFl automatically put this in there ?

#36

we don’t use howler, but sound.js instead. Do you have a library that uses howler?

#37

Hey Dude - yup I was using maxracoongames’s solution for the sound issue that prevents sounds playing in html5 games on ios & android - it works - which is good - but only if I cut and paste this into the index file after openFl generates it.

and paste howler.min.js into the bin folder with it.

I was wondering if there was a was of getting Openfl to generate these 2 steps automatically. I tried putting into the project.xml, but it causes this error

Error: Could not find haxelib “howler” (dependency of “howler”), does it need to be installed?

I’d already run “haxelib install howlerjs” in a command window - but openFl didn’t pick up on it - so I pasted the howler folder into my project and it compiled ok after than - but errors when run (as it can’t find the howler.js unless I do the cut-and-paste thing.

ok, ta for any help x

#38

I have the same issue ( loader stuck trying to embed font ) in my project. Tried the AddingText example : same problem. Using openfl 4.4.1 / haxe 3.2.1