Magia Posted August 5, 2019 Share Posted August 5, 2019 Hi all I use Pixi 5.1.1 I wanna learn how to use BitmapFont, but I have some promlem with it. I use example from import desyrel from "./desyrel.xml"; /* other code */ app.loader .add('desyrel', desyrel) .load(onAssetsLoaded); function onAssetsLoaded() { const bitmapFontText = new PIXI.BitmapText('bitmap fonts are supported!\nWoo yay!', { font: '55px Desyrel', align: 'left' }); bitmapFontText.x = 50; bitmapFontText.y = 200; container.addChild(bitmapFontText); } (font desyrel from examples too) And I get this error Error message: Uncaught Error: Texture Error: frame does not fit inside the base Texture dimensions: X: 1 + 38 = 39 > 1 and Y: 1 + 74 = 75 > 1 at Texture.prototypeAccessors.frame.set (core.es.js:3280) at new Texture (core.es.js:2962) at Function.registerFont (text-bitmap.es.js:611) at Function.parse (text-bitmap.es.js:652) at completed (text-bitmap.es.js:736) at MiniSignal.dispatch (mini-signals.js:111) at resource-loader.esm.js:2257 at next (resource-loader.esm.js:47) at Loader.use (spritesheet.es.js:307) at resource-loader.esm.js:2255 at resource-loader.esm.js:55 Does someone know what it can be and how to fix it? Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted August 5, 2019 Share Posted August 5, 2019 That's the third time someone tried to just import random stuff and put it into loader. https://pixijs.io/examples/#/text/bitmap-text.js doesn't have any imports in the examples. File name and file contents are different things, and even if loader could take file contents in "add", its not clear what exactly is returned by that import. Is that string or some strange object? Two ways to fix that: 1. Remove import, use loader like in the example. 2. Check that xml file is somehow imported, then look if its possible to pass it to https://github.com/pixijs/pixi.js/blob/dev/packages/text-bitmap/src/BitmapFontLoader.js without . Maybe you'll have to copy parser code somewhere else and call it directly, without loader. We did that for Spritesheets before, but BitmapText still is embedded into loader and cant be used directly. 3. Put a feature request to https://github.com/englercj/resource-loader or https://github.com/pixijs/pixi.js/ to allow passing info from import directly to the loader. I estimate it will take weeks. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted August 5, 2019 Share Posted August 5, 2019 I can set up a project in codesandbox if you are really stuck and dont understand how https://pixijs.io/examples/#/text/bitmap-text.js can be converted to project form. Quote Link to comment Share on other sites More sharing options...
Magia Posted August 5, 2019 Author Share Posted August 5, 2019 10 hours ago, ivan.popelyshev said: I can set up a project in codesandbox if you are really stuck and dont understand how https://pixijs.io/examples/#/text/bitmap-text.js can be converted to project form. Oh, it will be very helpful! And, maybe is there some example how to use PIXI.BitmapFontLoader with BitMap Text (one will be enough)? Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted August 5, 2019 Share Posted August 5, 2019 Found it here: https://github.com/pixijs/pixi.js/wiki/v4-Resources https://www.adammarcwilliams.co.uk/creating-bitmap-text-pixi/ the only difference is that "BitmapText" is not in extras anymore. ZYandu and Magia 2 Quote Link to comment Share on other sites More sharing options...
ZYandu Posted August 5, 2019 Share Posted August 5, 2019 import myBitmapTextFont from "myFontsFolder/myBitmapTextFont.fnt"; let loader = PIXI.Loader.shared; loader.add([{name: "bitmapTextFont", url: myBitmapTextFont}]) .load(setup); function setup (loader, resources){ let text = new PIXI.BitmapText("abcdefg", { font: "50px Arial", //Arial is the face attribute located inside the .fnt file align: 'center' }); } Here's my quick code example made with a custom .fnt file from bmGlyph. You really need to follow the instructions closely in the instructions link Ivan shared! ? https://www.adammarcwilliams.co.uk/creating-bitmap-text-pixi/ ivan.popelyshev and Magia 2 Quote Link to comment Share on other sites More sharing options...
Magia Posted August 7, 2019 Author Share Posted August 7, 2019 On 8/5/2019 at 10:15 PM, ivan.popelyshev said: Found it here: https://github.com/pixijs/pixi.js/wiki/v4-Resources https://www.adammarcwilliams.co.uk/creating-bitmap-text-pixi/ the only difference is that "BitmapText" is not in extras anymore. On 8/5/2019 at 11:13 PM, ZYandu said: import myBitmapTextFont from "myFontsFolder/myBitmapTextFont.fnt"; let loader = PIXI.Loader.shared; loader.add([{name: "bitmapTextFont", url: myBitmapTextFont}]) .load(setup); function setup (loader, resources){ let text = new PIXI.BitmapText("abcdefg", { font: "50px Arial", //Arial is the face attribute located inside the .fnt file align: 'center' }); } Here's my quick code example made with a custom .fnt file from bmGlyph. You really need to follow the instructions closely in the instructions link Ivan shared! ? https://www.adammarcwilliams.co.uk/creating-bitmap-text-pixi/ Thanks ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted August 7, 2019 Share Posted August 7, 2019 Welcome to our forum! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.