PIXI.Text can't alter line height ?

[thomfoolery]

Trying to make a speech bubble above my characters a-la SCUMM games like monkey island.

 

Text line height is too large and I cant seem to adjust it. Am I missing something or is this not possible?

 

Picture below, line height is twice the size it needs to be.

 

I can see in the source that lineHeight takes stroke into effect, but even without stroke, or wordWrap I see no positive effect.

      let cfg = {        font: '6px arial',        fill: this.speechColor,        stroke: 'black',        strokeThickness: 2,        wordWrap: true,        wordWrapWidth: 50      };      this._textSprite = new PIXI.Text( speech, cfg );      this._textSprite.resolution = 3;      this._textSprite.position.x = this._sprite.position.x;      this._textSprite.position.y = this._sprite.position.y - this._sprite.height;      this._textSprite.anchor.x = 0;      this._textSprite.anchor.y = 1;      this._sprite.parent.addChild( this._textSprite );

[hubert]

yup. i had a similar situation when wordWrap was set to true.

When set to false the space between new lines is ignored.

 

 

The text is broken by the container or do you do it manually?

 

This is my configuration:

var text = new PIXI.Text("Pixi \n it works! :D", {                        font:"20px Arial",                         fill:"white",                        wordWrap : false,                        dropShadow : true,                        dropShadowDistance : 2                    });

also for new line you can you can use htmlentity 10;

 

http://www.sevenative.com

10;

[normonds]

I had the same problem, lineHeight is not supported yet, so i had to fork the framework, in pixi.dev (as of now version 2.2.5) in function PIXI.Text.prototype.updateText, line about 3361, i changed the line

var lineHeight = fontProperties.fontSize + this.style.strokeThickness;

if (typeof this.lineHeight != 'undefined') {	var lineHeight  = this.lineHeight;} else {	var lineHeight = fontProperties.fontSize + this.style.strokeThickness;}

So now if you set lineHeight property for Text display object, it will use it instead, worked for me.

[thomfoolery]

Thanks guys for reassuring my sanity. I ended splitting the text into an array on new line chars and drawing each line manually to the container.

Works for my own application for now.

      let offset = 0;      let cfg = {        font: "5px monospace",        fill: actor.speechColor,        stroke: 'black',        strokeThickness: 2      };      actor.speech.forEach( function ( line, index ) {        var textSprite = new PIXI.Text( line, cfg );        textSprite.resolution = 3;        textSprite.anchor.x = 0;        textSprite.anchor.y = 0;        textSprite.y = index * 6;        offset += 6;        this._textContainer.addChild( textSprite );      }.bind( this ));      this._textContainer.position.x = actor._sprite.position.x;      this._textContainer.position.y = actor._sprite.position.y - actor._sprite.height - offset - 2;      actor._sprite.parent.addChild( this._textContainer );