使用雪碧图

当你的帧动画帧数较多时，直接使用单张帧图明显很不友好，不用担心，Bling 支持雪碧图（tileset）的加载使用。

制作

我们知道，tileset 的产物有两个资源：合并的 PNG 和描述的 JSON，比如：

• png: https://gw.alipayobjects.com/os/tiny/resources/1.0.5/images/tiles/mole_tile.png
• json: https://gw.alipayobjects.com/os/tiny/resources/1.0.5/images/tiles/mole_tile.json

鉴于业界有很多有此功能的优秀软件，建议使用相关软件/工具制作，比如：TexturePacker，这里推荐 ShoeBox。

使用

下面举一个简单的例子来阐述 tileset 的使用姿势。

对应的描述文件是：https://gw.alipayobjects.com/os/tiny/resources/1.0.5/images/tiles/mole_tile.json

你可以通过合并前的单图片名来使用这里的任意一个地鼠，下面我们来提取"支地鼠"（左起第一个和第二个，名称分别是 ali_mole.png、ali_mole_hit.png），并创建一个2帧的帧动画。

<bling
  className="bling"
  mode="movieclip"
  ref="BlingRef"
/>

// 目前只支持此方式引用描述的 JSON 文件
import tilesetJSON from './mole_tile.json';
const { Bling } = $global;

Page({
  onReady() {
    const loader = new Bling.Loader();

    loader.addSpritesheet(tilesetJSON);
    loader.on('complete', () => {
      // 使用 MovieClip.fromFrames 静态方法创建一个 movieclip
      const mc = Bling.MovieClip.fromFrames([
        // 使用 FrameCache 获取纹理缓存
        Bling.FrameCache['ali_mole.png'],
        Bling.FrameCache['ali_mole_hit.png'],
      ]);

      // 和 ref 绑定关系
      this.blingRef.bindMovieClip(mc);

      // 设置动画速度，值越大速度越快
      mc.setSpeed(0.05);
      // 立即播放
      mc.play();
    });
    loader.start();
  },
  BlingRef(ref) {
    this.blingRef = ref;
  },
});

注意

• 在引入 JSON 的时候，你需要保证 meta > image 引用的图片链接是绝对路径或在线链接，如：/pages/xxx/mole_tile.png 或 https://xxx/mole_tile.png