智能创作
有奖捉虫：办公协同&微信生态&物联网文档专题 HOT
文档中心 > 智能创作

贴纸制作教程

最近更新时间：2023-06-30 10:42:52

我的收藏

本页目录：

1.4.0 版本的微剪播放器开始支持添加贴纸和选择字体。

雪碧图

微剪的贴纸渲染使用雪碧图实现。 雪碧图是一张拼接了所有帧的 png 图，配套一个spritesheet.json说明每一帧的位置和尺寸信息。



制作教程

1. 准备贴纸所需的序列帧。


2. 下载 Texture Packer 并安装。


说明
免费工具可使用 Free 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
})

中国站