Sign in to follow this  
grosjardin

How to load a Pixijs BitmapText

Recommended Posts

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 by grosjardin

Share this post


Link to post
Share on other sites

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 by ivan.popelyshev

Share this post


Link to post
Share on other sites

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..?

 

image.png.d50330bfc754e1545c73226651cc477a.png

Share this post


Link to post
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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.