1"use strict";(self.webpackChunkcodeandweb=self.webpackChunkcodeandweb||[]).push([[43976],{16668:function(e,t,a){var n=a(98587),r=a(96540);const s=["className"];t.A=e=>{let{className:t}=e,a=(0,n.A)(e,s);return r.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor"},a,{className:t||"inline-block h-4"})," ",r.createElement("path",{fillRule:"evenodd",d:"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z",clipRule:"evenodd"}))}},25517:function(e,t,a){a.r(t),a.d(t,{Head:function(){return p},default:function(){return h}});var n=a(28453),r=a(96540),s=a(98086);function l(e){const t=Object.assign({h1:"h1",a:"a",span:"span",h2:"h2",p:"p",ul:"ul",li:"li",code:"code",ol:"ol",strong:"strong",h3:"h3",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",em:"em"},(0,n.R)(),e.components);return r.createElement(r.Fragment,null,r.createElement(t.h1,{id:"automated-sprite-sheet-cutter",style:{position:"relative"}},"Automated Sprite Sheet Cutter",r.createElement(t.a,{href:"#automated-sprite-sheet-cutter","aria-label":"automated sprite sheet cutter permalink",className:"anchor after"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}}))),"\n",r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 832px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAACAUlEQVR42n2S/08ScRjH+ef6VX9rrfqlWj+UaY21STYuA0KQvGy6prH0B9pkpq5kNgSJvDvuCyCBlCdmaFKAd9zh3XF3cN/oSIb2Qz77fLbPnvdez/N89rwt7QtDN9rav8fM9MJiXjNVSRG/cfg4iQksU4I26qWjIzhe2y+YqmEY/yvdgZPppMt6dQkYfv7gWmLjY+CJdXXBP+24n8fQ+WrbUZDGtpkXuwK4L3v25PmfLdU4B29hsGNkAEYg0G1fDQaW385Nj4/OuO10jcE5Y6Ws9CVO1srNGKWgjHoz04Bq6umPOnApm1kete7lc/GZ8eiU77N/MupzBoEhMgmbKtPU+jLNotRt9/CbDP5oncEcJwD2u3OvXzo9ttkpr9s1jCU2Z1+BsVjIVOk6BxUrZZbTdUOUpMyvGlmm1VazO3aJQIK2e7kUgQbehLxPQw4bicGRCWcRQ0w1nybCvhES70yxgyOb/onDwo4gil14N50evNM/CT4DHt3+9P6dfei61/V44Eb/9+2sqXrGAOvgFTL7xXxnUeTW5UvxWERVtS7MCwIUj3zNba2HPxwcHhAYuh5aSRG4KImqphEYEg2vHVOUpmmVanVpcSFNYPrfdVt6S1MUhed5mqZZllVU9TQpyzJF0xzPUxTVaDTqnThhGUYQhDPYMEudM4Nh6Bd4o2eSPzPsL0CbbnK4AAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/50033c6c9d2d60b8b471c817c2744cda/b4f21/sprite-sheet-cutter-overview.avif 208w,\n/static/50033c6c9d2d60b8b471c817c2744cda/a7f15/sprite-sheet-cutter-overview.avif 416w,\n/static/50033c6c9d2d60b8b471c817c2744cda/01fa0/sprite-sheet-cutter-overview.avif 832w,\n/static/50033c6c9d2d60b8b471c817c2744cda/acbef/sprite-sheet-cutter-overview.avif 1248w,\n/static/50033c6c9d2d60b8b471c817c2744cda/6ba7a/sprite-sheet-cutter-overview.avif 1664w,\n/static/50033c6c9d2d60b8b471c817c2744cda/ac2df/sprite-sheet-cutter-overview.avif 3840w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/avif"\n /><source\n srcset="/static/50033c6c9d2d60b8b471c817c2744cda/6abcd/sprite-sheet-cutter-overview.webp 208w,\n/static/50033c6c9d2d60b8b471c817c2744cda/69edf/sprite-sheet-cutter-overview.webp 416w,\n/static/50033c6c9d2d60b8b471c817c2744cda/da8f3/sprite-sheet-cutter-overview.webp 832w,\n/static/50033c6c9d2d60b8b471c817c2744cda/28eb2/sprite-sheet-cutter-overview.webp 1248w,\n/static/50033c6c9d2d60b8b471c817c2744cda/dcb2d/sprite-sheet-cutter-overview.webp 1664w,\n/static/50033c6c9d2d60b8b471c817c2744cda/e3ad8/sprite-sheet-cutter-overview.webp 3840w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/webp"\n />\n <source\n srcset="/static/50033c6c9d2d60b8b471c817c2744cda/3697c/sprite-sheet-cutter-overview.png 208w,\n/static/50033c6c9d2d60b8b471c817c2744cda/e3e0f/sprite-sheet-cutter-overview.png 416w,\n/static/50033c6c9d2d60b8b471c817c2744cda/283d3/sprite-sheet-cutter-overview.png 832w,\n/static/50033c6c9d2d60b8b471c817c2744cda/b19d7/sprite-sheet-cutter-overview.png 1248w,\n/static/50033c6c9d2d60b8b471c817c2744cda/fe2bb/sprite-sheet-cutter-overview.png 1664w,\n/static/50033c6c9d2d60b8b471c817c2744cda/a5f74/sprite-sheet-cutter-overview.png 3840w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/50033c6c9d2d60b8b471c817c2744cda/283d3/sprite-sheet-cutter-overview.png"\n alt="Sprite Sheet Cutter Overview"\n title=""\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>'}}),"\n",r.createElement(t.h2,{id:"why-use-a-sprite-sheet-cutter",style:{position:"relative"}},"Why use a sprite sheet cutter?",r.createElement(t.a,{href:"#why-use-a-sprite-sheet-cutter","aria-label":"why use a sprite sheet cutter permalink",className:"anchor after"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}}))),"\n",r.createElement(t.p,null,"When you buy sprite sheets from an asset store or game-art provider, theyâre often not organized in\nthe way you need them in your game:"),"\n",r.createElement(t.ul,null,"\n",r.createElement(t.li,null,"The sheet contains animations or items
1you donât plan to use."),"\n",r.createElement(t.li,null,"There's a lot of empty space around the sprites."),"\n",r.createElement(t.li,null,"You want to merge selected animations or elements with assets from other sources."),"\n"),"\n",r.createElement(t.p,null,"To build your own sprite sheets, you have to"),"\n",r.createElement(t.ul,null,"\n",r.createElement(t.li,null,"split the original sheet into sprites"),"\n",r.createElement(t.li,null,"repack the sprite sheet for your game"),"\n"),"\n",r.createElement(t.p,null,"TexturePacker can handle both tasks for you."),"\n",r.createElement(t.h2,{id:"overview",style:{position:"relative"}},"Overview",r.createElement(t.a,{href:"#overview","aria-label":"overview permalink",className:"anchor after"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}}))),"\n",r.createElement(t.p,null,"Use TexturePacker's automated sprite sheet cutter to cut your sprite sheets into individual sprites."),"\n",r.createElement(t.p,null,"The sprite sheet cutter detects the following types of sprite sheets:"),"\n",r.createElement(t.ul,null,"\n",r.createElement(t.li,null,"grid and strip (all sprites have the same size)"),"\n",r.createElement(t.li,null,"rectangle (sprites have different sizes, e.g. packed with TexturePacker's MaxRects algorithm)"),"\n",r.createElement(t.li,null,"file (by providing a data file such as ",r.createElement(t.code,null,"json"),", ",r.createElement(t.code,null,"tpsheet"),", ",r.createElement(t.code,null,"plist"),", ",r.createElement(t.code,null,"atlas"),")"),"\n"),"\n",r.createElement(t.p,null,"It automatically configures the slicing parameters based on gaps between sprites.\nThis makes it a one-click solution for most sprite sheets."),"\n",r.createElement(t.p,null,"You can save all sprites - or only a selection. Sprites are automatically numbered\nso that you can extract animations and re-build them later."),"\n",r.createElement(t.p,null,"The whole process runs comfortably on your computer - no upload of your assets to dubious servers."),"\n",r.createElement(t.h2,{id:"starting-the-sprite-sheet-cutter--adding-sprite-sheets",style:{position:"relative"}},"Starting the Sprite Sheet Cutter & Adding Sprite Sheets",r.createElement(t.a,{href:"#starting-the-sprite-sheet-cutter--adding-sprite-sheets","aria-label":"starting the sprite sheet cutter adding sprite sheets permalink",className:"anchor after"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}}))),"\n",r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 832px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 63.46153846153847%; position: relative; bottom: 0; left: 0; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/a1f932805052ab691a981e87736f0ce4/b4f21/spritesheet-cutter%402x.avif 208w,\n/static/a1f932805052ab691a981e87736f0ce4/a7f15/spritesheet-cutter%402x.avif 416w,\n/static/a1f932805052ab691a981e87736f0ce4/01fa0/spritesheet-cutter%402x.avif 832w,\n/static/a1f932805052ab691a981e87736f0ce4/acbef/spritesheet-cutter%402x.avif 1248w,\n/static/a1f932805052ab691a981e87736f0ce4/6ba7a/spritesheet-cutter%402x.avif 1664w,\n/static/a1f932805052ab691a981e87736f0ce4/eee59/spritesheet-cutter%402x.avif 2304w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/avif"\n /><source\n srcset="/static/a1f932805052ab691a981e87736f0ce4/6abcd/spritesheet-cutter%402x.webp 208w,\n/static/a1f932805052ab691a981e87736f0ce4/69edf/spritesheet-cutter%402x.webp 416w,\n/static/a1f932805052ab691a981e87736f0ce4/da8f3/spritesheet-cutter%402x.webp 832w,\n/static/a1f932805052ab691a981e87736f0ce4/28eb2/spritesheet-cutter%402x.webp 1248w,\n/static/a1f932805052ab691a981e87736f0ce4/dcb2d/spritesheet-cutter%402x.webp 1664w,\n/static/a1f932805052ab691a981e87736f0ce4/a2d2e/spritesheet-cutter%402x.webp 2304w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/webp"\n />\n <source\n srcset="/static/a1f932805052ab691a981e87736f0ce4/3697c/spritesheet-cutter%402x.png 208w,\n/static/a1f932805052ab691a981e87736f0ce4/e3e0f/spritesheet-cutter%402x.png 416w,\n/static/a1f932805052ab691a981e87736f0ce4/283d3/spritesheet-cutter%402x.png 832w,\n/static/a1f932805052ab691a981e87736f0ce4/b19d7/spritesheet-cutter%402x.png 1248w,\n/static/a1f932805052ab691a981e87736f0ce4/fe2bb/spritesheet-cutter%402x.png 1664w,\n/static/a1f932805052ab691a981e87736f0ce4/f324c/spritesheet-cutter%402x.png 2304w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/a1f932805052ab691a981e87736f0ce4/283d3/spritesheet-cutter%402x.png"\n alt="Starting TexturePacker's Sprite Sheet Cutter"\n title=""\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>'}}),"\n",r.createElement(t.ol,null,"\n",r.createElement(t.li,null,"Click the ",r.createElement(t.strong,null,"Split Sheet")," button in TexturePacker's toolbar"),"\n",r.createElement(t.li,null,"Drag and drop a sprite sheet onto the center view"),"\n",r.createElement(t.li,null,"Save the sprites"),"\n"),"\n",r.createElement(t.p,null,"The splitter now detects the layout of the sprites.\nThis works well if your sprites have some space in between, no matter if the background is transparent or solid.\nIf the detection does not work automatically, or does not slice the sprites as you wanted, use the parameters to adjust the splitter settings."),"\n",r.createElement(t.h2,{id:"cutting-sprite-sheets-with-different-layouts",style:{position:"relative"}},"Cutting Sprite Sheets with Different Layouts",r.createElement(t.a,{href:"#cutting-sprite-sheets-with-different-layouts","aria-label":"cutting sprite sheets with different layouts permalink",className:"anchor after"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}}))),"\n",r.createElement(t.h3,{id:"cutting-gridstrip-based-sprite-sheets",style:{position:"relative"}}
1,"Cutting Grid/Strip-Based Sprite Sheets",r.createElement(t.a,{href:"#cutting-gridstrip-based-sprite-sheets","aria-label":"cutting gridstrip based sprite sheets permalink",className:"anchor after"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}}))),"\n",r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 832px; "\n >\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 50%; position: relative; bottom: 0; left: 0; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/5092aeb16fec676441ec9aa7ad1ba5fb/b4f21/cut-spritesheet-grid%402x.avif 208w,\n/static/5092aeb16fec676441ec9aa7ad1ba5fb/a7f15/cut-spritesheet-grid%402x.avif 416w,\n/static/5092aeb16fec676441ec9aa7ad1ba5fb/01fa0/cut-spritesheet-grid%402x.avif 832w,\n/static/5092aeb16fec676441ec9aa7ad1ba5fb/acbef/cut-spritesheet-grid%402x.avif 1248w,\n/static/5092aeb16fec676441ec9aa7ad1ba5fb/6ba7a/cut-spritesheet-grid%402x.avif 1664w,\n/static/5092aeb16fec676441ec9aa7ad1ba5fb/bef1c/cut-spritesheet-grid%402x.avif 1860w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/avif"\n /><source\n srcset="/static/5092aeb16fec676441ec9aa7ad1ba5fb/6abcd/cut-spritesheet-grid%402x.webp 208w,\n/static/5092aeb16fec676441ec9aa7ad1ba5fb/69edf/cut-spritesheet-grid%402x.webp 416w,\n/static/5092aeb16fec676441ec9aa7ad1ba5fb/da8f3/cut-spritesheet-grid%402x.webp 832w,\n/static/5092aeb16fec676441ec9aa7ad1ba5fb/28eb2/cut-spritesheet-grid%402x.webp 1248w,\n/static/5092aeb16fec676441ec9aa7ad1ba5fb/dcb2d/cut-spritesheet-grid%402x.webp 1664w,\n/static/5092aeb16fec676441ec9aa7ad1ba5fb/3b452/cut-spritesheet-grid%402x.webp 1860w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/webp"\n />\n <source\n srcset="/static/5092aeb16fec676441ec9aa7ad1ba5fb/3697c/cut-spritesheet-grid%402x.png 208w,\n/static/5092aeb16fec676441ec9aa7ad1ba5fb/e3e0f/cut-spritesheet-grid%402x.png 416w,\n/static/5092aeb16fec676441ec9aa7ad1ba5fb/283d3/cut-spritesheet-grid%402x.png 832w,\n/static/5092aeb16fec676441ec9aa7ad1ba5fb/b19d7/cut-spritesheet-grid%402x.png 1248w,\n/static/5092aeb16fec676441ec9aa7ad1ba5fb/fe2bb/cut-spritesheet-grid%402x.png 1664w,\n/static/5092aeb16fec676441ec9aa7ad1ba5fb/4dc1b/cut-spritesheet-grid%402x.png 1860w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/5092aeb16fec676441ec9aa7ad1ba5fb/283d3/cut-spritesheet-grid%402x.png"\n alt="Cutting rectangular sprite sheets into sprites"\n title=""\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>'}}),"\n",r.createElement(t.p,null,"For example, if your sprites are arranged in a clean grid or strip, they should be sliced automatically.\nSometimes, if sprites are too close to each other, manual adjustment might be required."),"\n",r.createElement(t.p,null,"You can use the following settings:"),"\n",r.createElement(t.table,null,r.createElement(t.thead,null,r.createElement(t.tr,null,r.createElement(t.th,null,"Parameter"),r.createElement(t.th,null,"Description"))),r.createElement(t.tbody,null,r.createElement(t.tr,null,r.createElement(t.td,null,r.createElement(t.strong,null,"Columns")," & ",r.createElement(t.strong,null,"Rows")),r.createElement(t.td,null,"Count the sprites in each column and row and set these parameters. Sprite size is updated automatically according to these settings.")),r.createElement(t.tr,null,r.createElement(t.td,null,r.createElement(t.strong,null,"Sprite Width")," & ",r.createElement(t.strong,null,"Sprite Height")),r.createElement(t.td,null,"If you know the size of the sprites, use these settings.")),r.createElement(t.tr,null,r.createElement(t.td,null,r.createElement(t.strong,null,"Shape Padding")),r.createElement(t.td,null,"Adjust this to the size of the gap between sprites.")),r.createElement(t.tr,null,r.createElement(t.td,null,r.createElement(t.strong,null,"Border Padding")),r.createElement(t.td,null,"Adjust this to the size of the space from sprite to border.")))),"\n",r.createElement(t.h3,{id:"cutting-tile-sheets",style:{position:"relative"}}
1,"Cutting Tile Sheets",r.createElement(t.a,{href:"#cutting-tile-sheets","aria-label":"cutting tile sheets permalink",className:"anchor after"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}}))),"\n",r.createElement(t.p,null,"The tile size might not be detected automatically by the sprite sheet slicing tool.\nIf this is the case, switch to the ",r.createElement(t.strong,null,"Grid")," mode. You can either set\nthe number of ",r.createElement(t.strong,null,"columns")," and ",r.createElement(t.strong,null,"rows")," - or set the tile size\nusing the ",r.createElement(t.strong,null,"Sprite Width")," and ",r.createElement(t.strong,null,"Sprite Height")," settings. Adjust the ",r.createElement(t.strong,null,"Shape Padding")," and ",r.createElement(t.strong,null,"Border Padding")," if\nyour individual tiles are surrounded by transparency or repeating pixels."),"\n",r.createElement(t.h3,{id:"cutting-irregular-sprite-sheets",style:{position:"relative"}},"Cutting Irregular Sprite Sheets",r.createElement(t.a,{href:"#cutting-irregular-sprite-sheets","aria-label":"cutting irregular sprite sheets permalink",className:"anchor after"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}}))),"\n",r.createElement(t.p,null,"The sprite sheet splitter automatically switches to rectangular mode if no clear grid layout is detected."),"\n",r.createElement(t.p,null,"In this mode, it tries to find rectangles that cover a sprite completely. If you know that the sprites were\npacked with transparency in between, you can increase the ",r.createElement(t.strong,null,"Padding")," value. This allows the cutter to combine,\nfor example, smaller particles into a bigger sprite."),"\n",r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 832px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 35.57692307692307%; position: relative; bottom: 0; left: 0; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/d8a3cb522cad2296fb296bccdf0fa36b/b4f21/cut-spritesheet-rectangular%402x.avif 208w,\n/static/d8a3cb522cad2296fb296bccdf0fa36b/a7f15/cut-spritesheet-rectangular%402x.avif 416w,\n/static/d8a3cb522cad2296fb296bccdf0fa36b/01fa0/cut-spritesheet-rectangular%402x.avif 832w,\n/static/d8a3cb522cad2296fb296bccdf0fa36b/acbef/cut-spritesheet-rectangular%402x.avif 1248w,\n/static/d8a3cb522cad2296fb296bccdf0fa36b/6ba7a/cut-spritesheet-rectangular%402x.avif 1664w,\n/static/d8a3cb522cad2296fb296bccdf0fa36b/bef1c/cut-spritesheet-rectangular%402x.avif 1860w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/avif"\n /><source\n srcset="/static/d8a3cb522cad2296fb296bccdf0fa36b/6abcd/cut-spritesheet-rectangular%402x.webp 208w,\n/static/d8a3cb522cad2296fb296bccdf0fa36b/69edf/cut-spritesheet-rectangular%402x.webp 416w,\n/static/d8a3cb522cad2296fb296bccdf0fa36b/da8f3/cut-spritesheet-rectangular%402x.webp 832w,\n/static/d8a3cb522cad2296fb296bccdf0fa36b/28eb2/cut-spritesheet-rectangular%402x.webp 1248w,\n/static/d8a3cb522cad2296fb296bccdf0fa36b/dcb2d/cut-spritesheet-rectangular%402x.webp 1664w,\n/static/d8a3cb522cad2296fb296bccdf0fa36b/3b452/cut-spritesheet-rectangular%402x.webp 1860w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/webp"\n />\n <source\n srcset="/static/d8a3cb522cad2296fb296bccdf0fa36b/3697c/cut-spritesheet-rectangular%402x.png 208w,\n/static/d8a3cb522cad2296fb296bccdf0fa36b/e3e0f/cut-spritesheet-rectangular%402x.png 416w,\n/static/d8a3cb522cad2296fb296bccdf0fa36b/283d3/cut-spritesheet-rectangular%402x.png 832w,\n/static/d8a3cb522cad2296fb296bccdf0fa36b/b19d7/cut-spritesheet-rectangular%402x.png 1248w,\n/static/d8a3cb522cad2296fb296bccdf0fa36b/fe2bb/cut-spritesheet-rectangular%402x.png 1664w,\n/static/d8a3cb522cad2296fb296bccdf0fa36b/4dc1b/cut-spritesheet-rectangular%402x.png 1860w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/d8a3cb522cad2296fb296bccdf0fa36b/283d3/cut-spritesheet-rectangular%402x.png"\n alt="Cutting irregularly packed sprite sheets into sprites"\n title=""\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>'}}),"\n",r.createElement(t.h3,{id:"cutting-sprite-sheets-with-a-solid-background-color",style:{position:"relative"}},"Cutting Sprite Sheets with a solid background color",r.createElement(t.a,{href:"#cutting-sprite-sheets-with-a-solid-background-color","aria-label":"cutting sprite sheets with a solid background color permalink",className:"anchor after"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}}))),"\n",r.createElement(t.p,null,"The sprite cutter automatically works with sprites on a non-transparent solid background color.\nSprites are sliced according to the layout of the sheet.\nHowever, the transparency is not removed in the sprite itself."),"\n",r.createElement(t.p,null,"Sprite sheets with a solid background color can only be cut using grid or data file mode."),"\n",r.createElement(t.h3,{id:"splitting-with-a-data-file",style:{position:"relative"}},"Splitting with a Data File",r.createElement(t.a,{href:"#splitting-with-a-data-file","aria-label":"splitting with a data file permalink",className:"anchor after"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}}))),"\n",r.createElement(t.p,null,"TexturePacker creates sprite sheets with optimized layouts. For this, it writes data files for many\ngame engines. The data files contain information about a sprites name, size and position on the sprite sheet.\nIf you have such a file (some asset designers provide them), you can simplify the cutting process dramatically."),"\n",r.createElement(t.p,null,"If TexturePacker finds a sprite sheet data file with the same name as the texture file\n(e.g. ",r.createElement(t.code,null,"atlas.png"),", ",r.createElement(t.code,null,"atlas.plist"),") for one of the following game engines, it automatically\nsplits the sprite sheets and assigns names to the sprites:"),"\n",r.createElement(t.table,null,r.createElement(t.thead,null,r.createElement(t.tr,null,r.createElement(t.th,null,"Framework"),r.createElement(t.th,null,"File format (extension)"))),r.createElement(t.tbody,null,r.createElement(t.tr,null,r.createElement(t.td,null,"Cocos2d / Cocos Creator"),r.createElement(t.td,null,r.createElement(t.code,null,"plist"))),r.createElement(t.tr,null,r.createElement(t.td,null,"Godot"),r.createElement(t.td,null,r.createElement(t.code,null,"tpsheet"))),r.createElement(t.tr,null,r.createElement(t.td,null,"Phaser"),r.createElement(t.td,null,r.createElement(t.code,null,"json"))),r.createElement(t.tr,null,r.createElement(t.td,null,"LibGDX"),r.createElement(t.td,null,r.createElement(t.code,null,"atlas"))),r.createElement(t.tr,null,r.createElement(t.td,null,"PixiJS"),r.createElement(t.td,null,r.createElement(t.code,null,"json"))),r.createElement(t.tr,null,r.createElement(t.td,null,"Spine"),r.createElement(t.td,null,r.createElement(t.code,null,"atlas"))),r.createElement(t.tr,null,r.createElement(t.td,null,"Unity"),r.createElement(t.td,null,r.createElement(t.code,null,"tpsheet"))))),"\n",r.createElement(t.h2,{id:"naming--exporting-sprites",style:{position:"relative"}}
1,"Naming & exporting Sprites",r.createElement(t.a,{href:"#naming--exporting-sprites","aria-label":"naming exporting sprites permalink",className:"anchor after"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}}))),"\n",r.createElement(t.p,null,"Set the ",r.createElement(t.strong,null,"Output Directory")," where you want to save your sprites. By default, a\nfolder is created with the same name as the sprite sheet, but without the file extension."),"\n",r.createElement(t.p,null,"In the center view, select the sprites you want to export:"),"\n",r.createElement(t.ul,null,"\n",r.createElement(t.li,null,"Use ",r.createElement(s.D,{keyCode:"CTRL"})," (Windows) or ",r.createElement(s.D,{keyCode:"CMD"})," (macOS) with the left mouse button to add or remove sprites from the selection."),"\n",r.createElement(t.li,null,"Press and drag the mouse to use a rubber band selection."),"\n"),"\n",r.createElement(t.p,null,"Set the ",r.createElement(t.strong,null,"Sprite Name Template")," for the sprites you want to export. The name can consist of all characters allowed in regular file names,\nincluding ",r.createElement(t.code,null,"/")," to create subfolders. Use the following placeholders to add numbers to your sprite names, which is useful for naming animation phases:"),"\n",r.createElement(t.ul,null,"\n",r.createElement(t.li,null,r.createElement(t.code,null,"{n}")," to add a number starting with 0."),"\n",r.createElement(t.li,null,r.createElement(t.code,null,"{n1}")," to add a number starting with 1."),"\n"),"\n",r.createElement(t.p,null,"For example, using ",r.createElement(t.code,null,"betty/run-{n1}.png")," creates a folder named ",r.createElement(t.em,null,"betty")," inside the output directory. The sprites will be\nnamed ",r.createElement(t.em,null,"run-1.png"),", ",r.createElement(t.em,null,"run-2.png"),", and so on. Sprite numbers are automatically assigned from the top left to bottom right."),"\n",r.createElement(t.p,null,"Finally, press ",r.createElement(t.strong,null,"Save Selected Sprites")," (or ",r.createElement(t.strong,null,"Save Sprites"),")."),"\n",r.createElement(t.p,null,"If you have multiple animations or different sprites, repeat the process of selecting, setting the name, and saving."),"\n",r.createElement(t.h2,{id:"repacking--converting-sprite-sheets",style:{position:"relative"}},"Repacking & Converting Sprite Sheets",r.createElement(t.a,{href:"#repacking--converting-sprite-sheets","aria-label":"repacking converting sprite sheets permalink",className:"anchor after"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}}))),"\n",r.createElement(t.h3,{id:"why-should-you-repack-a-sprite-sheet",style:{position:"relative"}},"Why Should You Repack a Sprite Sheet?",r.createElement(t.a,{href:"#why-should-you-repack-a-sprite-sheet","aria-label":"why should you repack a sprite sheet permalink",className:"anchor after"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}}))),"\n",r.createElement(t.p,null,"There are several reasons:"),"\n",r.createElement(t.ul,null,"\n",r.createElement(t.li,null,"You have multiple sprite sheets you want to combine into a single one."),"\n",r.createElement(t.li,null,"Your sprite sheets are inefficiently packed, c
1ontaining a lot of transparency."),"\n",r.createElement(t.li,null,"You want to create a scaled-down version for different platforms."),"\n",r.createElement(t.li,null,"You want to reduce the file size."),"\n",r.createElement(t.li,null,"You want to port them from one game engine to another."),"\n"),"\n",r.createElement(t.h3,{id:"how-to-repack-an-existing-sprite-sheet",style:{position:"relative"}},"How to Repack an Existing Sprite Sheet",r.createElement(t.a,{href:"#how-to-repack-an-existing-sprite-sheet","aria-label":"how to repack an existing sprite sheet permalink",className:"anchor after"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}}))),"\n",r.createElement(t.p,null,"Use the sprite sheet cutter to extract the sprites from the sheet.\nOrganize them in a folder structure that fits your project's needs.\nE.g. by grouping animation phases or objects in a subfolder."),"\n",r.createElement(t.p,null,"Create a new project in TexturePacker and add your top-level sprite folder.\nThen select your game engine for the export and publish the new sprite sheet."),"\n",r.createElement(t.h3,{id:"extracting-animations-from-a-sprite-sheet",style:{position:"relative"}},"Extracting Animations from a Sprite Sheet",r.createElement(t.a,{href:"#extracting-animations-from-a-sprite-sheet","aria-label":"extracting animations from a sprite sheet permalink",className:"anchor after"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}}))),"\n",r.createElement(t.p,null,"Animations in a grid / strip layout are easy to handle.\nThey contain transparency for proper alignment.\nThis means they should work out of the box."),"\n",r.createElement(t.p,null,"It's also no problem if you are using a data file with the sprite sheet.\nAll information is already contained and makes the cutting really easy."),"\n",r.createElement(t.p,null,"In a rectangle-packed sheet, transparency around the sprites might have been trimmed (removed).\nManual work is required here to properly re-align the animation frames."),"\n",r.createElement(t.p,null,"If the game engine you are creating the new sprite sheet for supports pivot points, it's also really easy to handle\nanimations in TexturePacker. After adding the sprites, switch to the sprite editor panel and use the pivot point tool to align the\nanimations. Use the animation preview window to adjust the alignment in real-time."))}var i=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.R)(),e.components);return t?r.createElement(t,e,r.createElement(l,e)):l(e)},c=a(92930),o=a(11042),d=a(77891);function u(e){let{data:t,pageContext:a,children:n,location:s}=e;const l=s.pathname,i=t.mdx.tableOfContents.items[0].items;return r.createElement(d.W,null,r.createElement(c.f,{product:a.pageData.product,currentPath:l,onPageItems:i},n))}function h(e){return r.createElement(u,e,r.createElement(i,e))}const p=e=>{let{pageContext:t}=e;return r.createElement(r.Fragment,null,r.createElement(o.A,{pageData:t.pageData}))}},33149:function(e,t,a){a.d(t,{A:function(){return p},w:function(){return h}});var n=a(54506),r=a(98587),s=a(96540),l=a(46942),i=a.n(l);const c=["to","children"];function o(e){let{to:t,children:a}=e,n=(0,r.A)(e,c);return s.createElement("a",Object.assign({href:t,onClick:e=>{e.preventDefault();const a=t.startsWith("#")?t.slice(1):t,n=document.getElementById(a);window.history.pushState(null,"","#"+a),n&&n.scrollIntoView({behavior:"smooth",block:"start"})}},n),a)}var d=e=>{let{items:t,title:a,maxDepth:n,activeItemHash:r,firstLevelBold:l}=e;const c=e=>{if(!e||0===e.length)return 0;let t=0;for(const a of e)t++,a.items&&a.items.length>0&&(t+=c(a.items));return t},d=(e,t)=>e&&e.filter((e=>e.url===t||d(e.items,t))).length>0,u=(e,t,a,n,r)=>
1e&&e.map(((e,l)=>{const c="NONE"===n?0===l&&1===t:e.url===n;return s.createElement("li",{key:"toc-"+(e.url||t+"-"+l)},e.url&&((e,t,a,n)=>{const r=i()("block py-1 pr-2 md:text-xs lg:text-sm border-l-4","hover:bg-gray-50 hover:text-gray-800 hover:border-gray-200",{"border-gray-300 text-gray-900 bg-gray-50":e,"text-gray-600 border-gray-50":!e},{"pl-0":1===t,"font-semibold":n&&1===t,"pl-4":2===t,"pl-8":3===t}),{title:l,url:c}=a;return s.createElement(o,{className:r,to:c||"#"},s.createElement("span",{className:"block pl-2"},l))})(c,t,e,r),e.items&&((e,t)=>null===t||e<t)(t,a)&&(h||c||d(e.items,n))&&s.createElement("ul",null,u(e.items,t+1,a,n,r)))})),h=c(t)<20;return t?s.createElement("nav",{"aria-label":a||"On this page"},a&&s.createElement("h2",{className:"font-bold px-0 uppercase text-gray-800 mb-4 pl-2 border-l-4 border-transparent"},a),s.createElement("ul",null,u(t,1,n-1,r,l))):null};const u=["items","maxDepth"],h=e=>e.map((e=>Object.assign({},(e=>{let{url:t,title:a}=e;if(!a)return;const n=a.match(/(.*){(#.*)}/);return n&&(a=n[1],t=n[2]),a=a.replace(/<.*>/,""),{url:t,title:a}})(e),{items:e.items?h(e.items):void 0})));var p=e=>{let{items:t=[],maxDepth:a}=e,n=(0,r.A)(e,u);const{0:l,1:i}=(0,s.useState)(0),{0:c,1:o}=(0,s.useState)("NONE"),{0:p,1:f}=(0,s.useState)([]),{0:b}=(0,s.useState)(h(t)),v=()=>{const e=m(b,1,a),t=g(e);f(t)};(0,s.useEffect)((()=>{const e=p.find(((e,t)=>{const a=p[t+1];return a?window.scrollY>=e.offsetTop&&window.scrollY<a.offsetTop:window.scrollY>=e.offsetTop}));o(e?e.hash:"NONE")}),[p,l]);const w=(0,s.useCallback)((()=>{v()}),[v]),E=()=>i(window.scrollY);return(0,s.useEffect)((()=>(v(),window.addEventListener("resize",w),window.addEventListener("scroll",E),()=>{window.removeEventListener("resize",w),window.removeEventListener("scroll",E)})),[]),s.createElement(d,Object.assign({maxDepth:a,activeItemHash:c,items:b},n))};function m(e,t,a){return e.reduce(((e,r)=>{if(r.url){const t=r.url;e=[].concat((0,n.A)(e),[t])}return r.items&&t<a&&(e=[].concat((0,n.A)(e),(0,n.A)(m(r.items,t+1,a)))),e}),[])}const g=e=>{var t;const a=(null===(t=document.getElementsByTagName("header")[0])||void 0===t?void 0:t.offsetHeight)||75;return e.map((e=>{const t=document.getElementById(e.replace("#",""));return t?{hash:e,offsetTop:t.offsetTop-a}:null})).filter((e=>e))}},90074:function(e,t,a){var n=a(98587),r=a(96540);const s=["className"];t.A=e=>{let{className:t}=e,a=(0,n.A)(e,s);return r.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"},a,{className:t||"inline-block h-4"})," ",r.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"M11 19l-7-7 7-7m8 14l-7-7 7-7"}))}},92930:function(e,t,a){a.d(t,{f:function(){return p}});var n=a(96540),r=a(90177);const s=e=>{let{sectionItem:t}=e;return n.createElement(r.A,{to:t.url,activeClassName:"font-bold",className:"block py-0.5 px-1 lg:px-2 rounded-sm lg:py-1 hover:bg-gray-50"},t.title)};var l=a(33149);var i=e=>{let{currentPath:t,docNavConfig:a,onPageItems:r=null}=e;return n.createElement(n.Fragment,null,a.items.map((e=>n.createElement("div",{className:"mb-2 text-xs md:text-sm lg:text-base",key:e.url},n.createElement(s,{sectionItem:e}),e.url===t&&r&&n.createElement("div",{className:"px-1 pt-1 lg:px-2"},n.createElement(l.A,{items:r,maxDepth:2,firstLevelBold:!1}))))))},c=a(95853),o=a(98701),d=a(46942),u=a.n(d),h=a(90074);const p=e=>{let{product:t,currentPath:a,onPageItems:r,children:s}=e;const l=o.A[t],{0:d,1:p}=(0,n.useState)(!1),m=()=>{p(!d)};return n.createElement(n.Fragment,null,n.createElement("div",{className:"mx-auto max-w-6xl min-h-screen"},n.createElement("div",{className:"flex lg:justify-center break-words sm:break-normal mx-auto"},n.createElement("div",null,n.createElement("div",{className:u()("z-10 w-6",d?"sticky hidden sm:block lg:hidden":"hidden"),style:{top:"4rem"}},n.createElement("button",{className:"transform origin-bottom-left rotate-90 text-xs bg-gray-200 hover:bg-gray-300 text-gray-700 hover:text-gray-900 z-20 px-4 py-0.5 rounded-t-md flex flex-col items-center justify-center",onClick:m},"Navigation"))),n.createElement("aside",{className:u()("hidden sm:block w-64 pl-3 transform duration-200 z-10",d?"sm:hidden lg:block":"")}
1,n.createElement("div",{className:"sticky",style:{top:"4rem"}},n.createElement("button",{className:"lg:hidden flex flex-row items-center justify-center mt-4 bg-gray-200 text-gray-700 rounded-md px-2 space-x-1 py-0.5 text-xs",onClick:m},n.createElement(h.A,{className:"text-gray-600 h-3 w-3"}),n.createElement("span",null,"Hide")),n.createElement("nav",{"aria-label":"Documentation chapters",className:"max-h-screen overflow-y-auto mt-4"},n.createElement(i,{docNavConfig:l,currentPath:a,onPageItems:r})))),n.createElement("div",{className:u()("my-8 px-3 mx-auto lg:mx-0")},n.createElement("main",{id:"main-content",className:"prose max-w-4xl"},s),n.createElement(c.A,{docNavConfig:l,currentPath:a})))))}},95853:function(e,t,a){a.d(t,{A:function(){return h}});var n=a(96540),r=a(90177),s=a(46942),l=a.n(s),i=a(98587);const c=["className"];var o=e=>{let{className:t}=e,a=(0,i.A)(e,c);return n.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor"},a,{className:t||"inline-block h-4"})," ",n.createElement("path",{fillRule:"evenodd",d:"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z",clipRule:"evenodd"}))},d=a(16668);const u=e=>{let{link:t,direction:a}=e;const s="right"===a,i=l()("py-2 flex items-center text-gray-600 hover:text-gray-700 hover:bg-gray-100","border border-gray-300 shadow-xs rounded-lg",s?"test-right":""),c="inline-block h-8 w-8 text-gray-400 hover:text-gray-500";return n.createElement("div",null,t&&n.createElement(r.A,{to:t.url,className:i},!s&&n.createElement(o,{className:c}),n.createElement("div",{className:"pl-2 pr-4"},n.createElement("div",{className:"text-xs text-gray-500 hover:text-gray-600"},s?"Next chapter":"Previous chapter"),t.title),s&&n.createElement(d.A,{className:c})))};var h=e=>{let{currentPath:t,docNavConfig:a}=e;const{previous:r,next:s}=(()=>{let e=null,n=null;const r=a.items;return r.forEach(((a,s)=>{a.url===t&&(e=s-1>=0?r[s-1]:null,n=s+1<r.length?r[s+1]:null)})),{previous:e,next:n}})();return r||s?n.createElement("nav",{"aria-label":"Previous and next chapter",className:"not-prose flex justify-between mt-12 space-x-8"},n.createElement(u,{link:r,direction:"left"}),n.createElement(u,{link:s,direction:"right"})):null}},98086:function(e,t,a){a.d(t,{D:function(){return c}});var n=a(96540),r=a(46942),s=a.n(r);const l="bg-linear-to-b from-white to-gray-100 border-gray-400 dark:border-slate-300 border rounded-sm px-2 py-1 text-xs shadow-sm",i=e=>{switch(e){case"OPT":return"â¥";case"CMD":return"â";case"SHIFT":return"â§"}return e},c=e=>{let{modifier:t,modifier2:a,modifier3:r,keyCode:c}=e;return n.createElement("span",{className:"whitespace-nowrap text-gray-700 mx-1"},t&&n.createElement(n.Fragment,null,n.createElement("kbd",{className:s()(l)},i(t)),n.createElement("span",{className:"mx-1"},"+")),a&&n.createElement(n.Fragment,null,n.createElement("kbd",{className:s()(l)},i(a)),n.createElement("span",{className:"mx-1"},"+")),r&&n.createElement(n.Fragment,null,n.createElement("kbd",{className:s()(l)},i(r)),n.createElement("span",{className:"mx-1"},"+")),n.createElement("kbd",{className:s()(l)},c))}},98701:function(e,t,a){a.d(t,{A:function(){return c}});var n=a(41176),r=a(77557);var s={items:[{url:"/texturepacker3d/documentation",title:"Quickstart"},{url:"/texturepacker3d/documentation/eula",title:"License agreement"}]},l=a(72952),i=a(58209),c={texturepacker:n.A,texturepacker3d:s,spriteilluminator:l.A,physicseditor:r.A,babeledit:i.A}}}]);
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.