Jump to content

BitmapText Pivot & Kerning


Jonny Shaw
 Share

Recommended Posts

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

 

kerningIssue.png

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 months later...

easy solution , hum yes and no...
ease by style
Ytqdy1MK_o.gif
ease by words

[âIMG]

Ease by letters

x9f4IQ7T_o.gif

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/

@+ 

Link to comment
Share on other sites

22 hours ago, jonforum said:

easy solution , hum yes and no...
ease by style
Ytqdy1MK_o.gif
ease by words

[âIMG]

Ease by letters

x9f4IQ7T_o.gif

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!

 

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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

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