https://github.com/semibran/image-extract
extracts sprites from a spritesheet image
https://github.com/semibran/image-extract
extract sprite spritesheet
Last synced: about 1 year ago
JSON representation
extracts sprites from a spritesheet image
- Host: GitHub
- URL: https://github.com/semibran/image-extract
- Owner: semibran
- License: mit
- Created: 2017-01-23T00:47:47.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-02-28T02:16:33.000Z (over 9 years ago)
- Last Synced: 2025-04-06T13:12:49.534Z (over 1 year ago)
- Topics: extract, sprite, spritesheet
- Language: JavaScript
- Size: 3.91 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# image-extract
> Extracts sprites from a spritesheet image
## Installation
```sh
npm install --save semibran/sprite
```
## Usage
```javascript
var Sprite = require('sprite')
var sprite = Sprite(image)(width, height)(x, y)
```
The main `Sprite` function is curried into three separate phases for reusability. Depending on how it is used, the final function may return either one or multiple `HTMLCanvasElement` objects.
### `use`
```javascript
var createSprite = Sprite(image)
```
Specifies the image from which the resulting sprite will be extracted. This can be either an `Image`, an `HTMLCanvasElement`, or anything that can be drawn onto a `CanvasRenderingContext2D`.
### `config`
```javascript
var createTile = Sprite(image)(width, height)
```
Configures the dimensions of the resulting sprite(s).
### `extract`
```javascript
var sprite = Sprite(image)(width, height)(x, y)
```
The last function does the actual sprite extraction. Note that `x` and `y` are indices referring to the location of the desired sprite rather than raw positions.
If `y` is not provided, `x` will be treated as an index, wrapping around the spritesheet until it reaches the desired sprite.
**If `x` is not provided, the library will extract all the sprites possible with the given dimensions in a grid shape, then return them all as an array.** I personally recommend this method since it abstracts away most (if not all) of the loop logic that you'd have to delve into in order to retrieve each individual sprite.
```javascript
// ES6 users can use the "new" destructuring and object assignment syntax.
var [idle, run0, run1, run2, skid, jump, ouch] = Sprite(mario)(16)()
hero.sprites = { idle, run0, run1, run2, skid, jump, ouch }
```
## License
MIT