屏幕适配

与旧版相比，SpriteJS Next 简化了屏幕适配参数。

旧版在构造Scene的时候可以提供viewport和resolution两个参数，而新版不再需要手工指定viewport，而是让viewport跟随着container自适应。

新版只需要指定width/height属性，这两个属性相当于旧版里设置resolution。

粘连模式

SpriteJS Next 也对粘连模式进行了简化，不再像旧版那样有两个参数，只提供一个 mode 参数。

mode 可选值如下：

  • scale 默认值，将canvas拉伸到container大小，因为拉伸，画布可能会变形
  • stickyWidth 将canvas宽度设为container宽度，高度随比例适配，并垂直居中
  • stickyTop 将canvas宽度设为container宽度，高度随比例适配，并与container顶部对齐
  • stickyBottom 将canvas宽度设为container宽度，高度随比例适配，并与container底部对齐
  • stickyHeight 将canvas高度设为container高度，宽度随比例适配，并水平居中
  • stickyLeft 将canvas高度设为container高度，宽度随比例适配，并与container左边对齐
  • stickyRight 将canvas高度设为container高度，宽度随比例适配，并与container右边对齐
  1. const {Scene, Sprite} = spritejs;
  2. const container = document.getElementById('adaptive');
  3. const scene = new Scene({
  4.   container,
  5.   width: 640,
  6.   height: 1000,
  7.   mode: 'stickyWidth',
  8.   // contextType: '2d',
  9. });
  10. const layer = scene.layer();
  12. (async function () {
  13.   await scene.preload(
  14.     {id: 'snow', src: 'https://p5.ssl.qhimg.com/t01bfde08606e87f1fe.png'},
  15.     {id: 'cloud', src: 'https://p5.ssl.qhimg.com/t01d2ff600bae7fe897.png'}
  16.   );
  18.   const cloud = new Sprite('cloud');
  19.   cloud.attr({
  20.     anchor: [0.5, 0],
  21.     pos: [320, -50],
  22.     size: [200, 130],
  23.   });
  24.   layer.append(cloud);
  26.   function addRandomSnow() {
  27.     const snow = new Sprite('snow');
  28.     const x0 = 20 + Math.random() * 600,
  29.       y0 = 0;
  31.     snow.attr({
  32.       anchor: [0.5, 0.5],
  33.       pos: [x0, y0],
  34.       size: [50, 50],
  35.     });
  37.     snow.animate([
  38.       {x: x0 - 10},
  39.       {x: x0 + 10},
  40.     ], {
  41.       duration: 1000,
  42.       fill: 'forwards',
  43.       direction: 'alternate',
  44.       iterations: Infinity,
  45.       easing: 'ease-in-out',
  46.     });
  48.     const dropAnim = snow.animate([
  49.       {y: -200, rotate: 0},
  50.       {y: 2000, rotate: 1880},
  51.     ], {
  52.       duration: 15000,
  53.       fill: 'forwards',
  54.     });
  56.     dropAnim.finished.then(() => {
  57.       snow.remove();
  58.     });
  60.     layer.append(snow);
  61.   }
  63.   setInterval(addRandomSnow, 200);
  64. }());