# sprite-node

> spritejs for node-canvas

Latest version **0.1.0** (published 2018-03-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install sprite-node
pnpm add sprite-node
yarn add sprite-node
bun add sprite-node
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2018-03-06 |
| First published | 2018-03-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 633.5 KB |
| Known vulnerabilities | 0 (+24 in 1 direct dependencies) |
| Install scripts | no |
| Author | akira-cn |
| Maintainers | akira_cn |

## Links

- npm: https://www.npmjs.com/package/sprite-node
- npm.io page: https://npm.io/package/sprite-node

## Dependencies (3)

- [axios](https://npm.io/package/axios.md) ^0.18.0
- [canvas](https://npm.io/package/canvas.md) ^2.0.0-alpha.9
- [spritejs](https://npm.io/package/spritejs.md) ^1.15.0

## Recent versions

- 0.1.0 (latest) — 2018-03-06

## README

# sprite-node

[spritejs](https://github.com/spritejs/spritejs) for [node-canvas](https://github.com/Automattic/node-canvas).

![https://p2.ssl.qhimg.com/t01ec4584a889ae740c.gif](https://p2.ssl.qhimg.com/t01ec4584a889ae740c.gif)

## Server-side Render

```bash
sudo apt-get install libcairo2-dev libjpeg-dev libpango1.0-dev libgif-dev build-essential g++
```

```bash
npm install sprite-node
```

```js
const fs = require('fs')
const GIFEncoder = require('gifencoder')

const {Scene, Sprite} = require('sprite-node')
const width = 800
const height = 600
const scene = new Scene('#test', width, height)
scene.setResolution(width * 2, height * 2)

;(async function () {
  const birdsJsonUrl = 'https://s5.ssl.qhres.com/static/5f6911b7b91c88da.json'
  const birdsRes = 'https://p.ssl.qhimg.com/d/inn/c886d09f/birds.png'

  await scene.preload([birdsRes, birdsJsonUrl])

  const bglayer = scene.layer('bg', {handleEvent: false})

  const fglayer = scene.layer('fg', {handleEvent: false})
  const axisZero = [400, 400]
  const circle = new Sprite()
  circle.attr({
    anchor: [0.5, 0.5],
    size: [800, 800],
    pos: axisZero,
    bgcolor: '#139',
    opacity: 0.5,
    borderRadius: 400,
  })

  bglayer.appendChild(circle)

  function pointAdd(p1, p2 = [0, 0]) {
    return [p1[0] + p2[0], p1[1] + p2[1]].map(Math.round)
  }

  function pointSub(p1, p2 = [0, 0]) {
    return [p1[0] - p2[0], p1[1] - p2[1]].map(Math.round)
  }

  function sleep(time) {
    return new Promise(resolve => setTimeout(resolve, time))
  }

  async function randomAnimate(bird) {
    const birdPoint = bird.attr('pos')
    const randomArc = Math.random() * 2 * Math.PI
    const randomPoint = pointAdd([350 * Math.cos(randomArc), 350 * Math.sin(randomArc)], axisZero)  
    const dist = pointSub(randomPoint, birdPoint)
    const distance = Math.round(Math.sqrt(dist[0] * dist[0] + dist[1] * dist[1]))
    const flip = dist[0] < 0 ? -1 : 1
    const duration = 5 * distance + 100
    bird.attr('scale', [flip, 1])

    const anim = bird.animate([
      {pos: birdPoint},
      {pos: randomPoint},
    ], {
      duration,
      endDelay: 500,
      fill: 'both',
    })
    await anim.finished
  }

  let stop = false, birdCount = 0

  async function addBird() {
    birdCount++
    const bird = new Sprite('bird1.png')
    bird.attr({
      anchor: [0.5, 0.5],
      pos: axisZero,
      transform: {
        rotate: 0,
      },
    })
    fglayer.appendChild(bird)
    let idx = 0
    let t = setInterval(() => {
      bird.textures = [`bird${++idx % 3 + 1}.png`]
      if(stop) clearInterval(t)
    }, 100)

    do {
      await randomAnimate(bird)
    } while (!stop)

    bird.remove()
    birdCount--
  }

  const encoder = new GIFEncoder(width, height)
  // stream the results as they are available into myanimated.gif
  encoder.createReadStream().pipe(fs.createWriteStream('myanimated.gif'))

  encoder.start()
  encoder.setRepeat(0) // 0 for repeat, -1 for no-repeat
  encoder.setDelay(100) // frame delay in ms
  encoder.setQuality(10) // image quality. 10 is default.

  const t = setInterval(async () => {
    const canvas = await scene.snapshot()
    const ctx = canvas.getContext('2d')
    encoder.addFrame(ctx)
    if(stop && birdCount <= 0) clearInterval(t)
  }, 100)

  for(let i = 0; i < 10; i++) {
    console.log(`add ${i+1} bird...`)
    await sleep(500)
    addBird()
  }

  await sleep(3000)
  stop = true
}())
```

## License

[MIT](LICENSE)

---
_Source: https://npm.io/package/sprite-node · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._