{"id":402,"date":"2025-07-08T16:42:46","date_gmt":"2025-07-08T06:42:46","guid":{"rendered":"https:\/\/nonlinearexperience.com\/?p=402"},"modified":"2025-07-08T16:42:47","modified_gmt":"2025-07-08T06:42:47","slug":"tiled-images","status":"publish","type":"post","link":"https:\/\/nonlinearexperience.com\/index.php\/2025\/07\/08\/tiled-images\/","title":{"rendered":"Tiled images"},"content":{"rendered":"<h1 class=\"wp-block-post-title\">Tiled images<\/h1>\n\n\n<p class=\"wp-block-paragraph\">See also:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">System:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For tiled images, it is usual to have something like:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>image <strong>source<\/strong><\/li>\n\n\n\n<li>section of <strong>source <\/strong>image to view (mask) <strong>source<\/strong>x, <strong>source<\/strong>y, <strong>source<\/strong>width, <strong>source<\/strong>height<\/li>\n\n\n\n<li><strong>destination <\/strong>of masked source &#8211; <strong>destination<\/strong>x, <strong>destination<\/strong>y, <strong>destination<\/strong>width, <strong>destination<\/strong>height<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Use TILED image editor (https:\/\/www.mapeditor.org\/) to edit&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Also aseprite<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A good outline of using tiled: <a href=\"https:\/\/www.youtube.com\/watch?v=wJMDh9QGRgs\">Creating a Mario style level in Python \/ Pygame with a visual level editor [Tiled]<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A good JS focused one:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.youtube.com\/watch?v=yP5DKzriqXA&amp;t=612s\">Pok\u00e9mon JavaScript Game Tutorial with HTML Canvas<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There is some more here: <a href=\"https:\/\/www.youtube.com\/watch?v=Lcdc2v-9PjA&amp;t=3338s\">Multi-room Platformer Game Tutorial with JavaScript and HTML Canvas<\/a>&#8211; 56:00 ish<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We DON&#8217;T want to set this up manually &#8211; use &#8217;tiled&#8217; &#8211; See also: <a href=\"https:\/\/docs.google.com\/document\/d\/1AG3jOFts8Txf6aYTNznSe3lBOa0GsQ8yWp8YigJkfGc\/edit#heading=h.q2cwztccjud0\">TILED IMAGES<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tiled basics<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">open tiled<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">open image<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">AUTOMAPPING in TILED<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You WANT to do this\u2026<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/doc.mapeditor.org\/en\/stable\/manual\/automapping\/#definition-of-inputs\">https:\/\/doc.mapeditor.org\/en\/stable\/manual\/automapping\/#definition-of-inputs<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.youtube.com\/watch?v=CU-_dBVdu2s\">Tiled 1.9 &#8212; Game Level Editor Now 10-30x Faster Automapping<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Resources<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>See also: System: For tiled images, it is usual to have something like: Use TILED image editor (https:\/\/www.mapeditor.org\/) to edit&nbsp; Also aseprite A good outline of using tiled: Creating a Mario style level in Python \/ Pygame with a visual level editor [Tiled] A good JS focused one: Pok\u00e9mon JavaScript Game Tutorial with HTML Canvas [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"wp-custom-template-nlx-the-knowledge-page","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-402","post","type-post","status-publish","format-standard","hentry","category-the-knowledge"],"_links":{"self":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/402","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=402"}],"version-history":[{"count":1,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/402\/revisions"}],"predecessor-version":[{"id":403,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/402\/revisions\/403"}],"wp:attachment":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/media?parent=402"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/categories?post=402"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/tags?post=402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}