From 8ee865f59787833b553cc30519bbf63fe65bec06 Mon Sep 17 00:00:00 2001 From: Is Isilon Date: Tue, 19 Jan 2016 09:33:03 +0800 Subject: [PATCH] render side options --- index.html | 21 +++- readme.md | 22 ++-- svg2cube-frontend.js | 250 ++++++++++++++++++++++++------------------- 3 files changed, 167 insertions(+), 126 deletions(-) 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; ' +