├── .gitignore ├── scratch ├── tiles.psd ├── tiles.pyxel └── map.tmx ├── pub ├── assets │ ├── boxes.png │ ├── tiles.png │ ├── bricks.png │ ├── plainbg.png │ ├── acideasy.png │ ├── antennas.png │ ├── basiceasy.png │ ├── groundeasy.png │ ├── mushrooms.png │ ├── notopping.png │ ├── rockeasy.png │ ├── voideasy.png │ ├── acidadvanced.png │ ├── basictopping.png │ ├── flattopping.png │ ├── grasstopping.png │ ├── noattributes.png │ ├── plainsolidbg.png │ ├── rockadvanced.png │ ├── voidadvanced.png │ ├── albertrandombg.png │ ├── basicadvanced.png │ ├── electrorandombg.png │ ├── grassattributes.png │ ├── groundadvanced.png │ ├── squaresrandombg.png │ ├── tildarandombg.png │ ├── tildarandomfill.png │ ├── triangleseasy.png │ ├── albertcheckeredbg.png │ ├── albertrandomfill.png │ ├── concreterandombg.png │ ├── squaresrandomfill.png │ ├── swirlcheckeredbg.png │ ├── tildascheckeredbg.png │ ├── trianglesrandombg.png │ ├── vbrickcheckeredbg.png │ ├── voidadvancedlite.png │ ├── albertcheckeredfill.png │ ├── concreterandomfill.png │ ├── grasssimpletopping.png │ ├── groundadvancedlite.png │ ├── screwscheckeredfill.png │ ├── squarescheckeredbg.png │ ├── squarescheckeredfill.png │ ├── swirlcheckeredbgalt.png │ ├── tildacheckeredfill.png │ ├── trianglesrandomfill.png │ ├── upbrickscheckeredbg.png │ ├── concretecheckeredfill.png │ ├── trianglescheckeredfill.png │ ├── map.json │ └── options.json └── index.html ├── src ├── assets │ ├── boxes.png │ ├── tiles.png │ ├── bricks.png │ ├── plainbg.png │ ├── acideasy.png │ ├── antennas.png │ ├── basiceasy.png │ ├── groundeasy.png │ ├── mushrooms.png │ ├── notopping.png │ ├── rockeasy.png │ ├── voideasy.png │ ├── acidadvanced.png │ ├── basictopping.png │ ├── flattopping.png │ ├── grasstopping.png │ ├── noattributes.png │ ├── plainsolidbg.png │ ├── rockadvanced.png │ ├── voidadvanced.png │ ├── albertrandombg.png │ ├── basicadvanced.png │ ├── electrorandombg.png │ ├── grassattributes.png │ ├── groundadvanced.png │ ├── squaresrandombg.png │ ├── tildarandombg.png │ ├── tildarandomfill.png │ ├── triangleseasy.png │ ├── albertcheckeredbg.png │ ├── albertrandomfill.png │ ├── concreterandombg.png │ ├── squaresrandomfill.png │ ├── swirlcheckeredbg.png │ ├── tildascheckeredbg.png │ ├── trianglesrandombg.png │ ├── vbrickcheckeredbg.png │ ├── voidadvancedlite.png │ ├── albertcheckeredfill.png │ ├── concreterandomfill.png │ ├── grasssimpletopping.png │ ├── groundadvancedlite.png │ ├── screwscheckeredfill.png │ ├── squarescheckeredbg.png │ ├── squarescheckeredfill.png │ ├── swirlcheckeredbgalt.png │ ├── tildacheckeredfill.png │ ├── trianglesrandomfill.png │ ├── upbrickscheckeredbg.png │ ├── concretecheckeredfill.png │ ├── trianglescheckeredfill.png │ ├── map.json │ └── options.json ├── index.html └── index.js ├── .babelrc ├── webpack ├── prod.js └── base.js ├── LICENSE ├── README.md └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /scratch/tiles.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/scratch/tiles.psd -------------------------------------------------------------------------------- /pub/assets/boxes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/boxes.png -------------------------------------------------------------------------------- /pub/assets/tiles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/tiles.png -------------------------------------------------------------------------------- /scratch/tiles.pyxel: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/scratch/tiles.pyxel -------------------------------------------------------------------------------- /src/assets/boxes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/boxes.png -------------------------------------------------------------------------------- /src/assets/tiles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/tiles.png -------------------------------------------------------------------------------- /pub/assets/bricks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/bricks.png -------------------------------------------------------------------------------- /pub/assets/plainbg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/plainbg.png -------------------------------------------------------------------------------- /src/assets/bricks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/bricks.png -------------------------------------------------------------------------------- /src/assets/plainbg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/plainbg.png -------------------------------------------------------------------------------- /pub/assets/acideasy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/acideasy.png -------------------------------------------------------------------------------- /pub/assets/antennas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/antennas.png -------------------------------------------------------------------------------- /pub/assets/basiceasy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/basiceasy.png -------------------------------------------------------------------------------- /pub/assets/groundeasy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/groundeasy.png -------------------------------------------------------------------------------- /pub/assets/mushrooms.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/mushrooms.png -------------------------------------------------------------------------------- /pub/assets/notopping.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/notopping.png -------------------------------------------------------------------------------- /pub/assets/rockeasy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/rockeasy.png -------------------------------------------------------------------------------- /pub/assets/voideasy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/voideasy.png -------------------------------------------------------------------------------- /src/assets/acideasy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/acideasy.png -------------------------------------------------------------------------------- /src/assets/antennas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/antennas.png -------------------------------------------------------------------------------- /src/assets/basiceasy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/basiceasy.png -------------------------------------------------------------------------------- /src/assets/groundeasy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/groundeasy.png -------------------------------------------------------------------------------- /src/assets/mushrooms.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/mushrooms.png -------------------------------------------------------------------------------- /src/assets/notopping.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/notopping.png -------------------------------------------------------------------------------- /src/assets/rockeasy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/rockeasy.png -------------------------------------------------------------------------------- /src/assets/voideasy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/voideasy.png -------------------------------------------------------------------------------- /pub/assets/acidadvanced.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/acidadvanced.png -------------------------------------------------------------------------------- /pub/assets/basictopping.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/basictopping.png -------------------------------------------------------------------------------- /pub/assets/flattopping.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/flattopping.png -------------------------------------------------------------------------------- /pub/assets/grasstopping.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/grasstopping.png -------------------------------------------------------------------------------- /pub/assets/noattributes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/noattributes.png -------------------------------------------------------------------------------- /pub/assets/plainsolidbg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/plainsolidbg.png -------------------------------------------------------------------------------- /pub/assets/rockadvanced.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/rockadvanced.png -------------------------------------------------------------------------------- /pub/assets/voidadvanced.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/voidadvanced.png -------------------------------------------------------------------------------- /src/assets/acidadvanced.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/acidadvanced.png -------------------------------------------------------------------------------- /src/assets/basictopping.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/basictopping.png -------------------------------------------------------------------------------- /src/assets/flattopping.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/flattopping.png -------------------------------------------------------------------------------- /src/assets/grasstopping.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/grasstopping.png -------------------------------------------------------------------------------- /src/assets/noattributes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/noattributes.png -------------------------------------------------------------------------------- /src/assets/plainsolidbg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/plainsolidbg.png -------------------------------------------------------------------------------- /src/assets/rockadvanced.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/rockadvanced.png -------------------------------------------------------------------------------- /src/assets/voidadvanced.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/voidadvanced.png -------------------------------------------------------------------------------- /pub/assets/albertrandombg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/albertrandombg.png -------------------------------------------------------------------------------- /pub/assets/basicadvanced.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/basicadvanced.png -------------------------------------------------------------------------------- /pub/assets/electrorandombg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/electrorandombg.png -------------------------------------------------------------------------------- /pub/assets/grassattributes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/grassattributes.png -------------------------------------------------------------------------------- /pub/assets/groundadvanced.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/groundadvanced.png -------------------------------------------------------------------------------- /pub/assets/squaresrandombg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/squaresrandombg.png -------------------------------------------------------------------------------- /pub/assets/tildarandombg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/tildarandombg.png -------------------------------------------------------------------------------- /pub/assets/tildarandomfill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/tildarandomfill.png -------------------------------------------------------------------------------- /pub/assets/triangleseasy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/triangleseasy.png -------------------------------------------------------------------------------- /src/assets/albertrandombg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/albertrandombg.png -------------------------------------------------------------------------------- /src/assets/basicadvanced.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/basicadvanced.png -------------------------------------------------------------------------------- /src/assets/electrorandombg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/electrorandombg.png -------------------------------------------------------------------------------- /src/assets/grassattributes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/grassattributes.png -------------------------------------------------------------------------------- /src/assets/groundadvanced.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/groundadvanced.png -------------------------------------------------------------------------------- /src/assets/squaresrandombg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/squaresrandombg.png -------------------------------------------------------------------------------- /src/assets/tildarandombg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/tildarandombg.png -------------------------------------------------------------------------------- /src/assets/tildarandomfill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/tildarandomfill.png -------------------------------------------------------------------------------- /src/assets/triangleseasy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/triangleseasy.png -------------------------------------------------------------------------------- /pub/assets/albertcheckeredbg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/albertcheckeredbg.png -------------------------------------------------------------------------------- /pub/assets/albertrandomfill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/albertrandomfill.png -------------------------------------------------------------------------------- /pub/assets/concreterandombg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/concreterandombg.png -------------------------------------------------------------------------------- /pub/assets/squaresrandomfill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/squaresrandomfill.png -------------------------------------------------------------------------------- /pub/assets/swirlcheckeredbg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/swirlcheckeredbg.png -------------------------------------------------------------------------------- /pub/assets/tildascheckeredbg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/tildascheckeredbg.png -------------------------------------------------------------------------------- /pub/assets/trianglesrandombg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/trianglesrandombg.png -------------------------------------------------------------------------------- /pub/assets/vbrickcheckeredbg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/vbrickcheckeredbg.png -------------------------------------------------------------------------------- /pub/assets/voidadvancedlite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/voidadvancedlite.png -------------------------------------------------------------------------------- /src/assets/albertcheckeredbg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/albertcheckeredbg.png -------------------------------------------------------------------------------- /src/assets/albertrandomfill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/albertrandomfill.png -------------------------------------------------------------------------------- /src/assets/concreterandombg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/concreterandombg.png -------------------------------------------------------------------------------- /src/assets/squaresrandomfill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/squaresrandomfill.png -------------------------------------------------------------------------------- /src/assets/swirlcheckeredbg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/swirlcheckeredbg.png -------------------------------------------------------------------------------- /src/assets/tildascheckeredbg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/tildascheckeredbg.png -------------------------------------------------------------------------------- /src/assets/trianglesrandombg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/trianglesrandombg.png -------------------------------------------------------------------------------- /src/assets/vbrickcheckeredbg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/vbrickcheckeredbg.png -------------------------------------------------------------------------------- /src/assets/voidadvancedlite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/voidadvancedlite.png -------------------------------------------------------------------------------- /pub/assets/albertcheckeredfill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/albertcheckeredfill.png -------------------------------------------------------------------------------- /pub/assets/concreterandomfill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/concreterandomfill.png -------------------------------------------------------------------------------- /pub/assets/grasssimpletopping.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/grasssimpletopping.png -------------------------------------------------------------------------------- /pub/assets/groundadvancedlite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/groundadvancedlite.png -------------------------------------------------------------------------------- /pub/assets/screwscheckeredfill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/screwscheckeredfill.png -------------------------------------------------------------------------------- /pub/assets/squarescheckeredbg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/squarescheckeredbg.png -------------------------------------------------------------------------------- /pub/assets/squarescheckeredfill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/squarescheckeredfill.png -------------------------------------------------------------------------------- /pub/assets/swirlcheckeredbgalt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/swirlcheckeredbgalt.png -------------------------------------------------------------------------------- /pub/assets/tildacheckeredfill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/tildacheckeredfill.png -------------------------------------------------------------------------------- /pub/assets/trianglesrandomfill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/trianglesrandomfill.png -------------------------------------------------------------------------------- /pub/assets/upbrickscheckeredbg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/upbrickscheckeredbg.png -------------------------------------------------------------------------------- /src/assets/albertcheckeredfill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/albertcheckeredfill.png -------------------------------------------------------------------------------- /src/assets/concreterandomfill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/concreterandomfill.png -------------------------------------------------------------------------------- /src/assets/grasssimpletopping.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/grasssimpletopping.png -------------------------------------------------------------------------------- /src/assets/groundadvancedlite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/groundadvancedlite.png -------------------------------------------------------------------------------- /src/assets/screwscheckeredfill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/screwscheckeredfill.png -------------------------------------------------------------------------------- /src/assets/squarescheckeredbg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/squarescheckeredbg.png -------------------------------------------------------------------------------- /src/assets/squarescheckeredfill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/squarescheckeredfill.png -------------------------------------------------------------------------------- /src/assets/swirlcheckeredbgalt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/swirlcheckeredbgalt.png -------------------------------------------------------------------------------- /src/assets/tildacheckeredfill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/tildacheckeredfill.png -------------------------------------------------------------------------------- /src/assets/trianglesrandomfill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/trianglesrandomfill.png -------------------------------------------------------------------------------- /src/assets/upbrickscheckeredbg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/upbrickscheckeredbg.png -------------------------------------------------------------------------------- /pub/assets/concretecheckeredfill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/concretecheckeredfill.png -------------------------------------------------------------------------------- /pub/assets/trianglescheckeredfill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/pub/assets/trianglescheckeredfill.png -------------------------------------------------------------------------------- /src/assets/concretecheckeredfill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/concretecheckeredfill.png -------------------------------------------------------------------------------- /src/assets/trianglescheckeredfill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Quinten/random-tileset-generator/HEAD/src/assets/trianglescheckeredfill.png -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["@babel/env", { 4 | "targets": { 5 | "browsers": [ 6 | ">0.25%", 7 | "not ie 11", 8 | "not op_mini all" 9 | ] 10 | }, 11 | "modules": false 12 | }] 13 | ], 14 | } 15 | -------------------------------------------------------------------------------- /webpack/prod.js: -------------------------------------------------------------------------------- 1 | const merge = require('webpack-merge'); 2 | const path = require('path'); 3 | const base = require('./base'); 4 | const TerserPlugin = require('terser-webpack-plugin'); 5 | 6 | module.exports = merge(base, { 7 | mode: 'production', 8 | devtool: false, 9 | performance: { 10 | maxEntrypointSize: 900000, 11 | maxAssetSize: 900000 12 | }, 13 | optimization: { 14 | minimizer: [ 15 | new TerserPlugin({ 16 | terserOptions: { 17 | output: { 18 | comments: false 19 | } 20 | } 21 | }) 22 | ] 23 | } 24 | }); 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Quinten Clause 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # random-tileset-generator 2 | Generate 8x8 tilesets 3 | 4 | Demo: https://quinten.github.io/random-tileset-generator/ 5 | 6 | Also on itch.io: https://supernapie.itch.io/random-tileset-generator 7 | 8 | Generated tileset license: [CC0](https://tldrlegal.com/license/creative-commons-cc0-1.0-universal) 9 | 10 | ### Adding patterns 11 | 12 | Feel free to submit pull requests for patterns. Art must be drawn in white and grey tones, preferable the ones already used. (The colors are applied in code) 13 | 14 | To make a clean PR: only submit the png asset in `src/assets` and change `src/assets/options.json` i will take care of generating and building the rest. See [this commit](https://github.com/Quinten/random-tileset-generator/commit/9bd653cbaa157ce8a2ba02b0e7664f0d57d4f076) as an example. 15 | 16 | Do not touch files in `pub` or commit a modified `tiles.psd`. 17 | 18 | ### Messing with the code 19 | 20 | (The usual npm and webpack stack) 21 | 22 | Install node dependencies with npm 23 | 24 | ``` 25 | npm install 26 | ``` 27 | 28 | Run local dev server 29 | 30 | ``` 31 | npm start 32 | ``` 33 | 34 | Make a build 35 | 36 | ``` 37 | npm run build 38 | ``` 39 | 40 | The code is built with [Phaser 3](http://phaser.io/) and [Knockout](https://knockoutjs.com/) 41 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "random-tileset-generator", 3 | "version": "0.0.3", 4 | "description": "Generate 8x8 tilesets", 5 | "main": "src/index.js", 6 | "scripts": { 7 | "deploy": "git subtree push --prefix pub/ origin gh-pages && butler push pub supernapie/random-tileset-generator:HTML", 8 | "build": "webpack --config webpack/prod.js ", 9 | "start": "webpack-dev-server --config webpack/base.js --open" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/Quinten/random-tileset-generator.git" 14 | }, 15 | "author": "Quinten Clause", 16 | "license": "MIT", 17 | "bugs": { 18 | "url": "https://github.com/Quinten/random-tileset-generator/issues" 19 | }, 20 | "homepage": "https://github.com/Quinten/random-tileset-generator#readme", 21 | "devDependencies": { 22 | "@babel/core": "^7.2.2", 23 | "@babel/preset-env": "^7.2.3", 24 | "babel-loader": "^8.0.5", 25 | "copy-webpack-plugin": "^5.0.2", 26 | "file-loader": "^3.0.1", 27 | "html-webpack-plugin": "^3.2.0", 28 | "raw-loader": "^1.0.0", 29 | "terser-webpack-plugin": "^1.2.1", 30 | "webpack": "^4.28.3", 31 | "webpack-cli": "^3.2.1", 32 | "webpack-dev-server": "^3.1.14", 33 | "webpack-merge": "^4.2.1" 34 | }, 35 | "dependencies": { 36 | "knockout": "^3.5.0", 37 | "phaser": "^3.16.2" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /webpack/base.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const path = require('path'); 3 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | const CopyPlugin = require('copy-webpack-plugin'); 5 | 6 | module.exports = { 7 | mode: 'development', 8 | devtool: 'eval-source-map', 9 | entry: './src/index.js', 10 | output: { 11 | path: path.resolve(__dirname, '../pub'), 12 | publicPath: '', 13 | filename: 'project.bundle.js' 14 | }, 15 | module: { 16 | rules: [ 17 | { 18 | test: /\.js$/, 19 | exclude: /node_modules/, 20 | use: { 21 | loader: 'babel-loader' 22 | } 23 | }, 24 | { 25 | test: [/\.vert$/, /\.frag$/], 26 | use: 'raw-loader' 27 | }, 28 | { 29 | test: /\.(gif|png|jpe?g|svg|xml)$/i, 30 | use: 'file-loader' 31 | } 32 | ] 33 | }, 34 | plugins: [ 35 | new CopyPlugin([ 36 | { from: 'src/assets', to: 'assets' }, 37 | ]), 38 | new webpack.DefinePlugin({ 39 | CANVAS_RENDERER: JSON.stringify(true), 40 | WEBGL_RENDERER: JSON.stringify(true) 41 | }), 42 | new HtmlWebpackPlugin({ 43 | template: './src/index.html' 44 | }) 45 | ] 46 | }; 47 | -------------------------------------------------------------------------------- /scratch/map.tmx: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 48,48,41,44,44,44,44,44,34,48,48,38,61,55,53,55,56,56,53,54, 9 | 48,41,42,10,11,10,11,1,40,48,48,38,62,63,56,63,62,55,63,64, 10 | 41,42,19,18,19,18,19,20,36,44,44,33,43,43,33,62,61,55,62,54, 11 | 46,10,11,10,11,3,27,1,1,1,1,1,1,1,38,55,53,64,54,55, 12 | 46,18,19,18,19,18,20,1,1,1,1,1,1,1,33,43,43,43,43,43, 13 | 46,17,18,20,27,1,1,1,1,1,1,1,1,1,1,1,1,1,1,40, 14 | 46,1,1,1,25,26,28,1,1,1,33,47,47,47,47,47,33,1,1,40, 15 | 46,1,1,39,47,47,47,45,1,1,38,48,48,48,48,48,38,1,1,40, 16 | 46,1,1,40,48,41,44,42,1,1,33,43,43,43,33,48,38,1,1,40, 17 | 46,1,1,40,48,46,14,1,1,24,14,15,23,21,38,48,38,1,1,40, 18 | 46,1,1,36,44,42,23,1,14,21,22,21,15,31,38,48,38,1,1,40, 19 | 46,1,1,1,23,24,21,15,24,15,21,14,7,1,33,43,33,1,1,40, 20 | 46,1,1,1,1,31,7,23,21,24,14,23,1,1,1,1,1,1,28,40, 21 | 37,47,45,1,1,22,33,43,43,43,43,43,43,33,1,1,1,1,39,35, 22 | 48,48,46,1,1,1,38,50,60,57,59,58,51,38,1,26,25,39,35,48, 23 | 48,48,37,47,47,47,38,51,60,57,59,58,50,38,47,47,47,35,48,48 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /pub/assets/map.json: -------------------------------------------------------------------------------- 1 | { "height":16, 2 | "infinite":false, 3 | "layers":[ 4 | { 5 | "data":[48, 48, 41, 44, 44, 44, 44, 44, 34, 48, 48, 38, 61, 55, 53, 55, 56, 56, 53, 54, 48, 41, 42, 10, 11, 10, 11, 1, 40, 48, 48, 38, 62, 63, 56, 63, 62, 55, 63, 64, 41, 42, 19, 18, 19, 18, 19, 20, 36, 44, 44, 33, 43, 43, 33, 62, 61, 55, 62, 54, 46, 10, 11, 10, 11, 3, 27, 1, 1, 1, 1, 1, 1, 1, 38, 55, 53, 64, 54, 55, 46, 18, 19, 18, 19, 18, 20, 1, 1, 1, 1, 1, 1, 1, 33, 43, 43, 43, 43, 43, 46, 17, 18, 20, 27, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 40, 46, 1, 1, 1, 25, 26, 28, 1, 1, 1, 33, 47, 47, 47, 47, 47, 33, 1, 1, 40, 46, 1, 1, 39, 47, 47, 47, 45, 1, 1, 38, 48, 48, 48, 48, 48, 38, 1, 1, 40, 46, 1, 1, 40, 48, 41, 44, 42, 1, 1, 33, 43, 43, 43, 33, 48, 38, 1, 1, 40, 46, 1, 1, 40, 48, 46, 14, 1, 1, 24, 14, 15, 23, 21, 38, 48, 38, 1, 1, 40, 46, 1, 1, 36, 44, 42, 23, 1, 14, 21, 22, 21, 15, 31, 38, 48, 38, 1, 1, 40, 46, 1, 1, 1, 23, 24, 21, 15, 24, 15, 21, 14, 7, 1, 33, 43, 33, 1, 1, 40, 46, 1, 1, 1, 1, 31, 7, 23, 21, 24, 14, 23, 1, 1, 1, 1, 1, 1, 28, 40, 37, 47, 45, 1, 1, 22, 33, 43, 43, 43, 43, 43, 43, 33, 1, 1, 1, 1, 39, 35, 48, 48, 46, 1, 1, 1, 38, 50, 60, 57, 59, 58, 51, 38, 1, 26, 25, 39, 35, 48, 48, 48, 37, 47, 47, 47, 38, 51, 60, 57, 59, 58, 50, 38, 47, 47, 47, 35, 48, 48], 6 | "height":16, 7 | "id":1, 8 | "name":"layer", 9 | "opacity":1, 10 | "type":"tilelayer", 11 | "visible":true, 12 | "width":20, 13 | "x":0, 14 | "y":0 15 | }], 16 | "nextlayerid":2, 17 | "nextobjectid":1, 18 | "orientation":"orthogonal", 19 | "renderorder":"right-down", 20 | "tiledversion":"2019.02.10", 21 | "tileheight":8, 22 | "tilesets":[ 23 | { 24 | "columns":8, 25 | "firstgid":1, 26 | "image":"tiles.png", 27 | "imageheight":64, 28 | "imagewidth":64, 29 | "margin":0, 30 | "name":"tiles", 31 | "spacing":0, 32 | "tilecount":64, 33 | "tileheight":8, 34 | "tilewidth":8 35 | }], 36 | "tilewidth":8, 37 | "type":"map", 38 | "version":1.2, 39 | "width":20 40 | } -------------------------------------------------------------------------------- /src/assets/map.json: -------------------------------------------------------------------------------- 1 | { "height":16, 2 | "infinite":false, 3 | "layers":[ 4 | { 5 | "data":[48, 48, 41, 44, 44, 44, 44, 44, 34, 48, 48, 38, 61, 55, 53, 55, 56, 56, 53, 54, 48, 41, 42, 10, 11, 10, 11, 1, 40, 48, 48, 38, 62, 63, 56, 63, 62, 55, 63, 64, 41, 42, 19, 18, 19, 18, 19, 20, 36, 44, 44, 33, 43, 43, 33, 62, 61, 55, 62, 54, 46, 10, 11, 10, 11, 3, 27, 1, 1, 1, 1, 1, 1, 1, 38, 55, 53, 64, 54, 55, 46, 18, 19, 18, 19, 18, 20, 1, 1, 1, 1, 1, 1, 1, 33, 43, 43, 43, 43, 43, 46, 17, 18, 20, 27, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 40, 46, 1, 1, 1, 25, 26, 28, 1, 1, 1, 33, 47, 47, 47, 47, 47, 33, 1, 1, 40, 46, 1, 1, 39, 47, 47, 47, 45, 1, 1, 38, 48, 48, 48, 48, 48, 38, 1, 1, 40, 46, 1, 1, 40, 48, 41, 44, 42, 1, 1, 33, 43, 43, 43, 33, 48, 38, 1, 1, 40, 46, 1, 1, 40, 48, 46, 14, 1, 1, 24, 14, 15, 23, 21, 38, 48, 38, 1, 1, 40, 46, 1, 1, 36, 44, 42, 23, 1, 14, 21, 22, 21, 15, 31, 38, 48, 38, 1, 1, 40, 46, 1, 1, 1, 23, 24, 21, 15, 24, 15, 21, 14, 7, 1, 33, 43, 33, 1, 1, 40, 46, 1, 1, 1, 1, 31, 7, 23, 21, 24, 14, 23, 1, 1, 1, 1, 1, 1, 28, 40, 37, 47, 45, 1, 1, 22, 33, 43, 43, 43, 43, 43, 43, 33, 1, 1, 1, 1, 39, 35, 48, 48, 46, 1, 1, 1, 38, 50, 60, 57, 59, 58, 51, 38, 1, 26, 25, 39, 35, 48, 48, 48, 37, 47, 47, 47, 38, 51, 60, 57, 59, 58, 50, 38, 47, 47, 47, 35, 48, 48], 6 | "height":16, 7 | "id":1, 8 | "name":"layer", 9 | "opacity":1, 10 | "type":"tilelayer", 11 | "visible":true, 12 | "width":20, 13 | "x":0, 14 | "y":0 15 | }], 16 | "nextlayerid":2, 17 | "nextobjectid":1, 18 | "orientation":"orthogonal", 19 | "renderorder":"right-down", 20 | "tiledversion":"2019.02.10", 21 | "tileheight":8, 22 | "tilesets":[ 23 | { 24 | "columns":8, 25 | "firstgid":1, 26 | "image":"tiles.png", 27 | "imageheight":64, 28 | "imagewidth":64, 29 | "margin":0, 30 | "name":"tiles", 31 | "spacing":0, 32 | "tilecount":64, 33 | "tileheight":8, 34 | "tilewidth":8 35 | }], 36 | "tilewidth":8, 37 | "type":"map", 38 | "version":1.2, 39 | "width":20 40 | } -------------------------------------------------------------------------------- /pub/assets/options.json: -------------------------------------------------------------------------------- 1 | { 2 | "checkeredbg": [ 3 | "bricks", 4 | "vbrickcheckeredbg", 5 | "upbrickscheckeredbg", 6 | "swirlcheckeredbg", 7 | "swirlcheckeredbgalt", 8 | "squarescheckeredbg", 9 | "tildascheckeredbg", 10 | "albertcheckeredbg" 11 | ], 12 | "randombg": [ 13 | "concreterandombg", 14 | "squaresrandombg", 15 | "trianglesrandombg", 16 | "albertrandombg", 17 | "tildarandombg", 18 | "electrorandombg" 19 | ], 20 | "advanced": [ 21 | "basicadvanced", 22 | "acidadvanced", 23 | "groundadvanced", 24 | "groundadvancedlite", 25 | "voidadvanced", 26 | "voidadvancedlite", 27 | "rockadvanced" 28 | ], 29 | "easy": [ 30 | "basiceasy", 31 | "acideasy", 32 | "groundeasy", 33 | "voideasy", 34 | "triangleseasy", 35 | "rockeasy" 36 | ], 37 | "checkeredfill": [ 38 | "albertcheckeredfill", 39 | "tildacheckeredfill", 40 | "concretecheckeredfill", 41 | "squarescheckeredfill", 42 | "trianglescheckeredfill", 43 | "screwscheckeredfill" 44 | ], 45 | "randomfill": [ 46 | "albertrandomfill", 47 | "tildarandomfill", 48 | "concreterandomfill", 49 | "squaresrandomfill", 50 | "trianglesrandomfill" 51 | ], 52 | "attributes": [ 53 | "boxes", 54 | "antennas", 55 | "mushrooms", 56 | "grassattributes", 57 | "noattributes" 58 | ], 59 | "topping": [ 60 | "basictopping", 61 | "flattopping", 62 | "grasstopping", 63 | "grasssimpletopping", 64 | "notopping" 65 | ], 66 | "colors": [ 67 | "21295c-1b3b6f-065a82-1c7293-9eb3c2", 68 | "423b0b-b5fed9-98cbb4-7ba098-474935", 69 | "f1dede-d496a7-5d576b-6cd4ff-fe938c", 70 | "c8ffbe-edffab-ba9593-89608e-623b5a", 71 | "75dddd-508991-172a3a-004346-09bc8a", 72 | "524632-8f7e4f-c3c49e-d8ffdd-dedbd8", 73 | "08415c-556f7a-ebbab9-388697-b5ffe1", 74 | "46351d-646f4b-839d9a-7bb2d9-bfd2bf", 75 | "c19ab7-087e8b-9c95dc-228cdb-fac8cd", 76 | "f79256-087e8b-fbd1a2-7dcfb6-00b2ca", 77 | "0b3954-087e8b-bfd7ea-ff5a5f-c81d25", 78 | "a49e8d-504136-689689-b2e6d4-83e8ba", 79 | "cfffb3-ade25d-fcec52-3b7080-3a5743", 80 | "cee7e6-bfc0c0-648767-7dc95e-7cdf64", 81 | "5b507a-2d3142-bfc0c0-ffffff-ef8354", 82 | "dd7373-847996-88b7b5-a7cab1-f4ecd6", 83 | "5b507a-5b618a-9eadc8-b9e28c-d6d84f" 84 | ] 85 | } 86 | -------------------------------------------------------------------------------- /src/assets/options.json: -------------------------------------------------------------------------------- 1 | { 2 | "checkeredbg": [ 3 | "bricks", 4 | "vbrickcheckeredbg", 5 | "upbrickscheckeredbg", 6 | "swirlcheckeredbg", 7 | "swirlcheckeredbgalt", 8 | "squarescheckeredbg", 9 | "tildascheckeredbg", 10 | "albertcheckeredbg" 11 | ], 12 | "randombg": [ 13 | "concreterandombg", 14 | "squaresrandombg", 15 | "trianglesrandombg", 16 | "albertrandombg", 17 | "tildarandombg", 18 | "electrorandombg" 19 | ], 20 | "advanced": [ 21 | "basicadvanced", 22 | "acidadvanced", 23 | "groundadvanced", 24 | "groundadvancedlite", 25 | "voidadvanced", 26 | "voidadvancedlite", 27 | "rockadvanced" 28 | ], 29 | "easy": [ 30 | "basiceasy", 31 | "acideasy", 32 | "groundeasy", 33 | "voideasy", 34 | "triangleseasy", 35 | "rockeasy" 36 | ], 37 | "checkeredfill": [ 38 | "albertcheckeredfill", 39 | "tildacheckeredfill", 40 | "concretecheckeredfill", 41 | "squarescheckeredfill", 42 | "trianglescheckeredfill", 43 | "screwscheckeredfill" 44 | ], 45 | "randomfill": [ 46 | "albertrandomfill", 47 | "tildarandomfill", 48 | "concreterandomfill", 49 | "squaresrandomfill", 50 | "trianglesrandomfill" 51 | ], 52 | "attributes": [ 53 | "boxes", 54 | "antennas", 55 | "mushrooms", 56 | "grassattributes", 57 | "noattributes" 58 | ], 59 | "topping": [ 60 | "basictopping", 61 | "flattopping", 62 | "grasstopping", 63 | "grasssimpletopping", 64 | "notopping" 65 | ], 66 | "colors": [ 67 | "21295c-1b3b6f-065a82-1c7293-9eb3c2", 68 | "423b0b-b5fed9-98cbb4-7ba098-474935", 69 | "f1dede-d496a7-5d576b-6cd4ff-fe938c", 70 | "c8ffbe-edffab-ba9593-89608e-623b5a", 71 | "75dddd-508991-172a3a-004346-09bc8a", 72 | "524632-8f7e4f-c3c49e-d8ffdd-dedbd8", 73 | "08415c-556f7a-ebbab9-388697-b5ffe1", 74 | "46351d-646f4b-839d9a-7bb2d9-bfd2bf", 75 | "c19ab7-087e8b-9c95dc-228cdb-fac8cd", 76 | "f79256-087e8b-fbd1a2-7dcfb6-00b2ca", 77 | "0b3954-087e8b-bfd7ea-ff5a5f-c81d25", 78 | "a49e8d-504136-689689-b2e6d4-83e8ba", 79 | "cfffb3-ade25d-fcec52-3b7080-3a5743", 80 | "cee7e6-bfc0c0-648767-7dc95e-7cdf64", 81 | "5b507a-2d3142-bfc0c0-ffffff-ef8354", 82 | "dd7373-847996-88b7b5-a7cab1-f4ecd6", 83 | "5b507a-5b618a-9eadc8-b9e28c-d6d84f" 84 | ] 85 | } 86 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Random tileset generator 6 | 7 | 54 | 55 | 56 |
57 |
58 |
59 |
60 |
61 |
62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 |
bg
solid
fill
easy
top
attr
 
