Comments (11)
I should have a bit of extra time tomorrow, so I'll try to take a look.
from pixi-multistyle-text.
Thanks for looking into it!
from pixi-multistyle-text.
Is this for a bitmap font? If not, it's not possible since text objects are backed by a canvas, which doesn't support character spacing. (See pixijs/pixijs#1748.)
The bahvior of character spacing at the edges between styles is also a bit interesting. For example, suppose wide
has a large letterSpacing
, and narrow
has it set to 0. How should <narrow>abc<wide>def</wide>ghi</narrow>
be rendered? abcd e fghi
or abc d e f ghi
?
from pixi-multistyle-text.
Matthew,
It's for outline fonts, not bitmap. Yeah, I was thinking probably not. No worries, you can close it. Figured I'd check with the experts though.
:)
from pixi-multistyle-text.
I'll leave this open, since letterSpacing
probably should work for bitmap fonts at least.
I might also be able to make it work for non-bitmaps by simply drawing one character at a time - which would probably be a performance hit and might cause some fonts to do strange things, but would only kick in if letterSpacing
is non-zero. The only way to find out is to try. 😄
Of course, we'd still need to decide on abcd e fghi
vs. abc d e f ghi
. Another possibility I just thought of is to have the letterSpacing
be evenly divided on both sides of a character - which would give abc-d e f-ghi
, where -
is half the width of a space.
from pixi-multistyle-text.
Never mind about bitmap fonts - I didn't realize that there was a separate class for those in Pixi. We'd need to add any support for bitmap fonts before we could think of adding this feature for them, and I currently don't see any need to unless there's a particular interest in bitmap fonts.
Anyway, I'll see if drawing one character at a time works for non-bitmaps.
from pixi-multistyle-text.
Turns out it was surprisingly straightforward.
As for my earlier question, I went with the third option - abc-d e f-ghi
.
Edit:
That has letterSpacing
set to -1 for "multiline" and to 5 for "multistyle".
from pixi-multistyle-text.
PR filed: #40.
from pixi-multistyle-text.
OMG wow, that was fast! Thank you so much!
from pixi-multistyle-text.
@bluepichu What's the value of letterSpacing
actually? What does represent a letterSpacing of 0 and a letter spacing of 5? Is it an offset in pixels?
from pixi-multistyle-text.
Yes.
from pixi-multistyle-text.
Related Issues (20)
- Formatting tags cannot be used together
- Error when used "@pixi/text": "5.2.2" and fillGradientStops style HOT 1
- BitmapText support? HOT 1
- Cropped characters
- Change FILL color .on('pointerover'
- Hire You To Build This Feature
- Request for Write privileges HOT 6
- wordWrap + letterSpacing is broken HOT 3
- Unable to update wordWrapWidth HOT 3
- A feature request, textOverflow with ellipsis HOT 1
- Incorrect formatting when using breakWords. HOT 3
- Negative local bounds on root container
- option to use bbcode style [tags][/tags] instead of <xml></xml> style HOT 3
- ability to take in parameters inside tag <color=red> red text </color> HOT 2
- Ability to use this as a library inside a JS project
- demo no longer works HOT 4
- Do you plan to make it compatible with Pixi 5? HOT 2
- Cannot set property realWidth HOT 7
- adding "lineHeight" param
- Added to list of v5 plugins HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pixi-multistyle-text.