1"use strict";(self.webpackChunkcodeandweb=self.webpackChunkcodeandweb||[]).push([[31225],{23071:function(e,a,t){t.r(a),t.d(a,{Head:function(){return f},default:function(){return h}});var n=t(28453),i=t(96540),r=t(94296);function s(e){const a=Object.assign({p:"p",ul:"ul",li:"li",h2:"h2",a:"a",span:"span",strong:"strong",ol:"ol",em:"em",h3:"h3",pre:"pre",code:"code"},(0,n.R)(),e.components);return i.createElement(i.Fragment,null,i.createElement(a.p,null,"Learn how to create an optimized sprite sheet with TexturePacker and use it in a LayaAir project."),"\n",i.createElement(a.p,null,"Prerequisites:"),"\n",i.createElement(a.ul,null,"\n",i.createElement(a.li,null,"LayaAir installed and a project created."),"\n",i.createElement(a.li,null,"A set of sprites (PNGs) you want to pack."),"\n"),"\n",i.createElement(a.h2,{id:"install-texturepacker",style:{position:"relative"}},"Install TexturePacker",i.createElement(a.a,{href:"#install-texturepacker","aria-label":"install texturepacker permalink",className:"anchor after"},i.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}}))),"\n",i.createElement(a.p,null,"Download and install TexturePacker:"),"\n",i.createElement(r.f,{product:"texturepacker"}),"\n",i.createElement(a.p,null,"To install it, follow these steps:"),"\n",i.createElement(a.p,null,i.createElement(a.strong,null,"For Windows:")),"\n",i.createElement(a.ol,null,"\n",i.createElement(a.li,null,"Double-click the ",i.createElement(a.em,null,"TexturePacker.msi")," file to start the installation process."),"\n"),"\n",i.createElement(a.p,null,i.createElement(a.strong,null,"For macOS:")),"\n",i.createElement(a.ol,null,"\n",i.createElement(a.li,null,"Open the ",i.createElement(a.em,null,"TexturePacker.dmg")," file."),"\n",i.createElement(a.li,null,"Drag and drop the ",i.createElement(a.em,null,"TexturePacker.app")," into your Applications folder."),"\n"),"\n",i.createElement(a.p,null,"Once installed, start TexturePacker and select ",i.createElement(a.strong,null,"Try TexturePacker Pro")," to unlock all features for 7 days."),"\n",i.createElement(a.h2,{id:"create-your-sprite-sheet-in-texturepacker",style:{position:"relative"}},"Create your sprite sheet in TexturePacker",i.createElement(a.a,{href:"#create-your-sprite-sheet-in-texturepacker","aria-label":"create your sprite sheet in texturepacker permalink",className:"anchor after"},i.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}}))),"\n",i.createElement(a.ol,null,"\n",i.createElement(a.li,null,"Open TexturePacker."),"\n",i.createElement(a.li,null,"Drag and drop your sprites into the app. You should see a layout similar to this:"),"\n"),"\n",i.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<figure class="gatsby-resp-image-figure" style="">\n <span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 832px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 65.86538461538461%; position: relative; bottom: 0; left: 0; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/de92e9142d6f28ff7e41eb2377ab39e6/b4f21/create-a-sprite-sheet-for-laya-air%402x.avif 208w,\n/static/de92e9142d6f28ff7e41eb2377ab39e6/a7f15/create-a-sprite-sheet-for-laya-air%402x.avif 416w,\n/static/de92e9142d6f28ff7e41eb2377ab39e6/01fa0/create-a-sprite-sheet-for-laya-air%402x.avif 832w,\n/static/de92e9142d6f28ff7e41eb2377ab39e6/acbef/create-a-sprite-sheet-for-laya-air%402x.avif 1248w,\n/static/de92e9142d6f28ff7e41eb2377ab39e6/6ba7a/create-a-sprite-sheet-for-laya-air%402x.avif 1664w,\n/static/de92e9142d6f28ff7e41eb2377ab39e6/fb732/create-a-sprite-sheet-for-laya-air%402x.avif 2400w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/avif"\n /><source\n srcset="/static/de92e9142d6f28ff7e41eb2377ab39e6/6abcd/create-a-sprite-sheet-for-laya-air%402x.webp 208w,\n/static/de92e9142d6f28ff7e41eb2377ab39e6/69edf/create-a-sprite-sheet-for-laya-air%402x.webp 416w,\n/static/de92e9142d6f28ff7e41eb2377ab39e6/da8f3/create-a-sprite-sheet-for-laya-air%402x.webp 832w,\n/static/de92e9142d6f28ff7e41eb2377ab39e6/28eb2/create-a-sprite-sheet-for-laya-air%402x.webp 1248w,\n/static/de92e9142d6f28ff7e41eb2377ab39e6/dcb2d/create-a-sprite-sheet-for-laya-air%402x.webp 1664w,\n/static/de92e9142d6f28ff7e41eb2377ab39e6/4293a/create-a-sprite-sheet-for-laya-air%402x.webp 2400w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/webp"\n />\n <source\n srcset="/static/de92e9142d6f28ff7e41eb2377ab39e6/3697c/create-a-sprite-sheet-for-laya-air%402x.png 208w,\n/static/de92e9142d6f28ff7e41eb2377ab39e6/e3e0f/create-a-sprite-sheet-for-laya-air%402x.png 416w,\n/static/de92e9142d6f28ff7e41eb2377ab39e6/283d3/create-a-sprite-sheet-for-laya-air%402x.png 832w,\n/static/de92e9142d6f28ff7e41eb2377ab39e6/b19d7/create-a-sprite-sheet-for-laya-air%402x.png 1248w,\n/static/de92e9142d6f28ff7e41eb2377ab39e6/fe2bb/create-a-sprite-sheet-for-laya-air%402x.png 1664w,\n/static/de92e9142d6f28ff7e41eb2377ab39e6/84976/create-a-sprite-sheet-for-laya-air%402x.png 2400w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/de92e9142d6f28ff7e41eb2377ab39e6/283d3/create-a-sprite-sheet-for-laya-air%402x.png"\n alt="Create a sprite sheet for LayaAir using TexturePacker"\n title="Create a sprite sheet for LayaAir using TexturePacker"\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>\n <figcaption class="gatsby-resp-image-figcaption">Create a sprite sheet for LayaAir using TexturePacker</figcaption>\n </figure>'}}),"\n",i.createElement(a.ol,{start:"3"},"\n",i.createElement(a.li,null,"Click the ",i.createElement(a.strong,null,"Framework")," button (top-right) and select ",i.createElement(a.strong,null,"LayaAir"),".\nClick the folder icon next to ",i.createElement(a.strong,null,"Data file")," and set its file name to ",i.createElement(a.em,null,"mysprites.atlas")," inside your project's ",i.createElement(a.em,null,"assets")," folder."),"\n",i.createElement(a.li,null,"Click ",i.createElement(a.strong,null,"Publish sprite sheet")," to generate the .atlas and .png file."),"\n"),"\n",i.createElement(a.h2,{id:"use-the-sprite-sheet-in-layaair-ide",style:{position:"relative"}},"Use the sprite sheet in LayaAir IDE",i.createElement(a.a,{href:"#use-the-sprite-sheet-in-layaair-ide","aria-label":"use the sprite sheet in layaair ide permalink",className:"anchor after"},i.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}}))),"\n",i.createElement(a.p,null,"Switch back to LayaAir. In the ",i.createElement(a.strong,null,"Assets")," panel (bottom left) you should already see the newly created sprite sheet.\nLayaAir scans the assets folder and shows all sprite sheets including all the sprites they contain.\nNow you can drag and drop sprites into a scene or animation:"),"\n",i.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<figure class="gatsby-resp-image-figure" style="">\n <span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 832px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 63.46153846153847%; position: relative; bottom: 0; left: 0; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/9986ae9c533b66609573cfe8024a8309/b4f21/sprite-sheet-in-laya-air-ide%402x.avif 208w,\n/static/9986ae9c533b66609573cfe8024a8309/a7f15/sprite-sheet-in-laya-air-ide%402x.avif 416w,\n/static/9986ae9c533b66609573cfe8024a8309/01fa0/sprite-sheet-in-laya-air-ide%402x.avif 832w,\n/static/9986ae9c533b66609573cfe8024a8309/acbef/sprite-sheet-in-laya-air-ide%402x.avif 1248w,\n/static/9986ae9c533b66609573cfe8024a8309/6ba7a/sprite-sheet-in-laya-air-ide%402x.avif 1664w,\n/static/9986ae9c533b66609573cfe8024a8309/71e54/sprite-sheet-in-laya-air-ide%402x.avif 2616w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/avif"\n /><source\n srcset="/static/9986ae9c533b66609573cfe8024a8309/6abcd/sprite-sheet-in-laya-air-ide%402x.webp 208w,\n/static/9986ae9c533b66609573cfe8024a8309/69edf/sprite-sheet-in-laya-air-ide%402x.webp 416w,\n/static/9986ae9c533b66609573cfe8024a8309/da8f3/sprite-sheet-in-laya-air-ide%402x.webp 832w,\n/static/9986ae9c533b66609573cfe8024a8309/28eb2/sprite-sheet-in-laya-air-ide%402x.webp 1248w,\n/static/9986ae9c533b66609573cfe8024a8309/dcb2d/sprite-sheet-in-laya-air-ide%402x.webp 1664w,\n/static/9986ae9c533b66609573cfe8024a8309/c464d/sprite-sheet-in-laya-air-ide%402x.webp 2616w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/webp"\n />\n <source\n srcset="/static/9986ae9c533b66609573cfe8024a8309/3697c/sprite-sheet-in-laya-air-ide%402x.png 208w,\n/static/9986ae9c533b66609573cfe8024a8309/e3e0f/sprite-sheet-in-laya-air-ide%402x.png 416w,\n/static/9986ae9c533b66609573cfe8024a8309/283d3/sprite-sheet-in-laya-air-ide%402x.png 832w,\n/static/9986ae9c533b66609573cfe8024a8309/b19d7/sprite-sheet-in-laya-air-ide%402x.png 1248w,\n/static/9986ae9c533b66609573cfe8024a8309/fe2bb/sprite-sheet-in-laya-air-ide%402x.png 1664w,\n/static/9986ae9c533b66609573cfe8024a8309/3420b/sprite-sheet-in-laya-air-ide%402x.png 2616w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/9986ae9c533b66609573cfe8024a8309/283d3/sprite-sheet-in-laya-air-ide%402x.png"\n alt="Use a sprite sheet in LayaAir IDE"\n title="Use a sprite sheet in LayaAir IDE"\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>\n <figcaption class="gatsby-resp-image-figcaption">Use a sprite sheet in LayaAir IDE</figcaption>\n </figure>'}}),"\n",i.createElement(a.h3,{id:"important-preload-the-sprite-sheet-before-playing",style:{position:"relative"}},"Important: Preload the sprite sheet before playing",i.createElement(a.a,{href:"#important-preload-the-sprite-sheet-before-playing","aria-label":"important preload the sprite sheet before playing permalink",className:"anchor after"},i.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}}))),"\n",i.createElement(a.p,null,"If you press Play and see no sprites, the sheet is likely not preloaded. Sprite sheets must be loaded before the scene runs, otherwise you might see an error like:"),"\n",i.createElement(a.pre,null,i.createElement(a.code,null,"Failed to load 'mysprites/walk_01.png'\n")),"\n",i.createElement(a.p,null,"To preload:"),"\n",i.createElement(a.ol,null,"\n",i.createElement(a.li,null,"Select the scene node in the ",i.createElement(a.strong,null,"Hierarchy")," panel."),"\n",i.createElement(a.li,null,"Drag the sprite sheet from the assets onto the ",i.createElement(a.strong,null,"[+]")," button of the ",i.createElement(a.strong,null,"Preloads")," list to add it to the list:"),"\n"),"\n",i.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<figure class="gatsby-resp-image-figure" style="">\n <span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 832px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 46.15384615384615%; position: relative; bottom: 0; left: 0; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/1aa2c7a27c98c3c7692a2ae1e3ca8010/b4f21/preload-sprite-sheet-with-laya-air%402x.avif 208w,\n/static/1aa2c7a27c98c3c7692a2ae1e3ca8010/a7f15/preload-sprite-sheet-with-laya-air%402x.avif 416w,\n/static/1aa2c7a27c98c3c7692a2ae1e3ca8010/01fa0/preload-sprite-sheet-with-laya-air%402x.avif 832w,\n/static/1aa2c7a27c98c3c7692a2ae1e3ca8010/acbef/preload-sprite-sheet-with-laya-air%402x.avif 1248w,\n/static/1aa2c7a27c98c3c7692a2ae1e3ca8010/6ba7a/preload-sprite-sheet-with-laya-air%402x.avif 1664w,\n/static/1aa2c7a27c98c3c7692a2ae1e3ca8010/eb292/preload-sprite-sheet-with-laya-air%402x.avif 2154w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/avif"\n /><source\n srcset="/static/1aa2c7a27c98c3c7692a2ae1e3ca8010/6abcd/preload-sprite-sheet-with-laya-air%402x.webp 208w,\n/static/1aa2c7a27c98c3c7692a2ae1e3ca8010/69edf/preload-sprite-sheet-with-laya-air%402x.webp 416w,\n/static/1aa2c7a27c98c3c7692a2ae1e3ca8010/da8f3/preload-sprite-sheet-with-laya-air%402x.webp 832w,\n/static/1aa2c7a27c98c3c7692a2ae1e3ca8010/28eb2/preload-sprite-sheet-with-laya-air%402x.webp 1248w,\n/static/1aa2c7a27c98c3c7692a2ae1e3ca8010/dcb2d/preload-sprite-sheet-with-laya-air%402x.webp 1664w,\n/static/1aa2c7a27c98c3c7692a2ae1e3ca8010/fe58b/preload-sprite-sheet-with-laya-air%402x.webp 2154w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/webp"\n />\n <source\n srcset="/static/1aa2c7a27c98c3c7692a2ae1e3ca8010/3697c/preload-sprite-sheet-with-laya-air%402x.png 208w,\n/static/1aa2c7a27c98c3c7692a2ae1e3ca8010/e3e0f/preload-sprite-sheet-with-laya-air%402x.png 416w,\n/static/1aa2c7a27c98c3c7692a2ae1e3ca8010/283d3/preload-sprite-sheet-with-laya-air%402x.png 832w,\n/static/1aa2c7a27c98c3c7692a2ae1e3ca8010/b19d7/preload-sprite-sheet-with-laya-air%402x.png 1248w,\n/static/1aa2c7a27c98c3c7692a2ae1e3ca8010/fe2bb/preload-sprite-sheet-with-laya-air%402x.png 1664w,\n/static/1aa2c7a27c98c3c7692a2ae1e3ca8010/087cc/preload-sprite-sheet-with-laya-air%402x.png 2154w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/1aa2c7a27c98c3c7692a2ae1e3ca8010/283d3/preload-sprite-sheet-with-laya-air%402x.png"\n alt="Preload a sprite sheet in LayaAir IDE"\n title="Preload a sprite sheet in LayaAir IDE"\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>\n <figcaption class="gatsby-resp-image-figcaption">Preload a sprite sheet in LayaAir IDE</figcaption>\n </figure>'}}),"\n",i.createElement(a.p,null,"Press Play again, your sprites should now render correctly."),"\n",i.createElement(a.h2,{id:"next-steps",style:{position:"relative"}},"Next steps",i.createElement(a.a,{href:"#next-steps","aria-label":"next steps permalink",className:"anchor after"},i.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}}))),"\n",i.createElement(a.ul,null,"\n",i.createElement(a.li,null,"Organize animations: Name files with a common prefix (e.g., run_01.png, run_02.png, ...) for easier animation creation."),"\n",i.createElement(a.li,null,"Faster loads: Use TexturePacker's Multipack for large projects to split content into multiple smaller sheets."),"\n",i.createElement(a.li,null,"Iterate quickly: Re-publish from TexturePacker â LayaAir will automatically detect updates in the Assets panel."),"\n"))}var l=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,n.R)(),e.components);return a?i.createElement(a,e,i.createElement(s,e)):s(e)},c=t(11042),p=t(77891),o=t(74110);function d(e){let{data:a,pageContext:t,children:n}=e;const r=t.pageData,s=a.mdx,l=s.tableOfContents,c=s.frontmatter.noTitleImage?null:s.frontmatter.image;return i.createElement(p.W,null,i.createElement(o.n,{pageData:r,image:c,onPageItems:l.items},n))}function h(e){return i.createElement(d,e,i.createElement(l,e))}const f=e=>{let{pageContext:a}=e;return i.createElement(i.Fragment,null,i.createElement(c.A,{pageData:a.pageData}))}}}]);
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.