PixiJs系列实战课程- 基础篇-05.1制作字幕

基础篇

制作字幕

动画中难免会用到文字，当前你可以用图片来实现，不过如果是每行或者说每个字的运动的话，就需要学习一下PIXI.Text，用起来也不是很复杂

  const w = document.body.clientWidth,
              h = document.body.clientHeight
        var app = new PIXI.Application(w, h, {
            backgroundColor: 0x000000
        });
    document.body.appendChild(app.view);
 
    var style = {
        fontFamily: 'Arial',
        fontSize: '36px',
        fontStyle: 'italic',
        align:'center',
        lineHeight:48,
        fontWeight: 'bold',
        fill: '#F7EDCA',
        stroke: '#000000',
        strokeThickness: 5,
        dropShadow: true,
        dropShadowColor: '#ffffff',
        dropShadowAngle: Math.PI / 6,
        dropShadowDistance: 6,
        wordWrap: true, //是否允许换行
        wordWrapWidth: 440 //换行执行宽度
    };
    
    var richText = new PIXI.Text('大家好！\n欢迎学习pixiJs', style);
    richText.x = 35;
    richText.y = 20;
    app.stage.addChild(richText);

效果如下：

如何应用到项目

首先在精灵里绑定这个文字，然后加入场景，在动画中应用之前的机制让他动，最后在结合着时间轴让他运动起来。 代码如下

let style1 = new PIXI.TextStyle({
    fontFamily: 'SourceHanSansSC-Normal',
  	align:'center',
    fontSize: 43,
  	lineHeight:66,
    fill: ['#ffffff'], // gradient
    wordWrap: true,
    wordWrapWidth: 500
  });
  sprites.text1 = new PIXI.Text('xxxx',style1);
  sprites.text1.x = 840;
  sprites.text1.y = sprites.text.height+sprites.text.y;
  scenes.scene7.addChild(sprites.text,sprites.text1);

 text:[{
    delay:0.88,
    duration:0.07,
    from:{alpha:0}
  },{
    delay:0.88,
    duration:0.07,
    from:{y:-200}
  }]

结束语

下节课怎么就实战一个小例子，结合着上面所有的语法制作一个简单版一镜到底。