1.4.0 版本的微剪播放器开始支持添加贴纸和选择字体。
雪碧图
微剪的贴纸渲染使用雪碧图实现。
雪碧图是一张拼接了所有帧的 png 图,配套一个
spritesheet.json
说明每一帧的位置和尺寸信息。
制作教程
1. 准备贴纸所需的序列帧。
2. 下载 Texture Packer 并安装。
说明
3. 将序列帧拖入Texture Packer。
小程序 WebGL 对纹理支持最大尺寸为2048*2048
,因此需要对过大的精灵图进行缩放。
选择左侧精灵列表所有的精灵,右键>精灵设置,调整精灵的缩放(缩放依实际情况而定,建议最终缩放完的尺寸在单张200-400之间):说明
如果有数量比较多的序列帧,建议开发者自行做一层过滤,避免序列帧过多导致放不下。
4. 设置输出文件框架为
PIXI.js
,然后选择输入路径。
说明
导出的精灵图名称和 JSON 文件名称请务必保持一致。
5. 单击 发布精灵表 导出。
6. 将
heye.json
和 heye.png
放在 heye 文件夹下,并将 heye 文件夹打成 Zip 包。7. 将 Zip 包上传 CDN。
说明
将打好的 Zip 包上传您的资源服务地址,然后传入播放器即可完成贴纸自定义。
这里假设得到的资源地址为:
https://xxxxx.heye.zip
。内置&渲染
制作完成贴纸之后就可以注册到微剪渲染了。
1. 配置自定义资源:
前面生成了
heye
贴纸,现在将它合并到播放器内置资源中(如果界面无需展示内资资源则可以直接覆盖)。1.1 首先,获取播放器内置贴纸,详情请参见 内置资源。
let stickerList = await plugin.getStickerList();stickerList.tabs[0].list.push({key: 'heye',name: '荷叶',previewImage: 'https://xxxxx.heye.png',zipUrl: 'https://xxxxx.heye.zip'});
1.2 调用
plugin
实例的 initPlugin
方法,更新 setting 配置。plugin.initPlugin({source: {stickers: stickerList}});
2. 渲染:
let stickerclip = new global['wj-types'].Clip({id: 'heye',type: 'sticker',section: {start: 0,end: 10,duration: 10},designSize: {xPercent: 0.20, //初始位置yPercent: 0.30,rotation: 0.4, // 旋转角度(单位弧度)scale: 2 // 缩放尺寸},startAt: 0,key: 'heye', // 贴纸key})