加载器

我们了解了加载器的基本使用方法,不过,还有更多的姿势。 Tiny.js 的加载器是基于 resource-loader,所以你可以直接使用 resource-loader 的接口。

给加载的资源设定 name

如果需要,你可以给每一个资源设置一个唯一的 name,如果不设置,默认就是资源的传入链接的字符串。

Tiny.Loader
  .add('antImage', 'images/ant.png')
  .load(() => {..});

这里在 Tiny.Loader.resources 下创建了一个叫 antImage 的对象,这就意味着你可以引用这个对象来创建精灵:

const antSprite = new Tiny.Sprite(Tiny.TextureCache['antImage']);

监测加载进度

你可以通过 resource-loaderprogress 事件来监听加载进度:

Tiny.Loader.on('progress', progressHandler);
function progressHandler(loader, resource) {
  console.log('url => ' + resource.url, 'name => ' + resource.name);
  console.log('progress => ', loader.progress + '%');
}

Tips

  • 有一些额外的属性在 resource 上,resource.error 会告诉你一些可能错误原因,resource.data 是文件的二进制数据。
  • 更多的特性,比如:add 方法的更多入参、reset 方法等请移步 resource-loader

也可以使用 Tiny.js 提供的整体方案:

Tiny.Loader.run({
  resources: [..],
  // 加载进度
  onProgress: (per, resource) => {
    console.log('url => ' + resource.url, 'name => ' + resource.name);
    console.log('percent => ', per + '%');
  }
});

注意:

一旦执行 loadrun 后,就不能在 Tiny.Loaderadd 任何资源,会抛出异常。如果有需要,可以实例化一个新的 Loader,即:

const loader = new Tiny.loaders.Loader();
loader
  .add(..)
  .load(() => {..});

高级用法

加载 JSON 对象

可以直接使用 Tiny.loaders.Loader() 加载 JSON 对象,只需要传入 metadata.JSONObject 为你的 JSON 对象。 如果加载的 JSON 对象里的图片过程中有异常,可以通过 metadata.fallback 来做兜底

const JSONObject = {"meta":{"image":"https://...","size":{"w":1730,"h":1158},"scale":"1"},"frames":{}};
const loader = new Tiny.loaders.Loader();
loader
  .add({
    url: 'chicken.json', // url 随便,但一定要以 .json 后缀结尾
    metadata: {
      JSONObject,
      fallback: () => {}
    },
    xhrType: Tiny.loaders.Resource.XHR_RESPONSE_TYPE.JSONOBJECT, // 必须有
  });

可参考单元:Playground > 加载器 > JSON对象加载

加载 Base64 的图片

1.1.7 版本后,可以直接加载 Base64 的图片,不用再做跨域处理了

const loader = new Tiny.loaders.Loader();
loader
  .add([
    'data:image/png;base64,iV...Jggg=='
  ]);

加载没有类型后缀的URL

传入 add 方法的参数 loadType 来手动指定加载的资源类型:

Tiny.Loader
  .add([{
    name: 'avatar',
    url: 'http://tfs.alipayobjects.com/images/partner/TB1pN8TXnhE81JjHv_OXXcnBpXa_160X160',
    loadType: Tiny.loaders.Resource.LOAD_TYPE.IMAGE
  }])
  .load(() => {
    var avatar = new Tiny.Sprite(Tiny.TextureCache['avatar']);
  });

Tips

更多 LOAD_TYPEXHR(即:XMLHttpRequest)IMAGEAUDIOVIDEO

同样,如果你加载的 tileset 里的图片也没有类型后缀,你可以设置它的 imageMetadata,如下:

loader
  .add({
    name: 'xxx',
    url: 'xxx.json',
    crossOrigin: true,
    metadata: {
      imageMetadata: {
        loadType: Tiny.loaders.Resource.LOAD_TYPE.IMAGE
      }
    }
  });

注意

此功能只有 1.6.1 版本及以上支持