114 |
115 |
116 | 117 | 118 | -------------------------------------------------------------------------------- /pub/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Random tileset generator 6 | 7 | 54 | 55 | 56 |
57 |
58 |
59 |
60 |
61 |
62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 |
bg
solid
fill
easy
top
attr
 
114 |
115 |
116 | 117 | 118 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Phaser from 'phaser'; 2 | import ko from 'knockout'; 3 | import options from './assets/options.json'; 4 | 5 | let previewScene; 6 | let previewIndex = 0; 7 | 8 | let tileScene; 9 | 10 | let crop = document.createElement('canvas'); 11 | crop.width = 64; 12 | crop.height = 64; 13 | let cropContext = crop.getContext('2d'); 14 | 15 | const bgColor = ko.observable('ffffff'); 16 | const solidColor = ko.observable('ffffff'); 17 | const randomColor = ko.observable('ffffff'); 18 | const topColor = ko.observable('ffffff'); 19 | const easyColor = ko.observable('ffffff'); 20 | const attrColor = ko.observable('ffffff'); 21 | 22 | bgColor.subscribe((newValue) => { 23 | if (!tileScene) { 24 | return; 25 | } 26 | let color = Number('0x' + newValue); 27 | tileScene.bg.tint = color; 28 | tileScene.checkeredbg.tint = color; 29 | tileScene.randombg.tint = color; 30 | renderPreview(); 31 | }); 32 | 33 | solidColor.subscribe((newValue) => { 34 | if (!tileScene) { 35 | return; 36 | } 37 | let color = Number('0x' + newValue); 38 | tileScene.advanced.tint = color; 39 | tileScene.checkeredfill.tint = color; 40 | renderPreview(); 41 | }); 42 | 43 | randomColor.subscribe((newValue) => { 44 | if (!tileScene) { 45 | return; 46 | } 47 | let color = Number('0x' + newValue); 48 | tileScene.randomfill.tint = color; 49 | renderPreview(); 50 | }); 51 | 52 | topColor.subscribe((newValue) => { 53 | if (!tileScene) { 54 | return; 55 | } 56 | let color = Number('0x' + newValue); 57 | tileScene.topping.tint = color; 58 | renderPreview(); 59 | }); 60 | 61 | easyColor.subscribe((newValue) => { 62 | if (!tileScene) { 63 | return; 64 | } 65 | let color = Number('0x' + newValue); 66 | tileScene.easy.tint = color; 67 | renderPreview(); 68 | }); 69 | 70 | attrColor.subscribe((newValue) => { 71 | if (!tileScene) { 72 | return; 73 | } 74 | let color = Number('0x' + newValue); 75 | tileScene.attributes.tint = color; 76 | renderPreview(); 77 | }); 78 | 79 | function randomizeColors() { 80 | let palette = options.colors[Math.floor(Math.random() * options.colors.length)].split('-'); 81 | bgColor(palette.splice(Math.floor(Math.random() * palette.length), 1)); 82 | solidColor(palette.splice(Math.floor(Math.random() * palette.length), 1)); 83 | randomColor(palette.splice(Math.floor(Math.random() * palette.length), 1)); 84 | topColor(palette.splice(Math.floor(Math.random() * palette.length), 1)); 85 | easyColor((Math.random() > .5) ? randomColor() : topColor()); 86 | attrColor(palette.splice(Math.floor(Math.random() * palette.length), 1)); 87 | } 88 | 89 | const patternOptions = {}; 90 | Object.keys(options).forEach((option) => { 91 | if (option !== 'colors') { 92 | patternOptions['selected' + option] = ko.observable(options[option][0]); 93 | patternOptions['selected' + option].subscribe((newValue) => { 94 | if (!tileScene) { 95 | return; 96 | } 97 | tileScene[option].setTexture(newValue); 98 | renderPreview(); 99 | }); 100 | patternOptions['available' + option] = ko.observableArray(options[option]); 101 | } 102 | }); 103 | 104 | let bindings = { ...patternOptions, bgColor, solidColor, randomColor, topColor, easyColor, attrColor}; 105 | ko.applyBindings(bindings); 106 | 107 | function randomizePatterns() { 108 | Object.keys(options).forEach((option) => { 109 | if (option !== 'colors') { 110 | patternOptions['selected' + option](options[option][Math.floor(Math.random() * options[option].length)]); 111 | } 112 | }); 113 | } 114 | 115 | let renderTO = 0; 116 | function renderPreview() { 117 | clearTimeout(renderTO); 118 | renderTO = setTimeout(function () { 119 | if (!previewScene || !tileset) { 120 | return; 121 | } 122 | tileset.renderer.snapshot((image) => { 123 | cropContext.drawImage(image, 0, -1); 124 | previewIndex++; 125 | let previewName = 'tiles' + previewIndex; 126 | //previewScene.textures.addImage(previewName, image); 127 | let data = crop.toDataURL(); 128 | previewScene.textures.addBase64(previewName, data); 129 | //document.body.appendChild(image); 130 | document.getElementById('export-button').setAttribute('href', data); 131 | setTimeout(() => { 132 | previewScene.tiles.setImage(previewScene.textures.get(previewName)); 133 | // destroy old textures 134 | if (previewScene.textures.exists('tiles' + (previewIndex - 1))) { 135 | previewScene.textures.remove('tiles' + (previewIndex - 1)); 136 | } 137 | }, 500); 138 | }); 139 | generateUrl(); 140 | }, 500); 141 | } 142 | 143 | function parseUrl() { 144 | let search = location.search.substring(1); 145 | let params = JSON.parse('{"' + search.replace(/&/g, '","').replace(/=/g,'":"') + '"}', function (key, value) { return key === "" ? value : decodeURIComponent(value) }); 146 | Object.keys(bindings).forEach(function (key,index) { 147 | if (!ko.isObservableArray(bindings[key]) && params[key]) { 148 | bindings[key](params[key]); 149 | } 150 | }); 151 | } 152 | 153 | function generateUrl() { 154 | let params = '?'; 155 | Object.keys(bindings).forEach(function (key,index) { 156 | if (!ko.isObservableArray(bindings[key])) { 157 | params += key + '=' + bindings[key]() + '&'; 158 | } 159 | }); 160 | params = params.substr(0, params.length - 1); 161 | if (params !== location.search) { 162 | history.pushState({}, document.title, params); 163 | } 164 | document.getElementById('share-button').href = 'https://quinten.github.io/random-tileset-generator/' + params; 165 | } 166 | 167 | window.onpopstate = function () { 168 | parseUrl(); 169 | renderPreview(); 170 | }; 171 | 172 | const tilesetConfig = { 173 | type: Phaser.AUTO, 174 | parent: 'tileset', 175 | pixelArt: true, 176 | scale: { 177 | mode: Phaser.Scale.NONE, 178 | width: 64, 179 | height: 65, 180 | zoom: 2 181 | }, 182 | scene: { 183 | preload: preloadTileset, 184 | create: createTileset 185 | } 186 | }; 187 | 188 | const tileset = new Phaser.Game(tilesetConfig); 189 | 190 | function preloadTileset() { 191 | this.load.image('plainbg', 'assets/plainbg.png'); 192 | //this.load.image('plainfg', 'assets/plainfg.png'); 193 | Object.keys(options).forEach((option) => { 194 | if (option !== 'colors') { 195 | options[option].forEach((key) => { 196 | this.load.image(key, 'assets/' + key + '.png'); 197 | }); 198 | } 199 | }); 200 | } 201 | 202 | function createTileset() { 203 | this.bg = this.add.image(32, 32, 'plainbg'); 204 | Object.keys(options).forEach((option) => { 205 | if (option !== 'colors') { 206 | this[option] = this.add.image(32, 32, options[option][0]); 207 | } 208 | }); 209 | 210 | tileScene = this; 211 | parseUrl(); 212 | renderPreview(); 213 | } 214 | 215 | const previewConfig = { 216 | type: Phaser.AUTO, 217 | parent: 'preview', 218 | pixelArt: true, 219 | scale: { 220 | mode: Phaser.Scale.NONE, 221 | width: 160, 222 | height: 128, 223 | zoom: 2 224 | }, 225 | scene: { 226 | preload: preloadPreview, 227 | create: createPreview 228 | } 229 | }; 230 | 231 | const preview = new Phaser.Game(previewConfig); 232 | 233 | function preloadPreview() { 234 | this.load.image('tiles', 'assets/tiles.png'); 235 | this.load.tilemapTiledJSON('map', 'assets/map.json'); 236 | } 237 | 238 | function createPreview() { 239 | this.map = this.make.tilemap({ key: 'map' }); 240 | this.tiles = this.map.addTilesetImage('tiles', 'tiles'); 241 | this.layer = this.map.createDynamicLayer(0, this.tiles, 0, 0); 242 | 243 | previewScene = this; 244 | renderPreview(); 245 | } 246 | 247 | let colorsButton = document.getElementById('colors-button'); 248 | colorsButton.addEventListener('click', () => { 249 | randomizeColors(); 250 | }); 251 | 252 | let patternsButton = document.getElementById('patterns-button'); 253 | patternsButton.addEventListener('click', () => { 254 | randomizePatterns(); 255 | }); 256 | 257 | let everythingButton = document.getElementById('everything-button'); 258 | everythingButton.addEventListener('click', () => { 259 | randomizeColors(); 260 | randomizePatterns(); 261 | }); 262 | --------------------------------------------------------------------------------