A small tile-based level editor that runs in the browser. This is useful for game jams or if you want to minimize required software installs. The goal is to run this in an online IDE e.g. Github Codespaces. The emphasis of this project is on the workflow, not necessarily on having all kinds of features.
Try it now! (serverless mode)
This tool is not implemented yet. Feel free to open an "issue" if you are interested in saying hello! 🙂
npx zommerfelds/MiniLevelEditor@latest
Note: this will build the entire package and may take some time. In the future we plan to make more efficient releases.
Run: npm run dev
On the browser, open http://localhost:5173/
To develop serverless mode, run npm run client-dev-serverless.
- Set up Vue project
- Add a level switcher sidebar with state
- Integrate with local server & save the state to disk
- Nicer logo + add to README
- Define a level format
- Integrate Phaser in the editor
- Implement basic tile paining UI (proof of concept)
- Make Phaser canvas fully resizeable
- Be able to configure project (tileset image(s), tile size, etc)
- Tile picker
- Add a demo link
- Make JSON output git diff friendly
- Easily increase tileset size wthout messing up project
- Warning for when there is no server connected
- Undo and redo
- Tile editor (define new tiles)
- Add warning banner for when data doesns't match the schema (e.g. tile was deleted)
- Level reordering
- Export command and package so it can be run from other repo
- Allow to define properties (for tiles and levels)
- Layers
- Refactor: separate vue element for dropdown
- Serverless mode
- Allow to assign tile types to tiles (in tile dialog)
- Build a real demo game in https://github.com/zommerfelds/MiniLevelEditor-game-demo
- Define the auto-mapping model
- Add nicer default tileset
- Better way of defining new tiles (pick from image instead of x/y, auto-add all)
- Paint multiple tiles at the same time
- Show unselected layers above slightly transparent
- Add a "base" tile type, to have properties every tile has
- More basic tools (e.g. eraser, move tile(s), selection) - missing: move selection
- Support multiple tilesets
- Randomize drawing (maybe: way to define brushes)
- Add warning for old version
- Load tilesets from a better folder ("tilesets"? root folder?)
- Polish serverless UI (make it clear when a new level is created)
- Make dependencies lightweight by only shipping the dist files (and move to devDependencies)
- Publish to NPM
- Make a YouTube video
- Keyboard shortcuts (e.g. Ctrl-Z for undo)
- Optimize saving by only sending diffs and batching/throttling (refDebounced?)
- Fix
npm run client-type-check - Unit test for loading (makes sure file is not modified)
- Check validity of levels.json file (e.g. using https://github.com/gristlabs/ts-interface-checker)
- Fill tool
- Copy paste
- Change favicon
- Select a tool when tile is selected (instead of keeping eraser)
- Changing type name should update all references
Single diff: https://www.npmjs.com/package/fast-json-patch
Collaborative: https://github.com/share/sharedb https://github.com/sueddeutsche/json-sync