Jump to content

PIXI.Text can't alter line height ?


Recommended Posts

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 );


Link to comment
Share on other sites

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;




Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 );
Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...