wassname/svg2cube
1
0
Fork 0
mirror of https://github.com/wassname/svg2cube.git synced 2026-06-27 17:17:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into gh-pages

Browse Source
This commit is contained in:
Is Isilon
2016-01-19 07:43:32 +08:00
parent 6d06b21447 ed9e97ea30
commit 077f90df8a
2 changed files with 36 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+13 -15
View File
@@ -2,24 +2,29 @@
<head>
<meta charset="utf-8">
<title>svg2Cube</title>
<title>svg2cube</title>
</head>
<body>
<h1>svg2cube - demo</h1>
<div>
<p>This uses a css3 to make an SVG cube from a SVG panel. </p>
<p>Fold a svg panel into a cube and take images at isometric angles. </p>
<p>The buttons allow you to try different parameters. </p>
<p>The front, left, etc svg's are just linked to panel.svg </p>
</div>
<img src="inputs/panels.svg" style="height: 15em;"></img>
<p id="loading">Loading...</p>
</body>
<!-- <script type="text/javascript" src="node_modules/snapsvg/dist/snap.svg.js"></script> -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="/cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<script type="text/javascript" src="/cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="svg2cube-frontend.js"></script>
@@ -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
}
</script>
readme.md
+23 -4
View File
@@ -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