Search the Community

Pixi.js is a great lib and it did help me a lot in building webgl-based apps. But when I try to render text with background, I run into some problem: 1. PIXI.Text has no straight way to fill a text with background ok.I tried to search the forum and find some methods like, I can use PIXI.Grahpics to draw a Rect or RoundedRect , then combine the text and the rounded shape into a container so it looks like the text has a background; In single line text, it appears so good but is this a right way? 2. I can't find a way to build 'tight' background with multi line text; What do I mean a 'tight' background? See the pic below: (the pic comes from https://css-tricks.com/multi-line-padded-text/ and if u read the article u can learn some tricks to make these special background in css) Well, come back to PIXI.js. I know that the text sprite is certainly a Rectangle by default, so when I add a 'background sprite' it's also a Rectangle:) And I find some useful filters like OutlineFilter but it can't use to outline a text , and I'm not an expert in writing gl shaders. Has anyone met the situation before(render multiline text with background) or can give me some advice? Thanks very much.

Refer to the playground url below, if we press Up arrow to move the camera ahead and we'll see that the GUI.Multiline is still visible. Is there any way to hide the GUI.Multiline when all the connected meshes are behind the camera? https://www.babylonjs-playground.com/#XCPP9Y#723

I am trying to use the GUI MultiLine in combination with a GUI Rectangle, which works fine: https://www.babylonjs-playground.com/#WV5YD6#1 The problem I'm having is the position of the line that is attached to the rectangle. Is there a way to not have the line centered in the middle of the rectangle, but define an offset that allows me to position the end of the line in one of the corners? In the screenshot, I marked what I'm trying to do with a red line:

Hi. I'm try to use BitmapText with pixi v.3.0.9 to display multiline text and I have some problems here. Just an example: When I use just \n symbols to word wrap it works correctly: _bitmapFontText = new PIXI.extras.BitmapText("12\n 34\n 56\n 78\n 90\n 21\n 43\n 65\n 87\n 09", { font: '35px Desyrel', align: 'right' }); _bitmapFontText.updateText(); When I use just maxWidth it works correctly too: _bitmapFontText = new PIXI.extras.BitmapText("12 34 56 78 90 21 43 65 87 09", { font: '35px Desyrel', align: 'right' }); _bitmapFontText.maxWidth = 30; _bitmapFontText.updateText(); But when I've mix them. _bitmapFontText = new PIXI.extras.BitmapText("12\n 34\n 56\n 78\n 90\n 21\n 43\n 65\n 87\n 09", { font: '35px Desyrel', align: 'right' }); _bitmapFontText.maxWidth = 30; _bitmapFontText.updateText(); The result will be so strange. Some of chars become duplicated (screenshot attached). Mixed variant it's what I really need to have, because text which I'll set in real application could contains any number of \n symbols, but it should be placed just in specific area (which could be limited with maxWidth)