1"use strict";(self.webpackChunkcodeandweb=self.webpackChunkcodeandweb||[]).push([[2267],{37313:function(e,t,a){a.r(t),a.d(t,{Head:function(){return m},default:function(){return o}});var n=a(28453),i=a(96540);function r(e){const t=Object.assign({h2:"h2",a:"a",span:"span",ul:"ul",li:"li",p:"p",strong:"strong",h3:"h3"},(0,n.R)(),e.components);return i.createElement(i.Fragment,null,i.createElement(t.h2,{id:"what-you-are-going-to-learn",style:{position:"relative"}},"What you are going to learn",i.createElement(t.a,{href:"#what-you-are-going-to-learn","aria-label":"what you are going to learn permalink",className:"anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}}))),"\n",i.createElement(t.ul,null,"\n",i.createElement(t.li,null,"Creating normal mapped sprites with SpriteIlluminator"),"\n",i.createElement(t.li,null,"Packing sprite sheets and normal maps with TexturePacker"),"\n",i.createElement(t.li,null,"Importing normal mapped sprites into Unity"),"\n"),"\n",i.createElement(t.h2,{id:"create-normal-mapped-sprites-in-spriteilluminator",style:{position:"relative"}},"Create normal mapped sprites in SpriteIlluminator",i.createElement(t.a,{href:"#create-normal-mapped-sprites-in-spriteilluminator","aria-label":"create normal mapped sprites in spriteilluminator permalink",className:"anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}}))),"\n",i.createElement(t.p,null,"You are going to learn a quick way to create normal mapped sprites using\nSpriteIlluminator. Detailed tutorials about how to use the different\ntools will be available in other ",i.createElement(t.a,{href:"/spriteilluminator/tutorials"},"tutorials")," soon."),"\n",i.createElement(t.p,null,"Download SpriteIlluminator. It's available for Windows, MacOS X and Linux:\nInstall and start SpriteIlluminator."),"\n",i.createElement(t.p,null,"Drag and drop your sprites onto the left panel â your sprites should show up as small icons."),"\n",i.createElement(t.p,null,"Select all sprites at once using ",i.createElement("kbd",null,i.createElement("kbd",null,"CTRL")," + ",i.createElement("kbd",null,"A"))),"\n",i.createElement(t.p,null,"Use the ",i.createElement(t.strong,null,"Bevel")," tool to create some quick effect: Increase ",i.createElement(t.strong,null,"Bevel width")," to create some round corners. Add a bit ",i.createElement(t.strong,null,"Smoothness")," to make the rim soft."),"\n",i.createElement(t.p,null,"Try using ",i.createElement(t.strong,null,"Emboss")," to create some simple structure on the\nsurface."),"\n",i.createElement(t.p,null,"SpriteIlluminator has many more options and ways to create and enhance\nnormal maps â but this is part of another tutorial..."),"\n",i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 832px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 62.980769230769226%; position: relative; bottom: 0; left: 0; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/90d8fbd9f752cd64f8fd9f8498665faf/b4f21/2d-dynamic-lighting-with-spriteilluminator.avif 208w,\n/static/90d8fbd9f752cd64f8fd9f8498665faf/a7f15/2d-dynamic-lighting-with-spriteilluminator.avif 416w,\n/static/90d8fbd9f752cd64f8fd9f8498665faf/01fa0/2d-dynamic-lighting-with-spriteilluminator.avif 832w,\n/static/90d8fbd9f752cd64f8fd9f8498665faf/acbef/2d-dynamic-lighting-with-spriteilluminator.avif 1248w,\n/static/90d8fbd9f752cd64f8fd9f8498665faf/c57f5/2d-dynamic-lighting-with-spriteilluminator.avif 1556w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/avif"\n /><source\n srcset="/static/90d8fbd9f752cd64f8fd9f8498665faf/6abcd/2d-dynamic-lighting-with-spriteilluminator.webp 208w,\n/static/90d8fbd9f752cd64f8fd9f8498665faf/69edf/2d-dynamic-lighting-with-spriteilluminator.webp 416w,\n/static/90d8fbd9f752cd64f8fd9f8498665faf/da8f3/2d-dynamic-lighting-with-spriteilluminator.webp 832w,\n/static/90d8fbd9f752cd64f8fd9f8498665faf/28eb2/2d-dynamic-lighting-with-spriteilluminator.webp 1248w,\n/static/90d8fbd9f752cd64f8fd9f8498665faf/67b1c/2d-dynamic-lighting-with-spriteilluminator.webp 1556w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/webp"\n />\n <source\n srcset="/static/90d8fbd9f752cd64f8fd9f8498665faf/3697c/2d-dynamic-lighting-with-spriteilluminator.png 208w,\n/static/90d8fbd9f752cd64f8fd9f8498665faf/e3e0f/2d-dynamic-lighting-with-spriteilluminator.png 416w,\n/static/90d8fbd9f752cd64f8fd9f8498665faf/283d3/2d-dynamic-lighting-with-spriteilluminator.png 832w,\n/static/90d8fbd9f752cd64f8fd9f8498665faf/b19d7/2d-dynamic-lighting-with-spriteilluminator.png 1248w,\n/static/90d8fbd9f752cd64f8fd9f8498665faf/19640/2d-dynamic-lighting-with-spriteilluminator.png 1556w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/90d8fbd9f752cd64f8fd9f8498665faf/283d3/2d-dynamic-lighting-with-spriteilluminator.png"\n alt="Quick effects: Bevel tool"\n title=""\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>'}}),"\n",i.createElement(t.p,null,"Click ",i.createElement(t.strong,null,"Publish")," to save the normal maps with the\nextension ",i.createElement(t.strong,null,"_n")," next to the sprites."),"\n",i.createElement(t.p,null,"You can also choose a different folder if you want to keep images separated. Just remember\nto add the sprites and normal maps folder to TexturePacker later."),"\n",i.createElement(t.h3,{id:"preparing-the-unity-project",style:{position:"relative"}},"Preparing the Unity project",i.createElement(t.a,{href:"#preparing-the-unity-project","aria-label":"preparing the unity project permalink",className:"anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}}))),"\n",i.createElement(t.p,null,"Start a new Unity 2D project. I am using Unity 5.0.0 for this tutorial."),"\n",i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 832px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 65.86538461538461%; position: relative; bottom: 0; left: 0; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/65bec0006a87f7dafaf2fd7d9151459f/b4f21/start-unity-2d-project.avif 208w,\n/static/65bec0006a87f7dafaf2fd7d9151459f/a7f15/start-unity-2d-project.avif 416w,\n/static/65bec0006a87f7dafaf2fd7d9151459f/01fa0/start-unity-2d-project.avif 832w,\n/static/65bec0006a87f7dafaf2fd7d9151459f/783e0/start-unity-2d-project.avif 1112w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/avif"\n /><source\n srcset="/static/65bec0006a87f7dafaf2fd7d9151459f/6abcd/start-unity-2d-project.webp 208w,\n/static/65bec0006a87f7dafaf2fd7d9151459f/69edf/start-unity-2d-project.webp 416w,\n/static/65bec0006a87f7dafaf2fd7d9151459f/da8f3/start-unity-2d-project.webp 832w,\n/static/65bec0006a87f7dafaf2fd7d9151459f/79a1a/start-unity-2d-project.webp 1112w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/webp"\n />\n <source\n srcset="/static/65bec0006a87f7dafaf2fd7d9151459f/3697c/start-unity-2d-project.png 208w,\n/static/65bec0006a87f7dafaf2fd7d9151459f/e3e0f/start-unity-2d-project.png 416w,\n/static/65bec0006a87f7dafaf2fd7d9151459f/283d3/start-unity-2d-project.png 832w,\n/static/65bec0006a87f7dafaf2fd7d9151459f/356e4/start-unity-2d-project.png 1112w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/65bec0006a87f7dafaf2fd7d9151459f/283d3/start-unity-2d-project.png"\n alt="New Unity 2d project"\n title=""\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>'}}),"\n",i.createElement(t.p,null,"Open Unity and get the free TexturePacker importer plugin from here:"),"\n",i.createElement(t.p,null,i.createElement(t.a,{href:"https://assetstore.unity.com/packages/tools/sprite-management/texturepacker-importer-16641"},"Download TexturePacker Importer")),"\n",i.createElement(t.p,null,"... and install it. You can leave out the ",i.createElement(t.strong,null,"Example")," folder:"),"\n",i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 394px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 101.4423076923077%; position: relative; bottom: 0; left: 0; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/25d30ea706d4be87a3fdd29765ced14c/b4f21/add-texturepacker-importer.avif 208w,\n/static/25d30ea706d4be87a3fdd29765ced14c/26ad0/add-texturepacker-importer.avif 394w"\n sizes="(max-width: 394px) 100vw, 394px"\n type="image/avif"\n /><source\n srcset="/static/25d30ea706d4be87a3fdd29765ced14c/6abcd/add-texturepacker-importer.webp 208w,\n/static/25d30ea706d4be87a3fdd29765ced14c/9fc5b/add-texturepacker-importer.webp 394w"\n sizes="(max-width: 394px) 100vw, 394px"\n type="image/webp"\n />\n <source\n srcset="/static/25d30ea706d4be87a3fdd29765ced14c/3697c/add-texturepacker-importer.png 208w,\n/static/25d30ea706d4be87a3fdd29765ced14c/6b3f9/add-texturepacker-importer.png 394w"\n sizes="(max-width: 394px) 100vw, 394px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/25d30ea706d4be87a3fdd29765ced14c/6b3f9/add-texturepacker-importer.png"\n alt="Install TexturePacker Importer"\n title=""\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>'}}),"\n",i.createElement(t.h2,{id:"pack-sprite-sheets-with-texturepacker",style:{position:"relative"}},"Pack sprite sheets with TexturePacker",i.createElement(t.a,{href:"#pack-sprite-sheets-with-texturepacker","aria-label":"pack sprite sheets with texturepacker permalink",className:"anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}}))),"\n",i.createElement(t.p,null,"Download TexturePacker. It's available for Windows, MacOS X and Linux:"),"\n",i.createElement(t.p,null,"Install and launch TexturePacker."),"\n",i.createElement(t.p,null,"Select ",i.createElement(t.strong,null,"Unity - Texture2D sprite sheet")," and press ",i.createElement(t.strong,null,"Create Project")),"\n",i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 832px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 76.4423076923077%; position: relative; bottom: 0; left: 0; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/5f6b125c8dd5d276dcaeb56977e84b4d/b4f21/new-unity-project-in-texturepacker.avif 208w,\n/static/5f6b125c8dd5d276dcaeb56977e84b4d/a7f15/new-unity-project-in-texturepacker.avif 416w,\n/static/5f6b125c8dd5d276dcaeb56977e84b4d/01fa0/new-unity-project-in-texturepacker.avif 832w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/avif"\n /><source\n srcset="/static/5f6b125c8dd5d276dcaeb56977e84b4d/6abcd/new-unity-project-in-texturepacker.webp 208w,\n/static/5f6b125c8dd5d276dcaeb56977e84b4d/69edf/new-unity-project-in-texturepacker.webp 416w,\n/static/5f6b125c8dd5d276dcaeb56977e84b4d/da8f3/new-unity-project-in-texturepacker.webp 832w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/webp"\n />\n <source\n srcset="/static/5f6b125c8dd5d276dcaeb56977e84b4d/3697c/new-unity-project-in-texturepacker.png 208w,\n/static/5f6b125c8dd5d276dcaeb56977e84b4d/e3e0f/new-unity-project-in-texturepacker.png 416w,\n/static/5f6b125c8dd5d276dcaeb56977e84b4d/283d3/new-unity-project-in-texturepacker.png 832w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/5f6b125c8dd5d276dcaeb56977e84b4d/283d3/new-unity-project-in-texturepacker.png"\n alt="Start TexturePacker with Unity exporter"\n title=""\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>'}}),"\n",i.createElement(t.p,null,"Drag & drop your complete sprite folder including the normal maps into TexturePacker.\nTexturePacker searches the folder for readable image formats - including png, jpg, psd, tga and many others."),"\n",i.createElement(t.p,null,"Set a checkmark on ",i.createElement(t.strong,null,"Normal maps / Pack with the same layout")," on the settings panel on the right."),"\n",i.createElement(t.p,null,"Set ",i.createElement(t.strong,null,"Layout / Size constraints")," to ",i.createElement(t.strong,null,"POT - Power of 2")," .\nYou can use ",i.createElement(t.strong,null,"Any size")," to create a smaller sprite sheets â but you'll end up\nwith a warning about mipmaps in Unity."),"\n",i.createElement(t.p,null,"Set name of the data file ",i.createElement(t.strong,null,"Data / Data file")," to ",i.createElement(t.strong,null,"sprites.tpsheet")," in your Unity project's ",i.createElement(t.strong,null,"Assets")," folder.\nThe data file contains the position of the individual sprites inside the atlas â needed by the TexturePacker Importer."),"\n",i.createElement(t.p,null,"Finally, press ",i.createElement(t.strong,null,"Publish sprite sheet")),"\n",i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 832px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 62.019230769230774%; position: relative; bottom: 0; left: 0; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/806c5956241b843fe12646d906dfec48/b4f21/pack-sprite-sheet-with-texturepacker.avif 208w,\n/static/806c5956241b843fe12646d906dfec48/a7f15/pack-sprite-sheet-with-texturepacker.avif 416w,\n/static/806c5956241b843fe12646d906dfec48/01fa0/pack-sprite-sheet-with-texturepacker.avif 832w,\n/static/806c5956241b843fe12646d906dfec48/acbef/pack-sprite-sheet-with-texturepacker.avif 1248w,\n/static/806c5956241b843fe12646d906dfec48/6d896/pack-sprite-sheet-with-texturepacker.avif 1405w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/avif"\n /><source\n srcset="/static/806c5956241b843fe12646d906dfec48/6abcd/pack-sprite-sheet-with-texturepacker.webp 208w,\n/static/806c5956241b843fe12646d906dfec48/69edf/pack-sprite-sheet-with-texturepacker.webp 416w,\n/static/806c5956241b843fe12646d906dfec48/da8f3/pack-sprite-sheet-with-texturepacker.webp 832w,\n/static/806c5956241b843fe12646d906dfec48/28eb2/pack-sprite-sheet-with-texturepacker.webp 1248w,\n/static/806c5956241b843fe12646d906dfec48/aec06/pack-sprite-sheet-with-texturepacker.webp 1405w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/webp"\n />\n <source\n srcset="/static/806c5956241b843fe12646d906dfec48/3697c/pack-sprite-sheet-with-texturepacker.png 208w,\n/static/806c5956241b843fe12646d906dfec48/e3e0f/pack-sprite-sheet-with-texturepacker.png 416w,\n/static/806c5956241b843fe12646d906dfec48/283d3/pack-sprite-sheet-with-texturepacker.png 832w,\n/static/806c5956241b843fe12646d906dfec48/b19d7/pack-sprite-sheet-with-texturepacker.png 1248w,\n/static/806c5956241b843fe12646d906dfec48/f8a0b/pack-sprite-sheet-with-texturepacker.png 1405w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/806c5956241b843fe12646d906dfec48/283d3/pack-sprite-sheet-with-texturepacker.png"\n alt="Pack normal maps with TexturePacker"\n title=""\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>'}}),"\n",i.createElement(t.h2,{id:"create-normal-mapped-sprites-in-unity",style:{position:"relative"}},"Create normal mapped sprites in Unity",i.createElement(t.a,{href:"#create-normal-mapped-sprites-in-unity","aria-label":"create normal mapped sprites in unity permalink",className:"anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}}))),"\n",i.createElement(t.p,null,"Switch back to Unity. You should see 3 files in your ",i.createElement(t.strong,null,"Assets")," folder:"),"\n",i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 832px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 12.019230769230768%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAACABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAMEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAGekRoiv//EABcQAAMBAAAAAAAAAAAAAAAAAAACMgP/2gAIAQEAAQUC1gSP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFhAAAwAAAAAAAAAAAAAAAAAAAAEQ/9oACAEBAAY/Aoj/xAAaEAACAgMAAAAAAAAAAAAAAAABEQAQITFx/9oACAEBAAE/ITx7GXup/9oADAMBAAIAAwAAABAP7//EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAEDAQE/ECf/xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAgEBPxBn/8QAGxABAAICAwAAAAAAAAAAAAAAAQARITFBUfD/2gAIAQEAAT8QQrXxhUy33GuTif/Z\'); background-size: cover; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/b991a8fdd095826c7617ebad0a41694e/b4f21/sprite-sheet-files-in-unity.avif 208w,\n/static/b991a8fdd095826c7617ebad0a41694e/a7f15/sprite-sheet-files-in-unity.avif 416w,\n/static/b991a8fdd095826c7617ebad0a41694e/01fa0/sprite-sheet-files-in-unity.avif 832w,\n/static/b991a8fdd095826c7617ebad0a41694e/acbef/sprite-sheet-files-in-unity.avif 1248w,\n/static/b991a8fdd095826c7617ebad0a41694e/6ba7a/sprite-sheet-files-in-unity.avif 1664w,\n/static/b991a8fdd095826c7617ebad0a41694e/a2ed5/sprite-sheet-files-in-unity.avif 2498w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/avif"\n /><source\n srcset="/static/b991a8fdd095826c7617ebad0a41694e/6abcd/sprite-sheet-files-in-unity.webp 208w,\n/static/b991a8fdd095826c7617ebad0a41694e/69edf/sprite-sheet-files-in-unity.webp 416w,\n/static/b991a8fdd095826c7617ebad0a41694e/da8f3/sprite-sheet-files-in-unity.webp 832w,\n/static/b991a8fdd095826c7617ebad0a41694e/28eb2/sprite-sheet-files-in-unity.webp 1248w,\n/static/b991a8fdd095826c7617ebad0a41694e/dcb2d/sprite-sheet-files-in-unity.webp 1664w,\n/static/b991a8fdd095826c7617ebad0a41694e/19e41/sprite-sheet-files-in-unity.webp 2498w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/webp"\n />\n <source\n srcset="/static/b991a8fdd095826c7617ebad0a41694e/22f6b/sprite-sheet-files-in-unity.jpg 208w,\n/static/b991a8fdd095826c7617ebad0a41694e/05966/sprite-sheet-files-in-unity.jpg 416w,\n/static/b991a8fdd095826c7617ebad0a41694e/0d81c/sprite-sheet-files-in-unity.jpg 832w,\n/static/b991a8fdd095826c7617ebad0a41694e/55cc7/sprite-sheet-files-in-unity.jpg 1248w,\n/static/b991a8fdd095826c7617ebad0a41694e/c58cc/sprite-sheet-files-in-unity.jpg 1664w,\n/static/b991a8fdd095826c7617ebad0a41694e/e42c9/sprite-sheet-files-in-unity.jpg 2498w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/jpeg"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/b991a8fdd095826c7617ebad0a41694e/0d81c/sprite-sheet-files-in-unity.jpg"\n alt="Normal maps and sprite sheet in Unity"\n title=""\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>'}}),"\n",i.createElement(t.ul,null,"\n",i.createElement(t.li,null,"A document called ",i.createElement(t.strong,null,"sprites")," - the data file contain the information how to slice the sprite sheet"),"\n",i.createElement(t.li,null,"A sprite sheet called ",i.createElement(t.strong,null,"sprites")," - you can see the sprites contained in it\nusing the little arrow icon next to the sprite sheet."),"\n",i.createElement(t.li,null,"A normal map sprite sheet called ",i.createElement(t.strong,null,"sprites_n")," - containing the normals."),"\n",i.createElement(t.li,null,"A material called ",i.createElement(t.strong,null,"sprites")," - the sphere - required for rendering the light effects."),"\n"),"\n",i.createElement(t.h3,{id:"normal-mapped-material",style:{position:"relative"}}
1,"Normal mapped material",i.createElement(t.a,{href:"#normal-mapped-material","aria-label":"normal mapped material permalink",className:"anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}}))),"\n",i.createElement(t.p,null,"The light effects require a special material. This material connects the normal map with the sprite."),"\n",i.createElement(t.p,null,"TexturePacker Importer automatically creates this material for you. To use it simply attach\nit to all sprites and animations you create."),"\n",i.createElement(t.p,null,"The default shader the importer uses is called ",i.createElement(t.strong,null,"Standard")," . You can\nuse different shaders â depending on the effects you want to create. ",i.createElement(t.strong,null,"Rendering mode")," is set to ",i.createElement(t.strong,null,"Fade"),"\nby default - this blends semi-transparent pixels of the sprite. It also works well with\nanti-aliased sprite borders. The alternative ",i.createElement(t.strong,null,"Cutout")," might be a good choice for tile sets. It\nuses a threshold to determine if a pixel is completely opaque or transparent."),"\n",i.createElement(t.h3,{id:"create-the-animation",style:{position:"relative"}},"Create the animation",i.createElement(t.a,{href:"#create-the-animation","aria-label":"create the animation permalink",className:"anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}}))),"\n",i.createElement(t.p,null,"Select the animation's sprites and drag them into the scene. Unity will ask you about a name for the new animation.\nChoose whatever you want..."),"\n",i.createElement(t.p,null,"Press the ",i.createElement(t.strong,null,"Play")," button to start the scene. The animation should now be playing.\nNice... but where is the light? What you currently see is the sprite without any light effects."),"\n",i.createElement(t.p,null,"You have to set the normal map material you have previously created. Otherwise, no effect will be visible."),"\n",i.createElement(t.p,null,"Select the sprite and change the ",i.createElement(t.strong,null,"Material")," from ",i.createElement(t.strong,null,"Sprites-Default")," to ",i.createElement(t.strong,null,"spritematerial"),"."),"\n",i.createElement(t.p,null,"The sprite becomes dark immediately â also not what you had expected, right? This is because you have no light\nsource in your scene."),"\n",i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 303px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 39.90384615384615%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABgElEQVR42m1RyXaCQBD0/z8hBzcWQRYBERWUTcAlT+OSeFL0TyrdY/CUQ71h6O7qqpqWZVnwgim66gjtroR+vwdFUSBJEjqdDmT6Xi4WyLIMaZq+kSQJFsslsjSGZvn46OrQtQFa09kMjutCUk2YloPRyIbv+3Dpn23b8DwPg6EBw6S6YWA4HAqwkDiOUZYF/CCCbro0N0YrDEMatKANBkJFtV6jKApqLFFVFVarFZI0o1oulDFJnueifjwecTqfcb3+YLOu4DgOWvP5XCgxTQsLssZDTMzgQbZ2ulxRPx643W6o6xr3+118N3g+n2K5IGSFBlnRNI1Izfd2PhlM3NY9SLICWeaM++hRzqqqYkkZNn1RFCEIgpdCvkwmE8woT74z2GrTXFFOGdn+3O3wfbngTDYvhBNb/sPX4UB95UshByzLslCp67pQytaZlE/X9eDRI7EitlbQYJNxg4KWcmRC4Xg8Fi/HKjkHXsDFhjAkB/v9HtvtFpvN5l9wjYl/ASZC/7wrcAS9AAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/1e8f0c8e5e372dae1eb620d2686b68a3/b4f21/setting-normal-map-material.avif 208w,\n/static/1e8f0c8e5e372dae1eb620d2686b68a3/68f98/setting-normal-map-material.avif 303w"\n sizes="(max-width: 303px) 100vw, 303px"\n type="image/avif"\n /><source\n srcset="/static/1e8f0c8e5e372dae1eb620d2686b68a3/6abcd/setting-normal-map-material.webp 208w,\n/static/1e8f0c8e5e372dae1eb620d2686b68a3/ffcb0/setting-normal-map-material.webp 303w"\n sizes="(max-width: 303px) 100vw, 303px"\n type="image/webp"\n />\n <source\n srcset="/static/1e8f0c8e5e372dae1eb620d2686b68a3/3697c/setting-normal-map-material.png 208w,\n/static/1e8f0c8e5e372dae1eb620d2686b68a3/81b5a/setting-normal-map-material.png 303w"\n sizes="(max-width: 303px) 100vw, 303px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/1e8f0c8e5e372dae1eb620d2686b68a3/81b5a/setting-normal-map-material.png"\n alt="Setting normal map material"\n title=""\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>'}}),"\n",i.createElement(t.h3,{id:"adding-a-light-source",style:{position:"relative"}},"Adding a light source",i.createElement(t.a,{href:"#adding-a-light-source","aria-label":"adding a light source permalink",className:"anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}}))),"\n",i.createElement(t.p,null,"Unity has several light sources you can use."),"\n",i.createElement(t.ul,null,"\n",i.createElement(t.li,null,i.createElement(t.strong,null,"Directional Light"),i.createElement("br")," A light source that acts as a global light source. The light is not restricted in its\narea and shines on all objects. You can use it e.g. as the sun."),"\n",i.createElement(t.li,null,i.createElement(t.strong,null,"Point Light"),i.createElement("br")," A point light is a light that is emitted from a single point in space. It forms a sphere around\nthe light source. The light's intensity decreases with increasing distance from the light source. Great for creating\nlight bulbs. With some added animation, it can be used to model candles, torches, fire places, â¦"),"\n",i.createElement(t.li,null,i.createElement(t.strong,null,"Spot Light"),i.createElement("br")," A spot light is a light that is emitted from a single point in space. It forms a cone. It can\nbe used to create street lights, spots and other effects."),"\n"),"\n",i.createElement(t.p,null,"Use ",i.createElement(t.strong,null,"GameObject / Light / Directional Light")," to create a new light source."),"\n",i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 832px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 71.15384615384615%; position: relative; bottom: 0; left: 0; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/4a5dddb23b48c7716ef636c7b74eb040/b4f21/sprite-with-dynamic-light.avif 208w,\n/static/4a5dddb23b48c7716ef636c7b74eb040/a7f15/sprite-with-dynamic-light.avif 416w,\n/static/4a5dddb23b48c7716ef636c7b74eb040/01fa0/sprite-with-dynamic-light.avif 832w,\n/static/4a5dddb23b48c7716ef636c7b74eb040/acbef/sprite-with-dynamic-light.avif 1248w,\n/static/4a5dddb23b48c7716ef636c7b74eb040/2ca5f/sprite-with-dynamic-light.avif 1518w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/avif"\n /><source\n srcset="/static/4a5dddb23b48c7716ef636c7b74eb040/6abcd/sprite-with-dynamic-light.webp 208w,\n/static/4a5dddb23b48c7716ef636c7b74eb040/69edf/sprite-with-dynamic-light.webp 416w,\n/static/4a5dddb23b48c7716ef636c7b74eb040/da8f3/sprite-with-dynamic-light.webp 832w,\n/static/4a5dddb23b48c7716ef636c7b74eb040/28eb2/sprite-with-dynamic-light.webp 1248w,\n/static/4a5dddb23b48c7716ef636c7b74eb040/c2a5d/sprite-with-dynamic-light.webp 1518w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/webp"\n />\n <source\n srcset="/static/4a5dddb23b48c7716ef636c7b74eb040/3697c/sprite-with-dynamic-light.png 208w,\n/static/4a5dddb23b48c7716ef636c7b74eb040/e3e0f/sprite-with-dynamic-light.png 416w,\n/static/4a5dddb23b48c7716ef636c7b74eb040/283d3/sprite-with-dynamic-light.png 832w,\n/static/4a5dddb23b48c7716ef636c7b74eb040/b19d7/sprite-with-dynamic-light.png 1248w,\n/static/4a5dddb23b48c7716ef636c7b74eb040/10cec/sprite-with-dynamic-light.png 1518w"\n sizes="(max-width: 832px) 100vw, 832px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/4a5dddb23b48c7716ef636c7b74eb040/283d3/sprite-with-dynamic-light.png"\n alt="Adding a light"\n title=""\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>'}}),"\n",i.createElement(t.p,null,"Remember that your sprite is still a flat object. Normal mapping only creates the illusion of 3d."),"\n",i.createElement(t.p,null,"The light source and it's position is really 3d. It makes a big difference where you position\nthe light. Especially the z-value."),"\n",i.createElement(t.p,null,"Try placing the light source between the object and the camera for best results."),"\n",i.createElement(t.h2,{id:"thats-it",style:{position:"relative"}},"That's it",i.createElement(t.a,{href:"#thats-it","aria-label":"thats it permalink",className:"anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}}))),"\n",i.createElement(t.p,null,"You should have learned how to"),"\n",i.createElement(t.ul,null,"\n",i.createElement(t.li,null,"create normal mapped sprites with SpriteIlluminator"),"\n",i.createElement(t.li,null,"create sprite sheets with TexturePacker"),"\n",i.createElement(t.li,null,"add your normal mapped sprites to your Unity project"),"\n",i.createElement(t.li,null,"create a material and light sources"),"\n"),"\n",i.createElement(t.p,null,"Now it's up to you to experiment and create some awesome stuff!"))}var s=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.R)(),e.components);return t?i.createElement(t,e,i.createElement(r,e)):r(e)},l=a(11042),c=a(77891),d=a(74110);function p(e){let{data:t,pageContext:a,children:n}=e;const r=a.pageData,s=t.mdx,l=s.tableOfContents,p=s.frontmatter.noTitleImage?null:s.frontmatter.image;return i.createElement(c.W,null,i.createElement(d.n,{pageData:r,image:p,onPageItems:l.items},n))}function o(e){return i.createElement(p,e,i.createElement(s,e))}const m=e=>{let{pageContext:t}=e;return i.createElement(i.Fragment,null,i.createElement(l.A,{pageData:t.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.