1"use strict";(globalThis.webpackChunksite=globalThis.webpackChunksite||[]).push([[3679],{54541(s,l,e){e.r(l),e.d(l,{assets:()=>a,contentTitle:()=>i,default:()=>h,frontMatter:()=>r,metadata:()=>n,toc:()=>d});const n=JSON.parse('{"id":"tutorials/How-to\'s/ECS Primer/custom components","title":"Custom Components","description":"Custom Components","source":"@site/docs/00-tutorials/How-to\'s/00-ECS Primer/02-custom components.mdx","sourceDirName":"00-tutorials/How-to\'s/00-ECS Primer","slug":"/custom-components","permalink":"/docs/custom-components","draft":false,"unlisted":false,"editUrl":"https://github.com/excaliburjs/Excalibur/tree/main/site/docs/00-tutorials/How-to\'s/00-ECS Primer/02-custom components.mdx","tags":[],"version":"current","sidebarPosition":2,"frontMatter":{"title":"Custom Components","slug":"/custom-components","section":"Tutorials"},"sidebar":"learnSidebar","previous":{"title":"What is an ECS","permalink":"/docs/what-is-ecs"},"next":{"title":"Wiring Custom Components","permalink":"/docs/wiring-up-your-custom-components"}}');var o=e(74848),c=e(28453);const r={title:"Custom Components",slug:"/custom-components",section:"Tutorials"},i=void 0,a={},d=[{value:"Custom Components",id:"custom-components",level:2},{value:"Example: Keyboard Control",id:"example-keyboard-control",level:3}];function t(s){const l={a:"a",code:"code",div:"div",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",ul:"ul",...(0,c.R)(),...s.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(l.h2,{id:"custom-components",children:"Custom Components"}),"\n",(0,o.jsx)(l.p,{children:"Components are the building blocks of ECS. They store an entity\u2019s state in a modular way. By creating custom components, you can:"}),"\n",(0,o.jsxs)(l.ul,{children:["\n",(0,o.jsx)(l.li,{children:"Encapsulate reusable data"}),"\n",(0,o.jsx)(l.li,{children:"Expose helper methods to manipulate that data"}),"\n",(0,o.jsx)(l.li,{children:"Keep logic separate from systems (or complement systems later)"}),"\n"]}),"\n",(0,o.jsx)(l.p,{children:"A component should describe \u201cwhat an entity has\u201d, not \u201cwhat it does.\u201d Systems are where behavior happens \u2014 but components can have convenience methods that make life easier."}),"\n",(0,o.jsx)(l.p,{children:"There are two ways you can build out a component:"}),"\n",(0,o.jsxs)(l.ol,{children:["\n",(0,o.jsx)(l.li,{children:"The traditional way"}),"\n",(0,o.jsxs)(l.li,{children:[(0,o.jsx)(l.a,{href:"./systemless-components",children:"Systemless Components"})," (advanced)"]}),"\n"]}),"\n",(0,o.jsx)(l.p,{children:"Let's focus on traditional components first"}),"\n",(0,o.jsx)(l.h3,{id:"example-keyboard-control",children:"Example: Keyboard Control"}),"\n",(0,o.jsx)("img",{src:"data:image/png;base64,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",alt:"Pressing Keyboard",style:{width:"500px"}}),"\n",(0,o.jsxs)(l.div,{className:"shiki-twoslash-fragment",children:[(0,o.jsxs)(l.pre,{className:"shiki github-light",style:{backgroundColor:"#ffffff",color:"#24292f"},children:[(0,o.jsx)(l.div,{className:"language-id",children:"ts"}),(0,o.jsx)(l.div,{className:"code-container",children:(0,o.jsxs)(l.code,{children:[(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"import"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" { Component, Engine, Keyboard } "}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"from"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#0A3069"},children:"'excalibur'"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:";"})]}),(0,o.jsx)(l.div,{className:"line"}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"type"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#953800"},children:"Directions"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"="}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#0A3069"},children:"'Left'"}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"|"}),(0,o.jsx)(l.span,{style:{color:"#0A3069"},children:"'Right'"}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"|"}),(0,o.jsx)(l.span,{style:{color:"#0A3069"},children:"'Up'"}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"|"}),(0,o.jsx)(l.span,{style:{color:"#0A3069"},children:"'Down'"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:";"})]}),(0,o.jsx)(l.div,{className:"line"}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"export"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"class"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}
1),(0,o.jsx)(l.span,{style:{color:"#953800"},children:"PlayerMovementComponent"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"extends"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#0550AE"},children:"Component"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" {"})]}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#953800"},children:"_enabled"}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:":"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#0550AE"},children:"boolean"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"="}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#0550AE"},children:"true"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:";"})]}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#953800"},children:"speed"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"="}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#0550AE"},children:"150"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:"; "})]}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#953800"},children:"heldKeys"}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:":"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#953800"},children:"Directions"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:"[] "}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"="}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" [];"})]}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#953800"},children:"keyboard"}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:":"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#953800"},children:"Keyboard"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:";"})]}),(0,o.jsx)(l.div,{className:"line"}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"constructor"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:"("}),(0,o.jsx)(l.span,{style:{color:"#953800"},children:"engine"}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:":"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#953800"},children:"Engine"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:","}),(0,o.jsx)(l.span,{style:{color:"#953800"},children:"speed"}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"?:"}),(0,o.jsx)(l.span,{style:{color:"#0550AE"},children:"number"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:"){"})]}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#0550AE"},children:"super"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:"();"})]}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"if"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:"(speed) "}),(0,o.jsx)(l.span,{style:{color:"#0550AE"},children:"this"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:".speed "}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"="}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" speed;"})]}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#0550AE"},children:"this"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:".keyboard "}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"="}),(0,o.jsx)(l.span,{style:{color:"#24292F"}
1,children:" engine.input.keyboard;"})]}),(0,o.jsx)(l.div,{className:"line",children:(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" }"})}),(0,o.jsx)(l.div,{className:"line"}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"set"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#8250DF"},children:"enable"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:"("}),(0,o.jsx)(l.span,{style:{color:"#953800"},children:"enable"}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:":"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#0550AE"},children:"boolean"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:"){"})]}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#0550AE"},children:"this"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:"._enabled "}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"="}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" enable;"})]}),(0,o.jsx)(l.div,{className:"line",children:(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" }"})}),(0,o.jsx)(l.div,{className:"line"}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"get"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#8250DF"},children:"enable"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:"(){"})]}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"return"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#0550AE"},children:"this"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:"._enabled;"})]}),(0,o.jsx)(l.div,{className:"line",children:(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" }"})}),(0,o.jsx)(l.div,{className:"line"})]})})]}),"\n",(0,o.jsxs)(l.pre,{className:"shiki github-dark",style:{backgroundColor:"#0d1117",color:"#c9d1d9"},children:[(0,o.jsx)(l.div,{className:"language-id",children:"ts"}),(0,o.jsx)(l.div,{className:"code-container",children:(0,o.jsxs)(l.code,{children:[(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Component, Engine, Keyboard } "}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#A5D6FF"},children:"'excalibur'"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:";"})]}),(0,o.jsx)(l.div,{className:"line"}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"type"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#FFA657"},children:"Directions"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#A5D6FF"},children:"'Left'"}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"|"}),(0,o.jsx)(l.span,{style:{color:"#A5D6FF"},children:"'Right'"}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"|"}),(0,o.jsx)(l.span,{style:{color:"#A5D6FF"},children:"'Up'"}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"|"}),(0,o.jsx)(l.span,{style:{color:"#A5D6FF"},children:"'Down'"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:";"})]}),(0,o.jsx)(l.div,{className:"line"}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"class"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#FFA657"},children:"PlayerMovementComponent"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"extends"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#79C0FF"},children:"Component"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#FFA657"},children:"_enabled"}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#79C0FF"},children:"boolean"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#79C0FF"},children:"true"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:";"})]}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#FFA657"},children:"speed"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#79C0FF"},children:"150"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:"; "})]}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#FFA657"},children:"heldKeys"}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#FFA657"},children:"Directions"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:"[] "}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" [];"})]}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#FFA657"},children:"keyboard"}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#FFA657"},children:"Keyboard"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:";"})]}),(0,o.jsx)(l.div,{className:"line"}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"constructor"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,o.jsx)(l.span,{style:{color:"#FFA657"},children:"engine"}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#FFA657"},children:"Engine"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:","}),(0,o.jsx)(l.span,{style:{color:"#FFA657"},children:"speed"}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"?:"}),(0,o.jsx)(l.span,{style:{color:"#79C0FF"},children:"number"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:"){"})]}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#79C0FF"},children:"super"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"}
1,children:"();"})]}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"if"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(speed) "}),(0,o.jsx)(l.span,{style:{color:"#79C0FF"},children:"this"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:".speed "}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" speed;"})]}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#79C0FF"},children:"this"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:".keyboard "}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" engine.input.keyboard;"})]}),(0,o.jsx)(l.div,{className:"line",children:(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"})}),(0,o.jsx)(l.div,{className:"line"}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"set"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#D2A8FF"},children:"enable"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,o.jsx)(l.span,{style:{color:"#FFA657"},children:"enable"}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#79C0FF"},children:"boolean"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:"){"})]}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#79C0FF"},children:"this"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:"._enabled "}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" enable;"})]}),(0,o.jsx)(l.div,{className:"line",children:(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"})}),(0,o.jsx)(l.div,{className:"line"}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"get"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#D2A8FF"},children:"enable"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(){"})]}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#79C0FF"},children:"this"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:"._enabled;"})]}),(0,o.jsx)(l.div,{className:"line",children:(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"})}),(0,o.jsx)(l.div,{className:"line"})]})})]})]}),"\n",(0,o.jsx)(l.p,{children:"To add this component to your Actor that you want controlled by keypress, simply:"}),"\n",(0,o.jsxs)(l.div,{className:"shiki-twoslash-fragment",children:[(0,o.jsxs)(l.pre,{className:"shiki github-light",style:{backgroundColor:"#ffffff",color:"#24292f"},children:[(0,o.jsx)(l.div,{className:"language-id",children:"ts"}),(0,o.jsx)(l.div,{className:"code-container",children:(0,o.jsxs)(l.code,{children:[(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"import"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" { Engine, Actor, Color } "}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"from"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#0A3069"},children:"'excalibur'"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:";"})]}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"import"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" { PlayerMovementComponent } "}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"from"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#0A3069"},children:"'./PlayerMovementComponent'"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:";"})]}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"import"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" { MovementSystem } "}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"from"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#0A3069"},children:"'./MovementSystem'"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:";"})]}),(0,o.jsx)(l.div,{className:"line"}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"const"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#0550AE"},children:"engine"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"="}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"new"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#8250DF"},children:"Engine"}),(0,o.jsx)(l.span,{style:{color:"#24292F"}
1,children:"();"})]}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"const"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#0550AE"},children:"player"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"="}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"new"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#8250DF"},children:"Actor"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:"({ x: "}),(0,o.jsx)(l.span,{style:{color:"#0550AE"},children:"100"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:", y: "}),(0,o.jsx)(l.span,{style:{color:"#0550AE"},children:"100"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:", width: "}),(0,o.jsx)(l.span,{style:{color:"#0550AE"},children:"32"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:", height: "}),(0,o.jsx)(l.span,{style:{color:"#0550AE"},children:"32"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:", color: Color.Red });"})]}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#24292F"},children:"player."}),(0,o.jsx)(l.span,{style:{color:"#8250DF"},children:"addComponent"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:"("}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"new"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#8250DF"},children:"PlayerMovementComponent"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:"(engine, "}),(0,o.jsx)(l.span,{style:{color:"#0550AE"},children:"100"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:"));"})]}),(0,o.jsx)(l.div,{className:"line"}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#24292F"},children:"engine."}),(0,o.jsx)(l.span,{style:{color:"#8250DF"},children:"add"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:"(player);"})]}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#24292F"},children:"engine."}),(0,o.jsx)(l.span,{style:{color:"#8250DF"},children:"start"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:"();"})]})]})})]}),"\n",(0,o.jsxs)(l.pre,{className:"shiki github-dark",style:{backgroundColor:"#0d1117",color:"#c9d1d9"},children:[(0,o.jsx)(l.div,{className:"language-id",children:"ts"}),(0,o.jsx)(l.div,{className:"code-container",children:(0,o.jsxs)(l.code,{children:[(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Engine, Actor, Color } "}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#A5D6FF"},children:"'excalibur'"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:";"})]}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { PlayerMovementComponent } "}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#A5D6FF"},children:"'./PlayerMovementComponent'"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:";"})]}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { MovementSystem } "}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#A5D6FF"},children:"'./MovementSystem'"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:";"})]}),(0,o.jsx)(l.div,{className:"line"}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#79C0FF"},children:"engine"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"new"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#D2A8FF"},children:"Engine"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"}
1,children:"();"})]}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#79C0FF"},children:"player"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"new"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#D2A8FF"},children:"Actor"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:"({ x: "}),(0,o.jsx)(l.span,{style:{color:"#79C0FF"},children:"100"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:", y: "}),(0,o.jsx)(l.span,{style:{color:"#79C0FF"},children:"100"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:", width: "}),(0,o.jsx)(l.span,{style:{color:"#79C0FF"},children:"32"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:", height: "}),(0,o.jsx)(l.span,{style:{color:"#79C0FF"},children:"32"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:", color: Color.Red });"})]}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:"player."}),(0,o.jsx)(l.span,{style:{color:"#D2A8FF"},children:"addComponent"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"new"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,o.jsx)(l.span,{style:{color:"#D2A8FF"},children:"PlayerMovementComponent"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(engine, "}),(0,o.jsx)(l.span,{style:{color:"#79C0FF"},children:"100"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:"));"})]}),(0,o.jsx)(l.div,{className:"line"}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:"engine."}),(0,o.jsx)(l.span,{style:{color:"#D2A8FF"},children:"add"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(player);"})]}),(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:"engine."}),(0,o.jsx)(l.span,{style:{color:"#D2A8FF"},children:"start"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:"();"})]})]})})]})]}),"\n",(0,o.jsx)(l.p,{children:"and to access this componet in your code you simply use:"}),"\n",(0,o.jsxs)(l.div,{className:"shiki-twoslash-fragment",children:[(0,o.jsxs)(l.pre,{className:"shiki github-light",style:{backgroundColor:"#ffffff",color:"#24292f"},children:[(0,o.jsx)(l.div,{className:"language-id",children:"ts"}),(0,o.jsx)(l.div,{className:"code-container",children:(0,o.jsxs)(l.code,{children:[(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"let"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" keyboardControl "}),(0,o.jsx)(l.span,{style:{color:"#CF222E"},children:"="}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:" player."}),(0,o.jsx)(l.span,{style:{color:"#8250DF"},children:"get"}),(0,o.jsx)(l.span,{style:{color:"#24292F"},children:"(PlayerMovementCompontent);"})]}),(0,o.jsx)(l.div,{className:"line",children:(0,o.jsx)(l.span,{style:{color:"#6E7781"},children:"// now keyboardControl has the speed, enable, and heldKeys properties on it!"})}),(0,o.jsx)(l.div,{className:"line",children:(0,o.jsx)(l.span,{style:{color:"#6E7781"},children:"// also it will have the engine reference to the keyboard input"})})]})})]}),"\n",(0,o.jsxs)(l.pre,{className:"shiki github-dark",style:{backgroundColor:"#0d1117",color:"#c9d1d9"},children:[(0,o.jsx)(l.div,{className:"language-id",children:"ts"}),(0,o.jsx)(l.div,{className:"code-container",children:(0,o.jsxs)(l.code,{children:[(0,o.jsxs)(l.div,{className:"line",children:[(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"let"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" keyboardControl "}),(0,o.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:" player."}),(0,o.jsx)(l.span,{style:{color:"#D2A8FF"},children:"get"}),(0,o.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(PlayerMovementCompontent);"})]}),(0,o.jsx)(l.div,{className:"line",children:(0,o.jsx)(l.span,{style:{color:"#8B949E"},children:"// now keyboardControl has the speed, enable, and heldKeys properties on it!"})}),(0,o.jsx)(l.div,{className:"line",children:(0,o.jsx)(l.span,{style:{color:"#8B949E"},children:"// also it will have the engine reference to the keyboard input"})})]})})]})]}),"\n",(0,o.jsx)(l.p,{children:"We will look at the keyboard system in the next section."})]})}function h(s={}){const{wrapper:l}={...(0,c.R)(),...s.components};return l?(0,o.jsx)(l,{...s,children:(0,o.jsx)(t,{...s})}):t(s)}},28453(s,l,e){e.d(l,{R:()=>r,x:()=>i});var n=e(96540);const o={},c=n.createContext(o);function r(s){const l=n.useContext(c);return n.useMemo(function(){return"function"==typeof s?s(l):{...l,...s}},[l,s])}function i(s){let l;return l=s.disableParentContext?"function"==typeof s.components?s.components(o):s.components||o:r(s.components),n.createElement(c.Provider,{value:l},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.