avgjs / pixi-richtext

A Rich Text solution for PixiJS using SDF.

pixi-richtext

Rich-text for PixiJS!

Feature

• Runtime signed distance field algorithm, with LRU cache for 1024 characters
• Better rendering effect
• No font file required, while supporting custom font via @font-face
• Full support for CJK languages
• Layout using huozi
• Rich-text support

Usage

npm install pixi-richtext --save

import PIXI from 'pixi.js';
import RichText from 'pixi-richtext';

const app = new PIXI.Application({
  view: document.getElementById('app'),
  width: 1280,
  height: 720
});

const chars = '泽材<fillColor=0xff6600>灭<bold>逐</bold></fillColor>莫笔<strokeEnable=true>亡</strokeEnable>鲜，<strokeEnable=true><strokeColor=black><fillColor=red><fontSize=64>如何</fontSize><fillColor=orange><italic>气</italic><fillColor=yellow><bold>死</bold><fillColor=green>你的<fillColor=0xff6600>设<fillColor=blue>计师<fillColor=magenta><fontSize=28>朋</fontSize>友</fillColor></fillColor></fillColor></fillColor></fillColor></fillColor></fillColor></strokeColor></strokeEnable>';
// see more: https://github.com/Icemic/huozi.js
const layoutOptions = {
  // any valid CSS font-family value is supported
  // includes the fonts imported using @font-face
  fontFamily: 'sans-serif',
  // grid width for layout, 1em = gridSize
  gridSize: 26,
  // max width presented by character count
  // (max-width = (gridSize + xInterval) * column - xInterval)
  column: 25,
  // max line number
  row: Infinity,
  // interval between characters (CJK only)
  xInterval: 0,
  // interval between lines
  yInterval: 12,
  // (for western characters)
  letterSpacing: 0,
  // compress punctuation inline (CJK only)
  inlineCompression: true,
  forceGridAlignment: true,
  // enable it if your text do not include CJK characters
  westernCharacterFirst: false,
  forceSpaceBetweenCJKAndWestern: false
}

const defaultStyle = {
  fillEnable: true,
  fillColor: 'black',
  fillAlpha: 1,

  shadowEnable: false,
  shadowColor: 'black',
  shadowAlpha: 1,
  shadowAngle: Math.PI / 6,
  shadowDistance: 5,
  shadowThickness: 2,
  shadowBlur: 0.15,

  strokeEnable: false,
  strokeColor: 'black',
  strokeAlpha: 1,
  strokeThickness: 0,

  fontFamily: 'sans-serif',
  fontSize: 18,

  italic: false,
  bold: false,

  // unsupported now
  strike: false,
  underline: false,

  layout: layoutOptions
};



const text = new RichText(chars, defaultStyle, layoutOptions);
app.stage.addChild(text);
text.x = 0;
text.y = 100;

Just like what you see above, rich-text is expressed by UBB-like code. All the tags in defaultStyle are supported. Tags in text will overwrite the style temporarily until the they were closed.

In addition, you can use text.renderPosition to make a typewriter effect. See more in example/demo.js.

Todos

• Support pre-generated SDF texture
• Generating SDF texture in single channel, which will expend cache number to 4096
• Support strike and underline
• Custom SDF algorithm, eg. msdf

Related Works

• TinySDF (https://github.com/mapbox/tiny-sdf)

Contribution

Any contribution is welcomed!

License

MIT LICENSE, SEE LICENSE.

pixi-richtext's Issues

Consider updating pixi.js to version 5.0?

Consider updating pixi.js to version 5.0?

Can't get demo to work / How can I test in es5?

Hey,

I've been trying to get this working in just a plain index.html page with javascript but my webpack to compile is not working.

Nor can I test the demo as it fails on es6 import.

The usage in the readme doesn't help much

Good work

Good work you have done here

I've added you to my list cursedcoder/awesome-pixijs@aa83e3a

👍

returnu is not defined