https://github.com/Rich-Harris/sevenup

Tool for making and loading sprites
https://github.com/Rich-Harris/sevenup

Last synced: 4 months ago
JSON representation

Tool for making and loading sprites

• Host: GitHub
• URL: https://github.com/Rich-Harris/sevenup
• Owner: Rich-Harris
• License: mit
• Created: 2019-09-25T21:47:41.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-05-06T21:07:50.000Z (over 1 year ago)
• Last Synced: 2024-08-13T02:01:48.824Z (4 months ago)
• Language: JavaScript
• Size: 10.1 MB
• Stars: 61
• Watchers: 3
• Forks: 4
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        

# sevenup

Utility for making and loading spritesheets.

## CLI

```

npx sevenup sourcedir destdir

```

This will read all the `.png` and `.jpg` images in `sourcedir` and create three files:

* `destdir/sprites.png`

* `destdir/sprites.json`

* `destdir/sprites.css`

To create a `sprites.png` with power-of-two dimensions — useful for WebGL apps, where appropriately-sized textures can have mipmaps generated — use the `--pad` or `-p` flag:

```

npx sevenup sourcedir destdir -p

```

## In browser

```js

import { load } from 'sevenup';

(async function() {

  const spritesheet = await load('destdir');

  // we have a reference to the image

  console.log(spritesheet.image.width, spritesheet.image.height);

  // get a Blob URL

  const url = await spritesheet.url('somefile.png');

  // get a 

  const canvas = spritesheet.canvas('somefile.png');

  // get a set of UV coordinates, for use in a WebGL shader

  const [u1, v1, u2, v2] = spritesheet.uv('somefile.png');

  // get the bounds of an image

  const { left, top, right, bottom, width, height } = spritesheet.box('somefile.png');

}());

```

A lower-level `spritesheet = create(img, manifest)` API also exists.

Alternatively, use CSS:

```html



```


## License

[MIT](LICENSE)