加载器

我们了解了加载器的基本使用方法，不过，还有更多的姿势。 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-loader 的 progress 事件来监听加载进度：

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 + '%');
  }
});

注意：
一旦执行 load 或 run 后，就不能在 Tiny.Loader 再 add 任何资源，会抛出异常。如果有需要，可以实例化一个新的 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_TYPE：XHR(即：XMLHttpRequest)、IMAGE、AUDIO、VIDEO

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

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

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

# 加载器

# 给加载的资源设定 name

# 监测加载进度

# 高级用法

# 加载 JSON 对象

# 加载 Base64 的图片