This uses a css3 to make an SVG cube from a SVG panel.
+Fold a svg panel into a cube and take images at isometric angles.
The buttons allow you to try different parameters.
-The front, left, etc svg's are just linked to panel.svg
+
+
+ Loading...
+ - - - - + + + @@ -73,16 +78,9 @@ imageRot.add(cube1.options, 'backRot').min(0.0).max(360).step(90).onChange(update); imageRot.add(cube1.options, 'frontRot').min(0.0).max(360).step(90).onChange(update); + $('#loading').remove(); - - } - - - - var module - if (module) { - module.exports = SvgCube } diff --git a/readme.md b/readme.md index d3e721a..0979bdb 100755 --- a/readme.md +++ b/readme.md @@ -1,6 +1,6 @@ -gen-svg-cube +svg2cube -This package makes isometric cubes. It takes in svg's and renders them from a given side at a given resolution. +Generate isometric game sprites. Inputs an svg panel and it's folded into a cube and rendered from any angle. # Quickstart TODO @@ -19,10 +19,10 @@ TODO `npm i` # Usage -From the command line: +First try it using the supplied panel. From the command line: ```sh -nde svg2cube-cli.js inputs/panels.svg +npm svg2cube-cli.js inputs/panels.svg ``` Or in node: @@ -32,8 +32,27 @@ 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