stage centered text also align center moves left on publish ANCC Canvas

[avid_body16B8]

What is the way to correct this problem? See the problem below. image1 is stage screenshot, image 2 is the published version. This is of course a dynamic text.

[GoryGreg]

Is this Firefox? If so try this code in first frame:

var firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;

if (firefox && createjs)

{

createjs.Text.prototype._drawTextLine = function(ctx, text, y)

  {

  // Adjust text position only if textBaseline is "top"

  if (this.textBaseline === "top")

  {

  var lineHeight = this.lineHeight || this.getMeasuredLineHeight();

  y += lineHeight * 0.1; // decrease number to move font up and increase to move down

  }

  // Chrome 17 will fail to draw the text if the last param is included but null, so we feed it a large value instead:

  if (this.outline) { ctx.strokeText(text, 0, y, this.maxWidth||0xFFFF); }

  else { ctx.fillText(text, 0, y, this.maxWidth||0xFFFF); }

  };

}

[avid_body16B8]

FF, Chrome, Edge, Safari, Brave,...

Your code does not make any difference.

[ClayUUID · Accepted solution]

Greg's code is for correcting vertical text layout differences. I'm not sure why he posted it.

What font are you using? Do you get this horizontal difference when using more common fonts, like Arial or Times New Roman? There aren't any extra spaces on the left or right of either text, are there?

[avid_body16B8]

I tried several fonts including Arial and the problem remained for any font.

However, I saw your question about extra space on either side of the text field and as you can see on the screenshot there is a space on each side. So this was the problem (which did not exist in Edge Animate BTW). Taking the space out on the larger text 12 of 12 took care of the problem (mostly) since there is still a little difference between a score of 0 to 9 and 10 to 12 which is done dynamically for a scoring variable.

Thanks for the input. Looks like Animate and Edge Animate handle lots of things differently.

[ClayUUID]

I just tried reproducing your display with a couple dozen random fonts in a center-formatted dynamic text field, and none of them showed the dramatic left shift that you're getting.

What is your code for setting the values of the final score text fields?

[avid_body16B8]

Well I am totally lost on that one. Since I corrected the space as mentioned earlier in the file, I extended them again so I could see the shift again and lo and behold now it does not do it. So it will remain a mystery until it happens again.

[avid_body16B8]

The score is counted throughout the game with the variable score in click events.

The final score is add with the following code:

this.scoreTxt.text = score + " of 12";

So in my original file, the score field is still off for some reason while it is correct in the test file if I add the code.

If there is no code to add the score to this field then it is offset compared to the original placement on the stage.

So all in all it is pretty strange.

See file. I commented out the code so you can see what it does. With the code the placement is correct.

If you want my original file, I can PM it to you.

[ClayUUID]

resdesign  wrote

See file.

Where?

[avid_body16B8]

Before leaving work I copied the text from the original file and it exhibited the problem again. I copied it in the test file and it did have a problem until I added the code. So I am going to try and reproduce the code as in the initial file to see if that was the problem.

I will post my investigation here when I am done.

[GoryGreg]

Sorry, I just noticed your text moved horizontal instead of vertical as Clay pointed out.

A senior moment mixed with not reading things thoroughly usually does that!

I have noticed occasionally when using dynamic text (eg Bangers in Google Fonts) that it can display offset from how it looks in Animate. I used it in a button and had to move the hit area about to get it over the text- as where it sat in Animate was not the same as in the browser. This could possibly be just a poorly designed font though.