BitmapText Pivot & Kerning

[Jonny Shaw]

Hi, I was just wondering if anyone knew of an easy solution to this...

I have a text display using bitmap font I was looking at animating per character, I can get a target to animate via gsap for each character fine through the characters array..
However if I want to set the pivot for each character to the center (for a scale/rotation tween), it will through the kerning off.

Any ideas greatly appreciated.

 

for(let i = 0; i < this.bitmapText.children.length; i++){
            let target = this.bitmapText.children[i];
            target.pivot.set(target.width/2, target.height/2);
            TweenMax.to(target, 0.3, {pixi:{scale:1.2}, repeat:-1, delay:i*0.15, yoyo:true, ease:Sine.easeInOut});
}

 

[ivan.popelyshev]

@themoonrat

[Jonny Shaw]

hmmm kinda still stuck on this one if anyone has any ideas?  Just tried extending the bitmaptext class to see if I could alter the position values of the characters, but it has no effect - the x,y values seem to be ignored.  I can kind of understand whats going on, each characters x value will be based upon the previous characters width value I assume, so would need to offset the x once the new pivot was applied.  tried .x setTransform, and position.set, but none seem to work when I target a character via children.

[Jonny Shaw]

Sorry to bump but still not sure how best to approach this one (so have avoided it so far :D) @themoonrat any ideas?

[jonforum]

easy solution , hum yes and no...
ease by style

ease by words

Ease by letters

You need use regex algo and .exec to split text in multi instance by word or letters and get for each letter custom transform?

https://regexr.com/

I dont know if this will help you  for bitmap text, and if is the same mechanique from pixi text.
But here example look for this.computeText(txt);

It compute and splitting string text by array, than build text from the plitted array.

Hope this can give you inspiration if no body cant give you more nice solution?

https://github.com/djmisterjon/PIXI.ProStageEditor/blob/master/js/core/texts.js

and very old version prototype
https://forums.rpgmakerweb.com/index.php?threads/pixi-text-multi-motions-styles-core-v1-0.86117/

@+ 

[Jonny Shaw]

22 hours ago, jonforum said:

easy solution , hum yes and no...
ease by style

ease by words

Ease by letters

You need use regex algo and .exec to split text in multi instance by word or letters and get for each letter custom transform?

https://regexr.com/

I dont know if this will help you  for bitmap text, and if is the same mechanique from pixi text.
But here example look for this.computeText(txt);

It compute and splitting string text by array, than build text from the plitted array.

Hope this can give you inspiration if no body cant give you more nice solution?

https://github.com/djmisterjon/PIXI.ProStageEditor/blob/master/js/core/texts.js

and very old version prototype
https://forums.rpgmakerweb.com/index.php?threads/pixi-text-multi-motions-styles-core-v1-0.86117/

@+ 

That's brilliant thanks, lots of useful info there.  Might be something I'll take a look at once the project is nearly done as I still have a few bigger targets to hit first.  I've been able to target each character with children, but it's just setting the anchor that has messed up the kerning.  I was thinking of trying something that used the width of each character to calculate the offset and seeing if that could be adjusted manually before it was added to the stage.  Either way will update if I find a solution.  Many thanks!