PixiJS学习（6）文本

简介

在图像渲染的过程中，有的时候会需要一些动态改变的文字，而不是一成不变的图片，这时它们一般都是直接渲染的，而且还可以设置字体、样式等等。但是如果它们的样式独具特色且不拘一格，我们也可以使用图片，每一个字符对应一张图片，这样的方式叫做位图文本。

在pixiJs中有单独需要文字的类，基础文本（http://pixijs.download/release/docs/PIXI.Text.html），也有位图文本这样的类（http://pixijs.download/release/docs/PIXI.BitmapText.html），还有设置文本样式的类（http://pixijs.download/release/docs/PIXI.TextStyle.html）。

 

基础文本：

// 基础文本，需要添加到舞台才能看到
let basicText = new PIXI.Text('Basic text in pixi , 基础文本');
basicText.x = 50;
basicText.y = 100;

this.frameStage.stage.addChild(basicText);

// 设置样式，创建一个样式的对象，在生成基础文本时使用即可
let style = new PIXI.TextStyle({
  fontFamily: 'Arial', // 字体
  fontSize: 36, // 字号大小
  fontStyle: 'italic', // 斜体
  fontWeight: 'bold', //粗体
  fill: ['#ffffff', '#00ff99'], // 填充颜色
  stroke: '#4a1850', // 描边颜色
  strokeThickness: 5, // 描边宽度
  dropShadow: true, // 阴影
  dropShadowColor: '#000000', // 阴影颜色
  dropShadowBlur: 4, // 阴影模糊半径
  dropShadowAngle: Math.PI / 6, // 阴影投射方向
  dropShadowDistance: 6, // 阴影投射距离
  wordWrap: true, // 是否换行
  wordWrapWidth: 440, // 每行的长度
});

let richText = new PIXI.Text('This is richText , \n样式文本 , \nneed set style', style);
richText.x = 50;
richText.y = 250;

this.frameStage.stage.addChild(richText);

注意事项

• 相对来说 pixiJs 的文本支持还是比较友好的（白鹭引擎中的文本渲染不能设置字间距，一度让人奔溃）；
• 在设置为换行时，如果字符中间没有空格，则无法换行；
• 一些特殊需求，例如汉字从上倒下排序能难实现，会有一些问题；

 

位图文字：

// 在使用之前需要先加载完成.xml文件
let bitmapFontText = new PIXI.BitmapText('bitmap fonts are supported!\nWoo yay!', {
  font: '55px Desyrel',
  align: 'left'
});

bitmapFontText.x = 50;
bitmapFontText.y = 200;

this.frameStage.stage.addChild(bitmapFontText);

 

// 官方加载
// 资源地址：
// https://pixijs.io/examples/examples/assets/bitmap-font/desyrel.xml
// https://pixijs.io/examples/examples/assets/bitmap-font/desyrel.png
const app = new PIXI.Application({ backgroundColor: 0x1099bb });
document.body.appendChild(app.view);

app.loader
    .add('desyrel', 'examples/assets/bitmap-font/desyrel.xml')
    .load(onAssetsLoaded);

function onAssetsLoaded() {
    const bitmapFontText = new PIXI.BitmapText('bitmap fonts are supported!\nWoo yay!', { font: '55px Desyrel', align: 'left' });

    bitmapFontText.x = 50;
    bitmapFontText.y = 200;

    app.stage.addChild(bitmapFontText);
}

 

注意事项

• 在正式项目中确实没有用过这样的方式实现，但是这种模式其实是通用的；一般需要位图文字的项目都比较大，直接就上游戏引擎之类的东西了。可是方法绝对没有啥问题；
• 官方推荐生成位图文字资源的软件是：https://www.bmglyph.com/（mac）http://www.angelcode.com/products/bmfont/（win）；
• 如果真的需要支持汉语的话，最好还能考虑一下别的方案。