pixijs / pixi-text-style

PIXI.TextStyle Generator

PixiJS TextStyle Generator

Interactive tool built with Bootstrap and Mithril to generate code for the PIXI.TextStyle object. Click here to use the editor.

Related

API documentation for:

• PIXI.TextStyle
• PIXI.Text

License

This content is released under the (http://opensource.org/licenses/MIT) MIT License.

pixi-text-style's Issues

Able to select multiple fonts

Right now, fallback fonts have to be contained within the single entry in the drop down box.
It would be great if you could add more fonts via additional drop down boxes (a bit like how adding gradient stops work).

Google discontinuing goo.gl shortener

See: https://developers.googleblog.com/2018/03/transitioning-google-url-shortener.html

Will need to remove or replace the "Short URL" button with something else. This will officially stop working: March 30, 2019

New line doesn't split line

When I enter text with \n, it doesn't split it to new line
Demo: https://pixijs.io/pixi-text-style/#%7B%22text%22%3A%22Line1%5C%5CnLine2%22%7D

Add gradients

Please add gradients and make fill colors editable to support rgba or number values.

some proposition

first, thank, your tool are awsome!
i have some sugest,

• dropShadowAlpha are not decimal. increase by (0.1)

• **Color piker ** for fill and strok,
  https://itsjavi.com/bootstrap-colorpicker/

• Add parent and child container to place pixi.text in a container , for easy see som align and achor engine
  able to set bg color for container and widh heigth.
  container, not affect the code

inLine code format

hi frien, this its just a low priority proposition.
Add a case to get code in one line (compressed)

example:

const style = new PIXI.TextStyle({
    dropShadow: true,
    dropShadowAlpha: 0.2,
    dropShadowAngle: 0.4,
    dropShadowBlur: 2,
    dropShadowDistance: 3,
    fill: 'white',
    fontSize: 14,
    letterSpacing: 1,
    lineJoin: 'round',
    strokeThickness: 3
});

to a copy past like thats
var style = new PIXI.TextStyle({ dropShadow: true, dropShadowAlpha: 0.2, dropShadowAngle: 0.4, dropShadowBlur: 2, dropShadowDistance: 3, fill: 'white', fontSize: 14, letterSpacing: 1, lineJoin: 'round', strokeThickness: 3 });
ok it is voluntary laziness, but it will avoid me to use a compressor for some long codes that I am implanting.
thanks
and gread jobs , your tool are very awsome for me.

Alpha missing ?

I do not know the reason for the problem, but it seems that alpha(rgba) is not present.
Can be a non-compatible webkit?
i try in chrome and Edge.

The styles I need to previews its exclusively generate with rgba
I thought maybe could be able to directly modify the code, but the keyboard and the changes are disabled.

Do you have any idea about a possible solution?

I do not know if this idea can seduce you.
You may have a better idea.

thank a lot , your work are awsomes.

Local Fonts Aren't Visible on Page Load

BUG: If a local font is your default font when the page loads, it's not visible from within the preview until you change the font back and forth.

Feature Request: BitmapFont Integration

Might be nice to support the new generative BitmapFont API:
https://medium.com/@bigtimebuddy/lets-talk-about-text-pixijs-244b9f95f830

Probably a toggle for BitmapText or Text would work.

jscolor [suggest]

a little more intuitive suggestion to work with colors.
http://jscolor.com/examples/
The native color windows box are hard to work. :)

add Filter text preview + code

hi, another small low priority suggestion.
Possible to add filter for preview text and maybe get code if possible.
this allows to customize a desired filter effect on text, quickly and save a lot of time to get the desired result and code.

sketch:

a suggestion but could also use a float box that we can activate
thank a lot