https://github.com/laineus/auto-tile-webpack-plugin
Generate autotiles for Tiled automatically
https://github.com/laineus/auto-tile-webpack-plugin
Last synced: 30 days ago
JSON representation
Generate autotiles for Tiled automatically
- Host: GitHub
- URL: https://github.com/laineus/auto-tile-webpack-plugin
- Owner: laineus
- License: mit
- Created: 2020-12-26T16:18:07.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-01-16T15:49:15.000Z (over 4 years ago)
- Last Synced: 2025-03-03T00:04:50.303Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 1.71 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# AutoTileWebpackPlugin
[](https://www.npmjs.com/package/auto-tile-webpack-plugin)
[](https://github.com/laineus/auto-tile-webpack-plugin/blob/master/LICENSE)
A Webpack plugin to generate expanded autotiles and its setting for Tiled from minimal autotiles automatically.
It will be re-generated automatically when added or modified images while webpack is watching.
|Original|Expanded|
|---|---|
|||
# Usage
Install:
```
$ npm install auto-tile-webpack-plugin
```
Define into `webpack.config.js`:
```js
const AutoTileWebpackPlugin = require('auto-tile-webpack-plugin')
// ...
{
entry: {
...
},
output: {
...
},
plugins: [
new AutoTileWebpackPlugin({
size: 32,
input: './public/img/original_autotiles',
output: './public/img/tilesets'
})
]
}
```
```
- public/img/
- original_autotiles/
- town.png // Minimal autile image (Follow `examples/input.png`)
- tilesets/
- town.png // Generated image
- town.tmx // Generated setting for Tiled
```
Options:
|Key|What is|
|---|---|
|size|Tile size.|
|input|Input directory. Original images should be here.|
|output|Output directory. Extruded images will be here.|
## Use it on Tiled
Make a rules.txt that listed path to settings and place it under your project directory for Tiled.
```
path/to/town.tmx
path/to/dungeon.tmx
..
```
- The around of the autotiles need to be filled with something another tile.
- Layer name need to be same as file name. (`town.png` -> `town`)
# CLI
```
$ autotile --input --output --size
```
or
```
$ autotile --config
```
```js
module.exports = {
size: 32,
input: './input',
output: './output'
}
```
# Requirements
- Webpack4 or higher
I'm not sure if this will be working on Webpack3 or less.
Please make an issue or PR if need it.
# License
[MIT](LICENSE)
The settings for Tiled is based on [Remex](https://app.assembla.com/spaces/rpg-maker-to-tiled-suite/subversion/source).
# [Examples] Projects that using this plugin
- [phavuer-rpg-example](https://github.com/laineus/phavuer-rpg-example)