Skip to content

Commit aea4ec4

Browse files
authored
Add delete functionality for maps and tilesets, enhance PWA support (#4)
* feat: add delete functionality for maps and tilesets in MapPanelTabs and TilesetPanel * feat: enhance PWA support with service worker registration and update handling * feat: update README and TODO for Vite8 upgrade; add GitHub link to Toolbar * chore: update dependencies and refactor manual chunking in Vite config - Updated @tailwindcss/vite from ^4.1.18 to ^4.2.2 - Updated @vitejs/plugin-react from ^5.1.1 to ^6.0.1 - Updated vite from ^7.2.4 to ^8.0.9 - Refactored manual chunking logic in vite.config.ts to use a function for better maintainability
1 parent eee5375 commit aea4ec4

11 files changed

Lines changed: 348 additions & 190 deletions

File tree

README.md

Lines changed: 114 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,127 @@
1-
# React + TypeScript + Vite
1+
# 2dtiler
22

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.
44

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.
66

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
98

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
1114

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.
1316

14-
## Expanding the ESLint configuration
17+
## Features
1518

16-
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
19+
### Map and tileset workflow
1720

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
2526

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
3228

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
4473
```
4574

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
7379
```
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.

TODO.txt

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
Tilesets and Map tabs should have an option to "Delete" when you open the right click context menu. It should do the same action as clicking the close button.
1+
Upgrade to Vite8
2+
Add Tags to github repo
23

34
Export Options
45
- Do the rest of the options
@@ -7,8 +8,6 @@ Import Options
78
- Do the rest of the options
89

910
Allow quick export bottom right
10-
Upgrade to Vite8
11-
1211

1312
AI Asset Generation:
1413
AI Generation not working currently
@@ -19,11 +18,9 @@ AI Asset Generation:
1918
Add depleting progress bar to show remaining quota
2019
Ability to download/add to tileset/open in image Editor
2120

22-
Update README.md
2321
Ad Marketplace for selling/buying tilesets etc.
2422

2523
Add Tileset/Add Map buttons or dragging and dropping should support all formats
26-
Add link to github top right
2724

2825
Exploration:
2926
Ogmo Editor

0 commit comments

Comments
 (0)