diff --git a/index.html b/index.html
index 431bb1f..66d5360 100755
--- a/index.html
+++ b/index.html
@@ -120,14 +120,31 @@ function has3d() {
gui.add(cube1.options, 'scaleY').min(-1.00).max(2.01).step(0.1).onChange(update);
gui.add(cube1.options, 'scaleZ').min(0.0).max(2.01).step(0.1).onChange(update);
- var imgUrls = gui.addFolder('Images urls');
+ var imgUrls = gui.addFolder('Sides');
imgUrls.add(cube1.options, 'svgPanel').onChange(update);
+ imgUrls.add(cube1.options, 'leftRender').onChange(update);
+ imgUrls.add(cube1.options, 'topRender').onChange(update);
+ imgUrls.add(cube1.options, 'bottomRender').onChange(update);
+ imgUrls.add(cube1.options, 'rightRender').onChange(update);
+ imgUrls.add(cube1.options, 'frontRender').onChange(update);
+ imgUrls.add(cube1.options, 'backRender').onChange(update);
- var outline = gui.addFolder('outline');
+ var shading = gui.addFolder('Shading');
+ shading.add(cube1.options, 'drawShading').onChange(update);
+ shading.add(cube1.options, 'topShad').min(0.0).max(1).step(0.05).onChange(update);
+ shading.add(cube1.options, 'leftShad').min(0.0).max(1).step(0.05).onChange(update);
+ shading.add(cube1.options, 'rightShad').min(0.0).max(1).step(0.05).onChange(update);
+ shading.add(cube1.options, 'backShad').min(0.0).max(1).step(0.05).onChange(update);
+ shading.add(cube1.options, 'bottomShad').min(0.0).max(1).step(0.05).onChange(update);
+ shading.add(cube1.options, 'frontShad').min(0.0).max(1).step(0.05).onChange(update);
+
+ var outline = gui.addFolder('Outline');
+ outline.add(cube1.options, 'drawOutline').onChange(update);
outline.add(cube1.options.stroke, 'stroke-width').min(0.0).max(20).step(1).onChange(update);
outline.add(cube1.options.stroke, 'stroke').onChange(update);
outline.add(cube1.options, 'borderRadius').min(0).max(128).step(1).onChange(update);
+
var imageRot = gui.addFolder('Image rotation');
imageRot.add(cube1.options, 'topRot').min(0.0).max(360).step(90).onChange(update);
imageRot.add(cube1.options, 'bottomRot').min(0.0).max(360).step(90).onChange(update);
diff --git a/readme.md b/readme.md
index 43499a8..25a8b15 100755
--- a/readme.md
+++ b/readme.md
@@ -1,6 +1,6 @@
-svg2cube
+# svg2cube
-Generate isometric game sprites. Inputs an svg panel and it's folded into a cube and rendered from any angle. [Example hosted here](https://wassname.github.io/svg2cube/).
+Generate isometric game sprites. Input an svg panel and it's folded into a cube and rendered from any angle. [Example hosted here](https://wassname.github.io/svg2cube/).
# Quickstart
@@ -13,13 +13,13 @@ node svg2cube-cli.js inputs/panels.svg
# Screenshots
## Input:
-
+
## Output:
-
+
## GUI
-
+
# Installation
`npm i`
@@ -38,7 +38,8 @@ var svg2cube = require('./svg2cube.js');
svg2cube('inputs/panels.svg',{rotateY: 45, size:256});
```
-Now create your own panel and generate your own sprites.
+Now create your own panel and generate your own sprites. Available options are
+[here for now](https://github.com/wassname/svg2cube/blob/master/svg2cube-frontend.js#L10).
# Description
@@ -53,12 +54,3 @@ 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/svg2cube-frontend.js b/svg2cube-frontend.js
index 11c1838..4ed0597 100755
--- a/svg2cube-frontend.js
+++ b/svg2cube-frontend.js
@@ -6,74 +6,86 @@
(function (exports) {
exports.SvgCube = function (svgPanel, options) {
+
// Inputs and options
- var defaultOptions = {
- rotateX: 30, // isometric angle
+ this.defaultOptions = {
+
+ rotateX: 30, // isometric perspective
rotateY: 45,
rotateZ: 0,
- perspective: 0, // doesn't do anything usefull
- scaleX: 1.00,
- scaleY: 1.00, // flatten
- scaleZ: 1.00, // push face
- size: 400,
+ perspective: 0, // doesn't do anything usefull
+
+ scaleX: 1.00,
+ scaleY: 1.00, // flatten you cube from the top
+ scaleZ: 1.00, // distort cube by pushing push face back
+
+ size: 400, // size of one side
verbose: false,
+
// outline
drawOutline: false,
drawShading: false,
- borderRadius: 0,
+ borderRadius: 0, // in px
stroke: {
"stroke": 'black', // stroke color for outline
- "stroke-width": 0, // outline width
+ "stroke-width": 0, // outline width in px
},
+
// cube
- topRot: 0, // rotation of top image in degrees
- topShad: 0, // shading for top
+ topRot: 0, // clockwise rotation of top image in degrees, int 0-360, e.g. 180 will make a face upside down without changing the cube geometry.
leftRot: 0,
- leftShad: 0.0,
rightRot: 0,
- rightShad: 0.0,
backRot: 0,
- backShad: 0.0,
bottomRot: 0,
- bottomShad: 0.0,
frontRot: 0,
+
+ topShad: 0, // shading for top, float from 0 to 1
+ leftShad: 0.0,
+ rightShad: 0.0,
+ backShad: 0.0,
+ bottomShad: 0.0,
frontShad: 0.0,
+
+ // turn off rendering of sides so you can make isometric tiles
+ leftRender: true,
+ topRender: true,
+ bottomRender: true,
+ rightRender: true,
+ frontRender: true,
+ backRender: true
+
};
- // add defaults, 2 levels deep
+ // add defaults to input options, looking 2 levels deep
options = options || {};
- for (var opt in defaultOptions) {
- if (defaultOptions.hasOwnProperty(opt) && !options.hasOwnProperty(opt)) {
- options[opt] = defaultOptions[opt];
+ for (var opt in this.defaultOptions) {
+ if (this.defaultOptions.hasOwnProperty(opt) && !options.hasOwnProperty(opt)) {
+ options[opt] = this.defaultOptions[opt];
}
- for (var opt2 in defaultOptions[opt]) {
- if (defaultOptions[opt].hasOwnProperty(opt2) && !options[opt].hasOwnProperty(opt2)) {
- options[opt][opt2] = defaultOptions[opt][opt2];
+ for (var opt2 in this.defaultOptions[opt]) {
+ if (this.defaultOptions[opt].hasOwnProperty(opt2) && !options[opt].hasOwnProperty(opt2)) {
+ options[opt][opt2] = this.defaultOptions[opt][opt2];
}
}
}
+
options.svgPanel = svgPanel;
this.options = options;
- console.log(svgPanel);
-
- // legacy compat
- if (options.flatten !== undefined) {
- options.scaleY = 1 - options.flatten;
+ // Add a couple of obvious options
+ if (this.options.flatten !== undefined) {
+ this.options.scaleY = 1 - this.options.flatten;
}
- if (options.angle !== undefined) {
- options.rotateX = options.angle;
- }
-
- if (!options.drawOutline) {
- options.stroke['stroke-width'] = 0;
+ if (this.options.angle !== undefined) {
+ this.options.rotateX = this.options.angle;
}
this.init();
};
+
exports.SvgCube.prototype.init = function () {
this.rotateX = this.options.rotateX;
@@ -92,76 +104,96 @@
// create SVG element
var o = this.options;
- /** Write sides if they have not already been written **/
- if ($('body .cube').length === 0) {
- var cube = $('');
- var imageFront = $('' +
- '' +
- '' +
- '');
+
+ /** Write sides **/
+ var cube = $('');
+
+ var imageFront = $('' +
+ '' +
+ '' +
+ '');
+ if (this.options.frontRender){
cube.append(imageFront);
-
- var imageL = $('' +
- '' +
- '' +
- '');
- cube.append(imageL);
-
- var imageRight = $('' +
- '' +
- ' ' +
- '');
- cube.append(imageRight);
-
- var imageTop = $('' +
- '' +
- '' +
- '');
- cube.append(imageTop);
-
- var imageBack = $('' +
- '' +
- '' +
- '');
- cube.append(imageBack);
-
- var imageBottom = $('' +
- '' +
- '' +
- '');
- cube.append(imageBottom);
-
- var target=$('#svg2cube');
- if (!target){target=$('body');}
-
- target.append(cube);
-
}
+
+ var imageL = $('' +
+ '' +
+ '' +
+ '');
+ if (this.options.leftRender){
+ cube.append(imageL);
+ }
+
+ var imageRight = $('' +
+ '' +
+ ' ' +
+ '');
+ if (this.options.rightRender){
+ cube.append(imageRight);
+ }
+
+ var imageTop = $('' +
+ '' +
+ '' +
+ '');
+ if (this.options.topRender){
+ cube.append(imageTop);
+ }
+
+ var imageBack = $('' +
+ '' +
+ '' +
+ '');
+ if (this.options.backRender){
+ cube.append(imageBack);
+ }
+
+ var imageBottom = $('' +
+ '' +
+ '' +
+ '');
+ if (this.options.bottomRender){
+ cube.append(imageBottom);
+ }
+
+
+ // get destination dom
+ var target=$('#svg2cube');
+ if (!target){
+ target=$('body');
+ }
+
+ // remove old sides
+ target.find('.cube').remove();
+
+ target.append(cube);
+
+
// Now we generate some css to put everything in good positions
var transitions = 0.1;
var styleStr = '' +
@@ -228,7 +260,7 @@
' /* outline */ ' +
' .face { ' +
' box-sizing: border-box; ' +
- ' border: ' + o.stroke['stroke-width'] + 'px solid ' + o.stroke.stroke + '; ' +
+ ' border: ' + o.drawOutline*o.stroke['stroke-width'] + 'px solid ' + o.stroke.stroke + '; ' +
' } ' +
' /* shade in sides */ ' +
' .wrap { ' +
@@ -239,7 +271,7 @@
' .tint { ' +
' position: absolute; ' +
' } ' +
- ' .tint:before { ' +
+ ' .tint:after { ' +
' content: ""; ' +
' display: block; ' +
' position: absolute; ' +
@@ -248,13 +280,13 @@
' left: 0; ' +
' right: 0; ' +
' } ' +
- ' .tint:hover:before { background: none; } ' +
- ' .tint.top:before { background: rgba(0,0,0, ' + o.topShad + ');} ' +
- ' .tint.left:before { background: rgba(0,0,0, ' + o.leftShad + ');} ' +
- ' .tint.right:before { background: rgba(0,0,0, ' + o.rightShad + ');} ' +
- ' .tint.back:before { background: rgba(0,0,0, ' + o.backShad + '); } ' +
- ' .tint.front:before { background: rgba(0,0,0, ' + o.frontShad + '); } ' +
- ' .tint.bottom:before { background: rgba(0,0,0, ' + o.bottomShad + '); } ' +
+ ' .tint:hover:after { background: none; } ' +
+ ' .tint.top:after { background: rgba(0,0,0, ' + o.drawShading*o.topShad + ');} ' +
+ ' .tint.left:after { background: rgba(0,0,0, ' + o.drawShading*o.leftShad + ');} ' +
+ ' .tint.right:after { background: rgba(0,0,0, ' + o.drawShading*o.rightShad + ');} ' +
+ ' .tint.back:after { background: rgba(0,0,0, ' + o.drawShading*o.backShad + '); } ' +
+ ' .tint.front:after { background: rgba(0,0,0, ' + o.drawShading*o.frontShad + '); } ' +
+ ' .tint.bottom:after { background: rgba(0,0,0, ' + o.drawShading*o.bottomShad + '); } ' +
' /* curved cube. Need something block seeing through, and also extra faces, 1 px in, so inside looks uniform color. Only work for one main color */ ' +
' /*.face { ' +
' border-radius: ' + o.borderRadius + 'px; ' +