{"id":16298105,"url":"https://github.com/blurymind/tilemap-editor","last_synced_at":"2025-03-16T13:31:44.020Z","repository":{"id":39565495,"uuid":"378621213","full_name":"blurymind/tilemap-editor","owner":"blurymind","description":"TileMap Editor is a fat-free tile map editor with zero dependencies and a scalable, mobile-friendly interface","archived":false,"fork":false,"pushed_at":"2022-12-07T21:20:13.000Z","size":4141,"stargazers_count":115,"open_issues_count":5,"forks_count":18,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-12T09:41:07.967Z","etag":null,"topics":["javascript","tilemap","tilemap-editor"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/blurymind.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["blurymind"],"patreon":null,"open_collective":null,"ko_fi":"blurymind","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2021-06-20T10:48:54.000Z","updated_at":"2025-01-26T17:17:16.000Z","dependencies_parsed_at":"2023-01-24T22:45:54.853Z","dependency_job_id":null,"html_url":"https://github.com/blurymind/tilemap-editor","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blurymind%2Ftilemap-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blurymind%2Ftilemap-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blurymind%2Ftilemap-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blurymind%2Ftilemap-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/blurymind","download_url":"https://codeload.github.com/blurymind/tilemap-editor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243817278,"owners_count":20352530,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","tilemap","tilemap-editor"],"created_at":"2024-10-10T20:43:34.340Z","updated_at":"2025-03-16T13:31:42.883Z","avatar_url":"https://github.com/blurymind.png","language":"HTML","readme":"\u003ch1 align=\"center\"\u003eTilemapEditor\u003c/h1\u003e\n\ntry it online at https://blurymind.github.io/tilemap-editor/\n\nThe online demo is an installable pwa, which has as a goal to demonstrate integration of the editor in other projects.\nYou can use the pwa as a way of sharing a demo of tilesets and tilemaps you have created!\n\nAs an example this url:\nhttps://blurymind.github.io/tilemap-editor/?imgur=SjjsjTm\nthe imgur=ID at the end tells tilemap-editor to use as tilesets an imgur uploads gallery with the same id in its url:\nhttps://imgur.com/a/SjjsjTm\n\nIn the same way you can also store your tilemaps in github gists!\nas an example this url:\nhttps://blurymind.github.io/tilemap-editor/?gist=e81f38830a67444c54adfb4f69c6538d\nthe gist=ID at the end tells tilemap-editor to load the timap data (which also has the tilesets in it) from a gist at github with the same id in its url:\nhttps://gist.github.com/blurymind/e81f38830a67444c54adfb4f69c6538d\n\nTo store a tilemap in a gist, export it with file\u003edownloadjson file, open the file and copy its contents, then paste them into a gist. Or alternatively just upload the file to a gist. Finally copy the gist's ID and then append the gist=yourGistId to the tilemap-editor url.\n\nI plan to make this a simpler process in the future if there is enough interest.\n\n---\n\n\u003ch3 align=\"center\"\u003e\n  \u003ca href=\"#information_source-about\"\u003eAbout\u003c/a\u003e\u0026nbsp;|\n  \u003ca href=\"#information_source-features\"\u003eFeatures\u003c/a\u003e\u0026nbsp;|\n  \u003ca href=\"#interrobang-reason\"\u003eReason\u003c/a\u003e\u0026nbsp;|\n  \u003ca href=\"#link-getting-started\"\u003eGetting started\u003c/a\u003e\u0026nbsp;|\n  \u003ca href=\"#link-api\"\u003eApi use\u003c/a\u003e\u0026nbsp;|\n  \u003ca href=\"#link-how-to-contribute\"\u003eHow to Contribute\u003c/a\u003e\u0026nbsp;|\n\u003c/h3\u003e\n\n---\n\n## :space_invader: About\n\nTileMap Editor is a fat-free tile map editor with zero dependencies and a scalable, mobile-friendly interface.\n\n## :gift: features\n\n- Multiple tileset support\n- Multiple tilemap support\n- Multi-tile selection and painting (drag select multiple tiles from the tileset)\n- Tileset meta-data editing (Assign tags to tiles, automatic assignment of symbols to tiles)\n- Animated tiles support\n- Flipped tiles support\n- Tilemap layers (as many as you like) with opacity and visibility\n- Export boilerplate code for kaboomjs https://kaboomjs.com/ (wip)\n- Customizable export data\n- Resizable tilemap - non destructive too\n- Paint tool, Pan tool, eraser tool, Bucket fill tool, Random tile tool, Pick tile tool\n- Undo/redo system\n- Responsive interface (scales down to portrait mode on mobile)\n- Tiny footprint \n- Easy I/O api that lets you transform and save data with ease\n\nPlanned:\n- Paint tool modes (line, square, circle,etc)\n- tiled i/o\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"screenshots/demo.gif\" /\u003e\n\u003c/p\u003e\n\nMultiple tilemaps and tilesets are supported in one file/session\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"screenshots/demo-tilemaps.gif\" /\u003e\n\u003c/p\u003e\n\nIt also scales all the way down to a smartphone screen in portrait mode\n \u003cp align=\"center\"\u003e\n  \u003cimg src=\"screenshots/mobile.png\" /\u003e\n\u003c/p\u003e\n\nYou can flip tiles\n \u003cp align=\"center\"\u003e\n  \u003cimg src=\"screenshots/flipTileOnX.gif\" /\u003e\n\u003c/p\u003e\n\nIt can even do animated tiles\n \u003cp align=\"center\"\u003e\n  \u003cimg src=\"screenshots/animatedTiles.gif\" /\u003e\n\u003c/p\u003e\n\nThe random tile brush can also use animation frames to place a random frame \n \u003cp align=\"center\"\u003e\n  \u003cimg src=\"screenshots/randomTileFrame.gif\" /\u003e\n\u003c/p\u003e\n\n## :cyclone: Reason\n\nBut Todor, why are you making another tilemap editor with all these other ones out there?\n\nWhile I am a big fan of Tiled and LdTk, for my case I was looking for something that neither had:\n- Tiny footprint. Other tilemap editors are 60-100+ mb and require installation. Tilemap-editor is 30kb as of the time of writing this.\n- Can be used by other js projects/web apps/websites. It has been designed to be a module, which you can plug in your project easily.\n- No build process required, no webpack, no transpiling. Thats true, it's a single js+css file with no external dependencies!\n- Runs everywhere - mobile too. The other available options can not run on android or ios.\n- Responsive interface that scales all the way down to a portrait mode smartphone. Thats right, one of the goals is to let you make maps on your phone.\n- Again it just uses vanilla javascript, no react, no webpack, no 1gb+ eaten by the node modules folder. Inspect its code in the browser and it all there clear as a day.\n- No complicated build processes. Since it's just a js file, you don't need to wait for it to rebuild every time you change it\n\n## :eyeglasses: Getting started\n\n   ```bash\n   $ git clone https://github.com/blurymind/tilemap-editor.git\n   $ yarn\n   $ yarn start\n   ```\n\n## :book: Api\n\nTo get it from npm, you can run\n\n```bash\n$ npm i tilemap-editor\nor\n$ yarn add tilemap-editor\n```\n  \nTo use it, you can import it via require or in the index file like so\n\n   ```js\n   // include the js and css files\n\u003clink rel=\"stylesheet\" href=\"styles.css\"/\u003e\n\u003cscript src=\"tilemap-editor.js\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\nTilemapEditor.init(\"tileMapEditor\",{ // The id of the element that will become the tilemap-editor (must exist in your dom)\n    // loads tilemap data which was saved before. undefined will start you with an empty map.\n    // Takes a parsed json object with a data struct that tiled-editor can read (an object with maps and tileSets):\n    // { maps : {...}, tileSets: {...}}\n    tileMapData: ioJsonData,\n    // tileSize is used to slice the tileset and give the tilemap the right sized grid\n    tileSize: 32,\n    // How many tiles is the initial map wide\n    mapWidth: 20,\n    // How many tiles is the initial map tall\n    mapHeight: 20,\n    // tileset images src (required)\n    tileSetImages: [\"https://i.imgur.com/ztwPZOI.png\", \"./free.png\"],\n    // You can write your own custom load image function here and use it for the tileset src. If you dont, the base64 string will be used instead\n    tileSetLoaders: {\n        fromUrl: {\n            name: \"Any url\", // name is required and used for the loader's title in the select menu\n            prompt: (setSrc) =\u003e { // Pass prompt ot onSelectImage. Prompt lets you do anything without asking the user to select a file\n                const fileUrl = window.prompt(\"What is the url of the tileset?\", \"https://i.imgur.com/ztwPZOI.png\");\n                if(fileUrl !== null) setSrc(fileUrl)\n            }\n        },\n        imgur: {\n            name: \"Imgur (host)\",\n            onSelectImage: (setSrc, file, base64) =\u003e { // In case you want them to give you a file from the fs, you can do this instead of prompt\n                uploadImageToImgur(file).then(result=\u003e{\n                    console.log(file, base64);\n                    console.log(\"Uploaded to imgur\", result);\n                    setSrc(result.data.link);\n                });\n            },\n        },\n    },\n    // You can write your own tilemap exporters here. Whatever they return will get added to the export data you get out when you trigger onAppy\n    tileMapExporters: {\n        kaboomJs: { // the exporter's key is later used by the onApply option\n            name: \"Download KaboomJs boilerplate code\", // name of menu entry\n            description: \"Exports boilerplate js code for KaboomJs\",\n            transformer: ({flattenedData, maps, tileSets, activeMap, downloadAsTextFile})=\u003e {\n                const text = kaboomJsExport({flattenedData, maps, tileSets, activeMap});\n                downloadAsTextFile(text, \"KaboomJsMapData.js\");// you can use this util method to get your text as a file\n            }\n        },\n    },\n    tileMapImporters: {\n        //similar to the exporters, you can write your own data importer, which will then be added to the file menu\n        tiledImport: {\n            name: \"Import Tiled json file (TODO)\", // name of menu entry\n            onSelectFiles: (setData, files) =\u003e { // callback that is triggered when file(s) are selected.\n                const readFile = new FileReader();\n                readFile.onload = (e) =\u003e {\n                    const json = JSON.parse(e.target.result);\n                    // At this point we got the json data from the tiled file. We need to convert it into\n                    // a data struct that tiled-editor can read (an object with maps and tileSets):\n                    // { maps : {...}, tileSets: {...}}\n                    alert(\"Not implemented yet... pr welcome ;)\");\n                    return;// TODO tiled json file parser\n\n                    setData(json); // Finally pass that to the setData function, which will load it into tiled-editor\n                };\n                readFile.readAsText(files[0]);\n            },\n            acceptFile: \"application/JSON\" // You can control what files are accepted\n        }\n    },\n    // If passed, a new button gets added to the header, upon being clicked, you can get data from the tilemap editor and trigger events\n    onApply: {\n        onClick: ({flattenedData, maps, tileSets, activeMap}) =\u003e {\n            console.log(\"onClick, gets the data too\")\n            const copyText = document.createElement(\"input\");\n            document.body.appendChild(copyText);\n            copyText.value = kaboomJsExport({flattenedData, maps, tileSets, activeMap});\n            copyText.select();\n            copyText.setSelectionRange(0, 99999); /* For mobile devices */\n            document.execCommand(\"copy\");\n\n            /* Alert the copied text */\n            alert(\"Copied the text: \" + copyText.value);\n            // const kbCode = kaboomJsExport({flattenedData, maps, tileSets, activeMap});\n        },\n        buttonText: \"Copy Kb to clip\", // controls the apply button's text\n    },\n    onUpdate(ev) { // callback for when the app updates its state (loaded data, tool, etc)\n    // console.log(\"--\u003e\u003e\", ev)\n    }\n})\nconsole.log(\"Got App State:\",TilemapEditor.getState())\n\u003c/script\u003e\n   ```\n   \n\n## :wrench: How to Contribute\n\nYou are welcome to add new features or fix some bugs:\n\n1. Fork this repository\n\n2. Clone your fork\n   ```bash\n   $ git clone https://github.com/blurymind/tilemap-editor.git\n   ```\n\n- Create a branch with your changes\n\n  ```bash\n  $ git checkout -b my-awesome-changes\n  ```\n\n- Make the commit with your changes\n\n  ```bash\n  $ git commit -m 'feat: add a shortcut to copy a tile of the canvas'\n  ```\n\n- Push your branch\n\n  ```bash\n  # Send the code to your remote branch\n  $ git push origin my-awesome-changes\n  ```\n\n- Create a _Pull Request_\n","funding_links":["https://github.com/sponsors/blurymind","https://ko-fi.com/blurymind"],"categories":["HTML"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblurymind%2Ftilemap-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblurymind%2Ftilemap-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblurymind%2Ftilemap-editor/lists"}