{"id":297,"date":"2025-07-02T16:41:01","date_gmt":"2025-07-02T06:41:01","guid":{"rendered":"https:\/\/nonlinearexperience.com\/?p=297"},"modified":"2025-07-07T16:33:05","modified_gmt":"2025-07-07T06:33:05","slug":"the-knowledge-level-map-editors","status":"publish","type":"post","link":"https:\/\/nonlinearexperience.com\/index.php\/2025\/07\/02\/the-knowledge-level-map-editors\/","title":{"rendered":"Level\/map editors"},"content":{"rendered":"<h1 class=\"wp-block-post-title\">Level\/map editors<\/h1>\n\n\n<p class=\"wp-block-paragraph\">Needs:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Layers<\/li>\n\n\n\n<li>Means of determining tile size<\/li>\n\n\n\n<li>Means of determining grid size<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Options<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>external editor<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use tiled map editor<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.youtube.com\/watch?v=N6xqCwblyiw&amp;t=222s\">A guide to level creation with Tiled [ + how to use it with pygame ]<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">make 2 folders, a tmx and a tsx folder<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Without using tiled map editor<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">reasons<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&#8211; small game<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&#8211; online editor<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>internal editor<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Or, just have a built in edit mode<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Determining format<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">layers and parts<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">file formats<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">.json data file<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">tilemap<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So, the idea is:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">layer &#8211; map location x, map location y, tileset x, tileset y<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">but, for more detail, and slightly more abstracted, the format is:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">layer &#8211; source &#8211; destinationX, destinationY, sourceX, sourceY<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to build a Tile Set Map Editor using HTML Canvas<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The down side with this one is that it DOESN&#8217; T output data (as .json or similar&#8230;) That would be VERY useful&#8230;<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How to build a Tile Set Map Editor using HTML Canvas\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/IYgZMIB7_PM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">has layers<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">export whole image &#8211; png<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">clear canvas<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">format &#8211;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\/\/Bottom<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;{<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/Structure is &#8220;x-y&#8221;: [&#8220;tileset_x&#8221;, &#8220;tileset_y&#8221;]<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/EXAMPLE: &#8220;1-1&#8221;: [3, 4],<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;},<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;\/\/Middle<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;{},<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;\/\/Top<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;{};<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">normailse the mouse clicks in the editor to the base grid size (32&#215;32 for example\u2026)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">FLOW of a BASIC EDITOR<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">make a basic editor interface<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">UI &#8211;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><\/td><td>CLEAR<\/td><td>EXPORT DATA<\/td><td>EXPORT IMAGE<\/td><td>EXPORT LAYER (IMAGE)<\/td><\/tr><tr><td>SRC<\/td><td><\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><\/td><td>edit layer ITEMS<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><\/td><td>edit layer TOP<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><\/td><td>edit layer MID<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><\/td><td>edit layer FLOOR<\/td><td><\/td><td><\/td><td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">amount of layers is determined by incoming file<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">what about a new file?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Texture Packer<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/gammafp.github.io\/atlas-packer-phaser\/editor\">https:\/\/gammafp.github.io\/atlas-packer-phaser\/editor<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Some basics<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Make a <strong>new map (.tmx file) &#8211; save into tmx folder<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>orientation: orthogonal<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Tile layer format: CSV<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Tile render order: Right Down<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Map size: w: 24tiles h: 24tiles &#8211; 768&#215;768<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Tile size: w 128px w 128px<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">make a <strong>new tileset<\/strong> <strong>(.tsx file) &#8211; save into tsx folder<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Type: Based on a Tileset Image<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Image &#8211; tiles.png<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tile width: 128px (same as tile size width in map)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tile height: 128px (same as tile height width in map)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Keep layers locked when not in use<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Objects<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">create a new tileset &gt; use type: collection of images<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Terrains (39:00)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">special tiles that react to their surroundings<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">corners<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">edges<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">corners + edges<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXecsDZK7OGcI3Naiwsd4PlBnr0NhYt6tsKopkR6S_xi3dp9sQtCchto2T54AEXkaCOZiC19lBZCk9vv0Zuvscfsl5CdBEQasICxGJlVpSqL0cvucf5P94PKA-vl6Za-ad0Wfi4pdVBLTNrDAgLAw9Yg0_9F?key=qInBJpW04kC1Sm63MHgkfg\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Simplest Terrain Set<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">IMPORTANT: Make sure that EACH rule you are laying down is UNIQUE &#8211; or if not, that the tiles are INTENDED to be a variation on a theme &#8211; e.g. not totally different\u2026<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Make a <strong>new tileset<\/strong> <strong>(.tsx file) &#8211; save into tsx folder<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Type: Based on a Tileset Image<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Image &#8211; terrain_corner.png<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tile width: 128px (same as tile size width in map)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tile height: 128px (same as tile height width in map)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Save into <strong>tsx<\/strong> folder<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Click on the &#8216;<strong>Terrain Sets<\/strong>&#8216; icon<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Select &#8216;+&#8217; icon (lower right) and &#8216;New Corner Set&#8217;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Name it &#8216;Ground&#8217;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Create to &#8216;textures&#8217;: red for &#8216;Dirt&#8217; and green for &#8216;Grass&#8217;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Draw it like this:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A simple set up:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdVcT_KUSegOVbapXXi1VXgaCZqfd49wKCD15RgnJQElBwJA5dV2WDTmgb4Ktw_shGO4Vl8-8ATM-OjXKHzkwvVb0tPHxkNjQjXIQlEXe1vNATCP4nevjfCaz_pw_GTNuRwyCbrLqssCPhvh_s9Cb8sv2C3?key=qInBJpW04kC1Sm63MHgkfg\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">IMPORTANT: when starting out &#8211; use the tileset (NOT the Terrain Set) &#8211; and bucket fill the dirt &#8211; Tiled Editor needs a starting point\u2026<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use the &#8216;Patterns&#8217; tab (bottom right) to see which terrains have been used:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeU4HhFeOHzsfr5AkMYH4DzgJtcOgM4s8ZcfWm9Y3xhJG3bvWB6uClaln9FHIbCAxx0BR7JgjSpL2V7GKETZYSTDhIRicJT64A3_eiiUlX0WpbBzAsrTGBs_w6vjrOKhWr4dVx3m3-zZIvjnHt0idoGXE0c?key=qInBJpW04kC1Sm63MHgkfg\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">All of them!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Case study &#8211; A link to the past<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Detailed features are clustered together:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">See the clusters of bushes\/grass blades\/flowers&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are occasionally individual, but mostly in groups<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The cliff wall also has interlacing of tiles for change in direction. Red is one set (mainly for horizontal) and Green (mainly for vertical):<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdHbhgJTDG-YD6JTp6J8xY7aQGLnIGgMgE6tecL8KLcP3Wv93EpuBiUSz5a3WUXHr7rjSzkwTcsb5gshXfus_EzQiLNZP9lS0fbz_qU_szzxxRnDvh7J6cGnoiNwlnwyHlaVGDnXGGN0kkqvGqFY9PWQPsI?key=qInBJpW04kC1Sm63MHgkfg\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">What are the specs to be used?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tiles: (8&#215;8)x2 &gt; 16&#215;16<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The tile grid for LoZ is 16 tiles wide by 14 tiles high (including 3 tiles for the status display at the top of the screen). Each tile is 16\u00d716 pixels. Link operates on a half-tile grid, though (32\u00d728 tiles, 8\u00d78 pixels each).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">TILES &#8211; 8&#215;8<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">GRID &#8211; 32&#215;28 (+6 for UI) &#8211; 256px x 224px<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">DOUBLE TILES &#8211; 16&#215;16<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">GRID &#8211; 16&#215;14 (+3 for UI) &#8211; 256px x 224px<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">in the tileset &#8211; click on the various images that need custom properties<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Create a new property called \u201cname,\u201d and give the image a name.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Setting up Tiled for general awesomeness<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Animated tiles<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2018Layers\u2019<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2018Beginning\u2019 \u2018first part\u2019 \u2018second part\u2019<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exit &#8211;&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Entrance &#8211;&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hole &#8211; BLACK<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Transport &#8211;&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Items &#8211; RED &#8211; this would be what is INSIDE a pot, for example, NOT if there is a pot there\u2026<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sprite &#8211; PINK &#8211; Sprite ID and name<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Overworld<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dungeons<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Music<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WOrldmaps<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Monologue<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">the map is 5F<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Export<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">if I want a tileset change, &#8220;import tileset&#8221; to my current map just long enough to change it<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;then &#8220;export tileset&#8221; from that map.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This will make the tileset external again and, voila, the tileset is changed for all maps that reference it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Added several export options<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">These new options can be applied to all export formats, including when<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">using the Export action to save a map to TMX or JSON.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The options are implemented by making a copy of the map and processing<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">this copy to apply the selected operations before passing the map to the<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">writer.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Implemented export options:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">* Option to embed tilesets, which avoids needing to load external .tsx<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;or .json tileset files.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">* Option to detach templates, which allows using the templates feature<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;without needing to care about loading external template files. Of<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;course, when a lot of template instances exist it will make the map<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;file bigger.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">* Option to resolve object types and properties. This means copying down<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;the type when inherited from the tile, and copying down custom<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;properties set on either the object&#8217;s tile or the object&#8217;s type.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Like this:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXe3BJK5mMZ9p2LFFe_OgcGpSg0bULdGf_rCO7b9YLTpTFrikQw1htz46e6Z7WfhvMN2S1CrxIwUF67PtB0exg86s3DFyHOXOaqa8kd-v_OISWZv_UUlQCT_5uId_f-1AWE9kfGpmn_rCDMZANnoLV4uTRG1?key=qInBJpW04kC1Sm63MHgkfg\" alt=\"\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Needs: Options external editor Use tiled map editor A guide to level creation with Tiled [ + how to use it with pygame ] make 2 folders, a tmx and a tsx folder Without using tiled map editor reasons &#8211; small game &#8211; online editor internal editor Or, just have a built in edit mode [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"wp-custom-template-nlx-the-knowledge-page","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-297","post","type-post","status-publish","format-standard","hentry","category-the-knowledge"],"_links":{"self":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/297","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/comments?post=297"}],"version-history":[{"count":9,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/297\/revisions"}],"predecessor-version":[{"id":377,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/297\/revisions\/377"}],"wp:attachment":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/media?parent=297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/categories?post=297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/tags?post=297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}