muncher
v0.0.13
Published
Generate sprite sheets from the command line
Downloads
16
Readme
:sparkles: Features
Reads
.piskel
and.png
files and turns them into sprite sheets using Texture PackerCan add a horizontally flipped copy to the output
How to use
Example usage with npx
:
npx muncher --input sprites/ --output output/spritesheet
If your project includes a package.json
, then the preferred way is to include muncher
as a dev dependency:
npm i --save-dev muncher
or
yarn add --dev muncher
You can then add a script to your package.json scripts
section:
"munch": "muncher --input sprites/ --output output/spritesheet"
CLI flags
input
- The source folder. Contains .png
and .piskel
files that you want to turn into a sprite sheet.
output
- The output filename. A .json
and a .png
sprite sheet file will be created.
flip
- Every file name that ends with either left
or right
will also generate a horizontally flipped copy. (Optional)
config
- Path to config file. (Optional)
Texture packer options
All options that you can pass to the texturepacker
CLI you can also pass to muncher
. For example:
muncher --input sprites --output output/spritesheet --extrude 5 --multipack
Config file
Instead of passing options as flags on the command line, you can specify them in a config file:
npx muncher --config muncher.json
The format has to be .json
muncher.json
{
"input": "sprites",
"output": "output/spritesheet",
"flip": true,
"extrude": 5
}
Example output
png
example.png
=> example.png
With flip
enabled:
player/walk-right.png
=> player/walk-right.png
and player/walk-left.png
piskel
Since piskel
files can contain multiple images (frames), the texture name will include the frame index as a suffix:
example.piskel
=> example-1.png
With flip
enabled:
example-right.piskel
=> example-right-1.png
and example-left-1.png
Example
input folder structure
sprites/
├── multiple-layers.piskel
├── green/
│ └── green.png
├── muncher/
│ ├── piskel/
│ │ └── muncher-right.piskel
│ └── png/
│ └── muncher-right.png
└── square/
├── square1.png
└── square2.png
muncher --input sprites/ --output output/spritesheet --flip
output texture names
multiple.layers.png
green/green.png
muncher/piskel/muncher-right-0.png
muncher/piskel/muncher-left-0.png
muncher/png/muncher-right.png
muncher/png/muncher-left.png
square/square1.png
square/square2.png
Requirements
Texture Packer CLI
Download Texture Packer.
Install the command line tool from the application UI.
imagemagick
MacOS
You can install imagemagick
with homebrew:
brew install imagemagick
Linux
https://medium.com/@sanjaywrites/install-latest-version-of-imagemagick-in-ubuntu-16-04-c406ddea1973
Node.js
nodejs.org - Version 11 or higher
Recipes
Multiple output sprite sheets
Try to only use one output spritesheet for as long as possible. This is better for performance reasons. If your spritesheet becomes too big, try to separate it by layer in your game. For example, 'background' and 'foreground'. In that case, you can add multiple muncher commands to a script and execute that one.
Example:
./munch.sh
muncher --input example/sprites/background/ --output example/output/background
muncher --input example/sprites/foreground/ --output example/output/foreground
Develop
Workflow
Make changes
yarn build-test
- Builds, packs, installs toexample
folder and executes muncher there.If everything works: push
master
or make aPR