BitmapText/BitmapFont

[JakeMN]

been working at this for a bit using other examples as basis. have arrived at a place where i cannot get the font properly loaded, even though my check indicates that it's available. i have broken the code out a bit more than i normally would for ease of debugging.

 

please note that  createTextFields() is called from window.onload. i do not get "Font not loaded" printed to console

 

	function createTextFields(){     
            const loader = new PIXI.Loader();

            loader.add('Arial_0', 'fonts/Arial_0.fnt');
            loader.load(onFontLoaded);
        }


        function onFontLoaded(){
            if (!PIXI.BitmapFont.available['Arial_0']) 
              console.log("Font not loaded");   
            else
               createText();
        }

        function createText() {
            let bitmapText = new PIXI.BitmapText("text using a fancy font!", {font: "Arial_0", align: "right"});
            bitmapText.anchor.set(0.5)
            bitmapText.position.x = window.innerWidth / 2
            bitmapText.position.y = window.innerHeight / 2
            backgroundSprite.addChild(bitmapText)
        }

 

 

the error i get is posted below:

 

pixi.js:38404 Uncaught Error: Missing BitmapFont "undefined"
    at new BitmapText (pixi.js:38404)
    at createText (index.html:117)
    at onFontLoaded (index.html:113)
    at MiniSignal.dispatch (pixi.js:24690)
    at Loader._onComplete (pixi.js:26997)
    at pixi.js:27035
    at next (pixi.js:24811)
    at Loader.SpritesheetLoader.use (pixi.js:36237)
    at pixi.js:27018
    at pixi.js:24819

 

the .fnt and .png are attached, and were created using bmfont., any help would be greatly appreciated. thanks 

 

 

Arial_0.fnt

[themoonrat]

It should be 'fontName' when creating BitmapText. 

https://pixijs.download/v6.0.0/docs/PIXI.BitmapText.html

Docs are correct when describing properties, but example at the top is incorrect. Sorry about that, we will correct soon!

[JakeMN]

Ha, that was it. Was using the top example as part of my cobbled-together code. With the change it works perfectly now.

 

Thanks for your help. I appreciate all the work you all put in. 

[JakeMN]

for completion, here is the corrected script that works with the attached font. you would need to make sure backgroundSprite is changed to a sprite in your scene. 

	function createTextFields(){     
            const loader = new PIXI.Loader();

            loader.add('Arial_0', 'fonts/Arial_0.fnt');
            loader.load(onFontLoaded);
        }


        function onFontLoaded(){
            if (!PIXI.BitmapFont.available['Arial_0']) 
              console.log("Font not loaded");   
            else
               createText();
        }

        function createText() {
            let bitmapText = new PIXI.BitmapText("text using a fancy font!", {fontName: "Arial_0", align: "right"});
            bitmapText.anchor.set(0.5)
            bitmapText.position.x = window.innerWidth / 2
            bitmapText.position.y = window.innerHeight / 2
            backgroundSprite.addChild(bitmapText)
        }

 

Edited March 5, 2021 by JakeMN