what exactly is pivot and what it affects

[Yehuda Katz]

Hello,

I would like better understand pivot and how it's stored, calculated and what it affects. As it causes me troubles when I apply setTextBounds. May be someone can share link to article or tell me something?

Thanks in advance

[samme]

PIXI.DisplayObject#pivot. It's a translation or displacement from the object's position.

position ← position + pivot × scale

I can't figure out how to use scale and setTextBounds together, so if you can find a way to do without one of those, I'd try that.

 

[Yehuda Katz]

Hello @samme and thanks for your reply. Probably you remember my last question about setTextBounds. So I followed you suggestion and used alignIn()... however, today I had new case when text was multi line. So I thought that the only solution is to go back and use setTextBounds but I was wrong. Instead, I simply enabled word wrap for text object and then set wordWrapWidth to what ever width text should have. That way, I was getting box with text (the text within lines itself can be aligned by 'align' property) which later was easily aligned by alignIn() method and since I was using alignIn in conjunction with anchors (in case of center, they should be 0.5), scale is ALWASY correct.

var text = object.text.text;
var style = {
  font: object.text.pixelsize + 'px ' + object.text.fontfamily,
  fill: object.text.color,
  fontWeight: object.text.bold ? 'bold ' : 'normal',
}
if (object.text.wrap) {
  style.wordWrap = true;
  style.wordWrapWidth = width;
  style.align = object.text.halign;
}
var child = new Phaser.Text(this.game, x, y, text, style);
this._text_align(child, width, height, object.text.halign, object.text.valign);
child.anchor.x = object.text.anchor_x;
child.anchor.y = object.text.anchor_y;

the method itself I am currently using:

_text_align(object, width, height, halign, valign) {
  if (halign === undefined) halign = 'left';
  if (valign === undefined) valign = 'top';

  var align = Phaser.CENTER;
  switch (halign) {
    case 'left':
      switch (valign) {
        case 'top':
          align = Phaser.TOP_LEFT;
          break;
        case 'center':
          align = Phaser.LEFT_CENTER;
          break;
        case 'bottom':
          align = Phaser.BOTTOM_LEFT;
          break;
      }
      break;
    case 'center':
      switch (valign) {
        case 'top':
          align = Phaser.TOP_CENTER;
          break;
        case 'center':
          align = Phaser.CENTER;
          break;
        case 'bottom':
          align = Phaser.BOTTOM_CENTER;
          break;
      }
      break;
    case 'right':
      switch (valign) {
        case 'top':
          align = Phaser.TOP_RIGHT;
          break;
        case 'center':
          align = Phaser.RIGHT_CENTER;
          break;
        case 'bottom':
          align = Phaser.BOTTOM_RIGHT;
          break;
      }
      break;
  }
  var rect = new Phaser.Rectangle(object.x, object.y, width, height);
  object.alignIn(rect, align);
}

 

However, I am still thinking how to change pivot after applying setTextBounds because it cannot be the same all the time! The fact that it's used in conjunction with scale is correct BUT it should be located in different places depends on vertical/horizontal align of text withing bounds.