Issue related with audio and font assets

Haxe
#1

Here is the project link:

I get a strange problem while using font and audio assets.

The fonts I was using in assets were not showing up in the html5 build. When I checked the build I could not find font files. Here is my project.xml

<?xml version="1.0" encoding="utf-8"?>
<project>
	
	<meta title="Tonalli" package="myapp.something.something" version="1.0.0" company="OpenFL Technologies" />
	<app main="myapp.Main" path="Export" file="Main" />
	
	<window width="800" height="500" if="flash" fps="30"/>
	<window width="800" height="500" if="html5" fps="30" />
	
	<font path="assets/fonts"   rename ="assets/fonts" include="*.ttf"/>
	
	<assets path="assets"  rename="assets/audio" if="web">
		<sound path="TickSound.mp3" id="TickSound" />
		<sound path="DingSound.mp3" id="DingSound" />
	</assets>
 	<source path="Source" />
	
	<haxelib name="openfl" />
	<haxelib name="actuate" />
	
  
 	<library   path="assets/library.swf"  preload="true" />
 	<!--library   path="assets/library.swf"  embed="true" /-->
	
	<icon path="assets/openfl.svg" />
	<haxelib name="swf" />
	
</project>

However when I removed the two mp3 assets listed in the project.xml, the font files were created in the export folder. And I could see html5 output showing up the right fonts.

So, the strange part is, how come using the audio assets is preventing the font files to be created in export folder. And removing them allows the font files to be created. You can test by downloading the project, I have attached.

I also tested this using Assets.list( ) , and the array listed the fonts only when I removed the mp3 assets.

#2

The path is wrong for your audio files.

The path should be the path to the files, and rename is an alias for the path to use in your code. Since you’re using the id for sounds you don’t need to use an alias, just specify the id.

Try this:

<assets path="assets/fonts" rename="fonts" include="*.ttf" />

<assets path="assets/audio" if="web">
	<sound path="TickSound.mp3" id="TickSound" />
	<sound path="DingSound.mp3" id="DingSound" />
</assets>

Then access in your code like this:

Assets.getFont("fonts/myfont.tff");
Assets.getSound("TickSound");
#3

But my audio files are not in assets/audio folder. If my paths are wrong, I get a run time error. However, the fact is that I am able to use the sound files without problem. Only thing is that my fonts only work when I remove the audios. This is strange behavior.

#4

The sounds are in assets folder then? Seems strange the way you have it. I would make a sub folder for them, You’re making the alias like it’s a sub folder. Just an organizational preference.

This font node is probably the cause of the glitch.

<font path="assets/fonts"   rename ="assets/fonts" include="*.ttf"/>

try

<assets path="assets/fonts" rename="fonts" include="*.ttf" />

and use

Assets.getFont("fonts/myfont.tff");

or skip the rename

<assets path="assets/fonts" include="*.ttf" />

and use

Assets.getFont("assets/fonts/myfont.tff");
#5

Ok. To confirm that is not the source of the problem, I changed the folder structure as you suggested.

Now do you understand what is going on here? Check these screens I have recorded.

#6

I didn’t notice any change to the <font…> node in the video. Like I said, that’s probably the glitch.

I’ve never seen it this way (<font...),
<font path="assets/fonts" rename ="assets/fonts" include="*.ttf"/>

This is normal
<assets path="assets/fonts" rename ="fonts" include="*.ttf" />

#7

also, this

new TextFormat(Assets.getFont("fonts/myFont.ttf").fontName, ...
#8

It worked for me with C++/Neko output.

< assets path=“assets/fonts” rename =“fonts” >
new TextFormat(“fonts/myFont.ttf”, …);

but I had some issues while debugging with HTML5. Text Field is not able to use embedded font. Any advices?

#9

Did you set myTextField.embedFonts = true; ?

#10

I had this line in my OpenFL-based homemade framework.

#11

Does HTML5 work without a rename on the font directory?

#12

No. it doesn’t. This is all how I tried to get embed fonts work with HTML5

  1. < assets path=“assets/fonts”>
    new TextFormat(“fonts/myFont.ttf”, …);
    or
  2. < assets path=“assets/fonts”>
    new TextFormat(“assets/fonts/myFont.ttf”, …);
#13

new TextFormat(“fonts/myFont.ttf”, …);

This seems wrong syntax.

You must provide the name of the font. Not the path. So for example, you have the font “Arial.ttf” then it will become:

new TextFormat(“Arial”, …);

#14

or new TextFormat(Assets.getFont("fonts/myFont.ttf").fontName, ...);

#15

And if for some reason it still does not work. Then next thing is to check the font name in the index.html page. All the fonts you use are listed there along with the name. As some times ago, I figured out that even after providing the font name it was not working. As Open FL for some reason made a small changes to the original font name. Not sure why did that happen.

And if the fonts are not listed, then the chances are that font embedding did not occur. Or may be you are using a template. ( using a template tag in project.xml ) . That has caused confusion for me many a times.

#16

Fonts often have multiple different names embedded inside – I think we prefer the names that appear on a Mac rather than Windows

If you build using -verbose the output should print the names detected from the fonts

1 Like