mirror of
https://github.com/wassname/svg2cube.git
synced 2026-07-16 11:22:12 +08:00
85 lines
2.2 KiB
Markdown
Executable File
85 lines
2.2 KiB
Markdown
Executable File
# About svg2cube
|
|
|
|
Generate isometric game sprites. Input an svg panel and it's folded into a cube and rendered from any angle. [Demo](https://wassname.github.io/svg2cube/).
|
|
|
|
## Quickstart
|
|
|
|
```bash
|
|
git clone git@github.com:wassname/svg2cube.git
|
|
cd svg2cube
|
|
npm i
|
|
node svg2cube-cli.js inputs/panels.svg
|
|
```
|
|
|
|
|
|
|
|
|
|
## 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 webdriverio and cropped using graphicsmagick.
|
|
|
|
Note that phantomjs can't be used because it doesn't support CSS-3D transforms.
|
|
|
|
## Features
|
|
|
|
- Render isometric cubes or tiles
|
|
- Flatten cubes from the top, left, or right.
|
|
- Shade sides
|
|
- Outline sides
|
|
- Generate png sprites
|
|
|
|
## Installation
|
|
Clone the repository then install dependencies using node package manager (npm).
|
|
|
|
```bash
|
|
git clone git@github.com:wassname/svg2cube.git
|
|
cd svg2cube
|
|
npm i
|
|
```
|
|
|
|
## Usage
|
|
First try it using the supplied panel. From the command line:
|
|
|
|
```sh
|
|
node svg2cube-cli.js inputs/panels.svg
|
|
```
|
|
|
|
Or in node:
|
|
|
|
```js
|
|
var svg2cube = require('./svg2cube.js');
|
|
svg2cube('inputs/panels.svg',{rotateY: 45, size:256});
|
|
```
|
|
|
|
Now create your own panel and generate your own sprites. Primary options are:
|
|
```js
|
|
{
|
|
rotateX: 30, // isometric perspective in degrees
|
|
rotateY: 45,
|
|
rotateZ: 0,
|
|
scaleX: 1.00,
|
|
scaleY: 1.00, // flatten your cube from the top
|
|
scaleZ: 1.00, // distort cube by pushing push face back
|
|
drawOutline: false,
|
|
drawShading: false
|
|
}
|
|
```
|
|
|
|
All available options are [in svg2cube-frontend.js around line 10 ](https://github.com/wassname/svg2cube/blob/master/svg2cube-frontend.js#L10).
|
|
|
|
|
|
# Screenshots
|
|
## Input:
|
|
<img src="images/input.png" style="max-width: 10em;"></img>
|
|
|
|
## Output:
|
|
<img src="images/result.png" style="max-width: 10em;"></img>
|
|
|
|
## GUI
|
|
<img src="images/gui.png" style="max-width: 10em;"></img>
|
|
|
|
## License
|
|
<a href="./license.md">MIT</a>.
|