grapefruitjs / grapefruit

Outdated, I recommend you use photonstorm/phaser instead!

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Annotated Text Styling in BitmapText

englercj opened this issue · comments

I should be able to have a string like:

"\rError: \wSome error has occurred on line \b222"

Which should make "Error: " the color red, "Some error has occurred on line " white, and "222" blue. This can be done by tinting the individual sprites of the bitmap text.

Hey this is 2dt from the Pixi.js forum. Lucky for you to have this on your to-do list, because this is exactly what I'm working on right now.

I'm developing a formattable text that extends the Pixi Sprite class. It works similarly to BitmapText, but can do much more, including:

multiple inline bitmap fonts (so Arial, Arial bold, Sans-serif, etc... all on the same line, in like in word processing or html) which automatically adjust line heights to prevent overlap.
Support for every possible language orientation (so standard latin left-right/vertical line stacking, Oriental top-bottom/horizontal left line stacking, etc...)
Can also dictate which direction the text flows in (reverse, forward).
Offers a concise way to manipulate each individual sprite character (so tinting, scaling, animations, etc...)
Offers a feature called line anchoring, which acts like the anchor property with respect to the current line. Useful for visually adjusting really big fonts paired with little fonts on the same line, or making subscripts/superscripts.

I hope to add underlining, strikethrough, and highlighting in the future, but that's not a terribly big priority for me at the moment.

I'll demo my creation and release the source code soon so you can use or change it for your own needs however you wish.

Wonderful! That sounds awesome, I'll make sure to get that in when it is done!