From 14117ea62e0cc61fb6a6446ada273796bf637214 Mon Sep 17 00:00:00 2001 From: Is Isilon Date: Tue, 19 Jan 2016 07:34:30 +0800 Subject: [PATCH 1/2] Readme and example --- readme.md | 27 +++++++++++++++++++++++---- svgCube_gui.html | 24 +++++++++++------------- 2 files changed, 34 insertions(+), 17 deletions(-) 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 diff --git a/svgCube_gui.html b/svgCube_gui.html index da06828..fb26b25 100755 --- a/svgCube_gui.html +++ b/svgCube_gui.html @@ -2,22 +2,27 @@ - svg2Cube + svg2cube +

svg2cube - demo

+
-

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 } From ed9e97ea30461a17505d35170866a43b410a7d33 Mon Sep 17 00:00:00 2001 From: Is Isilon Date: Tue, 19 Jan 2016 07:43:00 +0800 Subject: [PATCH 2/2] example --- svgCube_gui.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/svgCube_gui.html b/svgCube_gui.html index fb26b25..d2cf3de 100755 --- a/svgCube_gui.html +++ b/svgCube_gui.html @@ -23,8 +23,8 @@ - - + +