svg2cube

Generate isometric game sprites. Inputs an svg panel and it's folded into a cube and rendered from any angle.

Quickstart

TODO

Screenshots

Input:

Output:

GUI

Installation

npm i

Usage

First try it using the supplied panel. From the command line:

npm svg2cube-cli.js inputs/panels.svg

Or in node:

var svg2cube = require('./svg2cube.js');
svg2cube('inputs/panels.svg',{rotateY: 45, size:256});

Now create your own panel and generate your own sprites.

Description

This project take in an image and folds it into a cube then takes a picture. It's best used for generating isometric game sprites and is best explained by looking at the screenshots and example.

The input image is an unfolded cube which is folded like origami, then CSS-3D transforms are used to show the box from any angle. This could be the classic isometric angle used in isometric arcade games. The output image is rendered as a png using chrome webdriver and cropped using graphicsmagick.

Note that phantomjs can't be used because it doesn't support CSS-3D transforms.

Author

wassname.org

License

MIT

TODO

• Enable this to use gulp
• Enable this to input and output streams
• Disable rendering of some sides, so we can create isometric tiles
• Publish on github
• Put up github page
• Add inputs to gui page