Sign in to follow this  
Yehuda Katz

what exactly is pivot and what it affects

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.