图片的异步加载

spritejs支持图片URL作为资源，我们前面已经看过，我们可以把URL作为texture直接传给Sprite的textures属性。但是，因为网络图片资源是异步加载的，这会可能导致sprite的异步显示以及我们拿到的sprite的contentSize为0。

预加载与雪碧图 - 图1

获取图片大小之所以为0，是因为当我们把label添加到layer上的时候，图片还没有完成加载，因此此时的sprite里没有内容来撑开宽高，所以得到的大小就是0。

  1. const scene = new Scene('#load-texture', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer();
  4. const robot = new Sprite('https://p5.ssl.qhimg.com/t01c33383c0e168c3c4.png');
  5. robot.attr({
  6.   anchor: [0.5, 0.5],
  7.   pos: [770, 300],
  8.   scale: 0.5,
  9. });
  11. layer.append(robot);
  13. const label = new Label(`图片大小： ${robot.contentSize}`);
  14. label.attr({
  15.   anchor: [0.5, 0.5],
  16.   pos: [770, 100],
  17.   font: '36px Arial',
  18. });
  20. layer.append(label);

scene提供了preload方法来预加载和保存图片资源。这个方法可以接受一个或多个图片数据，返回一个promise对象。

预加载与雪碧图 - 图2

我们通过preload事先预加载并缓存了图片，所以我们使用id:'robot'来创建sprite时，就可以立即显示出来，并得到contentSize。

  1. ;(async function () {
  2.   const scene = new Scene('#preload-texture', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  4.   await scene.preload({
  5.     id: 'robot',
  6.     src: 'https://p5.ssl.qhimg.com/t01c33383c0e168c3c4.png',
  7.   });
  9.   const layer = scene.layer();
  11.   const robot = new Sprite('robot');
  12.   robot.attr({
  13.     anchor: [0.5, 0.5],
  14.     pos: [770, 300],
  15.     scale: 0.5,
  16.   });
  18.   layer.append(robot);
  20.   const label = new Label(`图片大小： ${robot.contentSize}`);
  21.   label.attr({
  22.     anchor: [0.5, 0.5],
  23.     pos: [770, 100],
  24.     font: '36px Arial',
  25.   });
  27.   layer.append(label);
  28. }())

雪碧图

与css雪碧图一样，spritejs也支持雪碧图。spritejs支持texture packer生成的标准JSON雪碧图。

预加载与雪碧图 - 图3

使用雪碧图可以有效减少HTTP请求，从而提高响应速度。

  1. ;(async function () {
  2.   const scene = new Scene('#texturepacker', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  3.   const earthPNG = 'https://p3.ssl.qhimg.com/t01806718065fe97c65.png',
  4.     earthJSON = 'https://s3.ssl.qhres.com/static/d479c28f553c6cff.json';
  6.   await scene.preload([earthPNG, earthJSON]);
  8.   const layer = scene.layer();
  9.   const group = new Group();
  10.   group.attr({
  11.     pos: [655, 215],
  12.   });
  14.   const earth = new Sprite();
  15.   earth.attr({
  16.     textures: 'earth_blue.png',
  17.     pos: [115, 115],
  18.     anchor: [0.5, 0.5],
  19.   });
  20.   const earthShadow = new Sprite();
  21.   earthShadow.attr({
  22.     textures: 'earth_shadow2.png',
  23.     pos: [0, 0],
  24.   });
  26.   group.append(earth, earthShadow);
  27.   layer.append(group);
  29.   earth.animate([
  30.     {rotate: 0, textures: 'earth_blue.png'},
  31.     {rotate: 360, textures: 'earth_yellow.png'},
  32.     {rotate: 720, textures: 'earth_green.png'},
  33.     {rotate: 1080, textures: 'earth_white.png'},
  34.     {rotate: 1440, textures: 'earth_blue.png'},
  35.   ], {
  36.     duration: 20000,
  37.     iterations: Infinity,
  38.   });
  39. }())

批量资源预加载进度

有时候，我们要预加载大量的资源，此时我们可以在preload的时候显示一个进度。

预加载与雪碧图 - 图4

我们可以监听scene的preload事件来获取资源加载的进度，因为例子里这些图片不大，所以加载还是很快，可能需要打开控制台，模拟慢速网络才能看到效果。

  1. const scene = new Scene('#preload-many', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer();
  4. const images = [
  5.   'https://p1.ssl.qhimg.com/t016dc86e4b2c9b83a4.jpg',
  6.   'https://p0.ssl.qhimg.com/t01408bb4e2bed11d2e.jpg',
  7.   'https://p2.ssl.qhimg.com/t014e6d3eddccf40638.jpg',
  8.   'https://p2.ssl.qhimg.com/t014db3a8e2bf146c5b.jpg',
  9.   'https://p4.ssl.qhimg.com/t01ff1bf2a37a741821.jpg',
  10.   'https://p2.ssl.qhimg.com/t01dc1341ab5d0fe663.jpg',
  11.   'https://p5.ssl.qhimg.com/t01a0acf6aa37d00f91.jpg',
  12.   'https://p1.ssl.qhimg.com/t013b8514570a69a1c8.jpg',
  13.   'https://p2.ssl.qhimg.com/t011c71494e6d98d92b.jpg',
  14.   'https://p4.ssl.qhimg.com/t01ab40609e924d995c.jpg',
  15.   'https://p0.ssl.qhimg.com/t01794495bebb84f47d.jpg',
  16.   'https://p4.ssl.qhimg.com/t01a30bb66a9d11d624.jpg',
  17.   'https://p4.ssl.qhimg.com/t01b3d2c0b0093a957d.jpg',
  18.   'https://p0.ssl.qhimg.com/t010da5e7311c8dd3a9.jpg',
  19.   'https://p5.ssl.qhimg.com/t0189dd547c322b2357.jpg',
  20.   'https://p4.ssl.qhimg.com/t01feb50457ebbada10.jpg',
  21. ];
  23. const label = new Label('加载中... 0 / 16');
  24. label.attr({
  25.   anchor: [0.5, 0.5],
  26.   font: '36px Arial',
  27.   pos: [770, 200],
  28. });
  30. layer.append(label);
  32. const button = new Label('点击加载');
  33. button.attr({
  34.   anchor: [0.5, 0.5],
  35.   font: '44px Arial',
  36.   pos: [770, 350],
  37.   border: [2, 'black'],
  38.   borderRadius: 12,
  39.   padding: [10, 10],
  40. });
  41. layer.append(button);
  43. async function loadRes() {
  44.   button.remove();
  46.   scene.on('preload', (evt) => {
  47.     label.text = `加载中... ${evt.loaded.length} / ${evt.resources.length}`;
  48.   });
  50.   const imgs = await scene.preload(...images);
  52.   label.remove();
  54.   imgs.forEach(({texture}, i) => {
  55.     const sprite = new Sprite();
  56.     sprite.attr({
  57.       textures: [texture],
  58.       x: 125 + (i % 8) * 170,
  59.       y: 100 + Math.floor(i / 8) * 200,
  60.       size: [150, 150],
  61.     });
  62.     layer.append(sprite);
  63.   });
  64. }
  66. button.on('mouseenter', (evt) => {
  67.   scene.container.style.cursor = 'pointer';
  68. });
  69. button.on('mouseleave', (evt) => {
  70.   scene.container.style.cursor = 'default';
  71. });
  72. button.on('mousedown', (evt) => {
  73.   evt.target.attr('scale', 0.8);
  74. });
  75. button.on('mouseup', (evt) => {
  76.   evt.target.attr('scale', 1);
  77.   loadRes();
  78. });