本文正在参与 “性能优化实战记录”话题征文活动
介绍
我们本期要用pixi.js实现一个场景对白的动画，很多游戏都有此类业务场景，比如叙述或者回忆一段故事背景，比起一大段直白的文字来说，这种方式有很强的带入感。接下来，我先看下，最终完整的实现动画效果：
上面的这个场景，是日漫犬夜叉中被折断铁碎牙的一个故事片段，结合文字和图片组成的动画是不是很快就了解到他的铁碎牙是如何断掉的了。
因为篇幅过长，所以，我们有重点的分为两篇来讲述，分别为优化篇和实现篇。我们今天反其道而行，先说怎么优化所用到的资源，从而达到性能一开始就是最佳。观察刚才的动画，你会发现，他存在9张背景图和字体资源。因为我的本次是用pixi.js实现的H5网页，所以，加载速度对用户的影响至关重要。而影响加载速度很大一部分就是这两类资源。后面将会讲述如何优化这两类资源的。
优化篇
字体资源
问：为什么字体资源不能直接使用呢？
答：并不是不可以用，只是字体资源尤其是中文字体资源都比较大，一来用户浪费用户流量，二来用户等待时间也很长。
就如，我们要做的犬夜叉案例来说吧，他用了华康少女体这种字体，光这一个字体就要占20多兆，简直恐怖
问：那我们又想使用他怎么办呢？默认字体真的很难看！！
答：我们可以使用位图字体来呈现，当然我们要先挑选要使用到的字体，完全不会用到的直接不要了，这样只留下要用的，字体资源自然就小了。
介绍大家一个专门剥离字体的工具了——BMFont字体编辑器。他可以把要用的字体都剥离出来，然后我们可以在pixi.js加载使用。接下来，我们就简单介绍一下他的使用吧。
-
从官网下载，打开exe
-
在记事本先写一段要用的文字，记住保存必须用utf-8编码不然后面就会乱码。
-
Options->Font Settings把要用的字体导入并选择他。
-
Edit->Select chars from file把刚才的文件导入，就会发现自动给你找到对应的文字了，着实很方便。
-
Options->Export Options 我们去设置导出32位然后还要选择是png位图的形式。
-
Options->Save bitmap font as... 我们导出来了，看看大小吧
23M的资源我们缩到了50k，缩小了差不多是470多倍，这下就可以秒加载字体资源了~
我们先看看怎么在pixi.js用这个字体资源吧，具体怎么实现这个案例在实现篇中，下期会将，我们先展示一个位图文字实现示例：
this.app.loader
.add('hk', 'font/hk/font.fnt')
.load(()=>{
const text = new PIXI.BitmapText("散魂铁爪", {
fontName: '华康少女字体',
fontSize: 36,
tint: 0x000000,
letterSpacing: 5,
align: "left",
});
text.position.set(100, 100)
this.app.stage.addChild(text)
});
复制代码我们先加载对应的字体，完成后文字绘制到界面当中，如下图，发现我们想要的华康少女字体就出来了~
图片资源
问：图片资源我们从什么方面去优化呢？
答：我们从两个方面去优化他，一个是让他请求次数变少减少服务器压力。第二个是资源大小让他缩减，这样加载起来更快。
我们看到了刚才的动画有9张背景图，先考虑如何怎么把他们合并这个场景就请求一次图片就完成了。
再介绍给大家一个合并图片资源的神器——TexturePackerGUI
这个使用特别简单，就是把图片拖入设置好相应配置导出精灵图就行。
就这样我们合成了一张大图片和一个json文件，回头我们也是通过pixi.js加载json，然后就能拿到这个这张大图中几个小图的位置了。
this.app.loader
.add("stage", "assets/stage.json")
.load((res) => {
let bgImg = new PIXI.Sprite(res.resources.stage.textures["6.png"]);
bgImg.anchor.set(0, 0);
bgImg.position.set(0, -5)
bgImg.scale.set(1.23)
this.app.stage.addChild(bgImg);
})
复制代码同样的，我们加载json得到对应的数据后就可以生成图片精灵供我们去使用了。
还没结束，我们合成的那张大图依然可以压缩优化他，就用业内都知道的tinypng就可以完美的减少60%到80%的空间，赶紧去试试吧~
结语
通过的学习，感想如何，字体和图片资源的优化是H5游戏和动画的及其重要的一部分，我期望大家对网页优化也是如此减少请求次数，减少资源大小，一切为服务器和用户去周期的考虑。好了，至于开头的案例犬夜叉动画怎么完整的去实现，就在下集，敬请关注对你有帮助别忘点个赞哟