1"use strict";(self.webpackChunkcodeandweb=self.webpackChunkcodeandweb||[]).push([[13571],{20221:function(e,t,a){a.d(t,{H:function(){return r},j:function(){return s}});var n=a(96540),i=a(81851);const s=function(e,t){void 0===t&&(t="ignore"),"undefined"!=typeof window&&localStorage.setItem("exit intent "+e,t)},r=e=>{let{name:t,children:a,variant:s}=e;const{0:r,1:l}=(0,n.useState)(!1),c=()=>"undefined"!=typeof window&&"#force-popup"===window.location.hash;(0,n.useEffect)((()=>{if(!c()){const e=document.referrer,a=window.location.hostname,n=e&&!e.includes(a);if(null!==localStorage.getItem("exit intent "+t)||!n)return}const e=function(e){const t=t=>{t.clientY<0&&(a(),e())},a=()=>{document.removeEventListener("mouseout",t)};return document.addEventListener("mouseout",t,!1),a}((()=>{l(!0),localStorage.setItem("exit intent "+t,"fired"),c()||i.mm.event("exit intent fired",{name:null!=s?s:t})}));return()=>{e()}}),[t]);return r?n.createElement("div",{className:"bg-white dark:bg-slate-900 h-screen w-screen overflow-hidden z-50 fixed inset-0",tabIndex:-1},n.createElement("button",{className:"absolute top-2 right-4 text-2xl text-gray-400 z-10",onClick:()=>l(!1)},"Ã"),a):null}},55508:function(e){e.exports=JSON.parse('{"layout":"constrained","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAABYlAAAWJQFJUiTwAAAEmElEQVR42pWUXUxbZRjHIVEvTNTojfPGxHA3ExJvZsKdu9Eb4pWKF16YKS6CGMaIC0Oh2XBKB9sAodDNlbENOmSQTQqswCYMLNCOsVKgo6X04/R89JzTb0bb0/fve1okmvj5JE/anLznd57n+f/fpwBAoZoF/yPKy8ufNpvNL1it1lfsdnvR5uZmid/veUt9vn/obkPDUxaT6fnV1dUD9GCR0+085Ha7S7e3tz/hBKaO57kLsixf40XRFA7LFvr7OCRJoiTLmZ3dFHhJZloaGl4q2LIvvB3gtqYFUZ4XZckpiKIYSySUcHIH6UwGqWwWOxkFkSdpRJNJCHIUhCgQwxFwIREszxNWEOBybwWPHCl7ucDj8RzLEkAKRxRRknKHlmZnMDl8k0z3XyW3u9qzNJUbjV9lbhkHMncmJxX6Ttbv9xOfz0e8Xi/hWBa0bbasjAIf2paOyVIIiWQinYjHs7tKltzoOIfOhhr8UFsBveYYdM0n0FlXgV5DNywLS+B5HkyAQTAYBG2IpFIpCIKQBwY5rkadQTwWU7AXk6ZR6KqOYNSgx2ivHhdP12F2YhT6U/WwrzxCNBqD2+UGSysLMkESlsPw+pk8UJKkmp1kAgzD7AMH+6+g6+svMTpowK3uVvysa0G/7iwMzY1YtCyA43h4tjyQJRlUFpKIJ1R4HhgKSTXpdJq2wVEgyQP1nRjr7YGx8zwGus5hzHgF57+rw4+681iyPkDAH4Df54dI501bJTFacZAJ7AFphbu7u+A5br/CAQq83qPF5FAfjE0nMHCyEqYeCtZ34P68BSFeyLXLshytliPRaBQub4AtVYFcKFST3HkCgecVGvkZms0Y6G7H1Y4zuNiuRY9Oi+bmk+i9fgkOu4O2KeZmKFNXUBghtLENX4g9XLo3Q6Jk8NjpVOLxWA5oMt3Gtbqj+Omz9zFytAzm2qMYOqPB4PHPsbK2AZm2uuX2gBHknMo71LNB5g+iKOkUXK5NCozngP19l9DWdhoXu7U411SL5vpyGJqOo/WLD7G84oBARdn2bFPbsKp1yC51id0nsW+qFXJcqEaFRCIRJUPFUWO8vw939W24p9dhecoM6+Q4bIvzGBy+gZlfZkANDWpscHSGDDW4Ko7Ty+ZbpkPNAYl6n/bCPD6KU3UfY6irBaZeHcY6W8ExDB49XIHlVwtUVQOBgCokfGyISNSH217/nih/ARwZGcl+f6o+a7jcne016HDhQhOd8QbW19dhs1oRofdYnWEiFsVGMEbkWBJ2v8y+dpgCx8buvOdwbHh8Xm+Iuj6lXiOHYxXGwZvo6dGj5exZaBq+gVarRWNjI+bn5rM8x2ddLhehpoYsh4nqjtwMVSCNZ2geKCoqer26uvqdtraOT80TE5qpWcvlxSXblGPV4Vx+sCwvLiym5+7PIRqh24ZuE9V7akbkCElRUYIsl1f5H0Jdli/SfLW4uPgNjUbzrtForBgeHv52emq6z2az3bMtP3CtOdZk54ZT9SVbVVX1Z+Dv2/tftrj6/Fma6stFBw8ePFRZWflBa2vrRyUlJc/9161f+DcfK9zL/f+/AYriUdi9pCzDAAAAAElFTkSuQmCC"},"backgroundColor":"white","images":{"fallback":{"src":"/static/324701f8cb956033692035ca1e8fd71c/cb866/Try-TexturePacker%402x.png","srcSet":"/static/324701f8cb956033692035ca1e8fd71c/4c91d/Try-TexturePacker%402x.png 350w,\\n/static/324701f8cb956033692035ca1e8fd71c/37b71/Try-TexturePacker%402x.png 700w,\\n/static/324701f8cb956033692035ca1e8fd71c/cb866/Try-TexturePacker%402x.png 1400w","sizes":"(min-width: 1400px) 1400px, 100vw"},"sources":[{"srcSet":"/static/324701f8cb956033692035ca1e8fd71c/09070/Try-TexturePacker%402x.webp 350w,\\n/static/324701f8cb956033692035ca1e8fd71c/c83ca/Try-TexturePacker%402x.webp 700w,\\n/static/324701f8cb956033692035ca1e8fd71c/de7b7/Try-TexturePacker%402x.webp 1400w","type":"image/webp","sizes":"(min-width: 1400px) 1400px, 100vw"}]},"width":1400,"height":1413}')},72933:function(e,t,a){var n=a(96540);function i({title:e,titleId:t,...a},i){return n.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true","data-slot":"icon",ref:i,"aria-labelledby":t},a),e?n.createElement("title",{id:t},e):null,n.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"m4.5 12.75 6 6 9-13.5"}))}const s=n.forwardRef(i);t.A=s},85406:function(e,t,a){a.r(t),a.d(t,{Head:function(){return E},default:function(){return v}});var n=a(28453),i=a(96540),s=a(34429);function r({title:e,titleId:t,...a},n){return i.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true","data-slot":"icon",ref:n,"aria-labelledby":t},a),e?i.createElement("title",{id:t},e):null,i.createElement("path",{d:"M6.3 2.84A1.5 1.5 0 0 0 4 4.11v11.78a1.5 1.5 0 0 0 2.3 1.27l9.344-5.891a1.5 1.5 0 0 0 0-2.538L6.3 2.841Z"}))}var l=i.forwardRef(r),c=a(98587);const o=["className"];var p=e=>{let{className:t}=e,a=(0,c.A)(e,o);return i.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 195.62 195.62",fill:"
1currentColor"},a,{className:t||"inline-block h-4"}),i.createElement("g",{id:"ID_8514ac3b_Layer_1","data-name":"Layer 1"},i.createElement("rect",{x:"0.5",y:"0.5",width:"64.87",height:"64.87",fill:"#27aae1",stroke:"#231f20",strokeMiterlimit:"10"}),i.createElement("rect",{x:"65.37",y:"0.5",width:"64.87",height:"64.87",fill:"#27aae1",stroke:"#231f20",strokeMiterlimit:"10"}),i.createElement("rect",{x:"130.25",y:"0.5",width:"64.87",height:"64.87",fill:"#27aae1",stroke:"#231f20",strokeMiterlimit:"10"}),i.createElement("rect",{x:"0.5",y:"65.37",width:"64.87",height:"64.87",fill:"#27aae1",stroke:"#231f20",strokeMiterlimit:"10"}),i.createElement("rect",{x:"65.37",y:"65.37",width:"64.87",height:"64.87",fill:"#27aae1",stroke:"#231f20",strokeMiterlimit:"10"}),i.createElement("rect",{x:"130.25",y:"65.37",width:"64.87",height:"64.87",fill:"#27aae1",stroke:"#231f20",strokeMiterlimit:"10"}),i.createElement("rect",{x:"0.5",y:"130.25",width:"64.87",height:"64.87",fill:"#27aae1",stroke:"#231f20",strokeMiterlimit:"10"}),i.createElement("rect",{x:"65.37",y:"130.25",width:"64.87",height:"64.87",fill:"#27aae1",stroke:"#231f20",strokeMiterlimit:"10"}),i.createElement("rect",{x:"130.25",y:"130.25",width:"64.87",height:"64.87",fill:"#27aae1",stroke:"#231f20",strokeMiterlimit:"10"})),i.createElement("g",{id:"ID_8514ac3b_Layer_2","data-name":"Layer 2"},i.createElement("polygon",{points:"112.63 90.28 111.06 91.85 115.89 96.69 100.04 96.69 100.04 98.94 115.89 98.94 111.06 103.77 112.63 105.35 120.17 97.81 112.63 90.28"}),i.createElement("polygon",{points:"100.04 96.69 84.19 96.69 89.02 91.85 87.45 90.28 79.92 97.81 87.45 105.35 89.02 103.77 84.19 98.94 100.04 98.94 100.04 96.69"}),i.createElement("polygon",{points:"112.63 155.15 111.06 156.73 115.89 161.56 100.04 161.56 100.04 163.81 115.89 163.81 111.06 168.65 112.63 170.22 120.17 162.69 112.63 155.15"}),i.createElement("polygon",{points:"100.04 161.56 84.19 161.56 89.02 156.73 87.45 155.15 79.92 162.69 87.45 170.22 89.02 168.65 84.19 163.81 100.04 163.81 100.04 161.56"}),i.createElement("polygon",{points:"38.9 108.83 34.06 113.67 34.06 97.81 31.81 97.81 31.81 113.67 26.98 108.83 25.4 110.41 32.94 117.94 40.47 110.41 38.9 108.83"}),i.createElement("polygon",{points:"32.94 77.69 25.4 85.22 26.98 86.79 31.81 81.96 31.81 97.81 34.06 97.81 34.06 81.96 38.9 86.79 40.47 85.22 32.94 77.69"}),i.createElement("polygon",{points:"168.65 108.83 163.81 113.67 163.81 97.81 161.56 97.81 161.56 113.67 156.73 108.83 155.15 110.41 162.69 117.94 170.22 110.41 168.65 108.83"}),i.createElement("polygon",{points:"162.69 77.69 155.15 85.22 156.73 86.79 161.56 81.96 161.56 97.81 163.81 97.81 163.81 81.96 168.65 86.79 170.22 85.22 162.69 77.69"}),i.createElement("polygon",{points:"106 108.83 101.16 113.67 101.16 97.81 98.92 97.81 98.92 113.67 94.08 108.83 92.51 110.41 100.04 117.94 107.57 110.41 106 108.83"}),i.createElement("polygon",{points:"100.04 77.69 92.51 85.22 94.08 86.79 98.92 81.96 98.92 97.81 101.16 97.81 101.16 81.96 106 86.79 107.57 85.22 100.04 77.69"}),i.createElement("polygon",{points:"112.63 25.4 111.06 26.98 115.89 31.81 100.04 31.81 100.04 34.06 115.89 34.06 111.06 38.9 112.63 40.47 120.17 32.94 112.63 25.4"}),i.createElement("polygon",{points:"100.04 31.81 84.19 31.81 89.02 26.98 87.45 25.4 79.92 32.94 87.45 40.47 89.02 38.9 84.19 34.06 100.04 34.06 100.04 31.81"}),i.createElement("path",{d:"M19.31,29h5v1H20.52v3.1H24v1H20.52v4.22h-1.2Z",transform:"translate(-1.83 -1.88)",fill:"#231f20"}),i.createElement("path",{d:"M27,29.79a.75.75,0,0,1-1.51,0,.74.74,0,0,1,.76-.76A.72.72,0,0,1,27,29.79Zm-1.35,8.57V31.67h1.22v6.69Z",transform:"translate(-1.83 -1.88)",fill:"#231f20"}),i.createElement("path",{d:"M29.44,31.67l1,1.44c.25.37.46.72.68,1.09h0c.22-.4.44-.75.66-1.11l.94-1.42H34L31.75,34.9l2.35,3.46H32.72l-1-1.51c-.26-.39-.48-.76-.72-1.16h0c-.22.4-.46.76-.71,1.16l-1,1.51H28l2.38-3.41-2.27-3.28Z",transform:"translate(-1.83 -1.88)",fill:"#231f20"}),i.createElement("path",{d:"M35.75,35.24A2.14,2.14,0,0,0,38,37.56a4.4,4.4,0,0,0,1.85-.35l.21.87a5.43,5.43,0,0,1-2.23.41,3.11,3.11,0,0,1-3.29-3.37c0-2,1.19-3.61,3.14-3.61,2.18,0,2.76,1.92,2.76,3.15a4.51,4.51,0,0,1,0,.57Zm3.57-.87a1.73,1.73,0,0,0-1.69-2,2,2,0,0,0-1.87,2Z",transform:"translate(-1.83 -1.88)",fill:"#231f20"}),i.createElement("path",{d:"M47.77,28.54v8.09c0,.59,0,1.27.06,1.73H46.73l-.06-1.16h0a2.47,2.47,0,0,1-2.28,1.31c-1.62,0-2.86-1.37-2.86-3.4,0-2.23,1.37-3.59,3-3.59a2.24,2.24,0,0,1,2,1h0v-4Zm-1.22,5.85a2.14,2.14,0,0,0-.06-.51,1.79,1.79,0,0,0-1.76-1.41c-1.26,0-2,1.11-2,2.58s.66,2.47,2,2.47a1.83,1.83,0,0,0,1.78-1.45,2.11,2.11,0,0,0,.06-.52Z",transform:"translate(-1.83 -1.88)",fill:"#231f20"}),i.createElement("path",{d:"M152.6,29h5v1H153.8v3.1h3.53v1H153.8v4.22h-1.2Z",transform:"translate(-1.83 -1.88)",fill:"#231f20"}),i.createElement("path",{d:"M160.29,29.79a.75.75,0,0,1-1.51,0,.74.74,0,0,1,.76-.76A.72.72,0,0,1,160.29,29.79Zm-1.36,8.57V31.67h1.22v6.69Z",transform:"translate(-1.83 -1.88)",fill:"#231f20"}),i.createElement("path",{d:"M162.73,31.67l1,1.44c.25.37.46.72.68,1.09h0c.22-.4.44-.75.66-1.11l.94-1.42h1.31L165,34.9l2.35,3.46H166l-1-1.51c-.26-.39-.48-.76-.72-1.16h0c-.22.4-.46.76-.71,1.16l-1,1.51h-1.34l2.38-3.41-2.27-3.28Z",transform:"translate(-1.83 -1.88)",fill:"#231f20"}),i.createElement("path",{d:"M169,35.24a2.14,2.14,0,0,0,2.29,2.32,4.4,4.4,0,0,0,1.85-.35l.21.87a5.42,5.42,0,0,1-2.23.41,3.11,3.11,0,0,1-3.29-3.37c0-2,1.19-3.61,3.14-3.61,2.18,0,2.77,1.92,2.77,3.15a4.59,4.59,0,0,1,0,.57Zm3.57-.87a1.73,1.73,0,0,0-1.69-2,2,2,0,0,0-1.87,2Z",transform:"translate(-1.83 -1.88)",fill:"#231f20"}),i.createElement("path",{d:"M181.06,28.54v8.09c0,.59,0,1.27.05,1.73H180L180,37.2h0a2.47,2.47,0,0,1-2.28,1.31c-1.62,0-2.86-1.37-2.86-3.4,0-2.23,1.37-3.59,3-3.59a2.24,2.24,0,0,1,2,1h0v-4Zm-1.22,5.85a2.12,2.12,0,0,0-.06-.51A1.79,1.79,0,0,0,178,32.47c-1.26,0-2,1.11-2,2.58s.66,2.47,2,2.47a1.83,1.83,0,0,0,1.78-1.45,2.08,2.08,0,0,0,.06-.52Z",transform:"translate(-1.83 -1.88)",fill:"#231f20"}),i.createElement("path",{d:"M152.6,160.6h5v1H153.8v3.1h3.53v1H153.8v4.22h-1.2Z",transform:"translate(-1.83 -1.88)",fill:"#231f20"}),i.createElement("path",{d:"M160.29,161.35a.75.75,0,0,1-1.51,0,.74.74,0,0,1,.76-.76A.72.72,0,0,1,160.29,161.35Zm-1.36,8.57v-6.69h1.22v6.69Z",transform:"translate(-1.83 -1.88)",fill:"#231f20"}),i.createElement("path",{d:"M162.73,163.23l1,1.44c.25.37.46.72.68,1.09h0c.22-.4.44-.75.66-1.11l.94-1.42h1.31L165,166.46l2.35,3.46H166l-1-1.51c-.26-.39-.48-.76-.72-1.16h0c-.22.4-.46.76-.71,1.16l-1,1.51h-1.34l2.38-3.42-2.27-3.28Z",transform:"translate(-1.83 -1.88)",fill:"#231f20"}),i.createElement("path",{d:"M169,166.8a2.14,2.14,0,0,0,2.29,2.32,4.4,4.4,0,0,0,1.85-.35l.21.87a5.42,5.42,0,0,1-2.23.42,3.11,3.11,0,0,1-3.29-3.37c0-2,1.19-3.61,3.14-3.61,2.18,0,2.77,1.92,2.77,3.15a4.62,4.62,0,0,1,0,.57Zm3.57-.87a1.73,1.73,0,0,0-1.69-2,2,2,0,0,0-1.87,2Z",transform:"translate(-1.83 -1.88)",fill:"#231f20"}),i.createElement("path",{d:"M181.06,160.11v8.09c0,.59,0,1.27.05,1.73H180l-.06-1.16h0a2.48,2.48,0,0,1-2.28,1.31c-1.62,0-2.86-1.37-2.86-3.4,0-2.23,1.37-3.59,3-3.59a2.24,2.24,0,0,1,2,1h0v-4ZM179.84,166a2.12,2.12,0,0,0-.06-.51A1.79,1.79,0,0,0,178,164c-1.26,0-2,1.11-2,2.59s.66,2.47,2,2.47a1.83,1.83,0,0,0,1.78-1.45,2.09,2.09,0,0,0,.06-.53Z",transform:"translate(-1.83 -1.88)",fill:"#231f20"}),i.createElement("path",{d:"M19.31,160.6h5v1H20.52v3.1H24v1H20.52v4.22h-1.2Z",transform:"translate(-1.83 -1.88)",fill:"#231f20"}),i.createElement("path",{d:"M27,161.35a.75.75,0,0,1-1.51,0,.74.74,0,0,1,.76-.76A.72.72,0,0,1,27,161.35Zm-1.35,8.57v-6.69h1.22v6.69Z",transform:"translate(-1.83 -1.88)",fill:"#231f20"}),i.createElement("path",{d:"M29.44,163.23l1,1.44c.25.37.46.72.68,1.09h0c.22-.4.44-.75.66-1.11l.94-1.42H34l-2.28,3.24,2.35,3.46H32.72l-1-1.51c-.26-.39-.48-.76-.72-1.16h0c-.22.4-.46.76-.71,1.16l-1,1.51H28l2.38-3.42-2.27-3.28Z",transform:"translate(-1.83 -1.88)",fill:"#231f20"}),i.createElement("path",{d:"M35.75,166.8A2.14,2.14,0,0,0,38,169.12a4.4,4.4,0,0,0,1.85-.35l.21.87a5.42,5.42,0,0,1-2.23.42,3.11,3.11,0,0,1-3.29-3.37c0-2,1.19-3.61,3.14-3.61,2.18,0,2.76,1.92,2.76,3.15a4.54,4.54,0,0,1,0,.57Zm3.57-.87a1.73,1.73,0,0,0-1.69-2,2,2,0,0,0-1.87,2Z",transform:"translate(-1.83 -1.88)",fill:"#231f20"}),i.createElement("path",{d:"M47.77,160.11v8.09c0,.59,0,1.27.06,1.73H46.73l-.06-1.16h0a2.48,2.48,0,0,1-2.28,1.31c-1.62,0-2.86-1.37-2.86-3.4,0-2.23,1.37-3.59,3-3.59a2.24,2.24,0,0,1,2,1h0v-4ZM46.55,166a2.15,2.15,0,0,0-.06-.51A1.79,1.79,0,0,0,44.74,164c-1.26,0-2,1.11-2,2.59s.66,2.47,2,2.47a1.83,1.83,0,0,0,1.78-1.45,2.11,2.11,0,0,0,.06-.53Z",transform:"translate(-1.83 -1.88)",fill:"#231f20"})))},d=a(94296),m=a(93625),u=a(85742);function h(e){const t=Object.assign({strong:"strong",br:"br",p:"p",ul:"ul",li:"li",h2:"h2",a:"a",span:"span",em:"em",code:"code",pre:"pre"},(0,n.R)(),e.components);return i.createElement(i.Fragment,null,i.createElement(m.Kw,{name:"using-spritesheets-with-unity",variants:{details:i.createElement(u.T,{features:[i.createElement(i.Fragment,null,"Works with ",i.createElement(t.strong,null,"Unity")," and ",i.createElement(t.br),"30+ game engines"),i.createElement(i.Fragment,null,"Best-in-class ",i.createElement(t.strong,null,"sprite mesh optimizer")),i.createElement(i.Fragment,null,"Full ",i.createElement(t.strong,null,"command line automation")),i.createElement(i.Fragment,null,"Free ",i.createElement(t.strong,null,"importer plugin")),i.createElement(i.Fragment,null,"Free ",i.createElement(t.strong,null,"professional support")),i.createElement(i.Fragment,null,"Continuously ",i.createElement(t.strong,null,"updated since 2010"))]})}}),"\n",i.createElement(t.p,null,"This tutorial shows you how to use TexturePacker to create an optimized ",i.createElement(t.strong,null,"Sprite Atlas")," (also called sprite sheet or texture atlas) for Unity's 2D system."),"\n",i.createElement(t.p,null,"You'll learn how to:"),"\n",i.createElement(t.ul,null,"\n",i.createElement(t.li,null,"Prepare your Unity project to read TexturePacker sprite sheets"),"\n",i.createElement(t.li,null,"Create a Sprite Atlas and load it into Unity"),"\n",i.createElement(t.li,null,"Handle sprite updates and changes in Unity"),"\n",i.createElement(t.li,null,"Streamline your sprite workflow in Unity"),"\n"),"\n",i.createElement(t.h2,{id:"why-you-should-use-optimized-sprites",style:{position:"relative"}}
1,"Why you should use optimized sprites",i.createElement(t.a,{href:"#why-you-should-use-optimized-sprites","aria-label":"why you should use optimized sprites permalink",className:"anchor after"},i.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",i.createElement(t.p,null,"You probably already know that sprite sheets increase your game's performance. TexturePacker takes this optimization even further."),"\n",i.createElement(t.p,null,"Unity creates sprite meshes automatically â these reduce overdraw by not rendering transparent pixels. However, Unity's mesh generation algorithm has limitations:"),"\n",i.createElement("div",{className:"mx-auto max-w-md"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<figure class="gatsby-resp-image-figure" style="">\n <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: 86.53846153846155%; position: relative; bottom: 0; left: 0; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/b3e01d436e8e383a8ed3215bb3a4e2dc/b4f21/optimizer-comparison-3.avif 208w,\n/static/b3e01d436e8e383a8ed3215bb3a4e2dc/a7f15/optimizer-comparison-3.avif 416w,\n/static/b3e01d436e8e383a8ed3215bb3a4e2dc/01fa0/optimizer-comparison-3.avif 832w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/avif"\n /><source\n srcset="/static/b3e01d436e8e383a8ed3215bb3a4e2dc/6abcd/optimizer-comparison-3.webp 208w,\n/static/b3e01d436e8e383a8ed3215bb3a4e2dc/69edf/optimizer-comparison-3.webp 416w,\n/static/b3e01d436e8e383a8ed3215bb3a4e2dc/da8f3/optimizer-comparison-3.webp 832w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/webp"\n />\n <source\n srcset="/static/b3e01d436e8e383a8ed3215bb3a4e2dc/3697c/optimizer-comparison-3.png 208w,\n/static/b3e01d436e8e383a8ed3215bb3a4e2dc/e3e0f/optimizer-comparison-3.png 416w,\n/static/b3e01d436e8e383a8ed3215bb3a4e2dc/283d3/optimizer-comparison-3.png 832w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/b3e01d436e8e383a8ed3215bb3a4e2dc/283d3/optimizer-comparison-3.png"\n alt="Sprite polygon quality in Unity and TexturePacker"\n title="TexturePacker reduces the number of triangles and overdraw compared to Unity's internal mesh algorithm"\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 <figcaption class="gatsby-resp-image-figcaption">TexturePacker reduces the number of triangles and overdraw compared to Unity's internal mesh algorithm</figcaption>\n </figure>'}})),"\n",i.createElement(t.p,null,"TexturePacker comes with a new algorithm to create better meshes. As you see above:"),"\n",i.createElement(t.ul,null,"\n",i.createElement(t.li,null,i.createElement(t.strong,null,"Triangle count reduced by 69%")," â freeing up CPU resources"),"\n",i.createElement(t.li,null,i.createElement(t.strong,null,"Overdraw reduced by 30%")," â freeing up GPU resources"),"\n"),"\n",i.createElement(t.h2,{id:"what-you-are-going-to-learn-in-this-tutorial",style:{position:"relative"}},"What you are going to learn in this tutorial",i.createElement(t.a,{href:"#what-you-are-going-to-learn-in-this-tutorial","aria-label":"what you are going to learn in this tutorial permalink",className:"anchor after"},i.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",i.createElement(t.p,null,"TexturePacker, together with the free\n",i.createElement(t.a,{href:"https://assetstore.unity.com/packages/tools/sprite-management/texturepacker-importer-16641"},"TexturePacker Importer"),",\ncreates sprite sheet assets that can be directly used from Unity's graphical editor or through scripts."),"\n",i.createElement(t.p,null,"Sprites are accessible through ",i.createElement(t.strong,null,"Unity's standard API")," using the ",i.createElement(t.a,{href:"https://docs.unity3d.com/ScriptReference/Sprite.html"},"Sprite")," class â ",i.createElement(t.strong,null,"no additional runtime code required"),"!\nThe sprite sheets also work with Unity's UI classes."),"\n",i.createElement(t.p,null,"This is what you get:"),"\n",i.createElement(t.ul,null,"\n",i.createElement(t.li,null,i.createElement(t.strong,null,"Increased performance")," through optimized sprite meshes"),"\n",i.createElement(t.li,null,"Easy sprite management"),"\n",i.createElement(t.li,null,"1-click import/export"),"\n",i.createElement(t.li,null,"No additional runtime code or library required"),"\n",i.createElement(t.li,null,i.createElement(t.strong,null,"Fully automated slicing")," of sprites"),"\n",i.createElement(t.li,null,"Reducing Draw Calls in Unity"),"\n",i.createElement(t.li,null,"Saves you a lot of time"),"\n"),"\n",i.createElement(t.h2,{id:"creating-a-sprite-atlas",style:{position:"relative"}}
1,"Creating a Sprite Atlas",i.createElement(t.a,{href:"#creating-a-sprite-atlas","aria-label":"creating a sprite atlas permalink",className:"anchor after"},i.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",i.createElement(t.p,null,"Start by downloading TexturePacker from here:"),"\n",i.createElement(d.f,{product:"texturepacker"}),"\n",i.createElement(t.p,null,"It's available for Windows, macOS and Linux. You can use the free trial for this tutorial. Yes, TexturePacker costs\na bit of money, but it's a perpetual license (no subscription!) that comes at a very affordable price. We also\nsupport independent developers with a big discount."),"\n",i.createElement(t.p,null,"To create a new sprite sheet, simply start TexturePacker and drag & drop the ",i.createElement(t.strong,null,"directories\ncontaining your sprites")," to the ",i.createElement(t.strong,null,"Sprites")," area.\nTexturePacker preserves the directory structure under the directory you added - allowing you to group and sort sprites.\nNew sprites in the directory are added to the sheet as soon as you re-enter TexturePacker."),"\n",i.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: 55.28846153846154%; position: relative; bottom: 0; left: 0; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/87376f39efeba2d3cb0d35c23300c273/b4f21/creating-sprite-sheets.avif 208w,\n/static/87376f39efeba2d3cb0d35c23300c273/a7f15/creating-sprite-sheets.avif 416w,\n/static/87376f39efeba2d3cb0d35c23300c273/01fa0/creating-sprite-sheets.avif 832w,\n/static/87376f39efeba2d3cb0d35c23300c273/acbef/creating-sprite-sheets.avif 1248w,\n/static/87376f39efeba2d3cb0d35c23300c273/6ba7a/creating-sprite-sheets.avif 1664w,\n/static/87376f39efeba2d3cb0d35c23300c273/f66bc/creating-sprite-sheets.avif 2199w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/avif"\n /><source\n srcset="/static/87376f39efeba2d3cb0d35c23300c273/6abcd/creating-sprite-sheets.webp 208w,\n/static/87376f39efeba2d3cb0d35c23300c273/69edf/creating-sprite-sheets.webp 416w,\n/static/87376f39efeba2d3cb0d35c23300c273/da8f3/creating-sprite-sheets.webp 832w,\n/static/87376f39efeba2d3cb0d35c23300c273/28eb2/creating-sprite-sheets.webp 1248w,\n/static/87376f39efeba2d3cb0d35c23300c273/dcb2d/creating-sprite-sheets.webp 1664w,\n/static/87376f39efeba2d3cb0d35c23300c273/9cb77/creating-sprite-sheets.webp 2199w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/webp"\n />\n <source\n srcset="/static/87376f39efeba2d3cb0d35c23300c273/3697c/creating-sprite-sheets.png 208w,\n/static/87376f39efeba2d3cb0d35c23300c273/e3e0f/creating-sprite-sheets.png 416w,\n/static/87376f39efeba2d3cb0d35c23300c273/283d3/creating-sprite-sheets.png 832w,\n/static/87376f39efeba2d3cb0d35c23300c273/b19d7/creating-sprite-sheets.png 1248w,\n/static/87376f39efeba2d3cb0d35c23300c273/fe2bb/creating-sprite-sheets.png 1664w,\n/static/87376f39efeba2d3cb0d35c23300c273/e7885/creating-sprite-sheets.png 2199w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/87376f39efeba2d3cb0d35c23300c273/283d3/creating-sprite-sheets.png"\n alt="TexturePacker: Add 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",i.createElement(t.p,null,"Select ",i.createElement(t.em,null,"Unity - Texture2D")," as ",i.createElement(t.strong,null,"Data format")," in the settings on the right side."),"\n",i.createElement(t.p,null,"Click on the folder icon next to ",i.createElement(t.strong,null,"Data file")," and choose a location in the\n",i.createElement("span",{className:"caw-filename"},"Assets")," directory of your Unity project â\nthe TexturePackerImporter script will re-import the sprite sheet into your project each time you publish\nan updated sheet with TexturePacker."),"\n",i.createElement(t.p,null,"TexturePacker distinguishes between the ",i.createElement(t.strong,null,"Trim Mode")," and the ",i.createElement(t.strong,null,"Algorithm")," used for packing the sprite sheet."),"\n",i.createElement(t.ul,null,"\n",i.createElement(t.li,null,i.createElement(t.strong,null,"Trim Mode"),": The default for Unity is ",i.createElement(t.strong,null,"Polygon outline"),". This creates a tightly fitting polygon around\neach sprite, which reduces overdraw and improves rendering performance."),"\n",i.createElement(t.li,null,i.createElement(t.strong,null,"Algorithm"),": The default packing algorithm is set to ",i.createElement(t.strong,null,"Polygon"),". With this setting, the packer uses\neach spriteâs polygon outline to arrange them efficiently, resulting in a compact sprite sheet that\nsaves both disk space and runtime memory."),"\n"),"\n",i.createElement(t.p,null,"This configuration is generally the best choice for sprites.\nIt also works well with ",i.createElement(t.code,null,"UI.Image")," but there you have to set property\n",i.createElement(t.a,{href:"https://docs.unity3d.com/Packages/[email protected]/api/UnityEngine.UI.Image.html#UnityEngine_UI_Image_useSpriteMesh"},"useSpriteMesh")," to ",i.createElement(t.em,null,"true"),".\nAlternatively you can choose the ",i.createElement(t.em,null,"MaxRects")," algorithm for packing."),"\n",i.createElement(s.HJ,null,i.createElement(t.p,null,"Polygon packing is a complex process and takes some time. You can speed up things in two ways:"),i.createElement(t.ul,null,"\n",i.createElement(t.li,null,"Increase the ",i.createElement(t.strong,null,"Tracer Tolerance")," â this will create less complex polygons.\nTo see this setting, switch the sidebar to the ",i.createElement(t.strong,null,"Advanced settings")," view using the button at the bottom."),"\n",i.createElement(t.li,null,"Use algorithm ",i.createElement(t.strong,null,"MaxRects")," â TexturePacker uses rectangles for packing but still uses the optimized meshes for rendering"),"\n")),"\n",i.createElement(t.p,null,"Finally, press ",i.createElement(t.strong,null,"Export sprite sheet")," to create the sprite sheet."),"\n",i.createElement(t.h2,{id:"optimizing-polygon-meshes",style:{position:"relative"}}
1,"Optimizing polygon meshes",i.createElement(t.a,{href:"#optimizing-polygon-meshes","aria-label":"optimizing polygon meshes permalink",className:"anchor after"},i.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",i.createElement(t.p,null,"You can influence the quality of the meshes using ",i.createElement(t.strong,null,"Tracer Tolerance"),". A higher tolerance results\nin less vertices but more overdraw."),"\n",i.createElement(t.p,null,"The best value for your project depends on two factors: Your CPU usage and GPU usage. Each vertex\nrequires CPU power for the calculation. On the other hand: Each additional pixel adds work load on the GPU."),"\n",i.createElement(t.p,null,"If your project is ",i.createElement(t.strong,null,"high on computation (CPU)")," but you still have some resources on the GPU side go for a lower vertex count"),"\n",i.createElement(t.ul,null,"\n",i.createElement(t.li,null,i.createElement(t.strong,null,"increase tracer tolerance"),"."),"\n"),"\n",i.createElement(t.p,null,"If your project is ",i.createElement(t.strong,null,"high on graphics (GPU)")," but you still have some resources on the CPU side go for a lower overdraw"),"\n",i.createElement(t.ul,null,"\n",i.createElement(t.li,null,i.createElement(t.strong,null,"reduce tracer tolerance"),"."),"\n"),"\n",i.createElement(t.p,null,"Keep an eye on the values TexturePacker is displaying at the bottom of the sprite sheet. In the following example you see\nthat decreasing the overdraw by additional 2% comes with more than duplicating the vertex count."),"\n",i.createElement("div",{className:"mx-auto max-w-md"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<figure class="gatsby-resp-image-figure" style="">\n <span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 666px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 51.92307692307693%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAAsTAAALEwEAmpwYAAABl0lEQVR42k2R60+CUBjG/f8/9621WivXVlYfspZLSy0UEUxMRNFDIgdwIIiCKLcTN82znbOd397nfd5LDiFkL7dsZTjtQDg2PDeMSPQKlMBj3BwsVroTkTCMucyvRxVm2pWliRH9cxGiqtzHJU68AHVqouRIglHLY1hhMCblMAgSFouxYrddaPWrYCFZKBXT+Lzf0ibs+t9BMNm2zFDLleknMFY7m4AlIUeromAnIBFr0CbLM33uHOI2tk/XIM/ovhceoLlGoG8wDWjqbgpzG9tr3vaYBzpNlpY3Imbf55gBrbSWtByB35B5YlLhkrHEN6fwBlUa1/MdRbBS9db26Opv4+77py5k+YI4VBwoVGmIFzq6und2LJ/4Uk7vQbOhervMHo4Wj2Xw/D5bqrvDIFaagzfFmzeO7RmBv++53pBPboayFvccpCaidXbf/6S1qLow0yJ3h0p1cF3iRCmbYiwuYjP8RztubzQ1L56A72W9ZbMI0NXrmOyt3S36F3cH6gRkG85WpdotSnF36PhE+ya6MoTOgfwBDkApo41EQ4QAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/04febadbfbee94d466ee0478c5d0b9b6/b4f21/polygon-tracer-tolerance-3.avif 208w,\n/static/04febadbfbee94d466ee0478c5d0b9b6/a7f15/polygon-tracer-tolerance-3.avif 416w,\n/static/04febadbfbee94d466ee0478c5d0b9b6/a84c4/polygon-tracer-tolerance-3.avif 666w"\n sizes="(max-width: 666px) 100vw, 666px"\n type="image/avif"\n /><source\n srcset="/static/04febadbfbee94d466ee0478c5d0b9b6/6abcd/polygon-tracer-tolerance-3.webp 208w,\n/static/04febadbfbee94d466ee0478c5d0b9b6/69edf/polygon-tracer-tolerance-3.webp 416w,\n/static/04febadbfbee94d466ee0478c5d0b9b6/d8406/polygon-tracer-tolerance-3.webp 666w"\n sizes="(max-width: 666px) 100vw, 666px"\n type="image/webp"\n />\n <source\n srcset="/static/04febadbfbee94d466ee0478c5d0b9b6/3697c/polygon-tracer-tolerance-3.png 208w,\n/static/04febadbfbee94d466ee0478c5d0b9b6/e3e0f/polygon-tracer-tolerance-3.png 416w,\n/static/04febadbfbee94d466ee0478c5d0b9b6/1a8a8/polygon-tracer-tolerance-3.png 666w"\n sizes="(max-width: 666px) 100vw, 666px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/04febadbfbee94d466ee0478c5d0b9b6/1a8a8/polygon-tracer-tolerance-3.png"\n alt="Tracer tolerance setting: Triangle count vs overdraw"\n title="Adjust the tracer tolerance to strike a balance between the number of vertices and the required area"\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 <figcaption class="gatsby-resp-image-figcaption">Adjust the tracer tolerance to strike a balance between the number of vertices and the required area</figcaption>\n </figure>'}})),"\n",i.createElement(t.h2,{id:"using-the-sprite-atlas-in-unity",style:{position:"relative"}},"Using the Sprite Atlas in Unity",i.createElement(t.a,{href:"#using-the-sprite-atlas-in-unity","aria-label":"using the sprite atlas in unity permalink",className:"anchor after"},i.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",i.createElement(t.p,null,"To enable the import of TexturePacker Sprite Atlas files in Unity, you have to install the ",i.createElement(t.em,null,"TexturePacker Importer")," plugin,\nwhich you can download from the ",i.createElement(t.strong,null,"Unity Asset Store")," for free: ",i.createElement(t.a,{href:"https://assetstore.unity.com/packages/tools/sprite-management/texturepacker-importer-16641"},"TexturePacker Importer")),"\n",i.createElement(t.p,null,"The script extends Unity to read Sprite Atlas data created with TexturePacker and to automatically create native Unity assets which you can use with the Unity Editor.\nThe code of the script only runs during development. It does not become part of your product or game."),"\n",i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<figure class="gatsby-resp-image-figure" style="">\n <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: 71.63461538461539%; position: relative; bottom: 0; left: 0; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/7b167d7319568a8d4fe90cf43c9016e8/b4f21/unity-asset-store%402x.avif 208w,\n/static/7b167d7319568a8d4fe90cf43c9016e8/a7f15/unity-asset-store%402x.avif 416w,\n/static/7b167d7319568a8d4fe90cf43c9016e8/01fa0/unity-asset-store%402x.avif 832w,\n/static/7b167d7319568a8d4fe90cf43c9016e8/acbef/unity-asset-store%402x.avif 1248w,\n/static/7b167d7319568a8d4fe90cf43c9016e8/6ba7a/unity-asset-store%402x.avif 1664w,\n/static/7b167d7319568a8d4fe90cf43c9016e8/e4423/unity-asset-store%402x.avif 2798w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/avif"\n /><source\n srcset="/static/7b167d7319568a8d4fe90cf43c9016e8/6abcd/unity-asset-store%402x.webp 208w,\n/static/7b167d7319568a8d4fe90cf43c9016e8/69edf/unity-asset-store%402x.webp 416w,\n/static/7b167d7319568a8d4fe90cf43c9016e8/da8f3/unity-asset-store%402x.webp 832w,\n/static/7b167d7319568a8d4fe90cf43c9016e8/28eb2/unity-asset-store%402x.webp 1248w,\n/static/7b167d7319568a8d4fe90cf43c9016e8/dcb2d/unity-asset-store%402x.webp 1664w,\n/static/7b167d7319568a8d4fe90cf43c9016e8/0030e/unity-asset-store%402x.webp 2798w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/webp"\n />\n <source\n srcset="/static/7b167d7319568a8d4fe90cf43c9016e8/3697c/unity-asset-store%402x.png 208w,\n/static/7b167d7319568a8d4fe90cf43c9016e8/e3e0f/unity-asset-store%402x.png 416w,\n/static/7b167d7319568a8d4fe90cf43c9016e8/283d3/unity-asset-store%402x.png 832w,\n/static/7b167d7319568a8d4fe90cf43c9016e8/b19d7/unity-asset-store%402x.png 1248w,\n/static/7b167d7319568a8d4fe90cf43c9016e8/fe2bb/unity-asset-store%402x.png 1664w,\n/static/7b167d7319568a8d4fe90cf43c9016e8/2e9cc/unity-asset-store%402x.png 2798w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/7b167d7319568a8d4fe90cf43c9016e8/283d3/unity-asset-store%402x.png"\n alt="Download TexturePacker Importer for Unity from the Asset Store"\n title="Download the TexturePacker Importer from the Asset Store"\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 <figcaption class="gatsby-resp-image-figcaption">Download the TexturePacker Importer from the Asset Store</figcaption>\n </figure>'}}),"\n",i.createElement(t.p,null,"The plugin comes with some demo assets â but it's perfect if you only install the ",i.createElement(t.strong,null,"Editor")," folder and its content.\nDon't rename this folder, because this name ensures that it is automatically loaded by the Unity Editor."),"\n",i.createElement(t.p,null,"The TexturePackerImporter checks for each texture file if a corresponding ",i.createElement(t.strong,null,".tpsheet")," file exists.\nThis is the data file written by TexturePacker â it is used by the Unity importer to slice the texture into
1individual sprites."),"\n",i.createElement(s.HJ,null,i.createElement(t.p,null,"The assets and sprite sheets are automatically updated in Unity when changes are found. No manual intervention required!")),"\n",i.createElement(t.p,null,"Use the ",i.createElement(l,{className:"h-4 inline-block"})," symbol next to the texture asset to display the individual sprites.\nTo create an animation simply select the frames and drag them onto the scene."),"\n",i.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: 67.78846153846155%; position: relative; bottom: 0; left: 0; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/81e53ace2f4930601967c8a40c1ec9f8/b4f21/unity-create-animation-from-sprite-sheet.avif 208w,\n/static/81e53ace2f4930601967c8a40c1ec9f8/a7f15/unity-create-animation-from-sprite-sheet.avif 416w,\n/static/81e53ace2f4930601967c8a40c1ec9f8/01fa0/unity-create-animation-from-sprite-sheet.avif 832w,\n/static/81e53ace2f4930601967c8a40c1ec9f8/acbef/unity-create-animation-from-sprite-sheet.avif 1248w,\n/static/81e53ace2f4930601967c8a40c1ec9f8/6ba7a/unity-create-animation-from-sprite-sheet.avif 1664w,\n/static/81e53ace2f4930601967c8a40c1ec9f8/90965/unity-create-animation-from-sprite-sheet.avif 2128w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/avif"\n /><source\n srcset="/static/81e53ace2f4930601967c8a40c1ec9f8/6abcd/unity-create-animation-from-sprite-sheet.webp 208w,\n/static/81e53ace2f4930601967c8a40c1ec9f8/69edf/unity-create-animation-from-sprite-sheet.webp 416w,\n/static/81e53ace2f4930601967c8a40c1ec9f8/da8f3/unity-create-animation-from-sprite-sheet.webp 832w,\n/static/81e53ace2f4930601967c8a40c1ec9f8/28eb2/unity-create-animation-from-sprite-sheet.webp 1248w,\n/static/81e53ace2f4930601967c8a40c1ec9f8/dcb2d/unity-create-animation-from-sprite-sheet.webp 1664w,\n/static/81e53ace2f4930601967c8a40c1ec9f8/609d9/unity-create-animation-from-sprite-sheet.webp 2128w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/webp"\n />\n <source\n srcset="/static/81e53ace2f4930601967c8a40c1ec9f8/3697c/unity-create-animation-from-sprite-sheet.png 208w,\n/static/81e53ace2f4930601967c8a40c1ec9f8/e3e0f/unity-create-animation-from-sprite-sheet.png 416w,\n/static/81e53ace2f4930601967c8a40c1ec9f8/283d3/unity-create-animation-from-sprite-sheet.png 832w,\n/static/81e53ace2f4930601967c8a40c1ec9f8/b19d7/unity-create-animation-from-sprite-sheet.png 1248w,\n/static/81e53ace2f4930601967c8a40c1ec9f8/fe2bb/unity-create-animation-from-sprite-sheet.png 1664w,\n/static/81e53ace2f4930601967c8a40c1ec9f8/b1b41/unity-create-animation-from-sprite-sheet.png 2128w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/81e53ace2f4930601967c8a40c1ec9f8/283d3/unity-create-animation-from-sprite-sheet.png"\n alt="Unity Assets folder structure"\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",i.createElement(t.p,null,"Now you can use your sprites as usual, directly from the editor."),"\n",i.createElement(t.p,null,"You can, of course, also access the sprite through the scripting API:"),"\n",i.createElement(t.ul,null,"\n",i.createElement(t.li,null,i.createElement(t.a,{href:"https://docs.unity3d.com/ScriptReference/Sprite.html"},"Sprite")),"\n",i.createElement(t.li,null,i.createElement(t.a,{href:"https://docs.unity3d.com/ScriptReference/Texture2D.html"},"Texture2D")),"\n"),"\n",i.createElement(t.h2,{id:"enhancing-unitys-render-performance-by-minimizing-draw-calls",style:{position:"relative"}}
1,"Enhancing Unity's Render Performance by Minimizing Draw Calls",i.createElement(t.a,{href:"#enhancing-unitys-render-performance-by-minimizing-draw-calls","aria-label":"enhancing unitys render performance by minimizing draw calls permalink",className:"anchor after"},i.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",i.createElement(t.p,null,"The efficiency of your game's rendering performance largely depends on the quantity of draw calls required to render a scene.\nThe ability to process more draw calls in a batch results in a noticeable performance boost."),"\n",i.createElement(t.p,null,"When individual sprites or UI images are added to a scene, each creates a separate draw call, which is not optimal for performance:"),"\n",i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<figure class="gatsby-resp-image-figure" style="">\n <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: 60.57692307692308%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAABYlAAAWJQFJUiTwAAACM0lEQVR42p2SW1PaUBSF+SdVwWAICQFBBSqB4IyEXABRO9r2pRcdi1ZHuYRQbP/5151Iq+NDH/qwZp3kzPn23uuclKZpGIYhypPd3GBLSYun2Uyvo2TWyaTXZL325BtPnk6/QVEy5PM6uq6vzhvErNTWVhZVK6BtW2S3m+RE2ZKFKt9KsYlait1K9jOmJfuyV2pQ3mvidh0sq4Ft2zidQ2rVKikls4FWaVPoLWn1Jux4Uw4HD1T9Kd0j8WCG07/H8CP6J2N25L8eLNkbjHGOzml2h7T9UzrD91Tr+6Ti8bSyAL2Q8dUS+yjk5lLgxxFXF0sOTyNGl49ozpTp6JGdfoTuRQK8p//uA/7pR9zhGW3vmN3a2z9AW4BzDvwRFX/CvjvCdKUbZyQdSZfda3R3Rs25oujPKfgLyrI+6A5Ex9jOkGptn6JZeAEMIlRvjCEjazKW6c/QE4XkRLoUzCceJePnxfVuiCoqBI+Src2mXGICzAnQDBZJdVNUlANmso6oBxP2pEDdH1OWAlYwlnwnWP49lV5Ip3cnZyWSygGKvJK/HcZAcwV8gs7R3Dl3FwtOzkOuv0TYwxnfvi4YnIV8/rSgJXl/v/whEy3Jy8X+ExjLkDE7vRsawQOt4JZd6azp31J3b7Hk5ne9BxreCKP3M2G8ALYx5dkk0FdSvUmSY5xfnF2ylrzzcc4rL/Z/vR65JR2FmHIhr1V0V+49e/H1voCfO8wqqDkNVS/9n/IrF0ZWUfgN4RayiEvqmkIAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/1e4ac8e529405aa24a37ca776ecc80eb/b4f21/not-using-sprite-sheets%402x.avif 208w,\n/static/1e4ac8e529405aa24a37ca776ecc80eb/a7f15/not-using-sprite-sheets%402x.avif 416w,\n/static/1e4ac8e529405aa24a37ca776ecc80eb/01fa0/not-using-sprite-sheets%402x.avif 832w,\n/static/1e4ac8e529405aa24a37ca776ecc80eb/acbef/not-using-sprite-sheets%402x.avif 1248w,\n/static/1e4ac8e529405aa24a37ca776ecc80eb/6ba7a/not-using-sprite-sheets%402x.avif 1664w,\n/static/1e4ac8e529405aa24a37ca776ecc80eb/e5b54/not-using-sprite-sheets%402x.avif 2310w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/avif"\n /><source\n srcset="/static/1e4ac8e529405aa24a37ca776ecc80eb/6abcd/not-using-sprite-sheets%402x.webp 208w,\n/static/1e4ac8e529405aa24a37ca776ecc80eb/69edf/not-using-sprite-sheets%402x.webp 416w,\n/static/1e4ac8e529405aa24a37ca776ecc80eb/da8f3/not-using-sprite-sheets%402x.webp 832w,\n/static/1e4ac8e529405aa24a37ca776ecc80eb/28eb2/not-using-sprite-sheets%402x.webp 1248w,\n/static/1e4ac8e529405aa24a37ca776ecc80eb/dcb2d/not-using-sprite-sheets%402x.webp 1664w,\n/static/1e4ac8e529405aa24a37ca776ecc80eb/8ac9c/not-using-sprite-sheets%402x.webp 2310w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/webp"\n />\n <source\n srcset="/static/1e4ac8e529405aa24a37ca776ecc80eb/3697c/not-using-sprite-sheets%402x.png 208w,\n/static/1e4ac8e529405aa24a37ca776ecc80eb/e3e0f/not-using-sprite-sheets%402x.png 416w,\n/static/1e4ac8e529405aa24a37ca776ecc80eb/283d3/not-using-sprite-sheets%402x.png 832w,\n/static/1e4ac8e529405aa24a37ca776ecc80eb/b19d7/not-using-sprite-sheets%402x.png 1248w,\n/static/1e4ac8e529405aa24a37ca776ecc80eb/fe2bb/not-using-sprite-sheets%402x.png 1664w,\n/static/1e4ac8e529405aa24a37ca776ecc80eb/fc664/not-using-sprite-sheets%402x.png 2310w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/1e4ac8e529405aa24a37ca776ecc80eb/283d3/not-using-sprite-sheets%402x.png"\n alt="This is bad: Adding single sprites increases the number of draw calls"\n title="This is bad: Adding single sprites increases the number of draw calls"\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 <figcaption class="gatsby-resp-image-figcaption">This is bad: Adding single sprites increases the number of draw calls</figcaption>\n </figure>'}}),"\n",i.createElement(t.p,null,"Alternatively, rendering using a sprite sheet created with TexturePacker significantly optimizes this process by batch rendering.\nConsequently, the number of draw calls is dramatically reduced to just one:"),"\n",i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<figure class="gatsby-resp-image-figure" style="">\n <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: 60.57692307692308%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAABYlAAAWJQFJUiTwAAACOklEQVR42pWTa1PaQBSG+SlVgZB7EJBAoQh0BsPmQrmUimhHBcdehkJJAAnan/72ZIPOOG0/9MM7z+7m7Ltnz8kmFEWBruvQNRWZ9BFEIQWBlEoeQkgdEQ+QpnHqiBTNIx6+odgUNE3jew3D4JIkCQkhnUZG1iEXmsgc1yEdn0LSKpCJgl6DnKsjo1eJp5C1t1CJYq6BfLkBh1movaui2WiAtS2YpkmGdKqcb0B2HtG9CGEP1phOnlDx1vh8vUO1s8btzQ4lb4PFlyfknQ1UijV7K7S6I9TYAO+9c5z1xjgxy7Ghkqes7BDj8yWs/grDT0sUyGByGcB0A1yNAxRtH93BHIa3hWY/oPRhjs5wBGdwgXZ3iCbrolAs7TOkaxjuDpr1A1J7AZ3NobIlzWdQiCqt6/aK1sjQeYDuhMhbX9G0eqhbfdIAZrkCTVViQ4nqZLghBW5iUQaGG23cErd7hpx8TKaqvYXMiCwugURlS1Kz9hnGhlHgs9SWD8PeQGstkWVrTsNe49iKWfEClJwAWnSA90R9aNIfcPCnYZaf/oC7my3K7gp3tyGqtPl+EvJ6+vchis4K36dbnH2kLNsbZL1H3th/G1JG00sfRXeNy5GPE+IVseBu0O/PkPNCWO43mq/i8vzVkBa5KRd1sj2jA+g69iImW/BvMvuJLH0XHSoD1ZvHd37x/zg2TCehRF2muhgseJHG/D2DV3xW9mXs85splGH0ohJpeilCRoQgqf8n8fU8I4pIJpP4DZeKsb0TGnI6AAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/b12bd0ce8a23f12e44250035cf768dd5/b4f21/using-sprite-sheets%402x.avif 208w,\n/static/b12bd0ce8a23f12e44250035cf768dd5/a7f15/using-sprite-sheets%402x.avif 416w,\n/static/b12bd0ce8a23f12e44250035cf768dd5/01fa0/using-sprite-sheets%402x.avif 832w,\n/static/b12bd0ce8a23f12e44250035cf768dd5/acbef/using-sprite-sheets%402x.avif 1248w,\n/static/b12bd0ce8a23f12e44250035cf768dd5/6ba7a/using-sprite-sheets%402x.avif 1664w,\n/static/b12bd0ce8a23f12e44250035cf768dd5/8dea4/using-sprite-sheets%402x.avif 2314w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/avif"\n /><source\n srcset="/static/b12bd0ce8a23f12e44250035cf768dd5/6abcd/using-sprite-sheets%402x.webp 208w,\n/static/b12bd0ce8a23f12e44250035cf768dd5/69edf/using-sprite-sheets%402x.webp 416w,\n/static/b12bd0ce8a23f12e44250035cf768dd5/da8f3/using-sprite-sheets%402x.webp 832w,\n/static/b12bd0ce8a23f12e44250035cf768dd5/28eb2/using-sprite-sheets%402x.webp 1248w,\n/static/b12bd0ce8a23f12e44250035cf768dd5/dcb2d/using-sprite-sheets%402x.webp 1664w,\n/static/b12bd0ce8a23f12e44250035cf768dd5/5dd87/using-sprite-sheets%402x.webp 2314w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/webp"\n />\n <source\n srcset="/static/b12bd0ce8a23f12e44250035cf768dd5/3697c/using-sprite-sheets%402x.png 208w,\n/static/b12bd0ce8a23f12e44250035cf768dd5/e3e0f/using-sprite-sheets%402x.png 416w,\n/static/b12bd0ce8a23f12e44250035cf768dd5/283d3/using-sprite-sheets%402x.png 832w,\n/static/b12bd0ce8a23f12e44250035cf768dd5/b19d7/using-sprite-sheets%402x.png 1248w,\n/static/b12bd0ce8a23f12e44250035cf768dd5/fe2bb/using-sprite-sheets%402x.png 1664w,\n/static/b12bd0ce8a23f12e44250035cf768dd5/934df/using-sprite-sheets%402x.png 2314w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/b12bd0ce8a23f12e44250035cf768dd5/283d3/using-sprite-sheets%402x.png"\n alt="This is good: Using sprites reduces draw calls by batching the rendering of the sprites"\n title="This is good: Using sprites reduces draw calls by batching the rendering of the sprites. Note that TexturePacker also decreased the number of Triangles (Tris) and Vertices (Verts)"\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 <figcaption class="gatsby-resp-image-figcaption">This is good: Using sprites reduces draw calls by batching the rendering of the sprites. Note that TexturePacker also decreased the number of Triangles (Tris) and Vertices (Verts)</figcaption>\n </figure>'}}),"\n",i.createElement(t.p,null,"Worth noting is TexturePacker's ability to decrease the number of triangles and vertices (in this example, a tracer tolerance of 600 was used)."),"\n",i.createElement(t.ul,null,"\n",i.createElement(t.li,null,"Without TexturePacker: Unity has 138 triangles, 154 vertices"),"\n",i.createElement(t.li,null,"With TexturePacker: Reduced to 74 triangles, 94 vertices"),"\n"),"\n",i.createElement(t.p,null,"This gives you full control over the rendering process."),"\n",i.createElement(t.h2,{id:"pivot-point-editor",style:{position:"relative"}}
1,"Pivot point editor",i.createElement(t.a,{href:"#pivot-point-editor","aria-label":"pivot point editor permalink",className:"anchor after"},i.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",i.createElement(t.p,null,"TexturePacker contains an easy to use pivot point editor with real time animation preview."),"\n",i.createElement(t.p,null,"Select your sprites in the left panel and click on ",i.createElement(t.strong,null,"Sprite settings")," in the top\ntoolbar.\nPivot points are represented by a circle. You can select multiple shapes and move all pivot points\nat once."),"\n",i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<figure class="gatsby-resp-image-figure" style="">\n <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: 57.692307692307686%; position: relative; bottom: 0; left: 0; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/8d237ae2871b490a7d510af520551c8a/b4f21/pivot-point-editor-and-animation-preview%402x.avif 208w,\n/static/8d237ae2871b490a7d510af520551c8a/a7f15/pivot-point-editor-and-animation-preview%402x.avif 416w,\n/static/8d237ae2871b490a7d510af520551c8a/01fa0/pivot-point-editor-and-animation-preview%402x.avif 832w,\n/static/8d237ae2871b490a7d510af520551c8a/acbef/pivot-point-editor-and-animation-preview%402x.avif 1248w,\n/static/8d237ae2871b490a7d510af520551c8a/6ba7a/pivot-point-editor-and-animation-preview%402x.avif 1664w,\n/static/8d237ae2871b490a7d510af520551c8a/d0649/pivot-point-editor-and-animation-preview%402x.avif 3302w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/avif"\n /><source\n srcset="/static/8d237ae2871b490a7d510af520551c8a/6abcd/pivot-point-editor-and-animation-preview%402x.webp 208w,\n/static/8d237ae2871b490a7d510af520551c8a/69edf/pivot-point-editor-and-animation-preview%402x.webp 416w,\n/static/8d237ae2871b490a7d510af520551c8a/da8f3/pivot-point-editor-and-animation-preview%402x.webp 832w,\n/static/8d237ae2871b490a7d510af520551c8a/28eb2/pivot-point-editor-and-animation-preview%402x.webp 1248w,\n/static/8d237ae2871b490a7d510af520551c8a/dcb2d/pivot-point-editor-and-animation-preview%402x.webp 1664w,\n/static/8d237ae2871b490a7d510af520551c8a/e3bfb/pivot-point-editor-and-animation-preview%402x.webp 3302w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/webp"\n />\n <source\n srcset="/static/8d237ae2871b490a7d510af520551c8a/3697c/pivot-point-editor-and-animation-preview%402x.png 208w,\n/static/8d237ae2871b490a7d510af520551c8a/e3e0f/pivot-point-editor-and-animation-preview%402x.png 416w,\n/static/8d237ae2871b490a7d510af520551c8a/283d3/pivot-point-editor-and-animation-preview%402x.png 832w,\n/static/8d237ae2871b490a7d510af520551c8a/b19d7/pivot-point-editor-and-animation-preview%402x.png 1248w,\n/static/8d237ae2871b490a7d510af520551c8a/fe2bb/pivot-point-editor-and-animation-preview%402x.png 1664w,\n/static/8d237ae2871b490a7d510af520551c8a/d6c51/pivot-point-editor-and-animation-preview%402x.png 3302w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/8d237ae2871b490a7d510af520551c8a/283d3/pivot-point-editor-and-animation-preview%402x.png"\n alt="Edit your sprite's pivot points while observing the changes in the animation preview window"\n title="Edit your sprite's pivot points while observing the changes in the animation preview window"\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 <figcaption class="gatsby-resp-image-figcaption">Edit your sprite's pivot points while observing the changes in the animation preview window</figcaption>\n </figure>'}}),"\n",i.createElement(t.p,null,"Use ",i.createElement(t.strong,null,"Preview Anims")," from the top toolbar to see an animation of the selected\nsprites. Changes to the pivot points are updated while you edit them."),"\n",i.createElement(t.p,null,"The right panel contains edits to set the pivot points in absolute and\nrelative coordinates. The relative coordinates use the range of 0-1 where\n0/0 is in the bottom left of the sprite."),"\n",i.createElement(t.p,null,"The ",i.createElement(t.strong,null,"Predefined")," combo-box lets you choose from the standard positions in the\ncorners and center of the sprite."),"\n",i.createElement(t.p,null,"You can also set the default values for new sprites by clicking the arrow button on the right panel."),"\n",i.createElement(t.h2,{id:"border-editor-for-9-slicing",style:{position:"relative"}}
1,"Border editor for 9-slicing",i.createElement(t.a,{href:"#border-editor-for-9-slicing","aria-label":"border editor for 9 slicing permalink",className:"anchor after"},i.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",i.createElement(t.p,null,"TexturePacker also supports editing of sprite borders for ",i.createElement(t.strong,null,"9-slicing")," (also known as 9-patch or 3-patch sprites)."),"\n",i.createElement(t.p,null,"You can use this feature to create scalable buttons, bars and other objects with a defined stretch."),"\n",i.createElement(t.p,null,"A sprite is cut into 3 (x ",i.createElement("em",null,"or")," y direction) or 9 parts (x ",i.createElement("em",null,"and")," y direction).\nThe parts of the sprite in the corners are fixed. The others stretch when the sprite is resized."),"\n",i.createElement(p,{className:"w-2/3 sm:w-1/3 lg:w-1/3 mx-auto"}),"\n",i.createElement(t.p,null,"You can enable the border setting for individual sprites from the ",i.createElement(t.strong,null,"Sprite settings"),"\nin the top toolbar."),"\n",i.createElement(t.p,null,"Drag the green lines to separate the 9 segments for a 9-sliced sprite.\nMove the unused lines to the top/bottom or left/right to create 3-sliced sprites."),"\n",i.createElement(t.h2,{id:"enabling-mesh-rendering-in-unity-ui",style:{position:"relative"}},"Enabling Mesh rendering in Unity UI",i.createElement(t.a,{href:"#enabling-mesh-rendering-in-unity-ui","aria-label":"enabling mesh rendering in unity ui permalink",className:"anchor after"},i.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",i.createElement(t.p,null,"The UI classes of Unity ignore the polygon mesh information by default and simply use rectangular sprites.\nThe result is that you can see some artifacts from other sprites with polygon packing enabled."),"\n",i.createElement(t.p,null,"The simple solution to get rid of these artifacts\nis to set ",i.createElement(t.a,{href:"https://docs.unity3d.com/Packages/[email protected]/api/UnityEngine.UI.Image.html#UnityEngine_UI_Image_useSpriteMesh"},i.createElement(t.code,null,"useSpriteMesh"))," to ",i.createElement(t.code,null,"true"),"."),"\n",i.createElement(t.h2,{id:"updating-pivot-points-and-sizes-in-ui-image-objects",style:{position:"relative"}},"Updating pivot points and sizes in UI Image objects",i.createElement(t.a,{href:"#updating-pivot-points-and-sizes-in-ui-image-objects","aria-label":"updating pivot points and sizes in ui image objects permalink",className:"anchor after"},i.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",i.createElement(t.p,null,"Unity automatically copies parts of the sprite properties into the UI image on creation.\nThe problem is that Unity does not copy all values â and even worse â it does\nnot update the values when the sprite details like pivot point or size change."),"\n",i.createElement(t.p,null,"We've added a small tool that helps you update the UI Image objects.\nYou can find it in the UI context menu. It's called ",i.createElement(t.strong,null,"Set Native Size + Pivot")," :"),"\n",i.createElement("div",{className:"mx-auto max-w-lg"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<figure class="gatsby-resp-image-figure" style="">\n <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: 144.71153846153845%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAdCAYAAACqhkzFAAAACXBIWXMAABYlAAAWJQFJUiTwAAAC8ElEQVR42qWVyW/TUBDG86cg1FZpSSCJ4yVribPZztKsTbMWlWwtPfWAxCYunIrUC2eOCPFXfswM2DJUSYk5fHrxi/1737yZeS+Uy+VgGAai0ShUVYVpmiJFURAOh3F4eLhR/P/BwQH29vY8hWq1GlitVgvtdhu9Xk+ei8Xig+KFj4+PkU6nPYXi8bhMnp6eCvDk5ASVSgXZbBbs/l+Uz+c9hVKplEyyq7OzMziOIzCWruuyHSx+9n+4SaFYLCYf2raNwWAgo+3YGI5G0FQNuqZ5YF78IYUikYh8wC55gn/zFtTrdVmxUCjQfBoagV232xTi7PpfTiaTKJfLmEwmaDabsq+8QCAgO3SB0+kU7VZbntn1fwGrlSpWq5VknGG6bgQPmX/z3rFLHjlc3l9/xgMBKwTkeuRycucDh8wgDnlNkq4xi14FBAaez86pFocC4fC5rQIDq1ULi+UKzwt0SCQ1KvQaATNBgQqsQgrzaR957SlSsTBskxrf0OQ08nfMdiC/ZOiI63koo1uUrr9iv/UJj+ofYZzfQTebKJnPpYQ4Cpb2uy39zn0OfwEVIwel+waFi1vEex+wb93gSe0G2rGN2XQMh5LU6XTkdLIs6x70z7Ihl6qqoEohvxh1MO7VUc5rSCsRCZnbsd/vo1QqSW26idoMJEmb0ZjOZEU6OU8oSfl4sVhgPB6TM1v2MJvJeDW6EehBac6d55EBs9lMDgwOlUPm0LkJOFlbgX/LdbBar9ElCN83/kLfGvImIAOmk6m4ZFdKInEv2zsBeeQj7fLyUtqRu8ehgreqVVnMfWcnh+PRGPP5XDLt0FXBe9hoNCRhgYB85wyHQ4HYPmCGsr0TUNc1KZ/lck33dh+xuAJVo4Woa9xxxz3UkdVjGHXpqu3W0amXkUnS5RY/Qko5QjoZ2QVI5aGp0n6N198xePsNg3c/kHn5BanZZ0SHd3hce7+bQ4NejpgjRO0rxOwlnlkk5wqJ2itEnGuEzQvvcPgJ1+TgvqmQ2UYAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/04551f5ec5b2f2d8e8947fc4b51bf30a/b4f21/apply-pivot-point-and-sizes-to-unity-ui-image.avif 208w,\n/static/04551f5ec5b2f2d8e8947fc4b51bf30a/a7f15/apply-pivot-point-and-sizes-to-unity-ui-image.avif 416w,\n/static/04551f5ec5b2f2d8e8947fc4b51bf30a/01fa0/apply-pivot-point-and-sizes-to-unity-ui-image.avif 832w,\n/static/04551f5ec5b2f2d8e8947fc4b51bf30a/19923/apply-pivot-point-and-sizes-to-unity-ui-image.avif 1085w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/avif"\n /><source\n srcset="/static/04551f5ec5b2f2d8e8947fc4b51bf30a/6abcd/apply-pivot-point-and-sizes-to-unity-ui-image.webp 208w,\n/static/04551f5ec5b2f2d8e8947fc4b51bf30a/69edf/apply-pivot-point-and-sizes-to-unity-ui-image.webp 416w,\n/static/04551f5ec5b2f2d8e8947fc4b51bf30a/da8f3/apply-pivot-point-and-sizes-to-unity-ui-image.webp 832w,\n/static/04551f5ec5b2f2d8e8947fc4b51bf30a/b3b9b/apply-pivot-point-and-sizes-to-unity-ui-image.webp 1085w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/webp"\n />\n <source\n srcset="/static/04551f5ec5b2f2d8e8947fc4b51bf30a/3697c/apply-pivot-point-and-sizes-to-unity-ui-image.png 208w,\n/static/04551f5ec5b2f2d8e8947fc4b51bf30a/e3e0f/apply-pivot-point-and-sizes-to-unity-ui-image.png 416w,\n/static/04551f5ec5b2f2d8e8947fc4b51bf30a/283d3/apply-pivot-point-and-sizes-to-unity-ui-image.png 832w,\n/static/04551f5ec5b2f2d8e8947fc4b51bf30a/44867/apply-pivot-point-and-sizes-to-unity-ui-image.png 1085w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/04551f5ec5b2f2d8e8947fc4b51bf30a/283d3/apply-pivot-point-and-sizes-to-unity-ui-image.png"\n alt="Apply pivot points and sizes to Unity UI Image"\n title="Updating pivot points and image sizes in UI.Image in Unity"\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 <figcaption class="gatsby-resp-image-figcaption">Updating pivot points and image sizes in UI.Image in Unity</figcaption>\n </figure>'}})),"\n",i.createElement(t.h2,{id:"how-can-i-access-a-sprite-on-a-sprite-sheet-from-code",style:{position:"relative"}},"How can I access a sprite on a sprite sheet from code?",i.createElement(t.a,{href:"#how-can-i-access-a-sprite-on-a-sprite-sheet-from-code","aria-label":"how can i access a sprite on a sprite sheet from code permalink",className:"anchor after"},i.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",i.createElement(t.p,null,"If you place a sprite on a sprite sheet, it becomes a sub-asset of the sheet's texture and cannot be loaded\nseparately like ",i.createElement(t.code,null,'Resources.Load<Sprite>("sprite01")'),".\nOne advantage of a sprite sheet is to improve speed by loading all sprites in a bunch instead of reading each file separately."),"\n",i.createElement(t.p,null,"Unity supports three ways to access the sprites of a sheet from code:"),"\n",i.createElement(t.ul,null,"\n",i.createElement(t.li,null,i.createElement(t.strong,null,"Addressables")," â the most modern technique, recommended for new projects"),"\n",i.createElement(t.li,null,i.createElement(t.strong,null,"Resources")," â the simplest way, no additional package required"),"\n",i.createElement(t.li,null,i.createElement(t.strong,null,"AssetBundles")," â the low-level way to load sprite sheets from asset archives"),"\n"),"\n",i.createElement(t.h2,{id:"load-sprites-with-addressables",style:{position:"relative"}}
1,"Loading sprites with Addressables",i.createElement(t.a,{href:"#load-sprites-with-addressables","aria-label":"load sprites with addressables permalink",className:"anchor after"},i.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",i.createElement(t.p,null,"The Addressables system is not built into Unity â you first have to install the ",i.createElement(t.strong,null,"Addressables"),"\npackage with the Package Manager (",i.createElement(t.strong,null,"Window â Package Management â Package Manager"),")."),"\n",i.createElement(t.p,null,"Mark your sprite sheet as addressable by enabling the ",i.createElement(t.strong,null,"Addressable")," checkbox in the Inspector, and assign it\na short address such as ",i.createElement(t.em,null,"my_sheet"),". The sheet can be located anywhere inside your\n",i.createElement("span",{className:"caw-filename"},"Assets")," folder â it's not bound to a ",i.createElement(t.strong,null,"Resources")," folder."),"\n",i.createElement(t.p,null,"Using the sub-asset syntax you can load a single sprite directly by name:"),"\n",i.createElement(t.pre,null,i.createElement(t.code,{className:"language-csharp"},'using UnityEngine.AddressableAssets;\n\nvar handle = Addressables.LoadAssetAsync<Sprite>("my_sheet[sprite01]");\nSprite sprite = handle.WaitForCompletion();\n\n// ... use the sprite ...\n\nAddressables.Release(handle);\n')),"\n",i.createElement(t.p,null,"You can also load all sprites of the sheet at once:"),"\n",i.createElement(t.pre,null,i.createElement(t.code,{className:"language-csharp"},'IList<Sprite> sprites = Addressables.LoadAssetAsync<IList<Sprite>>("my_sheet").WaitForCompletion();\n')),"\n",i.createElement(t.p,null,"Addressables use reference counting: the sheet's texture is loaded only once, no matter how many of its\nsprites you request â additional loads just return a reference to the already loaded sheet. Release each\nhandle with ",i.createElement(t.code,null,"Addressables.Release()")," when the sprite is no longer needed."),"\n",i.createElement(t.p,null,"In the Editor, Addressables work out of the box; for standalone builds you have to build the Addressables\ncontent first â see\n",i.createElement(t.a,{href:"https://docs.unity3d.com/Packages/[email protected]/manual/build-player-builds.html"},"Build Addressables content with Player builds"),"\nfor details."),"\n",i.createElement(t.h2,{id:"load-sprites-from-resources",style:{position:"relative"}},"Loading sprites from the Resources folder",i.createElement(t.a,{href:"#load-sprites-from-resources","aria-label":"load sprites from resources permalink",className:"anchor after"},i.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",i.createElement(t.p,null,"The simplest way â without installing any additional package â is Unity's ",i.createElement(t.code,null,"Resources")," class:\nCalling ",i.createElement(t.code,null,'Resources.LoadAll<Sprite>("my_spritesheet")')," loads the sprite\nsheet file and gives you access to all sprites which are on it."),"\n",i.createElement(t.p,null,"It's a deficiency of the Unity API that ",i.createElement(t.code,null,"Resources.LoadAll<Sprite>")," returns an array instead of a dictionary.\nSo you have to iterate over the ",i.createElement(t.code,null,"Sprite[]")," and compare the sprite names to find a specific sprite."),"\n",i.createElement(t.p,null,"The even better solution might be to construct a dictionary yourself:"),"\n",i.createElement(t.pre,null,i.createElement(t.code,{className:"language-csharp"},'Sprite[] sprites = Resources.LoadAll<Sprite>("my_spritesheet");\nDictionary<string, Sprite> spritesDict = new Dictionary<string, Sprite>();\n\nforeach (Sprite sprite in sprites)\n{\n spritesDict[sprite.name] = sprite;\n}\n\n...\n\nsprite1 = spritesDict["sprite01"];\n')),"\n",i.createElement(t.p,null,"Please keep in mind that you have to place your sprite sheet in a ",i.createElement(t.strong,null,"Resources")," folder to be able to load it\nwith the methods of the ",i.createElement(t.code,null,"Resources")," class. For details have a look at\nUnity's ",i.createElement(t.a,{href:"https://docs.unity3d.com/ScriptReference/Resources.html"},"Resources documentation"),"."),"\n",i.createElement(t.h2,{id:"sprite-sheets-from-asset-bundle",style:{position:"relative"}}
1,"Load sprite sheets from AssetBundles",i.createElement(t.a,{href:"#sprite-sheets-from-asset-bundle","aria-label":"sprite sheets from asset bundle permalink",className:"anchor after"},i.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",i.createElement(t.p,null,"In Unity an AssetBundle is an archive file containing assets which can be loaded at runtime.\nIf you have added sprite sheets to Asset Bundles you can load them in this way:"),"\n",i.createElement(t.pre,null,i.createElement(t.code,{className:"language-csharp"},'AssetBundle bundle = AssetBundle.LoadFromFile("Assets/AssetBundles/MyBundle");\nif (bundle != null)\n{\n Sprite[] sprites = bundle.LoadAssetWithSubAssets<Sprite>("MySpriteSheet");\n ...\n}\n')),"\n",i.createElement(t.p,null,"To access the sprites by name you can use a dictionary as explained in the previous section."),"\n",i.createElement(t.h2,{id:"summary",style:{position:"relative"}},"Summary",i.createElement(t.a,{href:"#summary","aria-label":"summary permalink",className:"anchor after"},i.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",i.createElement(t.p,null,"TexturePacker simplifies the workflow for creating a Sprite Atlas in Unity â automating the whole process."),"\n",i.createElement(t.p,null,"Changing your sprites is quite simple:"),"\n",i.createElement(t.ul,null,"\n",i.createElement(t.li,null,"Save the new sprites in your assets folder"),"\n",i.createElement(t.li,null,"Press ",i.createElement(t.strong,null,"Export sprite sheet")," in TexturePacker"),"\n",i.createElement(t.li,null,"Switch to Unity and use your sprites"),"\n"),"\n",i.createElement(t.p,null,"Using a Sprite Atlas reduces draw calls and increases the performance of your game. Combined with TexturePacker's optimized sprite meshes, you get the best possible rendering performance."))}var g=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.R)(),e.components);return t?i.createElement(t,e,i.createElement(h,e)):h(e)},f=a(11042),b=a(77891),y=a(74110);function w(e){let{data:t,pageContext:a,children:n}=e;const s=a.pageData,r=t.mdx,l=r.tableOfContents,c=r.frontmatter.noTitleImage?null:r.frontmatter.image;return i.createElement(b.W,null,i.createElement(y.n,{pageData:s,image:c,onPageItems:l.items},n))}function v(e){return i.createElement(w,e,i.createElement(g,e))}const E=e=>{let{pageContext:t}=e;return i.createElement(i.Fragment,null,i.createElement(f.A,{pageData:t.pageData}))}},85742:function(e,t,a){a.d(t,{T:function(){return c}});var n=a(96540),i=a(72933),s=a(93625),r=a(94296);const l=[n.createElement(n.Fragment,null,"Works with ",n.createElement("strong",null,"30+ game engines")),n.createElement(n.Fragment,null,"Best-in-class ",n.createElement("strong",null,"PNG compression")),n.createElement(n.Fragment,null,"Full ",n.createElement("strong",null,"command line automation")),n.createElement(n.Fragment,null,n.createElement("strong",null,"Free version")," with essential features"),n.createElement(n.Fragment,null,"Free ",n.createElement("strong",null,"professional support"))],c=e=>{let{features:t=l}=e;return n.createElement(s.gH,null,n.createElement("div",{className:"text-2xl text-texturepacker-700 font-semibold"},"Need more than a basic sprite sheet tool?"),n.createElement("div",{className:"text-lg text-gray-800"},n.createElement("p",null,"Try TexturePacker â the most powerful sprite packing solution."),n.createElement("ul",{className:"space-y-2 text-gray-600 my-4"},t.map(((e,t)=>n.createElement("li",{key:t,className:"relative pl-9"},n.createElement("span",{className:"inline text-gray-800"},n.createElement(i.A,{"aria-hidden":"true",className:"absolute top-1 left-1 size-5 text-texturepacker-700"}
1),e)," "))))),n.createElement("div",{className:"flex justify-start"},n.createElement(r.f,{product:"texturepacker"})))}},93625:function(e,t,a){a.d(t,{$R:function(){return c},Kw:function(){return o},gH:function(){return l}});var n=a(96540),i=a(94296),s=a(32532),r=a(20221);const l=e=>{let{children:t}=e;return n.createElement("div",{className:"fixed inset-0 z-10 overflow-y-auto max-w-4xl mx-auto"},n.createElement("div",{className:"flex min-h-full justify-start p-4 items-center"},n.createElement("div",{className:"absolute top-0 py-16 right-0 w-2/3 md:w-1/2 h-screen flex justify-center items-center"},n.createElement(s.S,{className:"z-5 opacity-50 md:opacity-100 p-16",layout:"constrained",loading:"eager",placeholder:"blurred",backgroundColor:"white",src:"./[email protected]",alt:"",__imageData:a(55508)})),n.createElement("div",{className:"z-10 px-8 py-1 bg-linear-to-r from-white via-white w-full sm:w-2/3 md:w-1/2 max-h-screen flex flex-col space-y-4"},t)))},c=e=>{let{title:t,text:a}=e;return n.createElement(l,null,n.createElement("div",{className:"text-5xl text-texturepacker-600 font-semibold"},t),n.createElement("div",{className:"text-2xl text-gray-500 my-6"},a),n.createElement("div",{className:"flex justify-start"},n.createElement(i.f,{product:"texturepacker"})))};function o(e){let{name:t,variants:a}=e;const i=Object.keys(a),{0:s}=(0,n.useState)((()=>i[Math.floor(Math.random()*i.length)])),l=a[s],c=t+"-"+s;return n.createElement(r.H,{name:t,variant:c},l)}}}]);
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.