1"use strict";(self.webpackChunkcodeandweb=self.webpackChunkcodeandweb||[]).push([[17722],{3607:function(e,t,n){var l=n(82839).match(/AppleWebKit\/(\d+)\./);e.exports=!!l&&+l[1]},9961:function(e){e.exports=JSON.parse('{"layout":"constrained","backgroundColor":"#080808","images":{"fallback":{"src":"/static/85a6ae8955b94aaea302410c6196fec8/f8e6c/exporter-sourceRect%402x.png","srcSet":"/static/85a6ae8955b94aaea302410c6196fec8/f235b/exporter-sourceRect%402x.png 113w,\\n/static/85a6ae8955b94aaea302410c6196fec8/74eb0/exporter-sourceRect%402x.png 225w,\\n/static/85a6ae8955b94aaea302410c6196fec8/f8e6c/exporter-sourceRect%402x.png 450w","sizes":"(min-width: 450px) 450px, 100vw"},"sources":[{"srcSet":"/static/85a6ae8955b94aaea302410c6196fec8/fddd1/exporter-sourceRect%402x.webp 113w,\\n/static/85a6ae8955b94aaea302410c6196fec8/99ef7/exporter-sourceRect%402x.webp 225w,\\n/static/85a6ae8955b94aaea302410c6196fec8/8a24c/exporter-sourceRect%402x.webp 450w","type":"image/webp","sizes":"(min-width: 450px) 450px, 100vw"}]},"width":450,"height":600}')},13709:function(e,t,n){var l=n(82839).match(/firefox\/(\d+)/i);e.exports=!!l&&+l[1]},13763:function(e,t,n){var l=n(82839);e.exports=/MSIE|Trident/.test(l)},16668:function(e,t,n){var l=n(98587),a=n(96540);const r=["className"];t.A=e=>{let{className:t}=e,n=(0,l.A)(e,r);return a.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor"},n,{className:t||"inline-block h-4"})," ",a.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"}))}},16791:function(e){e.exports=JSON.parse('{"layout":"constrained","backgroundColor":"#080808","images":{"fallback":{"src":"/static/3511c12f840632abff76a236b97c0a9f/a51e8/exporter-frameRect%402x.png","srcSet":"/static/3511c12f840632abff76a236b97c0a9f/c7bae/exporter-frameRect%402x.png 254w,\\n/static/3511c12f840632abff76a236b97c0a9f/34a15/exporter-frameRect%402x.png 508w,\\n/static/3511c12f840632abff76a236b97c0a9f/a51e8/exporter-frameRect%402x.png 1016w","sizes":"(min-width: 1016px) 1016px, 100vw"},"sources":[{"srcSet":"/static/3511c12f840632abff76a236b97c0a9f/11cf2/exporter-frameRect%402x.webp 254w,\\n/static/3511c12f840632abff76a236b97c0a9f/d51a6/exporter-frameRect%402x.webp 508w,\\n/static/3511c12f840632abff76a236b97c0a9f/98610/exporter-frameRect%402x.webp 1016w","type":"image/webp","sizes":"(min-width: 1016px) 1016px, 100vw"}]},"width":1016,"height":600}')},26910:function(e,t,n){var l=n(46518),a=n(79504),r=n(79306),c=n(48981),i=n(26198),s=n(84606),o=n(655),m=n(79039),u=n(74488),d=n(34598),p=n(13709),h=n(13763),E=n(39519),f=n(3607),g=[],v=a(g.sort),x=a(g.push),y=m((function(){g.sort(void 0)})),b=m((function(){g.sort(null)})),w=d("sort"),S=!m((function(){if(E)return E<70;if(!(p&&p>3)){if(h)return!0;if(f)return f<603;var e,t,n,l,a="";for(e=65;e<76;
1e++){switch(t=String.fromCharCode(e),e){case 66:case 69:case 70:case 72:n=3;break;case 68:case 71:n=4;break;default:n=2}for(l=0;l<47;l++)g.push({k:t+l,v:n})}for(g.sort((function(e,t){return t.v-e.v})),l=0;l<g.length;l++)t=g[l].k.charAt(0),a.charAt(a.length-1)!==t&&(a+=t);return"DGBEFHACIJK"!==a}}));l({target:"Array",proto:!0,forced:y||!b||!w||!S},{sort:function(e){void 0!==e&&r(e);var t=c(this);if(S)return void 0===e?v(t):v(t,e);var n,l,a=[],m=i(t);for(l=0;l<m;l++)l in t&&x(a,t[l]);for(u(a,function(e){return function(t,n){return void 0===n?-1:void 0===t?1:void 0!==e?+e(t,n)||0:o(t)>o(n)?1:-1}}(e)),n=i(a),l=0;l<n;)t[l]=a[l++];for(;l<m;)s(t,l++);return t}})},33149:function(e,t,n){n.d(t,{A:function(){return p},w:function(){return d}});var l=n(54506),a=n(98587),r=n(96540),c=n(46942),i=n.n(c);const s=["to","children"];function o(e){let{to:t,children:n}=e,l=(0,a.A)(e,s);return r.createElement("a",Object.assign({href:t,onClick:e=>{e.preventDefault();const n=t.startsWith("#")?t.slice(1):t,l=document.getElementById(n);window.history.pushState(null,"","#"+n),l&&l.scrollIntoView({behavior:"smooth",block:"start"})}},l),n)}var m=e=>{let{items:t,title:n,maxDepth:l,activeItemHash:a,firstLevelBold:c}=e;const s=e=>{if(!e||0===e.length)return 0;let t=0;for(const n of e)t++,n.items&&n.items.length>0&&(t+=s(n.items));return t},m=(e,t)=>e&&e.filter((e=>e.url===t||m(e.items,t))).length>0,u=(e,t,n,l,a)=>e&&e.map(((e,c)=>{const s="NONE"===l?0===c&&1===t:e.url===l;return r.createElement("li",{key:"toc-"+(e.url||t+"-"+c)},e.url&&((e,t,n,l)=>{const a=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":l&&1===t,"pl-4":2===t,"pl-8":3===t}),{title:c,url:s}=n;return r.createElement(o,{className:a,to:s||"#"},r.createElement("span",{className:"block pl-2"},c))})(s,t,e,a),e.items&&((e,t)=>null===t||e<t)(t,n)&&(d||s||m(e.items,l))&&r.createElement("ul",null,u(e.items,t+1,n,l,a)))})),d=s(t)<20;return t?r.createElement("nav",{"aria-label":n||"On this page"},n&&r.createElement("h2",{className:"font-bold px-0 uppercase text-gray-800 mb-4 pl-2 border-l-4 border-transparent"},n),r.createElement("ul",null,u(t,1,l-1,a,c))):null};const u=["items","maxDepth"],d=e=>e.map((e=>Object.assign({},(e=>{let{url:t,title:n}=e;if(!n)return;const l=n.match(/(.*){(#.*)}/);return l&&(n=l[1],t=l[2]),n=n.replace(/<.*>/,""),{url:t,title:n}})(e),{items:e.items?d(e.items):void 0})));var p=e=>{let{items:t=[],maxDepth:n}=e,l=(0,a.A)(e,u);const{0:c,1:i}=(0,r.useState)(0),{0:s,1:o}=(0,r.useState)("NONE"),{0:p,1:f}=(0,r.useState)([]),{0:g}=(0,r.useState)(d(t)),v=()=>{const e=h(g,1,n),t=E(e);f(t)};(0,r.useEffect)((()=>{const e=p.find(((e,t)=>{const n=p[t+1];return n?window.scrollY>=e.offsetTop&&window.scrollY<n.offsetTop:window.scrollY>=e.offsetTop}));o(e?e.hash:"NONE")}),[p,c]);const x=(0,r.useCallback)((()=>{v()}),[v]),y=()=>i(window.scrollY);return(0,r.useEffect)((()=>(v(),window.addEventListener("resize",x),window.addEventListener("scroll",y),()=>{window.removeEventListener("resize",x),window.removeEventListener("scroll",y)})),[]),r.createElement(m,Object.assign({maxDepth:n,activeItemHash:s,items:g},l))};function h(e,t,n){return e.reduce(((e,a)=>{if(a.url){const t=a.url;e=[].concat((0,l.A)(e),[t])}return a.items&&t<n&&(e=[].concat((0,l.A)(e),(0,l.A)(h(a.items,t+1,n)))),e}),[])}const E=e=>{var t;const n=(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-n}:null})).filter((e=>e))}},34598:function(e,t,n){var l=n(79039);e.exports=function(e,t){var n=[][e];return!!n&&l((function(){n.call(null,t||function(){return 1},1)}))}},41092:function(e){e.exports=JSON.parse('{"layout":"constrained","backgroundColor":"#f8f8f8","images":{"fallback":{"src":"/static/9cece6df52b4548af5bb2b66d76b4386/a93b0/folderpath-preparations-export%402x.png","srcSet":"/static/9cece6df52b4548af5bb2b66d76b4386/65b99/folderpath-preparations-export%402x.png 321w,\\n/static/9cece6df52b4548af5bb2b66d76b4386/ffa7a/folderpath-preparations-export%402x.png 641w,\\n/static/9cece6df52b4548af5bb2b66d76b4386/a93b0/folderpath-preparations-export%402x.png 1282w","sizes":"(min-width: 1282px) 1282px, 100vw"},"sources":[{"srcSet":"/static/9cece6df52b4548af5bb2b66d76b4386/943a8/folderpath-preparations-export%402x.webp 321w,\\n/static/9cece6df52b4548af5bb2b66d76b4386/2e178/folderpath-preparations-export%402x.webp 641w,\\n/static/9cece6df52b4548af5bb2b66d76b4386/14eac/folderpath-preparations-export%402x.webp 1282w","type":"image/webp","sizes":"(min-width: 1282px) 1282px, 100vw"}]},"width":1282,"height":156.00000000000003}')},55283:function(e,t,n){n.r(t),n.d(t,{Head:function(){return g},default:function(){return f}});var l=n(28453),a=n(96540),r=n(32532);const c=e=>{let{alt:t,className:l}=e;return a.createElement(r.S,{alt:t,className:l,style:{maxWidth:"641px"},imgStyle:{objectFit:"contain"},src:"./[email protected]",__imageData:n(41092)})},i=e=>{let{alt:t,className:l}=e;return a.createElement(r.S,{alt:t,className:l,style:{maxWidth:"727px"},imgStyle:{objectFit:"contain"},src:"./[email protected]",__imageData:n(83059)})},s=e=>{let{alt:t,className:l}=e;return a.createElement(r.S,{alt:t,className:l,style:{maxWidth:"225px"},imgStyle:{objectFit:"contain"},src:"./[email protected]",__imageData:n(9961)})},o=e=>{let{alt:t,className:l}=e;return a.createElement(r.S,{alt:t,className:l,style:{maxWidth:"508px"},imgStyle:{objectFit:"contain"},src:"./[email protected]",__imageData:n(16791)})};function m(e){const t=Object.assign({h1:"h1",a:"a",span:"span",blockquote:"blockquote",p:"p",h3:"h3",ul:"ul",li:"li",strong:"strong",h2:"h2",em:"em",pre:"pre",code:"code",h4:"h4",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",ol:"ol",h5:"h5"},(0,l.R)(),e.components);return a.createElement(a.Fragment,null,a.createElement(t.h1,{id:"texturepackers-custom-exporter-format",style:{position:"relative"}}
1,"TexturePacker's custom exporter format",a.createElement(t.a,{href:"#texturepackers-custom-exporter-format","aria-label":"texturepackers custom exporter format permalink",className:"anchor after"},a.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",a.createElement(t.blockquote,null,"\n",a.createElement(t.p,null,"Custom Exporters have saved me dozens of hours. I can't function without TexturePacker.\n",a.createElement("small",null,"Richard Jarell")),"\n"),"\n",a.createElement(t.p,null,"TexturePacker comes with many different data output formats - both generic formats like JSON and\nXML, as well as platform-specific formats like Cocos2D, Sparrow, and others."),"\n",a.createElement(t.p,null,"However, sometimes these built-in formats aren't sufficient - either because your game framework\nrequires its own specific format, or because the existing formats don't meet your particular needs."),"\n",a.createElement(t.p,null,"The solution is to create your own custom format. This process is easier than you might\nthink - just follow the instructions below to get started."),"\n",a.createElement(t.h3,{id:"modifying-an-existing-exporter",style:{position:"relative"}},"Modifying an existing exporter",a.createElement(t.a,{href:"#modifying-an-existing-exporter","aria-label":"modifying an existing exporter permalink",className:"anchor after"},a.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",a.createElement(t.p,null,"Many of the exporters are available in the TexturePacker folder:"),"\n",a.createElement(t.ul,null,"\n",a.createElement(t.li,null,"Windows users look under ",a.createElement(t.strong,null,"C:/Program Files/CodeAndWeb/TexturePacker/resources/exporters")),"\n",a.createElement(t.li,null,"Mac users go to ",a.createElement(t.strong,null,"/Applications/TexturePacker.app/Contents/Resources/exporters")),"\n"),"\n",a.createElement(t.p,null,"The ",a.createElement(t.strong,null,"plain")," exporter may be a good starting point.\nMake sure to duplicate the exporter folder to somewhere outside TexturePacker's\ninstallation path and rename the folder and the exporter contents as shown below!"),"\n",a.createElement(t.h3,{id:"creating-a-new-exporter-from-scratch",style:{position:"relative"}},"Creating a new exporter from scratch",a.createElement(t.a,{href:"#creating-a-new-exporter-from-scratch","aria-label":"creating a new exporter from scratch permalink",className:"anchor after"},a.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",a.createElement(t.p,null,"That's of course possible too... but modifying an existing exporter is the recommended way."),"\n",a.createElement(t.h2,{id:"preparations-before-creating-your-own-exporter",style:{position:"relative"}}
1,"Preparations before creating your own exporter",a.createElement(t.a,{href:"#preparations-before-creating-your-own-exporter","aria-label":"preparations before creating your own exporter permalink",className:"anchor after"},a.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",a.createElement(t.p,null,"First, create a directory - it's the ",a.createElement(t.strong,null,"Exporter Directory")," that will contain\nall your custom exporters - e.g. ",a.createElement(t.strong,null,"my-TP-Exporters")," ."),"\n",a.createElement(t.p,null,"Now create a new subdirectory inside that directory - name it like the exporter you want\nto create - e.g. ",a.createElement(t.strong,null,"testexporter")," ."),"\n",a.createElement(t.p,null,"Your folder structure should now look like this:"),"\n",a.createElement(c,{alt:"TexturePacker Documentation: Custom exporter - folder structure preparations for export"}),"\n",a.createElement(t.p,null,"Set the path to your exporter directory ",a.createElement(t.em,null,"my-TP-Exporters")," in TexturePacker's preferences and then\nquit TexturePacker."),"\n",a.createElement(i,{alt:"TexturePacker Documentation: Custom exporter - Preferences"}),"\n",a.createElement(t.h2,{id:"structure-of-an-exporter",style:{position:"relative"}},"Structure of an exporter",a.createElement(t.a,{href:"#structure-of-an-exporter","aria-label":"structure of an exporter permalink",className:"anchor after"},a.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",a.createElement(t.p,null,"An exporter consists of 2 or more files:"),"\n",a.createElement(t.ul,null,"\n",a.createElement(t.li,null,"\n",a.createElement(t.p,null,a.createElement(t.strong,null,"exporter.xml")," - the file describing the\ncapabilities of the exporter"),"\n"),"\n",a.createElement(t.li,null,"\n",a.createElement(t.p,null,a.createElement(t.strong,null,"template.txt")," - the template for the output file\nformat"),"\n"),"\n"),"\n",a.createElement(t.p,null,"Optional:"),"\n",a.createElement(t.ul,null,"\n",a.createElement(t.li,null,a.createElement(t.strong,null,"filter.qs")," - one (or more) file(s) to extend the\ntemplate file with JavaScript"),"\n"),"\n",a.createElement(t.h2,{id:"exporter-description",style:{position:"relative"}},"The exporter description file",a.createElement(t.a,{href:"#exporter-description","aria-label":"exporter description permalink",className:"anchor after"},a.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",a.createElement(t.p,null,"Create an ",a.createElement(t.em,null,"exporter.xml")," inside your ",a.createElement(t.em,null,"testexporter")," directory, or use an ",a.createElement(t.em,null,"exporter.xml")," of an existing exporter\nas starting point"),"\n",a.createElement(t.p,null,"Here's an example file, containing descriptions for all supported elements:"),"\n",a.createElement(t.pre,null,a.createElement(t.code,{className:"language-xml"},'<exporter version="1.0"> \x3c!-- file format version, must be 1.0 --\x3e\n\n \x3c!-- Identifier for the exporter - should be unique.\n This value is stored when the exporter is referenced from a saved file (.tps).\n It is also used to select the exporter from command line.\n Change this if you\'ve duplicated an existing exporter --\x3e\n <name>testexporter</name>\n\n \x3c!-- Old exporter identifiers (optional); if a tps file with such an id is opened,\n its id is automatically changed to the one specified in <name> --\x3e\n <nameAlias>
1otherexporter</nameAlias>\n\n \x3c!-- Name of the exporter that is shown in the framework selector dialog --\x3e\n \x3c!-- Change this if you duplicated an existing exporter --\x3e\n <displayName>TestExporter</displayName>\n\n \x3c!-- A description of the exporter --\x3e\n <description>My first custom exporter for TexturePacker</description>\n\n \x3c!-- Exporter version --\x3e\n <version>1.0</version>\n\n <files>\n\n \x3c!-- A list of data files which should be generated during the publish process --\x3e\n <file>\n\n \x3c!-- name of this file type; used in the tps file\n and by the commandline client: for each MYDATA file\n a commandline option "- -MYDATA-file" is evaluated\n (remark: write the option without the blank between the "-" signs,\n it\'s required in the XML comment) --\x3e\n <name>mydata</name>\n\n \x3c!-- human-readable name (used in the TexturePacker GUI) --\x3e\n <displayName>MyDataFile</displayName>\n\n \x3c!-- file extension, without \'.\' --\x3e\n <fileExtension>txt</fileExtension>\n\n \x3c!-- description what the file contains,\n used for tooltips in the GUI (optional) --\x3e\n <description>My txt custom exporter for TexturePacker</description>\n\n \x3c!-- name of the template file --\x3e\n <template>testexporter.txt</template>
1\n\n \x3c!-- this file is optional, i.e. if the user does not specify an\n output file name, the file will not be generated;\n (optional, default is \'false\') --\x3e\n <optional>false</optional>\n\n \x3c!-- specifies for which scaling variant this data file is generated:\n all: for each variant (default)\n first: only for the first variant\n last: only for the last one --\x3e\n <hasSeparateAutoSDFiles>all</hasSeparateAutoSDFiles>\n\n \x3c!-- create a file for each multipack sheet\n (optional, default is \'true\') --\x3e\n <hasSeparateMultiPackFiles>true</hasSeparateMultiPackFiles>\n\n </file>\n\n \x3c!-- add more <file> ... </file> tags if you need more than one output file --\x3e\n </files>\n\n \x3c!-- the following elements show/hide the corresponding input fields --\x3e\n \x3c!-- in the TexturePacker user interface --\x3e\n\n \x3c!-- mandatory flags: --\x3e\n\n \x3c!-- Set this to true if the target framework supports trimmed sprites (sprites with\n transparency removed). TexturePacker delivers the offsets and size of the\n trimmed sprite to the template system. The user can still choose to disable\n trimming from the user interface. If supportsTrimming is set to false the option\n to enable trimming is not available in the user interface. --\x3e\n <supportsTrimming>true</supportsTrimming>\n\n \x3c!-- Set this to true if the target framework supports rotated sprites. The user can\n still decide not to enable rotated sprites from the user interface.\n If supportsRotation is set to false the option to enable sprite rotation is\n not available in the user interface. --\x3e\n <supportsRotation>true</supportsRotation>\n\n \x3c!-- The direction in which a sprite is rotated - if TexturePacker decides\n to rotate a sprite:\n cw: clockwise rotation\n ccw: counterclockwise rotation\n The amount of rotation is always 90°. Only required for supportsRotation=true --\x3e\n <rotationDirection>cw</rotationDirection>\n\n \x3c!-- If enabled TexturePacker allows the user to choose non-power-of-2 sizes for sprite\n sheets. Otherwise, only power-of-2 (POT) sizes are enabled in the user interface. --\x3e\n <supportsNPOT>true</supportsNPOT>\n\n \x3c!-- the following flags are optional: --\x3e\n\n \x3c!-- framework supports tightly packed textures, i.e. it can extract sprites\n from a sheet using polygon paths instead of bounding boxes (default=false) --\x3e\n <supportsPolygonPacking>true</supportsPolygonPacking>\n\n \x3c!-- target framework supports pivot point settings (default=false) --\x3e\n <supportsPivotPoint>false</supportsPivotPoint>\n\n \x3c!-- target framework accepts sprite names without file name extension. (default=false) --\x3e\n <supportsTrimSpriteNames>true</supportsTrimSpriteNames>\n\n \x3c!-- framework can read in border values for 9-patch scaling of sprites (default=false) --\x3e\n <supportsScale9>true</supportsScale9>\n\n \x3c!-- enables the "Auto-detect animations" checkbox in the UI; the implementation of\n an animation detection must be done by the exporter (default=false) --\x3e\n <supportsAnimations>true</supportsAnimations>\n\n \x3c!-- origin of the coordinate system of a sprite in the target framework,\n needed for pivot point placement. (default=TopLeft) --\x3e\n <spriteOrigin>TopLeft</spriteOrigin> \x3c!-- TopLeft or BottomLeft --\x3e\n\n \x3c!-- ensure that width/height of generated texture is multiple of this factor (default=1) --\x3e\n <textureSizeFactor>1</textureSizeFactor>\n\n \x3c!-- ensures that the center offset caused by trimming has integral\n coordinates (default=false)--\x3e\n <ensureIntegerCenterOffset>false</ensureIntegerCenterOffset>\n\n \x3c!-- You can specify default values for the following TexturePacker settings.\n They are used if a new project is created or if the data format of\
1n an existing project is changed and "Update to recommended values"\n is checked. The complete <defaults> block is optional. --\x3e\n <defaults>\n <extrude>0</extrude>\n <shapePadding>1</shapePadding>\n <borderPadding>1</borderPadding>\n <trimMode>Polygon</trimMode> \x3c!-- None, Trim, Crop, CropKeepPos, Polygon --\x3e\n <sizeConstraints>POT</sizeConstraints> \x3c!-- POT, WordAligned, AnySize --\x3e\n <writePivotPoints>true</writePivotPoints> \x3c!-- true, false --\x3e\n <defaultPivotPoint>0.0,0.0</defaultPivotPoint>\n </defaults>\n\n \x3c!-- TexturePacker\'s "scaling variants" dialog provides a set of presets.\n These presets can be overwritten by exporter-specific ones.\n You can define them with an optional <variantPresets> block as shown here: --\x3e\n <variantPresets>\n <variantPreset>\n <name>HD / SD</name>\n <variant>\n <scale>1.0</scale>\n <extension>-2x</extension>\n <filter></filter> \x3c!-- optional --\x3e\n </variant>\n <variant>\n <scale>0.5</scale>\n <extension></extension>\n <filter></filter>\n </variant>\n <forceIdenticalLayout>true</forceIdenticalLayout>\n </variantPreset>\n </variantPresets>\n\n \x3c!-- The following <properties> block shows how to define custom exporter properties.\n For each property TexturePacker displays an input field in the UI.\n The values entered there are stored in the TPS file and passed to the\n exporter when publishing. There they can be used in the template file. --\x3e\n <properties>\n <property>\n \x3c!-- Property name, used in tps file + exporter template: --\x3e\n <name>sprite-prefix</name>\n \x3c!-- Property type, supported values: string, bool --\x3e\n <type>string</type>\n \x3c!-- Default value for new projects --\x3e\n <default>img_</default>\n \x3c!-- Name and tooltip text used for the input field in the UI: --\x3e\n <displayName>Sprite prefix</displayName>\n <toolTip>Prefix for the sprite\'s name.</toolTip>\n \x3c!-- Only displayed if advanced settings are expanded (small triangle\n in front of Data settings) --\x3e\n <isAdvanced>true</isAdvanced>\n </property>\n \x3c!-- more <property>s can be defined here --\x3e\n </properties>\n\n</exporter>\n')),"\n",a.createElement(t.h2,{id:"the-template-file",style:{position:"relative"}},"The template file",a.createElement(t.a,{href:"#the-template-file","aria-label":"the template file permalink",className:"anchor after"},a.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",a.createElement(t.p,null,"The template file contains a prototype of the data file to write with some additional\nmarkup to format the text, build loops and decisions."),"\n",a.createElement(t.p,null,"If you copied the data from the example file above, you should now create a ",a.createElement(t.strong,null,"testexporter.txt"),"\nin the same directory as the ",a.createElement(t.strong,null,"exporter.xml"),".\nThe file extension of the template file does not matter. However, it might be useful to\ngive it the same extension as the Data file to enable syntax highlighting in your favorite text\neditor."),"\n",a.createElement(t.p,null,"TexturePacker uses the Grantlee template engine - which is similar to Django templates.\nThe template syntax is described
1in detail at the end of this document."),"\n",a.createElement(t.p,null,"This example template file will write a data file containing a list of sprites with frame\ncoordinates, a flag for rotation and the source coordinates:"),"\n",a.createElement(t.pre,null,a.createElement(t.code,{className:"language-django"},"// Created with TexturePacker (https://www.codeandweb.com/texturepacker)\n//\n// Sprite sheet: {{ texture.fullName }} ({{ texture.size.width }} x {{ texture.size.height }})\n//\n// {{ smartUpdateKey }}\n\nsprites = [\n{% for sprite in allSprites %}\n {{ sprite.trimmedName }} = [\n frame = [\n {{ sprite.frameRect.x }},\n {{ sprite.frameRect.y }},\n {{ sprite.frameRect.width }},\n {{ sprite.frameRect.height }}\n ],\n rotated = {{ sprite.rotated }},\n source = [\n {{ sprite.cornerOffset.x }},\n {{ sprite.cornerOffset.y }},\n {{ sprite.untrimmedSize.width }},\n {{ sprite.untrimmedSize.height }}\n ]\n ] {% if not forloop.last %}, {% endif %}\n{% endfor %}\n]\n")),"\n",a.createElement(t.h3,{id:"using-values-in-templates",style:{position:"relative"}},"Using Values in Templates",a.createElement(t.a,{href:"#using-values-in-templates","aria-label":"using values in templates permalink",className:"anchor after"},a.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",a.createElement(t.p,null,"Values in templates are enclosed within double curly braces: ",a.createElement(t.code,null,"{{ variable }}"),". To access nested properties within a structure, use the dot notation: ",a.createElement(t.code,null,"{{ object.property }}"),"."),"\n",a.createElement(t.p,null,"You can apply filters to format values by using the pipe character. For example:"),"\n",a.createElement(t.ul,null,"\n",a.createElement(t.li,null,a.createElement(t.code,null,"{{ x|floatformat:3 }}")," formats a floating point value with 3 decimal places"),"\n",a.createElement(t.li,null,a.createElement(t.code,null,"{{ text|upper }}")," converts text to uppercase"),"\n",a.createElement(t.li,null,a.createElement(t.code,null,'{{ list|join:", " }}')," joins list items with commas"),"\n"),"\n",a.createElement(t.h3,{id:"control-structures",style:{position:"relative"}},"Control Structures",a.createElement(t.a,{href:"#control-structures","aria-label":"control structures permalink",className:"anchor after"},a.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",a.createElement(t.p,null,"Templates support several control structures that affect the rendering flow:"),"\n",a.createElement(t.h4,{id:"conditionals",style:{position:"relative"}},"Conditionals",a.createElement(t.a,{href:"#conditionals","aria-label":"conditionals permalink",className:"anchor after"},a.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",a.createElement(t.pre,null,a.createElement(t.code,null,"{% if condition %}\n Content to render when condition is true\n{% else %}\n Content to render when condition is false\n{% endif %}\n")),"\n",a.createElement(t.h4,{id:"loops",style:{position:"relative"}}
1,"Loops",a.createElement(t.a,{href:"#loops","aria-label":"loops permalink",className:"anchor after"},a.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",a.createElement(t.pre,null,a.createElement(t.code,null,"{% for item in itemList %}\n Content to render for each item\n Current item: {{ item }}\n{% endfor %}\n")),"\n",a.createElement(t.h2,{id:"values-and-data-types",style:{position:"relative"}},"Values and data types",a.createElement(t.a,{href:"#values-and-data-types","aria-label":"values and data types permalink",className:"anchor after"},a.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",a.createElement(t.p,null,"The variables that can be used in the template file are described in detail in the\ntable below:"),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Element"),a.createElement(t.th,null,"Type"),a.createElement(t.th,null,"Info"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"smartUpdateKey")),a.createElement(t.td,null,"STRING"),a.createElement(t.td,null,"hash string over all file dates, used to speed up export")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"dataAbsoluteFileName")),a.createElement(t.td,null,"STRING"),a.createElement(t.td,null,"absolute file name of the current data file")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"settings")),a.createElement(t.td,null,a.createElement(t.a,{href:"#settings-type"},"SETTINGS")),a.createElement(t.td,null,"contains tps file settings")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"variantIndex")),a.createElement(t.td,null,"INT"),a.createElement(t.td,null,a.createElement(t.code,null,"0")," for hasSeparateAutoSDFiles=first",a.createElement("br")," ",a.createElement(t.code,null,"variantCount-1")," for hasSeparateAutoSDFiles=last",a.createElement("br")," ",a.createElement(t.code,null,"[0..variantCount-1]")," for hasSeparateAutoSDFiles=all")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"multiPackIndex")),a.createElement(t.td,null,"INT"),a.createElement(t.td,null,a.createElement(t.code,null,"-1")," for hasSeparateMultiPackFiles=false",a.createElement("br")," ",a.createElement(t.code,null,"[0..textureCount-1]")," for multipack textures")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"variantParams")),a.createElement(t.td,null,a.createElement(t.a,{href:"#variantparams-type"},"VARIANTPARAMS")),a.createElement(t.td,null,"settings adapted for the current scaling variant")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"allResults")),a.createElement(t.td,null,a.createElement(t.a,{href:"#result-type"},"RESULT[]")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"texture")),a.createElement(t.td,null,a.createElement(t.a,{href:"#texture-type"},"TEXTURE")),a.createElement(t.td,null,"current texture (only available if hasSeparateMultiPackFiles=true)")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"sprites")),a.createElement(t.td,null,a.createElement(t.a,{href:"#sprite-type"},"SPRITE[]")),a.createElement(t.td,null,"sprites (without aliases) of the current texture (or of complete result, if hasSeparateMultiPackFiles=false)")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"allSprites")),a.createElement(t.td,null,a.createElement(t.a,{href:"#sprite-type"},"SPRITE[]")),a.createElement(t.td,null,"sprites (including aliases) of the current texture (or of complete result, if hasSeparateMultiPackFiles=false)")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"exporterProperties.MYPROP")),a.createElement(t.td,null,"STRING or BOOL"),a.createElement(t.td,null,"Contains the value of the custom exporter property ",a.createElement(t.code,null,"MYPROP")," . Exporter properties can defined in the ",a.createElement(t.a,{href:"#exporter-description"},"exporter description file"),", using the ",a.createElement(t.code,null,"<property>")," element.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"tp")),a.createElement(t.td,null,"HASH"),a.createElement(t.td,null,"Contains all elements described above. If you want to write your exporter in Javascript you can use this hash to pass all settings to a Javascript function.")))),"\n",a.createElement(t.p,null,"The template file is loaded with a set of parameters created during the packing\nprocess. The values can be referenced using the template language."),"\n",a.createElement(t.h3,{id:"smartupdatekey",style:{position:"relative"}}
1,"smartUpdateKey",a.createElement(t.a,{href:"#smartupdatekey","aria-label":"smartupdatekey permalink",className:"anchor after"},a.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",a.createElement(t.p,null,"When publishing a spritesheet, TexturePacker checks if the ",a.createElement(t.em,null,"Data file")," already exists.\nIf the file is found, its contents are read, and a text sequence is searched for -\n",a.createElement(t.code,null,"$TexturePacker:SmartUpdate:....hashvalue....$"),".\nThis value is a hash calculated from all file dates, sizes, and the parameters used\nto create the texture. If the calculated hash is identical to the current state of\nthe files, no output is created, which speeds up batch operations."),"\n",a.createElement(t.p,null,"To use this smart update feature, add ",a.createElement(t.code,null,"smartUpdateKey")," somewhere in the\ntemplate file. Ensure that the value is placed within a comment or another\nsuitable location to avoid confusing the module reading the data."),"\n",a.createElement(t.h3,{id:"sprites-and-allsprites",style:{position:"relative"}},"sprites and allSprites",a.createElement(t.a,{href:"#sprites-and-allsprites","aria-label":"sprites and allsprites permalink",className:"anchor after"},a.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",a.createElement(t.p,null,"The ",a.createElement(t.code,null,"sprites")," list contains unique sprites only, excluding alias sprites\n(sprites that contain the same image). To reference alias sprites,\nyou can access a sprite's ",a.createElement(t.code,null,".aliasList")," property. On the other hand,\n",a.createElement(t.code,null,"allSprites")," contains a list of all sprites, including alias sprites.\nIn most cases, using ",a.createElement(t.code,null,"allSprites")," is more convenient than ",a.createElement(t.code,null,"sprites"),"."),"\n",a.createElement(t.p,null,"The standard way to iterate over the sprites is using"),"\n",a.createElement(t.pre,null,a.createElement(t.code,{className:"language-django"},"{% for sprite in allSprites %}\n ...\n{% endfor %}\n")),"\n",a.createElement(t.h3,{id:"settings-type",style:{position:"relative"}},"SETTINGS",a.createElement(t.a,{href:"#settings-type","aria-label":"settings type permalink",className:"anchor after"},a.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",a.createElement(t.p,null,"This data type holds .tps file settings."),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Element"),a.createElement(t.th,null,"Type"),a.createElement(t.th,null,"Info"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"autoSDSettings[0..variantCount-1]")),a.createElement(t.td,null,a.createElement(t.a,{href:"#autosdsettings-type"},"AUTOSDSETTINGS[]")),a.createElement(t.td,null,"Scaling variant settings")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"ditherType")),a.createElement(t.td,null,a.createElement(t.code,null,"none-nn")," ",a.createElement("br")," ",a.createElement(t.code,null,"none-linear")," ",a.createElement("br")," ",a.createElement(t.code,null,"fs")," ",a.createElement("br")," ",a.createElement(t.code,null,"fs-alpha")," ",a.createElement("br")," ",a.createElement(t.code,null,"atkinson")," ",a.createElement("br")," ",a.createElement(t.code,null,"atkinson-alpha")),a.createElement(t.td,null,"for more info see ",a.createElement(t.a,{href:"/texturepacker/documentation/texture-settings#dithering"},"Dithering"))),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"textureFormat")),a.createElement(t.td,null,"STRING"),a.createElement(t.td,null,"texture format")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"outputFormat")),a.createElement(t.td,null,"STRING"),a.createElement(t.td,null,"output format")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"contentProtection.key")),a.createElement(t.td,null,"STRING"),a.createElement(t.td,null,"32 hex digits")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"tpsName")),a.createElement(t.td,null,"STRING"),a.createElement(t.td,null,"name of the tps file")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"allowRotation")),a.createElement(t.td,null,"BOOL"),a.createElement(t.td,null,"rotation enabled")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"flipY")),a.createElement(t.td,null,"BOOL"),a.createElement(t.td,null,"flip texture vertically (",a.createElement(t.code,null,"flipPVR")," is kept as a deprecated alias)")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"forceIdenticalLayout")),a.createElement(t.td,null,"BOOL"),a.createElement(t.td,null,"force layout to be identical for all variants")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"multiPack")),a.createElement(t.td,null,"BOOL"),a.createElement(t.td,null,"multipack enabled")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"trimSpriteNames")),a.createElement(t.td,null,"BOOL"),a.createElement(t.td,null,"trim sprite names")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"autoAliasEnabled")),a.createElement(t.td,null,"BOOL"),a.createElement(t.td,null,"automatic detection of duplicate sprites enabled")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"premultiplyAlpha")),a.createElement(t.td,null,"BOOL"),a.createElement(t.td,null,"premultiply alpha enabled")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"reduceBorderArtifacts")),a.createElement(t.td,null,"BOOL"),a.createElement(t.td,null,"reduce border artifacts enabled")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"fixedTextureSize")),a.createElement(t.td,null,a.createElement(t.a,{href:"#size-type"},"SIZE")),a.createElement(t.td,null,"have a fixed texture size")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"dataFormat")),a.createElement(t.td,null,"STRING"),a.createElement(t.td,null,"data format")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"textureSubPath")),a.createElement(t.td,null,"STRING"),a.createElement(t.td,null,"texture sub path")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"borderPadding")),a.createElement(t.td,null,"INT"),a.createElement(t.td,null,"border padding")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"shapePadding")),a.createElement(t.td,null,"INT"),a.createElement(t.td,null,"shape padding")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"commonDivisorX")),a.createElement(t.td,null,"INT"),a.createElement(t.td,null,"common divisor X")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"commonDivisorY")),a.createElement(t.td,null,"INT"),a.createElement(t.td,null,"common divisor Y")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"backgroundColor")),a.createElement(t.td,null,"INT"),a.createElement(t.td,null,"background color")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"writePivotPoints")),a.createElement(t.td,null,"BOOL"),a.createElement(t.td,null,"user has enabled pivot points")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"autodetectAnimations")),a.createElement(t.td,null,"BOOL"),a.createElement(t.td,null,"user has activated animation detection")))),"\n",a.createElement(t.h3,{id:"autosdsettings-type",style:{position:"relative"}}
1,"AUTOSDSETTINGS",a.createElement(t.a,{href:"#autosdsettings-type","aria-label":"autosdsettings type permalink",className:"anchor after"},a.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",a.createElement(t.p,null,"This data type holds AutoSD settings."),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Element"),a.createElement(t.th,null,"Type"),a.createElement(t.th,null,"Info"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"scale")),a.createElement(t.td,null,"FLOAT"),a.createElement(t.td,null,"scaling factor")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"extension")),a.createElement(t.td,null,"STRING"),a.createElement(t.td,null,"variant name")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"spriteFilter")),a.createElement(t.td,null,"STRING"),a.createElement(t.td,null,"sprite filter")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"acceptFractionalValues")),a.createElement(t.td,null,"BOOL"),a.createElement(t.td,null,"accept fractional values if no common factor can be found")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"maxTextureSize")),a.createElement(t.td,null,a.createElement(t.a,{href:"#size-type"},"SIZE")),a.createElement(t.td,null,"maximum texture size")))),"\n",a.createElement(t.h3,{id:"result-type",style:{position:"relative"}},"RESULT",a.createElement(t.a,{href:"#result-type","aria-label":"result type permalink",className:"anchor after"},a.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",a.createElement(t.p,null,"Structure containing a packing result."),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Element"),a.createElement(t.th,null,"Type"),a.createElement(t.th,null,"Info"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"textures")),a.createElement(t.td,null,a.createElement(t.a,{href:"#texture-type"},"TEXTURE[]")),a.createElement(t.td,null,"array of all textures")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"nonFittingSprites")),a.createElement(t.td,null,"STRING[]"),a.createElement(t.td,null,"array containing names of non-fitting sprites")))),"\n",a.createElement(t.h3,{id:"texture-type",style:{position:"relative"}},"TEXTURE",a.createElement(t.a,{href:"#texture-type","aria-label":"texture type permalink",className:"anchor after"},a.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",a.createElement(t.p,null,"This data type holds a texture with all its parameters."),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Element"),a.createElement(t.th,null,"Type"),a.createElement(t.th,null,"Info"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"size")),a.createElement(t.td,null,a.createElement(t.a,{href:"#size-type"},"SIZE")),a.createElement(t.td,null,"The width/height of the Texture file in pixels.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"trimmedName")),a.createElement(t.td,null,"STRING"),a.createElement(t.td,null,"The name of the Texture file - without the extension.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"fullName")),a.createElement(t.td,null,"STRING"),a.createElement(t.td,null,"The name of the Texture file with the extension.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"absoluteFileName")),a.createElement(t.td,null,"STRING"),a.createElement(t.td,null,"The absolute path to the Texture file.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"normalMapFileName")),a.createElement(t.td,null,"STRING"),a.createElement(t.td,null,"The path of the corresponding normal map sheet, relative to texture file.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"normalMapAbsoluteFileName")),a.createElement(t.td,null,"STRING"),a.createElement(t.td,null,"The absolute path of the corresponding normal map sheet.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"sprites[0..n]")),a.createElement(t.td,null,a.createElement(t.a,{href:"#sprite-type"},"SPRITE[]")),a.createElement(t.td,null,"The sprites on the current texture, without aliases.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"allSprites[0..m]")),a.createElement(t.td,null,a.createElement(t.a,{href:"#sprite-type"},"SPRITE[]")),a.createElement(t.td,null,"All sprites on current texture, including aliases.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"area")),a.createElement(t.td,null,"INT"),a.createElement(t.td,null,"Area of the texture in pixels (i.e. width*height).")))),"\n",a.createElement(t.h3,{id:"sprite-type",style:{position:"relative"}}
1,"SPRITE",a.createElement(t.a,{href:"#sprite-type","aria-label":"sprite type permalink",className:"anchor after"},a.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",a.createElement(t.p,null,"This data type holds a sprite with all its parameters."),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Element"),a.createElement(t.th,null,"Type"),a.createElement(t.th,null,"Info"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"fileData")),a.createElement(t.td,null,a.createElement(t.a,{href:"#filedata-type"},"FILEDATA")),a.createElement(t.td,null,"sprite file data")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"size")),a.createElement(t.td,null,a.createElement(t.a,{href:"#size-type"},"SIZE")),a.createElement(t.td,null,"size of the trimmed sprite in pixels, including extrude; typically not needed by exporters")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"frameRect")),a.createElement(t.td,null,a.createElement(t.a,{href:"#rect-type"},"RECT")),a.createElement(t.td,null,"position and size of the trimmed sprite on the texture (without extrude, w/h swapped if sprite was rotated)")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"frameRectWithoutRotation")),a.createElement(t.td,null,a.createElement(t.a,{href:"#rect-type"},"RECT")),a.createElement(t.td,null,"position of the trimmed sprite on the texture, unrotated size")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"frameRectRel")),a.createElement(t.td,null,a.createElement(t.a,{href:"#rect-type"},"RECT")),a.createElement(t.td,null,"same as ",a.createElement(t.code,null,"frameRect"),", but with coordinates divided by texture size -> value range (0..1)")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"sourceRect")),a.createElement(t.td,null,a.createElement(t.a,{href:"#rect-type"},"RECT")),a.createElement(t.td,null,"size of the trimmed sprite, x/y values = ",a.createElement(t.code,null,"cornerOffset"),", see below")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"cornerOffset")),a.createElement(t.td,null,a.createElement(t.a,{href:"#point-type"},"POINT")),a.createElement(t.td,null,"offset from the top-left corner of the orignal sprite to the top-left corner of the trimmed sprite (0,0 for ",a.createElement(t.em,null,"Crop, flush pos"),")")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"untrimmedSize")),a.createElement(t.td,null,a.createElement(t.a,{href:"#size-type"},"SIZE")),a.createElement(t.td,null,"size of the original, untrimmed sprite (",a.createElement(t.em,null,"Crop")," modes: size of trimmed sprite)")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"trimmed")),a.createElement(t.td,null,"BOOL"),a.createElement(t.td,null,"true if sprite is trimmed")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"rotated")),a.createElement(t.td,null,"BOOL"),a.createElement(t.td,null,"true if sprite is rotated")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"isSolid")),a.createElement(t.td,null,"BOOL"),a.createElement(t.td,null,"true if sprite has no transparent pixels")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"trimmedName")),a.createElement(t.td,null,"STRING"),a.createElement(t.td,null,"The name of the sprite file - without the extension.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"fullName")),a.createElement(t.td,null,"STRING"),a.createElement(t.td,null,"The name of the sprite file with the extension.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"name")),a.createElement(t.td,null,"STRING"),a.createElement(t.td,null,"trimmedName or fullName, depending on ",a.createElement(t.a,{href:"/texturepacker/documentation/texture-settings#trim-sprite-names"},"Trim sprite names")," flag.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"aliasList[0..n]")),a.createElement(t.td,null,a.createElement(t.a,{href:"#sprite-type"},"SPRITE[]")),a.createElement(t.td,null,"contains the list of identical sprites")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"centerOffset")),a.createElement(t.td,null,a.createElement(t.a,{href:"#point-type"},"POINT")),a.createElement(t.td,null,"Center offset")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"pivotPoint")),a.createElement(t.td,null,a.createElement(t.a,{href:"#point-type"},"POINT")),a.createElement(t.td,null,"x and y coordinates of the Pivot Point")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"pivotPointNorm")),a.createElement(t.td,null,a.createElement(t.a,{href:"#point-type"},"POINT")),a.createElement(t.td,null,"Pivot point coordinates, relative to the sprite size")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"vertices")),a.createElement(t.td,null,a.createElement(t.a,{href:"#point-type"},"POINT[]")),a.createElement(t.td,null,"Polygon points approximating the outline of the sprite. Sprite coordinate system.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"verticesUV")),a.createElement(t.td,null,a.createElement(t.a,{href:"#point-type"},"POINT[]")),a.createElement(t.td,null,"Polygon points approximating the outline of the sprite. Texture coordinate system.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"triangleIndices")),a.createElement(t.td,null,"INT[]"),a.createElement(t.td,null,"Triangulation of the sprite's polygon. The values in this list are indices in the ",a.createElement(t.code,null,"vertices")," / ",a.createElement(t.code,null,"verticesUV")," array.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"scale9Enabled")),a.createElement(t.td,null,"BOOL"),a.createElement(t.td,null,"User enabled 9-patch scaling for this sprite")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"scale9Borders")),a.createElement(t.td,null,a.createElement(t.a,{href:"#rect-type"},"RECT")),a.createElement(t.td,null,"The 9-patch borders.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"scale9Paddings")),a.createElement(t.td,null,a.createElement(t.a,{href:"#rect-type"},"RECT")),a.createElement(t.td,null,"The 9-patch paddings.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"scale")),a.createElement(t.td,null,"FLOAT"),a.createElement(t.td,null,"The sprite's scaling factor as set in ",a.createElement(t.strong,null,"Sprite settings"),". Does not take global/variant scale in account.")))),"\n",a.createElement(t.p,null,"The two figures below illustrate the interpretation of the exported elements ",a.createElement(t.code,null,"sourceRect")," and ",a.createElement(t.code,null,"frameRect"),":"),"\n",a.createElement(s,{alt:"texturepacker exporter: sourceRect"}),"\n",a.createElement(o,{alt:"texturepacker exporter: frameRect"}),"\n",a.createElement(t.h3,{id:"filedata-type",style:{position:"relative"}}
1,"FILEDATA",a.createElement(t.a,{href:"#filedata-type","aria-label":"filedata type permalink",className:"anchor after"},a.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",a.createElement(t.p,null,"This data type holds a file."),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Element"),a.createElement(t.th,null,"Type"),a.createElement(t.th,null,"Info"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"absoluteFileName")),a.createElement(t.td,null,"STRING"),a.createElement(t.td,null,"absolute path of the file")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"fileSize")),a.createElement(t.td,null,"FLOAT"),a.createElement(t.td,null,"size of the file")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"created")),a.createElement(t.td,null,"DATE"),a.createElement(t.td,null,"creation date of the file")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"lastModified")),a.createElement(t.td,null,"DATE"),a.createElement(t.td,null,"last modified date of the file")))),"\n",a.createElement(t.h3,{id:"variantparams-type",style:{position:"relative"}},"VARIANTPARAMS",a.createElement(t.a,{href:"#variantparams-type","aria-label":"variantparams type permalink",className:"anchor after"},a.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",a.createElement(t.p,null,"This data type holds the settings adapted for the current scaling variant."),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Element"),a.createElement(t.th,null,"Type"),a.createElement(t.th,null,"Info"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"scale")),a.createElement(t.td,null,"FLOAT"),a.createElement(t.td,null,"Scaling factor")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"shapePadding")),a.createElement(t.td,null,"INT"),a.createElement(t.td,null,"shape padding in pixels")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"borderPadding")),a.createElement(t.td,null,"INT"),a.createElement(t.td,null,"border padding in pixels")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"commonDivisorX")),a.createElement(t.td,null,"INT"),a.createElement(t.td,null,"Common Divisor X")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"commonDivisorY")),a.createElement(t.td,null,"INT"),a.createElement(t.td,null,"Common Divisor Y")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"extrude")),a.createElement(t.td,null,"INT"),a.createElement(t.td,null,"Extrude in pixels")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"baseFactor")),a.createElement(t.td,null,"INT"),a.createElement(t.td,null,"Common base factor of all scaling variants")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"maxTextureSize")),a.createElement(t.td,null,a.createElement(t.a,{href:"#size-type"},"SIZE")),a.createElement(t.td,null,"Maximum texture size in pixels")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"fixedTextureSize")),a.createElement(t.td,null,a.createElement(t.a,{href:"#size-type"},"SIZE")),a.createElement(t.td,null,"Fixed texture size in pixels")))),"\n",a.createElement(t.h3,{id:"rect-type",style:{position:"relative"}}
1,"RECT (Rectangle)",a.createElement(t.a,{href:"#rect-type","aria-label":"rect type permalink",className:"anchor after"},a.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",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Element"),a.createElement(t.th,null,"Type"),a.createElement(t.th,null,"Info"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"x")),a.createElement(t.td,null,"INT"),a.createElement(t.td,null,"x coordinate")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"y")),a.createElement(t.td,null,"INT"),a.createElement(t.td,null,"y coordinate")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"width")),a.createElement(t.td,null,"INT"),a.createElement(t.td,null,"width in pixels")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"height")),a.createElement(t.td,null,"INT"),a.createElement(t.td,null,"height in pixels")))),"\n",a.createElement(t.h3,{id:"point-type",style:{position:"relative"}},"POINT",a.createElement(t.a,{href:"#point-type","aria-label":"point type permalink",className:"anchor after"},a.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",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Element"),a.createElement(t.th,null,"Type"),a.createElement(t.th,null,"Info"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"x")),a.createElement(t.td,null,"INT"),a.createElement(t.td,null,"x coordinate")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"y")),a.createElement(t.td,null,"INT"),a.createElement(t.td,null,"y coordinate")))),"\n",a.createElement(t.h3,{id:"size-type",style:{position:"relative"}},"SIZE",a.createElement(t.a,{href:"#size-type","aria-label":"size type permalink",className:"anchor after"},a.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",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Element"),a.createElement(t.th,null,"Type"),a.createElement(t.th,null,"Info"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"width")),a.createElement(t.td,null,"INT"),a.createElement(t.td,null,"width in pixels")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"height")),a.createElement(t.td,null,"INT"),a.createElement(t.td,null,"height in pixels")))),"\n",a.createElement(t.h2,{id:"enhancing-the-exporter-with-javascript",style:{position:"relative"}}
1,"Enhancing the Exporter with JavaScript",a.createElement(t.a,{href:"#enhancing-the-exporter-with-javascript","aria-label":"enhancing the exporter with javascript permalink",className:"anchor after"},a.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",a.createElement(t.p,null,"While templates are powerful, sometimes you need more advanced functionality - such as complex calculations or data transformations. In these cases, you can enhance your exporter with JavaScript."),"\n",a.createElement(t.h3,{id:"setting-up-javascript-support",style:{position:"relative"}},"Setting Up JavaScript Support",a.createElement(t.a,{href:"#setting-up-javascript-support","aria-label":"setting up javascript support permalink",className:"anchor after"},a.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",a.createElement(t.p,null,"To add JavaScript capabilities to your exporter:"),"\n",a.createElement(t.ol,null,"\n",a.createElement(t.li,null,"Create two nested directories inside your exporter folder:","\n",a.createElement(t.ul,null,"\n",a.createElement(t.li,null,"First create a ",a.createElement(t.strong,null,"grantlee")," directory"),"\n",a.createElement(t.li,null,"Then create a ",a.createElement(t.strong,null,"0.2")," directory inside it"),"\n"),"\n"),"\n"),"\n",a.createElement(t.p,null,"Your folder structure should look like this:"),"\n",a.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: 15.384615384615385%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAIAAAAcOLh5AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAoElEQVR42j2OywrCMBRE+/8Lt+IH+AWudFXcKOpCEASraQUJfSS9iXBva16N2ehwmDPLyYA+j1f9LEvOed9DQgiptUakrmvTsNYaY6O393ZYHtUil/NczjbiVGGmaWzhLUWnlCIiJBoIW43nojrsd4wxKQUAaJAFhy0b11dKrC50a4bMezdNIcY4Jf3iQ1Bapy9NUyOic84YkzrG8CcE/wVvtqYBJP7PfAAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/7a4a7451949332fc82e92854375eee12/b4f21/folderpath-exporter-javascript.avif 208w,\n/static/7a4a7451949332fc82e92854375eee12/a7f15/folderpath-exporter-javascript.avif 416w,\n/static/7a4a7451949332fc82e92854375eee12/01fa0/folderpath-exporter-javascript.avif 832w,\n/static/7a4a7451949332fc82e92854375eee12/b23a5/folderpath-exporter-javascript.avif 1163w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/avif"\n /><source\n srcset="/static/7a4a7451949332fc82e92854375eee12/6abcd/folderpath-exporter-javascript.webp 208w,\n/static/7a4a7451949332fc82e92854375eee12/69edf/folderpath-exporter-javascript.webp 416w,\n/static/7a4a7451949332fc82e92854375eee12/da8f3/folderpath-exporter-javascript.webp 832w,\n/static/7a4a7451949332fc82e92854375eee12/4e1fc/folderpath-exporter-javascript.webp 1163w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/webp"\n />\n <source\n srcset="/static/7a4a7451949332fc82e92854375eee12/3697c/folderpath-exporter-javascript.png 208w,\n/static/7a4a7451949332fc82e92854375eee12/e3e0f/folderpath-exporter-javascript.png 416w,\n/static/7a4a7451949332fc82e92854375eee12/283d3/folderpath-exporter-javascript.png 832w,\n/static/7a4a7451949332fc82e92854375eee12/f063b/folderpath-exporter-javascript.png 1163w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/7a4a7451949332fc82e92854375eee12/283d3/folderpath-exporter-javascript.png"\n alt="TexturePacker Documentation: Custom exporter - 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",a.createElement(t.ol,{start:"2"},"\n",a.createElement(t.li,null,"Place your JavaScript file(s) in the ",a.createElement(t.strong,null,"grantlee/0.2")," directory"),"\n",a.createElement(t.li,null,"Use the ",a.createElement(t.strong,null,".qs")," extension for your JavaScript files"),"\n"),"\n",a.createElement(t.h3,{id:"creating-javascript-filters",style:{position:"relative"}},"Creating JavaScript Filters",a.createElement(t.a,{href:"#creating-javascript-filters","aria-label":"creating javascript filters permalink",className:"anchor after"},a.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",a.createElement(t.p,null,"In your JavaScript file, you can create ",a.createElement(t.strong,null,"filters")," - functions that process template values. A filter:"),"\n",a.createElement(t.ol,null,"\n",a.createElement(t.li,null,"Receives a value from the template"),"\n",a.createElement(t.li,null,"Processes or transforms that value"),"\n",a.createElement(t.li,null,"Returns the result, which is then included in the output"),"\n"),"\n",a.createElement(t.p,null,"Here's an example of a filter that c
1onverts CSS class selectors to proper CSS syntax:"),"\n",a.createElement(t.pre,null,a.createElement(t.code,{className:"language-js"},'// Define the filter function\nvar MakeSelectorFilter = function(input) {\n // Convert the input to a regular JavaScript string\n var input = input.rawString();\n\n // Process the string (replace "-hover" with ":hover")\n return input.replace("-hover", ":hover");\n};\n\n// Set the filter name (this is how it will be referenced in templates)\nMakeSelectorFilter.filterName = "makecssselector";\n\n// Register the filter with the template system\nLibrary.addFilter("MakeSelectorFilter");\n')),"\n",a.createElement(t.h4,{id:"important-notes",style:{position:"relative"}},"Important Notes:",a.createElement(t.a,{href:"#important-notes","aria-label":"important notes permalink",className:"anchor after"},a.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",a.createElement(t.ul,null,"\n",a.createElement(t.li,null,"\n",a.createElement(t.p,null,a.createElement(t.strong,null,"Converting Input"),": Always convert the input parameter to a regular JavaScript string using ",a.createElement(t.code,null,".rawString()")," before using JavaScript string methods like ",a.createElement(t.code,null,"split()")," or ",a.createElement(t.code,null,"replace()"),"."),"\n"),"\n",a.createElement(t.li,null,"\n",a.createElement(t.p,null,a.createElement(t.strong,null,"Return Type"),": Filters must return a string value."),"\n"),"\n",a.createElement(t.li,null,"\n",a.createElement(t.p,null,a.createElement(t.strong,null,"Conditional Filters"),": To create a filter that evaluates a condition, return an empty string ",a.createElement(t.code,null,'""')," for false or any non-empty string (like ",a.createElement(t.code,null,'"true"'),") for true. Then use it in templates like: ",a.createElement(t.code,null,"{% if variable|testfunction %}")),"\n"),"\n"),"\n",a.createElement(t.h3,{id:"using-javascript-filters-in-templates",style:{position:"relative"}},"Using JavaScript Filters in Templates",a.createElement(t.a,{href:"#using-javascript-filters-in-templates","aria-label":"using javascript filters in templates permalink",className:"anchor after"},a.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",a.createElement(t.h4,{id:"loading-filters",style:{position:"relative"}},"Loading Filters",a.createElement(t.a,{href:"#loading-filters","aria-label":"loading filters permalink",className:"anchor after"},a.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",a.createElement(t.p,null,"To use a JavaScript filter in your template, you first need to load it:"),"\n",a.createElement(t.pre,null,a.createElement(t.code,{className:"language-django"},"{% load makecssselector %}\n")),"\n",a.createElement(t.p,null,a.createElement(t.strong,null,"Important"),": The value in the ",a.createElement(t.code,null,"load")," tag must match the JavaScript file name (without the ",a.createElement(t.code,null,".qs")," extension)."),"\n",a.createElement(t.h4,{id:"applying-filters",style:{position:"relative"}}
1,"Applying Filters",a.createElement(t.a,{href:"#applying-filters","aria-label":"applying filters permalink",className:"anchor after"},a.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",a.createElement(t.p,null,"Once loaded, you can apply the filter to any value in your template by using the pipe character:"),"\n",a.createElement(t.pre,null,a.createElement(t.code,{className:"language-django"},"{{ sprite.trimmedName|makecssselector }}\n")),"\n",a.createElement(t.p,null,"This passes the value of ",a.createElement(t.code,null,"sprite.trimmedName")," to your filter function and includes the result in the output."),"\n",a.createElement(t.h3,{id:"advanced-techniques",style:{position:"relative"}},"Advanced Techniques",a.createElement(t.a,{href:"#advanced-techniques","aria-label":"advanced techniques permalink",className:"anchor after"},a.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",a.createElement(t.h4,{id:"working-with-multiple-parameters",style:{position:"relative"}},"Working with Multiple Parameters",a.createElement(t.a,{href:"#working-with-multiple-parameters","aria-label":"working with multiple parameters permalink",className:"anchor after"},a.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",a.createElement(t.p,null,"Since filters can only receive one parameter directly, you can use these techniques to work with multiple values:"),"\n",a.createElement(t.h5,{id:"technique-1-using-global-variables",style:{position:"relative"}},"Technique 1: Using Global Variables",a.createElement(t.a,{href:"#technique-1-using-global-variables","aria-label":"technique 1 using global variables permalink",className:"anchor after"},a.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",a.createElement(t.p,null,"You can use one filter to store a value in a global variable, then use another filter to perform calculations with it:"),"\n",a.createElement(t.pre,null,a.createElement(t.code,{className:"language-js"},'// Define a global variable\nwidth = 1;\n\n// First filter: stores a value for later use\nvar SetWidth = function (input) {\n width = input; // store the value globally\n return ""; // return empty string (won\'t appear in output)\n};\nSetWidth.filterName = "setWidth";\nLibrary.addFilter("SetWidth");\n\n// Second filter: uses the stored global value\nvar MakeRelX = function (input) {\n return String(input / width); // calculate relative position\n};\nMakeRelX.filterName = "makeRelX";\nLibrary.addFilter("MakeRelX");\n')),"\n",a.createElement(t.p,null,"In your template, use these filters in sequence:"),"\n",a.createElement(t.pre,null,a.createElement(t.code,{className:"language-django"},"{{ texture.size.width|setWidth }}{{ sprite.frameRect.x|makeRelX }}\n")),"\n",a.createElement(t.p,null,"The first filter (",a.createElement(t.code,null,"setWidth"),") stores the texture width but outputs nothing.\nThe second filter (",a.createElement(t.code,null,"makeRelX"),") uses that stored width to calculate a relative position."),"\n",a.createElement(t.h4,{id:"creating-javascript-only-exporters",style:{position:"relative"}}
1,"Creating JavaScript-Only Exporters",a.createElement(t.a,{href:"#creating-javascript-only-exporters","aria-label":"creating javascript only exporters permalink",className:"anchor after"},a.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",a.createElement(t.p,null,"For complex exporters, you might prefer to handle most of the work in JavaScript rather than in templates. This approach offers several advantages:"),"\n",a.createElement(t.ul,null,"\n",a.createElement(t.li,null,"More powerful data processing capabilities"),"\n",a.createElement(t.li,null,"Better control over output formatting"),"\n",a.createElement(t.li,null,"Easier maintenance for complex exporters"),"\n",a.createElement(t.li,null,"Native JSON generation without template syntax issues"),"\n"),"\n",a.createElement(t.p,null,"To create a JavaScript-only exporter, use a minimal template that passes all TexturePacker data to your JavaScript function:"),"\n",a.createElement(t.pre,null,a.createElement(t.code,{className:'language-django:title="testexporter.txt"'},"{% load testexporter %}{{ tp|exportData|safe }}\n")),"\n",a.createElement(t.p,null,"This template:"),"\n",a.createElement(t.ol,null,"\n",a.createElement(t.li,null,"Loads your JavaScript file (",a.createElement(t.code,null,"testexporter.qs"),")"),"\n",a.createElement(t.li,null,"Passes the entire TexturePacker data structure (",a.createElement(t.code,null,"tp"),") to your ",a.createElement(t.code,null,"exportData")," filter"),"\n",a.createElement(t.li,null,"Uses the ",a.createElement(t.code,null,"safe")," filter to prevent HTML escaping of the output"),"\n"),"\n",a.createElement(t.p,null,"Then, in y
1our JavaScript file, you can process the data and generate the output format:"),"\n",a.createElement(t.pre,null,a.createElement(t.code,{className:'language-javascript:title="testexporter.qs"'},'// Process sprite data\nvar exportSprites = function(sprites) {\n var result = {};\n for (var i = 0; i < sprites.length; i++) {\n var s = sprites[i];\n var frame = [\n s.frameRect.x, \n s.frameRect.y, \n s.frameRect.width, \n s.frameRect.height\n ];\n result[s.trimmedName] = frame;\n }\n return result;\n}\n\n// Process texture data\nvar exportTextures = function(root) {\n var textures = root.allResults[root.variantIndex].textures;\n var result = {};\n\n for (var i = 0; i < textures.length; i++) {\n var textureName = textures[i].fullName;\n var sprites = exportSprites(textures[i].allSprites);\n result[textureName] = sprites;\n }\n\n return result;\n}\n\n// Main export function - creates the final output\nvar exportData = function(root) {\n var doc = exportTextures(root);\n // Generate properly formatted JSON with indentation\n return JSON.stringify(doc, null, "\\t");\n}\n\n// Register the filter\nexportData.filterName = "exportData";\nLibrary.addFilter("exportData");\n')),"\n",a.createElement(t.p,null,"This example creates a JSON output with texture names as keys, each containing sprite frame data. Using ",a.createElement(t.code,null,"JSON.stringify()")," ensures valid JSON formatting with proper indentation."),"\n",a.createElement(t.h2,{id:"syntax-of-the-templates",style:{position:"relative"}},"Syntax of the Templates",a.createElement(t.a,{href:"#syntax-of-the-templates","aria-label":"syntax of the templates permalink",className:"anchor after"},a.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",a.createElement(t.p,null,"The syntax of templates contains four types of tokens:"),"\n",a.createElement(t.ul,null,"\n",a.createElement(t.li,null,"Plain text"),"\n",a.createElement(t.li,null,"Comments"),"\n",a.createElement(t.li,null,"Variables"),"\n",a.createElement(t.li,null,"Control tags"),"\n"),"\n",a.createElement(t.p,null,"A simple template might look like this:"),"\n",a.createElement(t.pre,null,a.createElement(t.code,{className:"language-django"},"{# A simple template example #}\nHello {{ person.name }},\n\n{% if person.hasBirthday %}\nHappy Birthday!\n{% else %}\nHave a nice day!\n{% endif %}\n\nBye,\n{{ myname }}\n")),"\n",a.createElement(t.ul,null,"\n",a.createElement(t.li,null,"Content inside ",a.createElement(t.code,null,"{# #}")," are comments and are not part of the output."),"\n",a.createElement(t.li,null,"Content inside ",a.createElement(t.code,null,"{{ }}")," are variables which are substituted when the template is rendered."),"\n",a.createElement(t.li,null,"Content inside ",a.createElement(t.code,null,"{% %}")," are control tags which can affect the rendering of the template."),"\n"),"\n",a.createElement(t.p,null,"TexturePacker and PhysicsEditor both support commonly used tags such as ",a.createElement(t.code,null,"if"),", ",a.createElement(t.code,null,"for"),", ",a.createElement(t.code,null,"cycle")," and a\nhost of others (see ",a.createElement(t.a,{href:"https://docs.djangoproject.com/en/dev/ref/templates/builtins/"},"https://docs.djangoproject.com/en/dev/ref/templates/builtins/"),"). It is also\npossible to define your own custom tags."),"\n",a.createElement(t.h3,{id:"loops-1",style:{position:"relative"}},"Loops",a.createElement(t.a,{href:"#loops-1","aria-label":"loops 1 permalink",className:"anchor after"},a.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",a.createElement(t.p,null,"The type of a variable determines how it can be used in templates.\nFor example, treatment of items in an iterable context works as follows:"),"\n",a.createElement(t.p,null,"Lists work as expected:"),"\n",a.createElement(t.pre,null,a.createElement(t.code,{className:"language-django"},"{% for item in mylist %}\n- {{ item }}\n{% endfor %}\n")),"\n",a.createElement(t.h3,{id:"truthiness",style:{position:"relative"}}
1,"Truthiness",a.createElement(t.a,{href:"#truthiness","aria-label":"truthiness permalink",className:"anchor after"},a.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",a.createElement(t.p,null,"Truthiness of a variable is evaluated in a similar way to Python. That is:"),"\n",a.createElement(t.ul,null,"\n",a.createElement(t.li,null,"An empty string is ",a.createElement(t.code,null,"false")),"\n",a.createElement(t.li,null,a.createElement(t.code,null,"0")," is ",a.createElement(t.code,null,"false")),"\n",a.createElement(t.li,null,"An empty list is ",a.createElement(t.code,null,"false")),"\n",a.createElement(t.li,null,"Boolean ",a.createElement(t.code,null,"false")," is ",a.createElement(t.code,null,"false")),"\n"),"\n",a.createElement(t.p,null,"Everything else is ",a.createElement(t.code,null,"true"),"."),"\n",a.createElement(t.pre,null,a.createElement(t.code,{className:"language-django"},"{% if mylist %}\nList items:\n{% for item in mylist %}\n- {{ item }}\n{% endfor %}\n{% else %}\nThe list is empty.\n{% endif %}\n")),"\n",a.createElement(t.h3,{id:"variable-lookups",style:{position:"relative"}},"Variable Lookups",a.createElement(t.a,{href:"#variable-lookups","aria-label":"variable lookups permalink",className:"anchor after"},a.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",a.createElement(t.p,null,"So far we've mostly used simple variable lookups in ",a.createElement(t.code,null,"variable")," tags,\nbut the template system is capable of a lot more. Complex structures can be evaluated using the dot (",a.createElement(t.code,null,"."),") character."),"\n",a.createElement(t.p,null,"The dot can be used for list index lookup (note that list lookup is ",a.createElement(t.code,null,"0"),"-indexed):"),"\n",a.createElement(t.pre,null,a.createElement(t.code,{className:"language-django"},"The first item is {{ mylist.0 }}, and the fifth item is {{ mylist.4 }}.\n")),"\n",a.createElement(t.p,null,"It can also be used for key lookups:"),"\n",a.createElement(t.pre,null,a.createElement(t.code,{className:"language-django"},"The hash value is {{ myhash.mykey }}.\n")),"\n",a.createElement(t.p,null,"And it can retrieve properties from object instances:"),"\n",a.createElement(t.pre,null,a.createElement(t.code,{className:"language-django"},"The object property is {{ myobj.myprop }}.\n")),"\n",a.createElement(t.h3,{id:"filters",style:{position:"relative"}},"Filters",a.createElement(t.a,{href:"#filters","aria-label":"filters permalink",className:"anchor after"},a.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",a.createElement(t.p,null,"Filters can further affect the result of including a variable in a template. Filters are separated by the pipe (",a.createElement(t.code,null,"|"),") character."),"\n",a.createElement(t.pre,null,a.createElement(t.code,{className:"language-django"},"Name is {{ name }}, and name in uppercase is {{ name|upper }}.\n")),"\n",a.createElement(t.p,null,"Which is rendered as:"),"\n",a.createElement(t.blockquote,null,"\n",a.createElement(t.p,null,"Name is Alice, and name in uppercase is ALICE."),"\n"),"\n",a.createElement(t.p,null,"Note that filters may be combined with dot-lookup. For example, if ",a.createElement(t.code,null,"people")," is a list of ",a.
1createElement(t.code,null,"Person")," objects,\nand ",a.createElement(t.code,null,"Person")," objects have ",a.createElement(t.code,null,"name")," properties:"),"\n",a.createElement(t.pre,null,a.createElement(t.code,{className:"language-django"},"First person's name: {{ people.0.name|upper }}.\n")),"\n",a.createElement(t.p,null,"Rendered as:"),"\n",a.createElement(t.blockquote,null,"\n",a.createElement(t.p,null,"First person's name: BOB."),"\n"),"\n",a.createElement(t.p,null,"Filters may also be chained. Here, 'Claire' is first uppercased, then lowercased:"),"\n",a.createElement(t.pre,null,a.createElement(t.code,{className:"language-django"},"Name is {{ name|upper|lower }}\n")),"\n",a.createElement(t.p,null,"Rendered as:"),"\n",a.createElement(t.blockquote,null,"\n",a.createElement(t.p,null,"Name is claire."),"\n"),"\n",a.createElement(t.p,null,"Filters may take one string argument, which is delimited by a colon (",a.createElement(t.code,null,":"),")."),"\n",a.createElement(t.p,null,"If ",a.createElement(t.code,null,"peoplestring")," contains ",a.createElement(t.code,null,'"Dave and Ellen and Frank"'),", we can cut the string ",a.createElement(t.code,null,"and "),":"),"\n",a.createElement(t.pre,null,a.createElement(t.code,{className:"language-django"},'The people are {{ peoplestring|cut:"and " }}\n')),"\n",a.createElement(t.p,null,"Rendered as:"),"\n",a.createElement(t.blockquote,null,"\n",a.createElement(t.p,null,"The people are Dave Ellen Frank."),"\n"),"\n",a.createElement(t.p,null,"Internal filters include:"),"\n",a.createElement(t.ul,null,"\n",a.createElement(t.li,null,a.createElement(t.code,null,"upper")," - Converts text to uppercase"),"\n",a.createElement(t.li,null,a.createElement(t.code,null,"lower")," - Converts text to lowercase"),"\n",a.createElement(t.li,null,a.createElement(t.code,null,"slice")," - Returns a slice of the list"),"\n",a.createElement(t.li,null,a.createElement(t.code,null,"truncate")," - Truncates a string"),"\n",a.createElement(t.li,null,a.createElement(t.code,null,"join")," - Joins a list with a string"),"\n",a.createElement(t.li,null,a.createElement(t.code,null,"split")," - Splits a string into a list"),"\n"),"\n",a.createElement(t.p,null,"For more filters, see the ",a.createElement(t.a,{href:"https://docs.djangoproject.com/en/dev/ref/templates/builtins/#built-in-filter-reference"},"Django template built-in filters documentation"),"."),"\n",a.createElement(t.h3,{id:"auto-escaping-in-templates",style:{position:"relative"}},"Auto-Escaping in Templates",a.createElement(t.a,{href:"#auto-escaping-in-templates","aria-label":"auto escaping in templates permalink",className:"anchor after"},a.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",a.createElement(t.p,null,"When creating HTML output, it's necessary to consider escaping data inserted into the template. HTML escaping involves replacing characters like ",a.createElement(t.code,null,"<")," with ",a.createElement(t.code,null,"<")," and ",a.createElement(t.code,null,"&")," with ",a.createElement(t.code,null,"&")," to prevent them from being interpreted as HTML markup. The template engine automatically escapes string input before adding it to the output."),"\n",a.createElement(t.p,null,"This is relevant when writing a variable from the context into the template."),"\n",a.createElement(t.p,null,"If the context object ",a.createElement(t.code,null,"companies")," is a list containing (",a.createElement(t.code,null,"Burger King"),", ",a.createElement(t.code,null,"Ben & Jerries"),", ",a.createElement(t.code,null,"Ford"),"),\nand it is used in a template such as:"),"\n",a.createElement(t.pre,null,a.createElement(t.code,{className:"language-django"},"{% for company in companies %}\n- {{ company }}\n{% endfor %}\n")),"\n",a.createElement(t.p,null,"The output would be:"),"\n",a.createElement(t.blockquote,null,"\n",a.createElement(t.ul,null,"\n",a.createElement(t.li,null,"Burger King"),"\n",a.createElement(t.li,null,"Ben & Jerries"),"\n",a.createElement(t.li,null,"Ford"),"\n"),"\n"),"\n",a.createElement(t.p,null,"Notice that the ",a.createElement(t.code,null,"&")," has been replaced with ",a.createElement(t.code,null,"&"),", as is appropriate for HTML output."),"\n",a.createElement(t.p,null,"Use the ",a.createElement(t.code,null,"|safe")," filter to get the unescaped content of the string:"),"\n",a.createElement(t.pre,null,a.createElement(t.code,{className:"language-django"},"{% for company in companies %}\n- {{ company|safe }}\n{% endfor %}\n")),"\n",a.createElement(t.p,null,"It is also possible to turn this auto-escaping feature off for a block in a template:"),"\n",a.createElement(t.pre,null,a.createElement(t.code,{className:"language-django"}
1,"{% autoescape off %}\n...\n{% endautoescape %}\n")),"\n",a.createElement(t.p,null,"This would not escape the content between the ",a.createElement(t.code,null,"autoescape")," and ",a.createElement(t.code,null,"endautoescape")," tags. This should only be used for content which is actually already safe."),"\n",a.createElement(t.p,null,"For more information, see the ",a.createElement(t.a,{href:"https://docs.djangoproject.com/en/dev/ref/templates/language/#automatic-html-escaping"},"Django template auto-escaping documentation"),"."))}var u=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.R)(),e.components);return t?a.createElement(t,e,a.createElement(m,e)):m(e)},d=n(92930),p=n(11042),h=n(77891);function E(e){let{data:t,pageContext:n,children:l,location:r}=e;const c=r.pathname,i=t.mdx.tableOfContents.items[0].items;return a.createElement(h.W,null,a.createElement(d.f,{product:n.pageData.product,currentPath:c,onPageItems:i},l))}function f(e){return a.createElement(E,e,a.createElement(u,e))}const g=e=>{let{pageContext:t}=e;return a.createElement(a.Fragment,null,a.createElement(p.A,{pageData:t.pageData}))}},67680:function(e,t,n){var l=n(79504);e.exports=l([].slice)},74488:function(e,t,n){var l=n(67680),a=Math.floor,r=function(e,t){var n=e.length;if(n<8)for(var c,i,s=1;s<n;){for(i=s,c=e[s];i&&t(e[i-1],c)>0;)e[i]=e[--i];i!==s++&&(e[i]=c)}else for(var o=a(n/2),m=r(l(e,0,o),t),u=r(l(e,o),t),d=m.length,p=u.length,h=0,E=0;h<d||E<p;)e[h+E]=h<d&&E<p?t(m[h],u[E])<=0?m[h++]:u[E++]:h<d?m[h++]:u[E++];return e};e.exports=r},83059:function(e){e.exports=JSON.parse('{"layout":"constrained","backgroundColor":"#e8e8e8","images":{"fallback":{"src":"/static/dd1be66eae91ccf85fea00334c5790e0/e46f2/texturepacker-preferences%402x.png","srcSet":"/static/dd1be66eae91ccf85fea00334c5790e0/3ff6d/texturepacker-preferences%402x.png 364w,\\n/static/dd1be66eae91ccf85fea00334c5790e0/ed50d/texturepacker-preferences%402x.png 727w,\\n/static/dd1be66eae91ccf85fea00334c5790e0/e46f2/texturepacker-preferences%402x.png 1454w","sizes":"(min-width: 1454px) 1454px, 100vw"},"sources":[{"srcSet":"/static/dd1be66eae91ccf85fea00334c5790e0/5094b/texturepacker-preferences%402x.webp 364w,\\n/static/dd1be66eae91ccf85fea00334c5790e0/5a97a/texturepacker-preferences%402x.webp 727w,\\n/static/dd1be66eae91ccf85fea00334c5790e0/ed0f9/texturepacker-preferences%402x.webp 1454w","type":"image/webp","sizes":"(min-width: 1454px) 1454px, 100vw"}]},"width":1454,"height":506}')},84606:function(e,t,n){var l=n(16823),a=TypeError;e.exports=function(e,t){if(!delete e[t])throw new a("Cannot delete property "+l(t)+" of "+l(e))}},90074:function(e,t,n){var l=n(98587),a=n(96540);const r=["className"];t.A=e=>{let{className:t}=e,n=(0,l.A)(e,r);return a.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"},n,{className:t||"inline-block h-4"})," ",a.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"M11 19l-7-7 7-7m8 14l-7-7 7-7"}))}},92930:function(e,t,n){n.d(t,{f:function(){return p}});var l=n(96540),a=n(90177);const r=e=>{let{sectionItem:t}=e;return l.createElement(a.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 c=n(33149);var i=e=>{let{currentPath:t,docNavConfig:n,onPageItems:a=null}=e;return l.createElement(l.Fragment,null,n.items.map((e=>l.createElement("div",{className:"mb-2 text-xs md:text-sm lg:text-base",key:e.url},l.createElement(r,{sectionItem:e}),e.url===t&&a&&l.createElement("div",{className:"px-1 pt-1 lg:px-2"},l.createElement(c.A,{items:a,maxDepth:2,firstLevelBold:!1}))))))},s=n(95853),o=n(98701),m=n(46942),u=n.n(m),d=n(90074);const p=e=>{let{product:t,currentPath:n,onPageItems:a,children:r}=e;const c=o.A[t],{0:m,1:p}=(0,l.useState)(!1),h=()=>{p(!m)};return l.createElement(l.Fragment,null,l.createElement("div",{className:"mx-auto max-w-6xl min-h-screen"},l.createElement("div",{className:"flex lg:justify-center break-words sm:break-normal mx-auto"},l.createElement("div",null,l.createElement("div",{className:u()("z-10 w-6",m?"sticky hidden sm:block lg:hidden":"hidden"),style:{to
1p:"4rem"}},l.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:h},"Navigation"))),l.createElement("aside",{className:u()("hidden sm:block w-64 pl-3 transform duration-200 z-10",m?"sm:hidden lg:block":"")},l.createElement("div",{className:"sticky",style:{top:"4rem"}},l.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:h},l.createElement(d.A,{className:"text-gray-600 h-3 w-3"}),l.createElement("span",null,"Hide")),l.createElement("nav",{"aria-label":"Documentation chapters",className:"max-h-screen overflow-y-auto mt-4"},l.createElement(i,{docNavConfig:c,currentPath:n,onPageItems:a})))),l.createElement("div",{className:u()("my-8 px-3 mx-auto lg:mx-0")},l.createElement("main",{id:"main-content",className:"prose max-w-4xl"},r),l.createElement(s.A,{docNavConfig:c,currentPath:n})))))}},95853:function(e,t,n){n.d(t,{A:function(){return d}});var l=n(96540),a=n(90177),r=n(46942),c=n.n(r),i=n(98587);const s=["className"];var o=e=>{let{className:t}=e,n=(0,i.A)(e,s);return l.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor"},n,{className:t||"inline-block h-4"})," ",l.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"}))},m=n(16668);const u=e=>{let{link:t,direction:n}=e;const r="right"===n,i=c()("py-2 flex items-center text-gray-600 hover:text-gray-700 hover:bg-gray-100","border border-gray-300 shadow-xs rounded-lg",r?"test-right":""),s="inline-block h-8 w-8 text-gray-400 hover:text-gray-500";return l.createElement("div",null,t&&l.createElement(a.A,{to:t.url,className:i},!r&&l.createElement(o,{className:s}),l.createElement("div",{className:"pl-2 pr-4"},l.createElement("div",{className:"text-xs text-gray-500 hover:text-gray-600"},r?"Next chapter":"Previous chapter"),t.title),r&&l.createElement(m.A,{className:s})))};var d=e=>{let{currentPath:t,docNavConfig:n}=e;const{previous:a,next:r}=(()=>{let e=null,l=null;const a=n.items;return a.forEach(((n,r)=>{n.url===t&&(e=r-1>=0?a[r-1]:null,l=r+1<a.length?a[r+1]:null)})),{previous:e,next:l}})();return a||r?l.createElement("nav",{"aria-label":"Previous and next chapter",className:"not-prose flex justify-between mt-12 space-x-8"},l.createElement(u,{link:a,direction:"left"}),l.createElement(u,{link:r,direction:"right"})):null}},98701:function(e,t,n){n.d(t,{A:function(){return s}});var l=n(41176),a=n(77557);var r={items:[{url:"/texturepacker3d/documentation",title:"Quickstart"},{url:"/texturepacker3d/documentation/eula",title:"License agreement"}]},c=n(72952),i=n(58209),s={texturepacker:l.A,texturepacker3d:r,spriteilluminator:c.A,physicseditor:a.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.