|
1 | | -# React + TypeScript + Vite |
| 1 | +# 2dtiler |
2 | 2 |
|
3 | | -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. |
| 3 | +2dtiler is a free, open source 2D level, tileset, and pixel workflow editor built for game developers who are tired of jumping between a dozen separate tools. |
4 | 4 |
|
5 | | -Currently, two official plugins are available: |
| 5 | +It is designed to replace large parts of the day-to-day workflow usually split across map editors, tileset tools, palette utilities, lightweight image editors, export helpers, and asset generation tools. Instead of stitching together 10+ apps for one project, you can keep the work in one place. |
6 | 6 |
|
7 | | -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh |
8 | | -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh |
| 7 | +## Why 2dtiler |
9 | 8 |
|
10 | | -## React Compiler |
| 9 | +- Free to use |
| 10 | +- MIT licensed |
| 11 | +- Runs locally in the browser |
| 12 | +- Covers maps, tilesets, image editing, palettes, and export workflows in one app |
| 13 | +- Built for fast iteration with keyboard shortcuts, layered editing, and asset import/export |
11 | 14 |
|
12 | | -The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). |
| 15 | +2dtiler is a practical replacement for many common 2D production workflows people currently handle with tools like Tiled, Ogmo, Aseprite palette utilities, lightweight raster editors, standalone export tools, and other specialist pixel-art utilities. |
13 | 16 |
|
14 | | -## Expanding the ESLint configuration |
| 17 | +## Features |
15 | 18 |
|
16 | | -If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: |
| 19 | +### Map and tileset workflow |
17 | 20 |
|
18 | | -```js |
19 | | -export default defineConfig([ |
20 | | - globalIgnores(["dist"]), |
21 | | - { |
22 | | - files: ["**/*.{ts,tsx}"], |
23 | | - extends: [ |
24 | | - // Other configs... |
| 21 | +- Create and edit tile maps with layered content |
| 22 | +- Work with tilesets and reusable tile assets |
| 23 | +- Paint, erase, fill, and terrain-fill maps |
| 24 | +- Use image layers and object rendering inside the editor |
| 25 | +- Resize maps and work with multiple asset types in one project |
25 | 26 |
|
26 | | - // Remove tseslint.configs.recommended and replace with this |
27 | | - tseslint.configs.recommendedTypeChecked, |
28 | | - // Alternatively, use this for stricter rules |
29 | | - tseslint.configs.strictTypeChecked, |
30 | | - // Optionally, add this for stylistic rules |
31 | | - tseslint.configs.stylisticTypeChecked, |
| 27 | +### Import and export |
32 | 28 |
|
33 | | - // Other configs... |
34 | | - ], |
35 | | - languageOptions: { |
36 | | - parserOptions: { |
37 | | - project: ["./tsconfig.node.json", "./tsconfig.app.json"], |
38 | | - tsconfigRootDir: import.meta.dirname, |
39 | | - }, |
40 | | - // other options... |
41 | | - }, |
42 | | - }, |
43 | | -]); |
| 29 | +- Export full projects as `.2dp` |
| 30 | +- Export single maps as `.2dm` |
| 31 | +- Export single tilesets as `.2dt` |
| 32 | +- Import and export raster images including PNG, JPG, WEBP, BMP, and GIF |
| 33 | +- Export with format-specific options like transparency and quality where supported |
| 34 | + |
| 35 | +### Image and palette tools |
| 36 | + |
| 37 | +- Built-in image editor for tile and image asset workflows |
| 38 | +- Palette parsing and conversion utilities |
| 39 | +- Support for GIMP `.gpl` palettes |
| 40 | +- Support for ASE palette files used in Aseprite workflows |
| 41 | + |
| 42 | +### Editor experience |
| 43 | + |
| 44 | +- Keyboard shortcuts for tools, brush sizes, zoom, undo/redo, save, find/replace, and clipboard actions |
| 45 | +- Auto-save and manual save flows |
| 46 | +- Progressive web app setup with service worker updates |
| 47 | +- Runs as a local web app during development and can be deployed as a static frontend |
| 48 | + |
| 49 | +### AI-assisted asset generation |
| 50 | + |
| 51 | +- Built-in AI asset generation UI for tilesets, sprites, backgrounds, icons, UI assets, and VFX |
| 52 | +- Supports multiple generation providers and prompt-driven asset configuration |
| 53 | + |
| 54 | +## Free and Open Source |
| 55 | + |
| 56 | +2dtiler is completely free and released under the MIT License. You can use it, modify it, and contribute improvements without paying for the editor itself. |
| 57 | + |
| 58 | +See [LICENSE](./LICENSE) for the full license text. |
| 59 | + |
| 60 | +## Installation |
| 61 | + |
| 62 | +### Requirements |
| 63 | + |
| 64 | +- [Bun](https://bun.sh/) |
| 65 | + |
| 66 | +### Local development |
| 67 | + |
| 68 | +1. Clone the repository. |
| 69 | +2. Install dependencies: |
| 70 | + |
| 71 | +```bash |
| 72 | +bun install |
44 | 73 | ``` |
45 | 74 |
|
46 | | -You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: |
47 | | - |
48 | | -```js |
49 | | -// eslint.config.js |
50 | | -import reactX from "eslint-plugin-react-x"; |
51 | | -import reactDom from "eslint-plugin-react-dom"; |
52 | | - |
53 | | -export default defineConfig([ |
54 | | - globalIgnores(["dist"]), |
55 | | - { |
56 | | - files: ["**/*.{ts,tsx}"], |
57 | | - extends: [ |
58 | | - // Other configs... |
59 | | - // Enable lint rules for React |
60 | | - reactX.configs["recommended-typescript"], |
61 | | - // Enable lint rules for React DOM |
62 | | - reactDom.configs.recommended, |
63 | | - ], |
64 | | - languageOptions: { |
65 | | - parserOptions: { |
66 | | - project: ["./tsconfig.node.json", "./tsconfig.app.json"], |
67 | | - tsconfigRootDir: import.meta.dirname, |
68 | | - }, |
69 | | - // other options... |
70 | | - }, |
71 | | - }, |
72 | | -]); |
| 75 | +3. Start the development server: |
| 76 | + |
| 77 | +```bash |
| 78 | +bun run dev |
73 | 79 | ``` |
| 80 | + |
| 81 | +4. Open the local URL printed by Vite in your browser. |
| 82 | + |
| 83 | +### Production build |
| 84 | + |
| 85 | +```bash |
| 86 | +bun run build |
| 87 | +``` |
| 88 | + |
| 89 | +### Lint the project |
| 90 | + |
| 91 | +```bash |
| 92 | +bun run lint |
| 93 | +``` |
| 94 | + |
| 95 | +### Preview the production build |
| 96 | + |
| 97 | +```bash |
| 98 | +bun run preview |
| 99 | +``` |
| 100 | + |
| 101 | +## Contributing |
| 102 | + |
| 103 | +Contributions are welcome. |
| 104 | + |
| 105 | +1. Fork the repository or create a feature branch. |
| 106 | +2. Make your changes. |
| 107 | +3. Run the checks locally: |
| 108 | + |
| 109 | +```bash |
| 110 | +bun run lint |
| 111 | +bun run build |
| 112 | +``` |
| 113 | + |
| 114 | +4. Open a pull request with a clear summary of the change. |
| 115 | + |
| 116 | +If you are proposing a bigger feature, keep the pull request focused and explain the workflow problem it solves. |
| 117 | + |
| 118 | +## Tech Stack |
| 119 | + |
| 120 | +- React |
| 121 | +- TypeScript |
| 122 | +- Vite |
| 123 | +- Bun for local workflow commands |
| 124 | + |
| 125 | +## Status |
| 126 | + |
| 127 | +2dtiler is actively evolving. The repository includes ongoing work around import/export, AI asset tooling, tileset management, map management, and broader editor workflows. |
0 commit comments