简介
在图像渲染的过程中,有的时候会需要一些动态改变的文字,而不是一成不变的图片,这时它们一般都是直接渲染的,而且还可以设置字体、样式等等。但是如果它们的样式独具特色且不拘一格,我们也可以使用图片,每一个字符对应一张图片,这样的方式叫做位图文本。
在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);
- 如果真的需要支持汉语的话,最好还能考虑一下别的方案。