A-Frame loading custom font in assets not working

2
votes

I am using this build of aframe: https://rawgit.com/aframevr/aframe/c9817f2/dist/aframe-master.min.js

I have setup a scene in aframe and loaded it onto my webserver. Via the "a-asset-item" i can load and display .objs .mp3 and images(.png) with #id just fine.

The only thing that's not seeming to work are custom fonts made with hiero. I converted a font into a .fnt and a .png(fontimage) and loaded it like so into the code:

<a-assets>

        <a-asset-item id="akzidenz" src="assets/akzidenz.fnt"></a-asset-item>
        <a-asset-item id="akzidenzimage" src="assets/akzidenz.png"></a-asset-item>
        
<a-assets>

Then I called the font in an element like this.

<a-text id="title" position="0 2 -2" side="double"
        font="#akzidenz"
        fontimage="#akzidenzimage"
        value="This is a Title">
      </a-text>

When I open up the page on my website this error is displayed in the javascript console:

components:text:error Error loading font  #akzidenz

3browser.js:111 components:text:error Error: error parsing font malformed file -- no <pages> element
    at Object.callback (https://rawgit.com/aframevr/aframe/c9817f2/dist/aframe-master.min.js:58:1408)
    at a (https://rawgit.com/aframevr/aframe/c9817f2/dist/aframe-master.min.js:183:1112)
    at o (https://rawgit.com/aframevr/aframe/c9817f2/dist/aframe-master.min.js:183:980)
    at XMLHttpRequest.t (https://rawgit.com/aframevr/aframe/c9817f2/dist/aframe-master.min.js:183:401) 
3(index):1 Uncaught (in promise) Error: error parsing font malformed file -- no <pages> element
    at Object.callback (browser.js:71)
    at a (index.js:62)
    at o (index.js:129)
    at XMLHttpRequest.t (index.js:68)

The text is not displayed. Every other kind of file in assets works. Before I made this, I started out writing examples in glitch and there i pasted the cdn-link directly into it. This worked out.

<a-text id="title" position="0 2 -2" side="double"
        font="https://cdn.glitch.com/1eed6da6-c9da-46d7-bb30-b441a645ff43%2Fakzidenz.fnt?1512042049508"
        fontimage="https://cdn.glitch.com/1eed6da6-c9da-46d7-bb30-b441a645ff43%2Fakzidenz.png?1512042052757"
        value="This is a Title">
      </a-text>

I also tried embedding the direct link like http://www.example.com/.../assets/akzidenz.fnt Then I got a permission error.

Can anyone help me out with this issue? Thanks in advance.

3
javascriptaframe

3 Answers

0
votes

If you haven't done it already, run a local server for your project. Even if you had everything alright it won't work without a running server, as assets may not be served properly. Follow this instructions to start your dev server and view your project.

I did a little research and it seems (I'm not 100% sure) that for now you cannot preload your font in a-assets. A-Frame expects to load your font from XML format (or a string to parse) - by providing it the id of your resource it does't seem to get the data it needs. Here is the line that throws your error:

data = data.toString()
var xmlRoot = parseFromString(data)
var pageRoot = xmlRoot.getElementsByTagName('pages')[0]
if (!pageRoot)
  throw new Error('malformed file -- no <pages> element')

If you pass it a directory (remember about local server) it will work correctly, as it will receive a string and then parse it to XML.

You can definately preload the img's though, as stated here.

My final working code:

<a-assets>
  <img id="akzidenzimg" src="/assets/akzidenz.png">
</a-assets>
<a-sky color="#CCC"></a-sky>
<a-text id="title" position="0 2 -2" side="double"
    font="/assets/akzidenz.fnt"
    fontimage="#akzidenzimg"
    value="This is a Title">
</a-text>

My folder structure:

.
+-- index.html
+-- assets
|   +--akzidenz.fnt
|   +--akzidenz.png
1
votes

So the solution to this problem is very easy.
When you are running aframe on a webserver, directly embed the font and the image like so:

<a-text id="title" position="0 2 -2" side="double"
    font="assets/akzidenz.fnt"
    fontimage="assets/akzidenz.png"
    value="This is a Title">
</a-text>

The font and the fontimage does not seem to work fine with the asset system.

0
votes

so for me, pre-loading <a-assets> didnt help, but what i tried and works was this:

  1. i was already running a node service with aws s3, so i hosted my .json and .png fonts there, and created a GET call like /get-fonts/custom-msdf.json
  2. your client FE just calls the font like this
<a-text
 position="0 0 0"
 font="http://localhost:8080/get-font/fonts/custom-msdf.json"
 negate="false"
 value="this is a sample text"
 color="black"
></a-text>

if you dive into the .json file, you can see that it already points to the .png file with this line:

"pages": [
    "custom.png"
  ],

so we dont need to call font-image in <a-text>