How to load a Pixijs BitmapText

[grosjardin]

I know there's a few topics on the subject already, but I have been banging my head on the wall for some hours now. I am having a hard time loading a .fnt file into pixijs. Here's the process I have been through.

1) Using bitmap Font generator for windows I've exported a .fnt file in XML format.

2) Adding the .fnt to the loader

    const loader = new PIXI.Loader()
            loader.add("fnt", require('../../assets/sprites/arial.fnt'));
            loader.load(function() {
                const bitmapFontText = new PIXI.BitmapText('BITMAP FONTS', { font: '24px Arial' });
                bitmapFontText.anchor.set(0.5)
                bitmapFontText.position.x = 50
                bitmapFontText.position.y = 50
                this.viewport.addChild(bitmapFontText);
            });

Then I had the error : Module parse failed: You may need an appropriate loader to handle this file type

Which I think I solved this way inside my webpack.config using File-Loader :

   module: {
            rules: [
                {
                    test: /\.fnt$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '[./src/assets/sprites][name].[ext]',
                            },
                        },
                    ],
                },
            ],
        }

3) Creating PIXI.BitmapText :

 

It seems my font is still not fully loaded because I get this error :

TypeError: Cannot read property 'size' of undefined

What am I missing? 

PS: I made sure I was using the Face attribute from the arial.fnt file in { font: '24px Arial' }

Edited September 15, 2020 by grosjardin

[ivan.popelyshev]

I doubt that loader can accept anything that you put in it. You have to debug what do you actually pass there. There's no signature of "loader.add" that accept json, all declarations accept URLs.

Here's the loader repo: https://github.com/englercj/resource-loader , you can ask there, you can search in issues, you can ask @xerver why doesnt he support this syntax you trying. It happened many times, and every time i didnt remember answer because I dont use webpack nor any other loaders. I'm vanilla js/ts user.

Edited September 15, 2020 by ivan.popelyshev

[grosjardin]

Yes this is probably a webpack config issue... 

[ivan.popelyshev]

Had you debug what exactly is passed there?

[grosjardin]

What is passed in loader.add() ?

I found this post https://github.com/pixijs/pixi.js/issues/5199 Unfortunately it didnt solve my case

 

[ivan.popelyshev]

Well, its closed circle. People who dont know how pixi loader and how webpack works need this syntax, and people who can debug this thing - dont want to make an article.

[grosjardin]

Trying my best to debug this step by step here. It's tough to get where it breaks. PIXI does not let me know if what being passed to the loader is not recognized. 

I'll dig into webpack loader doc

https://webpack.js.org/contribute/writing-a-loader/

Edited September 16, 2020 by grosjardin

[grosjardin]

Well I guess I'm a step closer after trying a new webpack config.

I am using the style.font property as shown in the doc but I get a message saying the property is deprecated. So maybe that's why it's struggling to find the font afterwards..?