1"use strict";(globalThis.webpackChunksite=globalThis.webpackChunksite||[]).push([[1577],{9894(s,e,l){l.r(e),l.d(e,{assets:()=>a,contentTitle:()=>o,default:()=>h,frontMatter:()=>i,metadata:()=>n,toc:()=>t});const n=JSON.parse('{"id":"plugins/ldtk-plugin","title":"LDtk Plugin \u2728New!\u2728","description":"LDtk (level design toolkit) is a free, open source, and super useful level design tool from the create of Dead Cells. It\'s goal is to be super user friendly and full featured. Currently only supports 2D tile maps.","source":"@site/docs/13-plugins/15-ldtk-plugin.mdx","sourceDirName":"13-plugins","slug":"/ldtk-plugin","permalink":"/docs/ldtk-plugin","draft":false,"unlisted":false,"editUrl":"https://github.com/excaliburjs/Excalibur/tree/main/site/docs/13-plugins/15-ldtk-plugin.mdx","tags":[],"version":"current","sidebarPosition":15,"frontMatter":{"title":"LDtk Plugin \u2728New!\u2728","slug":"/ldtk-plugin","section":"Plugins"},"sidebar":"learnSidebar","previous":{"title":"Aseprite plugin","permalink":"/docs/aseprite-plugin"},"next":{"title":"Sprite Fusion Plugin \u2728Updated!\u2728","permalink":"/docs/spritefusion-plugin"}}');var c=l(74848),r=l(28453);const i={title:"LDtk Plugin \u2728New!\u2728",slug:"/ldtk-plugin",section:"Plugins"},o=void 0,a={},t=[{value:"Installation",id:"installation",level:2},{value:"Plugin Philosophy",id:"plugin-philosophy",level:2},{value:"Map Features",id:"map-features",level:2},{value:"Background Color",id:"background-color",level:3},{value:"Solid Layers",id:"solid-layers",level:3},{value:"Camera Positioning",id:"camera-positioning",level:3},{value:"Entity Factories",id:"entity-factories",level:3},{value:"Bundlers",id:"bundlers",level:2},{value:"Currently Unsupported",id:"currently-unsupported",level:3}];function d(s){const e={a:"a",admonition:"admonition",code:"code",div:"div",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...(0,r.R)(),...s.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(e.p,{children:[(0,c.jsx)(e.a,{href:"https://ldtk.io/",children:"LDtk (level design toolkit)"})," is a free, open source, and super useful level design tool from the create of Dead Cells. It's goal is to be super user friendly and full featured. Currently only supports 2D tile maps."]}),"\n",(0,c.jsxs)(e.p,{children:["The current Excalibur plugin is designed to parse all data provided by the ",(0,c.jsx)(e.code,{children:".ldtk"})," format and make it available to users. Not all features may be supported directly in Excalibur but the majority are."]}),"\n",(0,c.jsx)(e.p,{children:"The plugin officially supports the latest version of LDtk that has been published and will warn if you are using an older version. This is because there have been many breaking changes to the LDtk map format over time that are difficult to reconcile."}),"\n",(0,c.jsx)(e.h2,{id:"installation",children:"Installation"}),"\n",(0,c.jsxs)(e.div,{className:"shiki-twoslash-fragment",children:[(0,c.jsxs)(e.pre,{className:"shiki github-light",style:{backgroundColor:"#ffffff",color:"#24292f"},children:[(0,c.jsx)(e.div,{className:"language-id",children:"sh"}),(0,c.jsx)(e.div,{className:"code-container",children:(0,c.jsx)(e.code,{children:(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"npm install @excaliburjs/plugin-ldtk"})})})})]}),"\n",(0,c.jsxs)(e.pre,{className:"shiki github-dark",style:{backgroundColor:"#0d1117",color:"#c9d1d9"},children:[(0,c.jsx)(e.div,{className:"language-id",children:"sh"}),(0,c.jsx)(e.div,{className:"code-container",children:(0,c.jsx)(e.code,{children:(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"npm install @excaliburjs/plugin-ldtk"})})})})]})]}),"\n",(0,c.jsx)(e.p,{children:"Create your resource, load it, then add it to your scene!"}),"\n",(0,c.jsxs)(e.div,{className:"shiki-twoslash-fragment",children:[(0,c.jsxs)(e.pre,{className:"shiki github-light",style:{backgroundColor:"#ffffff",color:"#24292f"},children:[(0,c.jsx)(e.div,{className:"language-id",children:"typescript"}),(0,c.jsx)(e.div,{className:"code-container",children:(0,c.jsxs)(e.code,{children:[(0,c.jsx)(e.div,{className:"line"}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"const"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#0550AE"},children:"game"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"="}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"new"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" ex."}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"Engine"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"({"}),(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"..."}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"});"})]}),(0,c.jsx)(e.div,{className:"line"}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"const"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#0550AE"}
1,children:"ldtkMap"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"="}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"new"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"LdtkResource"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#0A3069"},children:"'./path/to/my/cool-map.ldtk'"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:");"})]}),(0,c.jsx)(e.div,{className:"line"}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"const"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#0550AE"},children:"loader"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"="}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"new"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" ex."}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"Loader"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"([ldtkMap]);"})]}),(0,c.jsx)(e.div,{className:"line"}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"game."}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"start"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"(loader)."}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"then"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"(() "}),(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"=>"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" {"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" ldtkMap."}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"addToScene"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"(game.currentScene);"})]}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"});"})})]})})]}),"\n",(0,c.jsxs)(e.pre,{className:"shiki github-dark",style:{backgroundColor:"#0d1117",color:"#c9d1d9"},children:[(0,c.jsx)(e.div,{className:"language-id",children:"typescript"}),(0,c.jsx)(e.div,{className:"code-container",children:(0,c.jsxs)(e.code,{children:[(0,c.jsx)(e.div,{className:"line"}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"const"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#79C0FF"},children:"game"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"new"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" ex."}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"Engine"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"({"}),(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"..."}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"});"})]}),(0,c.jsx)(e.div,{className:"line"}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"const"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#79C0FF"},children:"ldtkMap"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"new"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"LdtkResource"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'./path/to/my/cool-map.ldtk'"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:");"})]}),(0,c.jsx)(e.div,{className:"line"}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"const"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#79C0FF"},children:"loader"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"new"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" ex."}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"Loader"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"([ldtkMap]);"})]}),(0,c.jsx)(e.div,{className:"line"}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"game."}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"start"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"(loader)."}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"then"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"(() "}),(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"=>"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" {"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" ldtkMap."}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"addToScene"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"(game.currentScene);"})]}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"});"})})]})})]})]}),"\n",(0,c.jsx)(e.h2,{id:"plugin-philosophy",children:"Plugin Philosophy"}),"\n",(0,c.jsxs)(e.ul,{children:["\n",(0,c.jsxs)(e.li,{children:["The plugin ",(0,c.jsx)(e.strong,{children:"STRICTLY"})," interprets the LDtk format by default, meaning if the plugin thinks the LDtk source files are corrupted/invalid it will throw while loading them. If this doesn't work for you you can set ",(0,c.jsx)(e.code,{children:"strict: false"})," in the ",(0,c.jsx)(e.code,{children:"LDtkResource"})," constructor, the plugin will do it's best with the data provided but there may be unexpected behavior."]}),"\n"]}),"\n",(0,c.jsxs)(e.div,{className:"shiki-twoslash-fragment",children:[(0,c.jsxs)(e.pre,{className:"shiki github-light",style:{backgroundColor:"#ffffff",color:"#24292f"},children:[(0,c.jsx)(e.div,{className:"language-id",children:"typescript"}),(0,c.jsx)(e.div,{className:"code-container",children:(0,c.jsxs)(e.code,{children:[(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"const"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#0550AE"},children:"tiledMap"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"="}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"new"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"LdtkResource"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#0A3069"},children:"'./path/to/my/cool-map.ldtk'"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:", {"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"}
1,children:" strict: "}),(0,c.jsx)(e.span,{style:{color:"#0550AE"},children:"false"})]}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"});"})})]})})]}),"\n",(0,c.jsxs)(e.pre,{className:"shiki github-dark",style:{backgroundColor:"#0d1117",color:"#c9d1d9"},children:[(0,c.jsx)(e.div,{className:"language-id",children:"typescript"}),(0,c.jsx)(e.div,{className:"code-container",children:(0,c.jsxs)(e.code,{children:[(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"const"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#79C0FF"},children:"tiledMap"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"new"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"LdtkResource"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'./path/to/my/cool-map.ldtk'"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:", {"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" strict: "}),(0,c.jsx)(e.span,{style:{color:"#79C0FF"},children:"false"})]}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"});"})})]})})]})]}),"\n",(0,c.jsxs)(e.ul,{children:["\n",(0,c.jsxs)(e.li,{children:["\n",(0,c.jsx)(e.p,{children:"The plugin roughly has 2 data structures for each LDtk primitive."}),"\n",(0,c.jsxs)(e.ul,{children:["\n",(0,c.jsxs)(e.li,{children:["\n",(0,c.jsxs)(e.p,{children:["First it dutifully recreates the types using the LDtk JSON as the source of truth. These types are prefixed with ",(0,c.jsx)(e.code,{children:"ldtk"})," so for example ",(0,c.jsx)(e.code,{children:"LdtkEntityInstance"})," or ",(0,c.jsx)(e.code,{children:"LdtkLayerInstance"}),' are the "raw" Ldtk representation matching casing and data as close as possible.']}),"\n"]}),"\n",(0,c.jsxs)(e.li,{children:["\n",(0,c.jsxs)(e.p,{children:["Second the built in ",(0,c.jsx)(e.code,{children:"Tiled"})," prefixed types are often unfriendly, so the plugin provides it's own friendly abstraction over them that works nicely with Excalibur. Whenever the plugin provides a friendly abstraction, it also provides the underlying Tiled prefix types just in case you need that data."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,c.jsxs)(e.li,{children:["\n",(0,c.jsx)(e.p,{children:"Everything is lowercase/case-insensitive! When the plugin is searching for strings either as props keys or values, they are treated as lowercase/case-insensitive."}),"\n"]}),"\n",(0,c.jsxs)(e.li,{children:["\n",(0,c.jsxs)(e.p,{children:["Certain Excalibur interpretations of Tiled features are guarded behind the constructor param ",(0,c.jsx)(e.code,{children:"useExcaliburWiring"}),". By default this is ",(0,c.jsx)(e.code,{children:"true"}),", but if you find this is unacceptable you can toggle it off."]}),"\n"]}),"\n"]}),"\n",(0,c.jsxs)(e.div,{className:"shiki-twoslash-fragment",children:[(0,c.jsxs)(e.pre,{className:"shiki github-light",style:{backgroundColor:"#ffffff",color:"#24292f"},children:[(0,c.jsx)(e.div,{className:"language-id",children:"typescript"}),(0,c.jsx)(e.div,{className:"code-container",children:(0,c.jsxs)(e.code,{children:[(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"const"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#0550AE"},children:"ldtkMap"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"="}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"new"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"LdtkResource"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#0A3069"},children:"'./path/to/my/cool-map.ldtk'"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:", {"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" useExcaliburWiring: "}),(0,c.jsx)(e.span,{style:{color:"#0550AE"},children:"false"})]}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"});"})})]})})]}),"\n",(0,c.jsxs)(e.pre,{className:"shiki github-dark",style:{backgroundColor:"#0d1117",color:"#c9d1d9"},children:[(0,c.jsx)(e.div,{className:"language-id",children:"typescript"}),(0,c.jsx)(e.div,{className:"code-container",children:(0,c.jsxs)(e.code,{children:[(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"const"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#79C0FF"}
1,children:"ldtkMap"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"new"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"LdtkResource"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'./path/to/my/cool-map.ldtk'"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:", {"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" useExcaliburWiring: "}),(0,c.jsx)(e.span,{style:{color:"#79C0FF"},children:"false"})]}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"});"})})]})})]})]}),"\n",(0,c.jsx)(e.h2,{id:"map-features",children:"Map Features"}),"\n",(0,c.jsxs)(e.p,{children:["To add a loaded ",(0,c.jsx)(e.code,{children:"LdtkResource"})," map to a scene"]}),"\n",(0,c.jsxs)(e.div,{className:"shiki-twoslash-fragment",children:[(0,c.jsxs)(e.pre,{className:"shiki github-light",style:{backgroundColor:"#ffffff",color:"#24292f"},children:[(0,c.jsx)(e.div,{className:"language-id",children:"typescript"}),(0,c.jsx)(e.div,{className:"code-container",children:(0,c.jsxs)(e.code,{children:[(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"const"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#0550AE"},children:"ldtkMap"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"="}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"new"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"LdtkResource"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"..."}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:");"})]}),(0,c.jsx)(e.div,{className:"line"}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#6E7781"},children:"// Load tiledMap here"})}),(0,c.jsx)(e.div,{className:"line"}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"ldtkMap."}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"addToScene"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"(game.currentScene);"})]}),(0,c.jsx)(e.div,{className:"line"}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#6E7781"},children:"// Optionally specify a position"})}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"ldtkMap."}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"addToScene"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"(game.currentScene, {pos: ex."}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"vec"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#0550AE"},children:"100"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:", "}),(0,c.jsx)(e.span,{style:{color:"#0550AE"},children:"100"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:")});"})]}),(0,c.jsx)(e.div,{className:"line"}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#6E7781"},children:"// Optionally list specific ldtk levels to add"})}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"ldtkMap."}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"addToScene"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"(game.currentScene, {levelFilter: ["}),(0,c.jsx)(e.span,{style:{color:"#0A3069"},children:"'level1'"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"]});"})]}),(0,c.jsx)(e.div,{className:"line"}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#6E7781"},children:"// Optionally disable level offsets, levels are by default spatially positioned in ldtk this can be useful with the level filtering"})}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"}
1,children:"ldtkMap."}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"addToScene"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"(game.currentScene, {useLevelOffsets: "}),(0,c.jsx)(e.span,{style:{color:"#0550AE"},children:"false"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"});"})]}),(0,c.jsx)(e.div,{className:"line"})]})})]}),"\n",(0,c.jsxs)(e.pre,{className:"shiki github-dark",style:{backgroundColor:"#0d1117",color:"#c9d1d9"},children:[(0,c.jsx)(e.div,{className:"language-id",children:"typescript"}),(0,c.jsx)(e.div,{className:"code-container",children:(0,c.jsxs)(e.code,{children:[(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"const"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#79C0FF"},children:"ldtkMap"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"new"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"LdtkResource"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"..."}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:");"})]}),(0,c.jsx)(e.div,{className:"line"}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#8B949E"},children:"// Load tiledMap here"})}),(0,c.jsx)(e.div,{className:"line"}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"ldtkMap."}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"addToScene"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"(game.currentScene);"})]}),(0,c.jsx)(e.div,{className:"line"}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#8B949E"},children:"// Optionally specify a position"})}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"ldtkMap."}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"addToScene"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"(game.currentScene, {pos: ex."}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"vec"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#79C0FF"},children:"100"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:", "}),(0,c.jsx)(e.span,{style:{color:"#79C0FF"},children:"100"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:")});"})]}),(0,c.jsx)(e.div,{className:"line"}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#8B949E"},children:"// Optionally list specific ldtk levels to add"})}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"ldtkMap."}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"addToScene"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"(game.currentScene, {levelFilter: ["}),(0,c.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'level1'"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"]});"})]}),(0,c.jsx)(e.div,{className:"line"}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#8B949E"},children:"// Optionally disable level offsets, levels are by default spatially positioned in ldtk this can be useful with the level filtering"})}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"ldtkMap."}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"addToScene"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"(game.currentScene, {useLevelOffsets: "}),(0,c.jsx)(e.span,{style:{color:"#79C0FF"},children:"false"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"});"})]}),(0,c.jsx)(e.div,{className:"line"})]})})]})]}),"\n",(0,c.jsx)(e.h3,{id:"background-color",children:"Backgroun
1d Color"}),"\n",(0,c.jsxs)(e.p,{children:["The plugin supports pulling the ",(0,c.jsx)(e.code,{children:"Background Color"})," from the LDtk level. Configure the ",(0,c.jsx)(e.code,{children:"useMapBackgroundColor"})," in your constructor. Note it will use the background color from the first level in your LDtk world."]}),"\n",(0,c.jsxs)(e.div,{className:"shiki-twoslash-fragment",children:[(0,c.jsxs)(e.pre,{className:"shiki github-light",style:{backgroundColor:"#ffffff",color:"#24292f"},children:[(0,c.jsx)(e.div,{className:"language-id",children:"typescript"}),(0,c.jsx)(e.div,{className:"code-container",children:(0,c.jsxs)(e.code,{children:[(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"const"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#0550AE"},children:"tiledMap"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"="}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"new"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"TiledResource"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#0A3069"},children:"'./isometric.tmx'"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:", {"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" useMapBackgroundColor: "}),(0,c.jsx)(e.span,{style:{color:"#0550AE"},children:"true"})]}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"});"})})]})})]}),"\n",(0,c.jsxs)(e.pre,{className:"shiki github-dark",style:{backgroundColor:"#0d1117",color:"#c9d1d9"},children:[(0,c.jsx)(e.div,{className:"language-id",children:"typescript"}),(0,c.jsx)(e.div,{className:"code-container",children:(0,c.jsxs)(e.code,{children:[(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"const"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#79C0FF"},children:"tiledMap"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"new"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"TiledResource"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'./isometric.tmx'"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:", {"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" useMapBackgroundColor: "}),(0,c.jsx)(e.span,{style:{color:"#79C0FF"},children:"true"})]}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"});"})})]})})]})]}),"\n",(0,c.jsx)(e.p,{children:(0,c.jsx)(e.img,{alt:"changing ldtk level background color",src:l(15201).A+"",width:"1588",height:"896"})}),"\n",(0,c.jsx)(e.h3,{id:"solid-layers",children:"Solid Layers"}),"\n",(0,c.jsx)(e.p,{children:"In LDtk we use IntGrid layers to indicate whether a tile is solid or not."}),"\n",(0,c.jsx)(e.admonition,{type:"note",children:(0,c.jsx)(e.p,{children:"You can set IntGrid layer grid size to whatever you want to achieve half tile collisions."})}),"\n",(0,c.jsx)(e.p,{children:'By default the int value = 1 is treated as solid, otherwise you can give a number a name of "solid" and that will be a solid layer.'}),"\n",(0,c.jsx)(e.p,{children:(0,c.jsx)(e.img,{alt:"solid layer configuration",src:l(92777).A+"",width:"991",height:"970"})}),"\n",(0,c.jsx)(e.p,{children:"Then paint your solid layer tiles"}),"\n",(0,c.jsx)(e.p,{children:(0,c.jsx)(e.img,{alt:"paint solid layer",src:l(64918).A+"",width:"1536",height:"977"})}),"\n",(0,c.jsx)(e.h3,{id:"camera-positioning",children:"Camera Positioning"}),"\n",(0,c.jsx)(e.p,{children:"You can use an LDtk entity to position the excalibur camera. Specify 2 special custom properties to influence Excalibur's camera."}),"\n",(0,c.jsxs)(e.ul,{children:["\n",(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:"camera = true"})," (Warning excalibur will use the first object it finds with this, so be sure to only tag one as a camera)"]}),"\n",(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:"zoom = 5.0"})," Optionally specify a camera zoom level, only takes effect if ",(0,c.jsx)(e.code,{children:"camera = true"})," is set on the entity"]}),"\n"]}),"\n",(0,c.jsx)(e.p,{children:(0,c.jsx)(e.img,{alt:"Setting camera properties",src:l(58883).A+"",width:"1002",height:"923"})}),"\n",(0,c.jsx)(e.p,{children:"Position your camera like so"}),"\n",(0,c.jsx)(e.p,{children:(0,c.jsx)(e.img,{alt:"Camera position",src:l(25143).A+"",width:"1187",height:"644"})}),"\n",(0,c.jsx)(e.h3,{id:"entity-factories",children:"Entity Factories"}),"\n",(0,c.jsx)(e.p,{children:"Sometimes it is useful to supply a custom type to have the plugin construct when it runs across a particular entity, this might be the player, a collectable, or an enemy."}),"\n",(0,c.jsx)(e.p,{children:'Given an entity identifier, in this case "PlayerStart"'}),"\n",(0,c.jsx)(e.p,{children:(0,c.jsx)(e.img,{alt:"player start",src:l(65498).A+"",width:"661",height:"444"})}),"\n",(0,c.jsxs)(e.p,{children:["You can specify a factory to run and create your preferred type, once you've returned the ",(0,c.jsx)(e.a,{href:"/api/class/Entity",title:"View 'Entity'",className:"tsdoc-link",children:"Entity"})," out of the factory it will automatically be added to the ",(0,c.jsx)(e.a,{href:"/api/class/Scene",title:"View 'Scene'",className:"tsdoc-link",children:"Scene"}),". This is also a useful time to run any other custom code you want per ",(0,c.jsx)(e.a,{href:"/api/class/Entity",title:"View 'Entity'",className:"tsdoc-link",children:"Entity"}),"."]}),"\n",(0,c.jsxs)(e.div,{className:"shiki-twoslash-fragment",children:[(0,c.jsxs)(e.pre,{className:"shiki github-light",style:{backgroundColor:"#ffffff",color:"#24292f"},children:[(0,c.jsx)(e.div,{className:"language-id",children:"typescript"}),(0,c.jsx)(e.div,{className:"code-container",children:(0,c.jsxs)(e.code,{children:[(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"game."}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"start"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"(loader)."}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"then"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"(() "}),(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"=>"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" {"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" console."}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"log"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#0A3069"},children:"'Game start!'"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:");"})]}),(0,c.jsx)(e.div,{className:"line"}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" ldtkResource."}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"registerEntityIdentifierFactory"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#0A3069"},children:"'PlayerStart'"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:", ("}
1),(0,c.jsx)(e.span,{style:{color:"#953800"},children:"props"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:") "}),(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"=>"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" {"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"const"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#0550AE"},children:"player"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"="}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"new"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"Player"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"({"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" name: "}),(0,c.jsx)(e.span,{style:{color:"#0A3069"},children:"'player'"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:","})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" anchor: ex."}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"vec"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"(props.entity.__pivot["}),(0,c.jsx)(e.span,{style:{color:"#0550AE"},children:"0"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"],props.entity.__pivot["}),(0,c.jsx)(e.span,{style:{color:"#0550AE"},children:"1"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"]),"})]}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" width: props.entity.width,"})}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" height: props.entity.height,"})}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" pos: props.worldPos,"})}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" z: props.layer.order"})}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" });"})}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#6E7781"},children:"// Also run custom code"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" game.currentScene.camera.strategy."}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"lockToActor"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"(player);"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"return"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" player;"})]}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" });"})}),(0,c.jsx)(e.div,{className:"line"}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"});"})}),(0,c.jsx)(e.div,{className:"line"})]})})]}),"\n",(0,c.jsxs)(e.pre,{className:"shiki github-dark",style:{backgroundColor:"#0d1117",color:"#c9d1d9"},children:[(0,c.jsx)(e.div,{className:"language-id",children:"typescript"}),(0,c.jsx)(e.div,{className:"code-container",children:(0,c.jsxs)(e.code,{children:[(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"game."}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"start"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"(loader)."}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"then"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"(() "}),(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"=>"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" {"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" console."}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"log"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'Game start!'"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:");"})]}),(0,c.jsx)(e.div,{className:"line"}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" ldtkResource."}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"registerEntityIdentifierFactory"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'PlayerStart'"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:", ("}),(0,c.jsx)(e.span,{style:{color:"#FFA657"},children:"props"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:") "}),(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"=>"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" {"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"const"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#79C0FF"},children:"player"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"new"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"Player"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"({"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" name: "}),(0,c.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'player'"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:","})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" anchor: ex."}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"vec"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"(props.entity.__pivot["}),(0,c.jsx)(e.span,{style:{color:"#79C0FF"},children:"0"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"],props.entity.__pivot["}),(0,c.jsx)(e.span,{style:{color:"#79C0FF"},children:"1"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"]),"})]}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" width: props.entity.width,"})}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" height: props.entity.height,"})}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" pos: props.worldPos,"})}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" z: props.layer.order"})}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" });"})}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#8B949E"},children:"// Also run custom code"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" game.currentScene.camera.strategy."}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"lockToActor"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"(player);"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"return"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" player;"})]}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" });"})}),(0,c.jsx)(e.div,{className:"line"}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"});"})}),(0,c.jsx)(e.div,{className:"line"})]})})]})]}),"\n",(0,c.jsx)(e.p,{children:(0,c.jsx)(e.img,{alt:"ldtk running",src:l(43206).A+"",width:"794",height:"784"})}),"\n",(0,c.jsx)(e.h2,{id:"bundlers",children:"Bundlers"}),"\n",(0,c.jsx)(e.p,{children:"Excalibur provides a lot of samples to get you started with various bundlers"}),"\n",(0,c.jsxs)(e.ul,{children:["\n",(0,c.jsxs)(e.li,{children:["Vite ",(0,c.jsx)(e.a,{href:"https://github.com/excaliburjs/sample-tiled-vite",children:"https://github.com/excaliburjs/sample-tiled-vite"})]}),"\n",(0,c.jsxs)(e.li,{children:["Parcel ",(0,c.jsx)(e.a,{href:"https://github.com/excaliburjs/sample-tiled-parcel",children:"https://github.com/excaliburjs/sample-tiled-parcel"})]}),"\n",(0,c.jsxs)(e.li,{children:["Webpack ",(0,c.jsx)(e.a,{href:"https://github.com/excaliburjs/sample-tiled-webpack",children:"https://github.com/excaliburjs/sample-tiled-webpack"})]}),"\n"]}),"\n",(0,c.jsxs)(e.p,{children:["LDtk uses a lot of static assets and refers to them inside different LDtk source files, and often bundlers like to rearrange static assets in a final build. To
1work around this paths mapping issue, the plugin provides a ",(0,c.jsx)(e.code,{children:"pathMap"})," to test file paths and redirect to whatever location your assets are stored."]}),"\n",(0,c.jsxs)(e.div,{className:"shiki-twoslash-fragment",children:[(0,c.jsxs)(e.pre,{className:"shiki github-light",style:{backgroundColor:"#ffffff",color:"#24292f"},children:[(0,c.jsx)(e.div,{className:"language-id",children:"typescript"}),(0,c.jsx)(e.div,{className:"code-container",children:(0,c.jsxs)(e.code,{children:[(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"const"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#0550AE"},children:"ldtkMap"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"="}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"new"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"LdtkResource"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#0A3069"},children:"'./example-city.ldtk'"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:", {"})]}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" pathMap: ["})}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#6E7781"},children:'// If the "path" is included in the source path, the output will be used'})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" { path: "}),(0,c.jsx)(e.span,{style:{color:"#0A3069"},children:"'someimage.png'"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:", output: "}),(0,c.jsx)(e.span,{style:{color:"#0A3069"},children:"'/static/assets/someimage.png'"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" },"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#6E7781"},children:"// Regex matching with special [match] in output string that is replaced with the first match from the regex"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" { path:"}),(0,c.jsx)(e.span,{style:{color:"#0A3069"},children:" /("}),(0,c.jsx)(e.span,{style:{color:"#0550AE"},children:"."}),(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"*"}),(0,c.jsx)(e.span,{style:{color:"#116329"},children:"\\."}),(0,c.jsx)(e.span,{style:{color:"#0550AE"},children:"."}),(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"*$"}),(0,c.jsx)(e.span,{style:{color:"#0A3069"},children:")/"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:", output: "}),(0,c.jsx)(e.span,{style:{color:"#0A3069"},children:"'/static/assets/[match]'"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"}"})]}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" ]"})}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"})"})})]})})]}),"\n",(0,c.jsxs)(e.pre,{className:"shiki github-dark",style:{backgroundColor:"#0d1117",color:"#c9d1d9"},children:[(0,c.jsx)(e.div,{className:"language-id",children:"typescript"}),(0,c.jsx)(e.div,{className:"code-container",children:(0,c.jsxs)(e.code,{children:[(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"const"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#79C0FF"},children:"ldtkMap"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"new"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"LdtkResource"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'./example-city.ldtk'"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:", {"})]}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" pathMap: ["})}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#8B949E"},children:'// If the "path" is included in the source path, the output will be used'})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" { path: "}),(0,c.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'someimage.png'"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:", output: "}),(0,c.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'/static/assets/someimage.png'"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" },"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#8B949E"},children:"// Regex matching with special [match] in output string that is replaced with the first match from the regex"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" { path:"}),(0,c.jsx)(e.span,{style:{color:"#A5D6FF"},children:" /("}),(0,c.jsx)(e.span,{style:{color:"#79C0FF"},children:"."}),(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"*"}),(0,c.jsx)(e.span,{style:{color:"#7EE787"},children:"\\."}),(0,c.jsx)(e.span,{style:{color:"#79C0FF"},children:"."}),(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"*$"}),(0,c.jsx)(e.span,{style:{color:"#A5D6FF"},children:")/"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:", output: "}),(0,c.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'/static/assets/[match]'"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"}"})]}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" ]"})}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"})"})})]})})]})]}),"\n",(0,c.jsx)(e.h3,{id:"currently-unsupported",children:"Currently Unsupported"}),"\n",(0,c.jsx)(e.p,{children:"PRs welcome!"}),"\n",(0,c.jsxs)(e.ul,{children:["\n",(0,c.jsx)(e.li,{children:"Level Backgroun
1d Image"}),"\n",(0,c.jsx)(e.li,{children:"Auto Tile Layers - these must be baked into normal tile layers for the plugin to support them"}),"\n"]})]})}function h(s={}){const{wrapper:e}={...(0,r.R)(),...s.components};return e?(0,c.jsx)(e,{...s,children:(0,c.jsx)(d,{...s})}):d(s)}},15201(s,e,l){const n=l.p+"assets/images/background-0bf197f67e7be5c678232716375702e7.gif";l.d(e,["A",0,n])},25143(s,e,l){const n=l.p+"assets/images/camera-position-6cf2c2f967e09e828bdb2572628c24d9.png";l.d(e,["A",0,n])},58883(s,e,l){const n=l.p+"assets/images/camera-c4ce0b5e5b5f632ba1a690c01eb17562.png";l.d(e,["A",0,n])},43206(s,e,l){const n=l.p+"assets/images/ldtk-d0b2c2754ed140715f2393e4c269e4e7.gif";l.d(e,["A",0,n])},64918(s,e,l){const n=l.p+"assets/images/paint-solid-2306e2503d2a800ed1625a656d816241.png";l.d(e,["A",0,n])},65498(s,e,l){const n=l.p+"assets/images/player-start-c6a9b6670e7cad2b0b692e4add2f6c9c.png";l.d(e,["A",0,n])},92777(s,e,l){const n=l.p+"assets/images/solid-layer-6413fca5fd5118c5a4a513682baf342b.png";l.d(e,["A",0,n])},28453(s,e,l){l.d(e,{R:()=>i,x:()=>o});var n=l(96540);const c={},r=n.createContext(c);function i(s){const e=n.useContext(r);return n.useMemo(function(){return"function"==typeof s?s(e):{...e,...s}},[e,s])}function o(s){let e;return e=s.disableParentContext?"function"==typeof s.components?s.components(c):s.components||c:i(s.components),n.createElement(r.Provider,{value:e},s.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.