Jump to content

Load BitmapFont from blob or data url


Laura
 Share

Recommended Posts

Hello!

I have a custom font that I create and I want to test it before being downloaded as an archive. At the moment of the test, I do not have a font file to load it using the BitmapText(text, OPTIONS) functionality.

I was wondering if I can load it directly from an xml data string or blob or data url. I checked the official documentation (BitmapFont, BitmapFontLoader), but it is unclear to me if that will work. I would greatly appreciate an example, handling custom fonts is scarce on the internet.

Thank you!

Edited by Laura
Link to comment
Share on other sites

  • 2 weeks later...

Thanks for the suggestion! I have tried the approach with @font-face (I'm not sure if I need to install some package to access FontFace, Angular doesn't recognize the class). I set the style as follows:

@font-face {
font-family: 'testFont';
src: url(${pngBase64}) format(png);
font-weight: normal;
font-style: normal;
}`;

However, it doesn't work and I am not really sure if it's supposed to work, since a bitmap has also a descriptor file, not only the png image and I didn't find anywhere the way to load that in font-face.

Link to comment
Share on other sites

8 hours ago, Laura said:

Thanks for the suggestion! I have tried the approach with @font-face (I'm not sure if I need to install some package to access FontFace, Angular doesn't recognize the class). I set the style as follows:

@font-face {
font-family: 'testFont';
src: url(${pngBase64}) format(png);
font-weight: normal;
font-style: normal;
}`;

However, it doesn't work and I am not really sure if it's supposed to work, since a bitmap has also a descriptor file, not only the png image and I didn't find anywhere the way to load that in font-face.

the code you show me seem `CSS`, and not supports variables.
Try use `LESS` instead if you need implement variable in CSS.

for font face it should look like this for css.

@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 100;
	src: local('Roboto Thin Italic'), local('Roboto-ThinItalic'),
		url('./res/fonts/roboto/roboto-v20-latin-100italic.woff2') format('woff2'),
		/* Chrome 26+, Opera 23+, Firefox 39+ */
			url('./res/fonts/roboto/roboto-v20-latin-100italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto'), local('Roboto-Regular'),
		url('./res/fonts/roboto/roboto-v20-latin-regular.woff2') format('woff2'),
		/* Chrome 26+, Opera 23+, Firefox 39+ */
			url('./res/fonts/roboto/roboto-v20-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

 

Edited by jonforum
Link to comment
Share on other sites

Yes, it was css, assigned to a variable and written with backtick, created dynamically inside a method and it worked for some woff font from the internet. I wasn't very specific in my answer.

    const nodeStyle = document.createElement('style');
    nodeStyle.textContent = `
    @font-face {
      font-family: 'testFont';
      src: url(${pngBase64String}) format(png); // not suited for fnt fonts
      font-weight: normal;
      font-style: normal;
    }`;
    document.head.appendChild(nodeStyle);
    
    const nodeParagraph = document.createElement('p');
    nodeParagraph.style['font-family'] = "testFont";
    nodeParagraph.innerHTML = this.inputText;
    document.getElementById("canvas").appendChild(nodeParagraph);

However, I don't think this is suited for loading a font in fnt format, like the one I have.

That's why I was counting on Pixi to have this kind of functionality with the posibility to load the font from a base64 string and a descriptor file that will have all the details about letters positions. I currently can load a font from my assets using PIXI.BitmapText, but I wanted to load a dynamically created font.

 

Edited by Laura
Link to comment
Share on other sites

This is another approach I tried to explore using PIXI:

public installFont(fontFileXML, fontPNGBase64String) {
    PIXI.BitmapFont.install(fontFileXML, fontPNGBase64String);
    PIXI.BitmapFont.from("custom", {
      fontFamily: "custom",
      fontSize: 70,
    });

    const title = new PIXI.BitmapText("This is the title", { fontName: "TitleFont" });
  }

From the official documentation, seems like I can do something like that, using an xml string as input data and some texture. However, the engine cannot autodetect the format. I am not even sure if this is supposed to work for my particular case.

Link to comment
Share on other sites

I am not even sure if this is supposed to work

... main goal of pixi is webgl rendering, not loading stuff.

Auxiliary things, like BitmapText, are supported by people like you, who use them, they werent written by geniuses. You shouldn't be afraid to go into that code at least in devtools debugger.

 

Edited by ivan.popelyshev
Link to comment
Share on other sites

7 hours ago, ivan.popelyshev said:

I am not even sure if this is supposed to work

... main goal of pixi is webgl rendering, not loading stuff.

Auxiliary things, like BitmapText, are supported by people like you, who use them, they werent written by geniuses. You shouldn't be afraid to go into that code at least in devtools debugger.

 

Turns out, they were :) It actually was deceivingly simple.

The PIXI code from my previous message works, but the parameter fontFileXML, which represents the fnt descriptor, has to be created as an XMLDocument (document.implementation.createDocument (namespaceURI, qualifiedName, docTypeObj)) and for fontPNGBase64String, instead of encoded PNG, just extract the canvas drawing as PIXI.Texture. BitmapFont will know how to interpret that as your custom font.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...