easy-sprite.js

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 展示元素的基类

方法名称	说明	类型
addChild	添加子节点	(sprite: Sprite): void
removeChild	移除子节点	(sprite: Sprite): void
removeAll	移除所有子节点	(): void
contains	是否是包含的子节点	(sprite: Sprite) : boolean
isHitPoint	碰撞检测	(x: number, y: number): boolean
addEventListener	添加事件侦听	(type: EventType, handler: EventTypeHandler): void
removeEventListener	移除事件侦听	(type: EventType, handler: EventTypeHandler): void
stopPropagation	是否取消冒泡	(): void
isHitPoint	碰撞检测	(x: number, y: number): boolean
onBeforeUpdate	更新之前的回调,需要重写此方法	(): void
onUpdated	更新之后的回调,需要重写此方法	(time:number): void

属性名称	说明	类型
x	x 坐标，默认0	number
y	y 坐标，默认0	number
width	宽，默认0	number
height	高，默认0	number
rotation	旋转角度，默认0°	number
zIndex	层级，默认0	number
transformOrigin	旋转点，默认 ['center', 'center']	['left' 'right' 'center' 'top' 'bottom']
children	子节点，默认[]	Sprite[]
parent	父节点，默认null	Sprite
touchEnabled	是否响应事件，默认true	boolean
Graphics	重写部分 canvas.context