https://excaliburjs.com/assets/js/160aa941.5437cccb.js

1"use strict";(globalThis.webpackChunksite=globalThis.webpackChunksite||[]).push([[3580],{89211(s,e,l){l.r(e),l.d(e,{assets:()=>a,contentTitle:()=>o,default:()=>h,frontMatter:()=>r,metadata:()=>n,toc:()=>t});const n=JSON.parse('{"id":"graphics/04.1-sprites","title":"Sprites","description":"A sprite is a view into a ImageSource and a projection into a final destination size.","source":"@site/docs/04-graphics/04.1-sprites.mdx","sourceDirName":"04-graphics","slug":"/sprites","permalink":"/docs/sprites","draft":false,"unlisted":false,"editUrl":"https://github.com/excaliburjs/Excalibur/tree/main/site/docs/04-graphics/04.1-sprites.mdx","tags":[],"version":"current","frontMatter":{"title":"Sprites","slug":"/sprites","section":"Graphics"},"sidebar":"learnSidebar","previous":{"title":"Lines","permalink":"/docs/lines"},"next":{"title":"Spritesheets","permalink":"/docs/spritesheets"}}');var c=l(74848),i=l(28453);const r={title:"Sprites",slug:"/sprites",section:"Graphics"},o=void 0,a={},t=[];function d(s){const e={a:"a",code:"code",div:"div",p:"p",pre:"pre",span:"span",...(0,i.R)(),...s.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(e.p,{children:["A sprite is a view into a ",(0,c.jsx)(e.a,{href:"/docs/imagesource",children:"ImageSource"})," and a projection into a final destination size."]}),"\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:"image"}),(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:"ImageSource"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#0A3069"},children:"'./img/myimage.png'"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:")"})]}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#6E7781"},children:"// keep in mind this wont work until the raw image is loaded"})}),(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:"sprite"}),(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:"Sprite"}),(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:"  image: image,"})}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"  sourceView: {"})}),(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:"// Take a small slice of the source image starting at pixel (10, 10) with dimension 20 pixels x 20 pixels"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"    x: "}),(0,c.jsx)(e.span,{style:{color:"#0550AE"},children:"10"}),(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:"    y: "}),(0,c.jsx)(e.span,{style:{color:"#0550AE"},children:"10"}),(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:"    width: "}),(0,c.jsx)(e.span,{style:{color:"#0550AE"},children:"20"}),(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:"    height: "}),(0,c.jsx)(e.span,{style:{color:"#0550AE"},children:"20"}),(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:"  destSize: {"})}),(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:"// Optionally specify a different projected size, otherwise use the source"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"    width: "}),(0,c.jsx)(e.span,{style:{color:"#0550AE"},children:"100"}),(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:"    height: "}),(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",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:"image"}),(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:"ImageSource"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'./img/myimage.png'"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:")"})]}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#8B949E"},children:"// keep in mind this wont work until the raw image is loaded"})}),(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:"sprite"}),(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:"Sprite"}),(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:"  image: image,"})}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  sourceView: {"})}),(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:"// Take a small slice of the source image starting at pixel (10, 10) with dimension 20 pixels x 20 pixels"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"    x: "}),(0,c.jsx)(e.span,{style:{color:"#79C0FF"},children:"10"}),(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:"    y: "}),(0,c.jsx)(e.span,{style:{color:"#79C0FF"},children:"10"}),(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:"    width: "}),(0,c.jsx)(e.span,{style:{color:"#79C0FF"},children:"20"}),(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:"    height: "}),(0,c.jsx)(e.span,{style:{color:"#79C0FF"},children:"20"}),(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:"  destSize: {"})}),(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:"// Optionally specify a different projected size, otherwise use the source"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"    width: "}),(0,c.jsx)(e.span,{style:{color:"#79C0FF"},children:"100"}),(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:"    height: "}),(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",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.jsxs)(e.p,{children:["Many times a sprite is the exact same view and size as the source ",(0,c.jsx)(e.a,{href:"/docs/imagesource",children:"raw image"})," so there is a quick static helper to do this"]}),"\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:"image"}),(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:"ImageSource"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#0A3069"},children:"'./img/myimage.png'"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:")"})]}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#6E7781"},children:"// keep in mind this wont work until the image source is loaded"})}),(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:"sprite"}),(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:" image."}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"toSprite"}),(0,c.jsx)(e.span,{style:{color:"#24292F"}

1,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:"image"}),(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:"ImageSource"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'./img/myimage.png'"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:")"})]}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#8B949E"},children:"// keep in mind this wont work until the image source is loaded"})}),(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:"sprite"}),(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:" image."}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"toSprite"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"()"})]})]})})]})]})]})}function h(s={}){const{wrapper:e}={...(0,i.R)(),...s.components};return e?(0,c.jsx)(e,{...s,children:(0,c.jsx)(d,{...s})}):d(s)}},28453(s,e,l){l.d(e,{R:()=>r,x:()=>o});var n=l(96540);const c={},i=n.createContext(c);function r(s){const e=n.useContext(i);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:r(s.components),n.createElement(i.Provider,{value:e},s.children)}}}]);