easy-sprite.js v1.0.6

easy-sprite

Install

npm install --save easy-sprite.js

or

yarn add easy-sprite.js

如何使用

import {Stage, Rect, Ellipse} from 'easy-sprite.js';

const canvas = document.getElementById('canvas');
  class MyGame extends Stage {

  }

  const stage = new MyGame(canvas, {
    width: 1000,
    height: 600,
  });

  stage.showFPS = true;

  // 添加一个矩形
  const rect = new Rect(100, 100, 100, 100);
  rect.fillStyle = 'green';
  stage.addChild(rect);
  // 旋转 会影响children
  rect.rotation = 45 * Math.PI * 2 / 360;

  // 矩形上面添加一个椭圆
  const ellipse = new Ellipse(50, 50, 50, 40);
  ellipse.fillStyle = 'red';
  rect.addChild(ellipse);

 // 事件侦听
  ellipse.addEventListener('click', (e) => {
    console.log(e)
  })

关于动画的使用，自行选择喜欢的动画库即可，以下以 tween.js 为例

npm install --save  @tweenjs/tween.js@^18

or

yarn add  @tweenjs/tween.js@^18

 class MyGame extends Stage {
    onUpdated(time: number) {
      TWEEN.update(time);
    }
  }

  const stage = new MyGame(canvas, {
    width: 1000,
    height: 600,
  });

  stage.showFPS = true;

  // 添加一个矩形
  const rect = new Rect(100, 100, 100, 100);
  rect.fillStyle = 'green';
  stage.addChild(rect);
  // 旋转 会影响children
  rect.rotation = 45 * Math.PI * 2 / 360;

  // 矩形上面添加一个椭圆
  const ellipse = new Ellipse(50, 50, 50, 40);
  ellipse.fillStyle = 'red';
  ellipse.rotation = 45 * Math.PI * 2 / 360;
  rect.addChild(ellipse);



  // 补间动画
  new TWEEN.Tween(rect)
    .to({ x: rect.x + 500, y: rect.y, rotation: 360 * Math.PI * 2 / 360 }, 1000)
    .easing(TWEEN.Easing.Quadratic.Out)
    .repeat(Infinity)
    .yoyo(true)
    .start(0)

Sprite 展示元素的基类