https://www.codeandweb.com/component---src-pages-md-normal-map-generator-tsx-333906753bda0ab7487b.js

1"use strict";(self.webpackChunkcodeandweb=self.webpackChunkcodeandweb||[]).push([[23405],{744:function(e){e.exports=JSON.parse('{"layout":"constrained","backgroundColor":"#284868","images":{"fallback":{"src":"/static/40ad900ec80636880dd526c95946b358/afa5c/spriteilluminator-demo-scene.png","srcSet":"/static/40ad900ec80636880dd526c95946b358/2fe1e/spriteilluminator-demo-scene.png 480w,\\n/static/40ad900ec80636880dd526c95946b358/9bec7/spriteilluminator-demo-scene.png 960w,\\n/static/40ad900ec80636880dd526c95946b358/afa5c/spriteilluminator-demo-scene.png 1920w","sizes":"(min-width: 1920px) 1920px, 100vw"},"sources":[{"srcSet":"/static/40ad900ec80636880dd526c95946b358/65a54/spriteilluminator-demo-scene.avif 480w,\\n/static/40ad900ec80636880dd526c95946b358/da9f1/spriteilluminator-demo-scene.avif 960w,\\n/static/40ad900ec80636880dd526c95946b358/031aa/spriteilluminator-demo-scene.avif 1920w","type":"image/avif","sizes":"(min-width: 1920px) 1920px, 100vw"},{"srcSet":"/static/40ad900ec80636880dd526c95946b358/3a3a2/spriteilluminator-demo-scene.webp 480w,\\n/static/40ad900ec80636880dd526c95946b358/bde8a/spriteilluminator-demo-scene.webp 960w,\\n/static/40ad900ec80636880dd526c95946b358/c512e/spriteilluminator-demo-scene.webp 1920w","type":"image/webp","sizes":"(min-width: 1920px) 1920px, 100vw"}]},"width":1920,"height":1080}')},4405:function(e){e.exports=JSON.parse('{"layout":"constrained","backgroundColor":"#7878f8","images":{"fallback":{"src":"/static/be145e59468311900c6b80d050534973/87706/algorithmic-normalmaps%402x.png","srcSet":"/static/be145e59468311900c6b80d050534973/f80f8/algorithmic-normalmaps%402x.png 320w,\\n/static/be145e59468311900c6b80d050534973/9a63f/algorithmic-normalmaps%402x.png 640w,\\n/static/be145e59468311900c6b80d050534973/87706/algorithmic-normalmaps%402x.png 1280w","sizes":"(min-width: 1280px) 1280px, 100vw"},"sources":[{"srcSet":"/static/be145e59468311900c6b80d050534973/c0bcc/algorithmic-normalmaps%402x.webp 320w,\\n/static/be145e59468311900c6b80d050534973/17574/algorithmic-normalmaps%402x.webp 640w,\\n/static/be145e59468311900c6b80d050534973/71d4d/algorithmic-normalmaps%402x.webp 1280w","type":"image/webp","sizes":"(min-width: 1280px) 1280px, 100vw"}]}

1,"width":1280,"height":720}')},12649:function(e){e.exports=JSON.parse('{"layout":"constrained","images":{"fallback":{"src":"/static/13d5383862313bcb9bbab119f414b96a/09cca/spriteilluminator-mac%402x.png","srcSet":"/static/13d5383862313bcb9bbab119f414b96a/85717/spriteilluminator-mac%402x.png 641w,\\n/static/13d5383862313bcb9bbab119f414b96a/5135b/spriteilluminator-mac%402x.png 1282w,\\n/static/13d5383862313bcb9bbab119f414b96a/09cca/spriteilluminator-mac%402x.png 2564w","sizes":"(min-width: 2564px) 2564px, 100vw"},"sources":[{"srcSet":"/static/13d5383862313bcb9bbab119f414b96a/0fe74/spriteilluminator-mac%402x.webp 641w,\\n/static/13d5383862313bcb9bbab119f414b96a/0e659/spriteilluminator-mac%402x.webp 1282w,\\n/static/13d5383862313bcb9bbab119f414b96a/7f8cd/spriteilluminator-mac%402x.webp 2564w","type":"image/webp","sizes":"(min-width: 2564px) 2564px, 100vw"}]},"width":2564,"height":1444}')},15142:function(e,t,a){a.d(t,{h:function(){return n}});const n={title:"CodeAndWeb",siteUrl:"https://www.codeandweb.com",image:"/img/logo.png",author:{name:"Andreas Löw"},organization:{name:"CodeAndWeb GmbH",url:"https://www.codeandweb.com",logo:"https://www.codeandweb.com/img/logo.png"},social:{twitter:"@codeandweb"}}},18443:function(e,t,a){a.r(t),a.d(t,{Head:function(){return O},default:function(){return T},frontmatter:function(){return w}});var n=a(96540),l=a(89178),i=a(23210),r=a(67575),s=a(97364),c=a(34429),m=a(89528),o=a(24612),d=a(90177),p=a(20105),u=a(91823),g=a(72119),b=a(32532),f=a(11042);const w={title:"Normal Map Generator for Windows, macOS and Linux",description:"This Normal Map Generator for 2d games such as Phaser, PixiJs, Unity, Godot",footer:"slim",product:"spriteilluminator"},h=()=>n.createElement("div",{className:"py-8"},n.createElement(m.n,{className:"my-8",title:"Optimized for 2D-Games",subTitle:n.createElement(n.Fragment,null,"SpriteIlluminator is optimized for 2D Game Sprites:",n.createElement("ul",null,n.createElement("li",null,"Work with multiple sprites"),n.createElement("li",null,"Generate normal maps from sprite's transparency")))}),n.createElement(c.mc,null,n.createElement(o.Y,null),n.createElement("div",{className:"text-center text-gray-500 text-sm"},"This game scene was created using SpriteIlluminator and cocos2d-x.",n.createElement("br",null),n.createElement("span",{className:"text-xs"},"(Get the source code here: ",n.createElement(d.A,{className:"underline font-semibold hover:text-black",to:"/spriteilluminator/tutorials/lighting-demo-cocos2d-x"},"SpriteIlluminator tutorial"),")")))),x=()=>n.createElement("div",{className:"py-8"},n.createElement(m.n,{title:"Realtime Preview",subTitle:n.createElement(n.Fragment,null,"Stay in control of your work. See how your sprite is going to look in your game. Paint and edit while you experience the changes in real time. Automatically rotate the light source.")}),n.createElement(c.mc,null,n.createElement(s.A,null))),E=()=>n.createElement(l.l,{headline:"Normal map editor",product:{first:"Normalmap Generator",last:"",product:"spriteilluminator"},description:n.createElement(n.Fragment,null,n.createElement("ul",null,n.createElement("li",null,"Automated normal map generation"),n.createElement("li",null,"Realtime Painting & Editing"),n.createElement("li",null,"Realtime Preview"),n.createElement("li",null,"Optimized for 2D-Games"),n.createElement("li",null,"Windows & Mac OS X"))),screenshot:n.createElement(r.A,null),frameworkText:"Works with any game engine that supports 2d lighting, e.g.",frameworkIcons:n.createElement("div",{className:"flex gap-4 mt-4"},n.createElement(i.A,{className:"w-20",framework:"unity"}),n.createElement(i.A,{className:"w-20",framework:"godot"}),n.createElement(i.A,{className:"w-20",framework:"cocos2d"}),n.createElement(i.A,{className:"w-20",framework:"spritekit"}),n.createElement(i.A,{className:"w-20",framework:"phaser"}),n.createElement(i.A,{className:"w-20",framework:"pixijs"}))}),y=()=>n.createElement(n.Fragment,null,n.createElement(n.Fragment,null,n.createElement(p.w,{title:"SpriteIlluminator in detail",subTitle:n.createElement(n.Fragment,null),variant:"light",pattern:"right"},n.createElement(N,null),n.createElement(k,null)))),v=()=>n.createElement("figure",null,n.createElement(b.S,{alt:"Automatically create normal maps from a sprites color or transparency.",src:"./spriteilluminator/index/[email protected]",__imageData:a(4405)}),n.createElement("figcaption",{className:"text-center text-sm text-gray-500 py-1"},"Automatically create normal maps from a sprites color or transparency.")),N=()=>n.createElement(u.U,{imagePosition:"right",title:"Automated normal map generation",subTitle:"The effect tools generate normal maps based on image processing algorithms.",image:n.createElement(v,null)},n.createElement(g.S,null,n.createElement("p",null,"Powerful algorithms create normal maps from your sprite automatically. They anal

1yze the sprite's transparency and structure to create volume and texture in your normal maps."))),S=()=>n.createElement("figure",null,n.createElement(b.S,{alt:"Paint your sprite's normal map using the paint tools.",src:"./spriteilluminator/index/[email protected]",__imageData:a(42503)}),n.createElement("figcaption",{className:"text-center text-sm text-gray-500 py-1"},"Paint your sprite's normal map using the paint tools.")),k=()=>n.createElement(n.Fragment,null,n.createElement(u.U,{imagePosition:"left",title:"Paint tools - optimize your normal map",subTitle:"Use the painting tools to refine your normal maps",image:n.createElement(S,null)},n.createElement(g.S,null,n.createElement("p",null,"Draw with the brush tools to fine tune your generated normal maps."),n.createElement("ul",null,n.createElement("li",null,"Adjust the orientation of your sprite using the angle brush"),n.createElement("li",null,"Add structure and textures using the structure brush.")))));function T(){return n.createElement(n.Fragment,null,n.createElement("article",null,n.createElement(E,null),n.createElement(h,null),n.createElement(x,null),n.createElement(y,null)))}const O=e=>{let{pageContext:t}=e;return n.createElement(f.A,{pageData:t.pageData})}},20105:function(e,t,a){a.d(t,{w:function(){return m}});var n=a(96540),l=a(89528),i=a(46942),r=a.n(i),s=a(72040),c=a(34429);const m=e=>{let{title:t,subTitle:a,className:i,containerClassName:m,variant:o="white",pattern:d="none",children:p}=e;return n.createElement(s.V,{variant:o,pattern:d,className:r()("py-16 overflow-hidden lg:py-24",i)},n.createElement(c.mc,{className:m||"space-y-12 lg:space-y-24 "},(t||a)&&n.createElement(l.n,{title:t,subTitle:a}),p))}},20912:function(e,t,a){a.d(t,{L:function(){return g}});var n=a(96540),l=a(46942),i=a.n(l),r=a(49778),s=a(98957),c=a.n(s),m=a(81851),o=a(86462),d=a(44753),p=a(15142),u=a(33971);const g=e=>{let{json:t,placeholderImage:a}=e;const l=(0,n.useContext)(r.M),s=(0,n.useContext)(d.d),{0:g,1:b}=(0,n.useState)(!1),{0:f,1:w}=(0,n.useState)(0),{0:h,1:x}=(0,n.useState)(!1),E=t.embedUrl,y=E.includes("vimeo")?"vimeo":"youtube",v=(0,n.useRef)(),{0:N,1:S}=(0,n.useState)(!1),k=(T=t.width,O=t.height,10*T==16*O?"aspect-16/10":"aspect-16/9");var T,O;const C=()=>l.playerEnabled[y],{0:z,1:A}=(0,n.useState)(C()),{pathname:P}=(0,o.useLocation)();(0,n.useEffect)((()=>{const e=new URL(window.location.href),t=new URLSearchParams(e.hash.slice(1)),a=new URLSearchParams(e.search);w(I(t.get("t")||a.get("t")||"00:00")),b(!0)}),[]);const I=e=>{const[t,a]=e.split(":").map(Number);return 60*t+a},D=()=>{C()||l.enablePlayer(y)},U=e=>{l.setNowPlaying(e)},j=Object.assign({"@context":"https://schema.org","@type":"VideoObject"},t,{url:p.h.siteUrl+"/"+s.slug});return n.createElement(n.Fragment,null,n.createElement("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:JSON.stringify(j)}}),n.createElement("div",{className:i()("w-full rounded-lg overflow-hidden bg-gray-200 my-8 relative",k)},!h&&n.createElement(u.R,{embedOrStartVideo:()=>{C()?v.current.seekTo(0):D(),U(E)},isEnabled:C(),isReady:z,placeholderImage:a,playerType:y}),C()&&n.createElement("div",{className:i()("w-full rounded-lg bg-gray-200",k)},n.createElement(c(),{url:E,config:{youtube:{playerVars:{rel:0,modestbranding:1}},vimeo:{playerOptions:{autopause:!0,byline:!1,dnt:!0,responsive:!0}}},controls:!0,width:"100%",height:"100%",playing:l.nowPlaying===E,ref:v,onPlay:()=>{U(E),x(!0),S(!0),m.mm.event("played video",{name:t.name,url:P})},onPause:()=>{U(null),m.mm.event("paused video",{name:t.name,url:P,time:v.current.getCurrentTime()})},onEnded:()=>{v.current.seekTo(0),U(null),S(!1),m.mm.event("finished video",{name:t.name,url:P})},onReady:()=>{S(!0),A(!0),v.current.seekTo(f)}}))),t.chapters&&n.createElement(n.Fragment,null,n.createElement("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:JSON.stringify((()=>{const e=Object.entries(t.chapters||[]).map((e=>{let[t,a]=e;return{"@type":"HowToStep",url:p.h.siteUrl+s.slug+"#t="+t,text:a}})),a=s.image?{"@type":"ImageObject",url:p.h.siteUrl+s.image.childImageSharp.resize.src,height:""+s.image.childImageSharp.resize.height,width:""+s.image.childImageSharp.resize.width}:void 0;return{"@context":"https://schema.org","@type":"HowTo",name:t.name,totalTime:t.duration,image:a,step:e}})())}}),n.createElement("h3",null,"Chapters"),n.createElement("ul",null,Object.entries(t.chapters).map((e=>

1{let[t,a]=e;const l=s.slug+"#t="+t;return n.createElement("li",{key:l}," ",t,": ",n.createElement("a",{href:l,onClick:e=>((e,t)=>{g&&(D(),S(!0),U(E),v.current.seekTo(I(t)),e.preventDefault())})(e,t)},a))})))))}},22577:function(e){e.exports=JSON.parse('{"layout":"constrained","images":{"fallback":{"src":"/static/8a09b89a7214d1b038d579cee4d0844a/61a73/spriteilluminator-win%402x.png","srcSet":"/static/8a09b89a7214d1b038d579cee4d0844a/12c30/spriteilluminator-win%402x.png 513w,\\n/static/8a09b89a7214d1b038d579cee4d0844a/2a75c/spriteilluminator-win%402x.png 1026w,\\n/static/8a09b89a7214d1b038d579cee4d0844a/61a73/spriteilluminator-win%402x.png 2052w","sizes":"(min-width: 2052px) 2052px, 100vw"},"sources":[{"srcSet":"/static/8a09b89a7214d1b038d579cee4d0844a/fffe3/spriteilluminator-win%402x.webp 513w,\\n/static/8a09b89a7214d1b038d579cee4d0844a/51e4d/spriteilluminator-win%402x.webp 1026w,\\n/static/8a09b89a7214d1b038d579cee4d0844a/7f3ba/spriteilluminator-win%402x.webp 2052w","type":"image/webp","sizes":"(min-width: 2052px) 2052px, 100vw"}]},"width":2052,"height":1154}')},24612:function(e,t,a){a.d(t,{Y:function(){return r}});var n=a(96540),l=a(32532),i=a(20912);const r=()=>n.createElement(i.L,{json:{thumbnailUrl:"https://i.vimeocdn.com/video/519452598-810646067032f928b00274c541b2a47e276cfd206df40ac379c9468fae237fa7-d?f=webp",embedUrl:"https://player.vimeo.com/video/128353876?h=84f7027957",name:"Gamescene with 2d light effects using normal maps",description:"2d game scene with dynamic light effects.   For this scene, we used SpriteIlluminator to create the normal maps.  https://www.codeandweb.com/spriteilluminator",height:1080,width:1920,videoQuality:"HD",uploadDate:"2015-05-20T05:33:15-04:00",dateModified:"2024-06-25T06:05:06-04:00",duration:"PT00H00M15S",keywords:["2d dynamic light","normal map","2d game","unity","cocos2dx","cocos2d"],thumbnail:{"@type":"ImageObject",url:"https://i.vimeocdn.com/video/519452598-810646067032f928b00274c541b2a47e276cfd206df40ac379c9468fae237fa7-d?f=webp",width:1280,height:720}},placeholderImage:n.createElement(l.S,{src:"./placeholder-images/spriteilluminator-demo-scene.png",alt:"Gamescene with 2d light effects using normal maps",formats:["auto","webp","avif"],__imageData:a(744)})})},28256:function(e,t,a){a.d(t,{S:function(){return i}});var n=a(96540),l=a(97012);function i(e){let{macOS:t,windows:a,linux:i,node:r,style:s,classNames:c}=e;return n.createElement("div",{className:c,style:s},n.createElement(l.u,{macOS:t,windows:a,linux:i,node:r}))}},42503:function(e){e.exports=JSON.parse('{"layout":"constrained","backgroundColor":"#484848","images":{"fallback":{"src":"/static/64290eebd62d98dce2eb6352f54e4b9b/87706/paint-normalmap%402x.png","srcSet":"/static/64290eebd62d98dce2eb6352f54e4b9b/f80f8/paint-normalmap%402x.png 320w,\\n/static/64290eebd62d98dce2eb6352f54e4b9b/9a63f/paint-normalmap%402x.png 640w,\\n/static/64290eebd62d98dce2eb6352f54e4b9b/87706/paint-normalmap%402x.png 1280w","sizes":"(min-width: 1280px) 1280px, 100vw"},"sources":[{"srcSet":"/static/64290eebd62d98dce2eb6352f54e4b9b/c0bcc/paint-normalmap%402x.webp 320w,\\n/static/64290eebd62d98dce2eb6352f54e4b9b/17574/paint-normalmap%402x.webp 640w,\\n/static/64290eebd62d98dce2eb6352f54e4b9b/71d4d/paint-normalmap%402x.webp 1280w","type":"image/webp","sizes":"(min-width: 1280px) 1280px, 100vw"}]}

1,"width":1280,"height":720}')},57405:function(e,t,a){a.d(t,{S:function(){return l}});var n=a(96540);const l=e=>{let{width:t,height:a,className:l}=e;return t=2*(t||1024),a=2*(a||576),n.createElement("svg",{viewBox:"0 0 "+t+" "+a,className:l,style:{borderRadius:"10.5px"}},n.createElement("rect",{x:"0",y:"0",fillOpacity:"0.25",fill:"#000",width:t,height:a,rx:24,ry:24}),n.createElement("rect",{x:2,y:2,fill:"#fff",width:t-4,height:a-4,rx:22,ry:22,style:{boxShadow:"-5px -5px 5px #888"}}))}},59569:function(e){e.exports=JSON.parse('{"layout":"constrained","backgroundColor":"#282828","images":{"fallback":{"src":"/static/1bff608a9598bbe7163799b03147d2ef/87706/spriteilluminator-normalmap-painting.png","srcSet":"/static/1bff608a9598bbe7163799b03147d2ef/f80f8/spriteilluminator-normalmap-painting.png 320w,\\n/static/1bff608a9598bbe7163799b03147d2ef/9a63f/spriteilluminator-normalmap-painting.png 640w,\\n/static/1bff608a9598bbe7163799b03147d2ef/87706/spriteilluminator-normalmap-painting.png 1280w","sizes":"(min-width: 1280px) 1280px, 100vw"},"sources":[{"srcSet":"/static/1bff608a9598bbe7163799b03147d2ef/e2a10/spriteilluminator-normalmap-painting.avif 320w,\\n/static/1bff608a9598bbe7163799b03147d2ef/3d183/spriteilluminator-normalmap-painting.avif 640w,\\n/static/1bff608a9598bbe7163799b03147d2ef/af2d5/spriteilluminator-normalmap-painting.avif 1280w","type":"image/avif","sizes":"(min-width: 1280px) 1280px, 100vw"},{"srcSet":"/static/1bff608a9598bbe7163799b03147d2ef/c0bcc/spriteilluminator-normalmap-painting.webp 320w,\\n/static/1bff608a9598bbe7163799b03147d2ef/17574/spriteilluminator-normalmap-painting.webp 640w,\\n/static/1bff608a9598bbe7163799b03147d2ef/71d4d/spriteilluminator-normalmap-painting.webp 1280w","type":"image/webp","sizes":"(min-width: 1280px) 1280px, 100vw"}]}

1,"width":1280,"height":720}')},67575:function(e,t,a){var n=a(96540),l=a(28256),i=a(57405),r=a(32532);t.A=e=>{let{className:t}=e;return n.createElement(l.S,{classNames:t,style:{maxWidth:"1024px"},node:n.createElement(i.S,{className:"w-full shadow-lg"}),macOS:n.createElement(r.S,{placeholder:"none",src:"./[email protected]",alt:"SpriteIlluminator - Normal map painting tools for 2d light effects (macOS)",__imageData:a(12649)}),windows:n.createElement(r.S,{placeholder:"none",src:"./[email protected]",alt:"SpriteIlluminator - Normal map painting tools for 2d light effects (Windows)",__imageData:a(22577)})})}},72119:function(e,t,a){a.d(t,{S:function(){return m}});var n=a(98587),l=a(96540),i=a(46942),r=a.n(i),s=a(94461);const c=["children","className"],m=e=>{let{children:t,className:a}=e,i=(0,n.A)(e,c);const m=(0,l.useContext)(s.A);return l.createElement("div",Object.assign({className:r()("mt-8 max-w-3xl mx-auto prose prose-lg",m.listTextColor,a)},i),t)}},89178:function(e,t,a){a.d(t,{l:function(){return b}});var n=a(96540),l=a(34429),i=a(94296),r=a(46942),s=a.n(r),c=a(48066),m=a(1220),o=a(28256),d=a(57405),p=a(2743),u=a(90177);const g=e=>n.createElement("div",{className:s()("bg-linear-to-br relative",e.hero.bgGradient,null==e?void 0:e.className)},n.createElement("div",{className:s()(e.hero.patternClass,"h-full w-1/3 block absolute opacity-25 z-0 right-0  overflow-hidden")},(0,m.U)(e.hero.bgPattern,{fadeDirection:"left",width:1024,height:1024})),e.children),b=e=>{let{headline:t,product:a,description:r,frameworkText:m,frameworkIcons:b,showLogoWithLink:f,screenshot:w,screenShotWindows:h,screenShotMacOS:x}=e;const{hero:E}=(0,n.useContext)(c.D);return n.createElement(g,{hero:E,className:"md:overflow-hidden pb-8 md:pb-0"},f&&n.createElement("div",{className:"h-12 md:h-0"},n.createElement(u.A,{to:f,className:"absolute top-4 left-8 z-20"},n.createElement(p.A,{className:"w-24"}))),n.createElement(l.mc,{className:"z-10 relative md:max-w-4xl"},n.createElement("div",{className:"flex flex-col md:flex-row items-center"},n.createElement("div",{className:"w-full text-center md:text-left my-8 lg:my-0 md:w-5/12 lg:py-8 xl:py-12 lg:text-left lg:pr-12"},n.createElement("span",{className:s()(E.headline,"block text-sm font-semibold uppercase tracking-wide sm:text-base lg:text-sm xl:text-base")},t),n.createElement("h1",{className:"tracking-tight font-semibold text-5xl md:text-5xl w-full lg:text-5xl xl:text-6xl"},n.createElement("span",{className:E.productFirst},a.first),n.createElement("span",{className:E.productLast},a.last)),n.createElement("p",{className:s()(E.text,"mt-3 text-base sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-4 md:text-base lg:text-xl lg:mx-0")},r),n.createElement("p",{className:s()(E.text,"mt-1 sm:mt-2 md:mt-3 xl:mt-8  text-base sm:text-lg sm:max-w-xl sm:mx-auto md:text-base lg:text-xl lg:mx-0")},m),b,n.createElement("div",{className:"mt-4 sm:flex sm:justify-center lg:justify-start xl:mt-12"},n.createElement(i.f,{product:a.product}))),n.createElement("div",{className:"w-full md:py-8"},n.createElement("div",{className:"md:w-[150%] lg:w-full md:pl-8 lg:pl-0"},w||n.createElement(o.S,{node:n.createElement(d.S,{className:"w-full shadow-lg"}),windows:h,macOS:x}))))))}},89528:function(e,t,a){a.d(t,{n:function(){return s}});var n=a(96540),l=a(46942),i=a.n(l),r=a(94461);const s=e=>{let{title:t,subTitle:a,className:l,titleClass:s,subTitleClass:c}=e;const m=(0,n.useContext)(r.A);return n.createElement("div",{className:i()("max-w-3xl mx-auto text-center",l)},n.createElement("h2",{className:i()("text-3xl sm:text-4xl font-semibold tracking-tight",s,m.titleClass||"text-gray-900 dark:text-slate-100")},t),a&&n.createElement("div",{className:i()("mt-4 text-lg",c,m.subTitleClass||"text-gray-500  dark:text-slate-500")},a))}},91823:function(e,t,a){a.d(t,{U:function(){return d}});var n=a(96540),l=a(46942),i=a.n(l),r=a(94461);const s=e=>{let{title:t,subTitle:a}=e;const l=(0,n.useContext)(r.A);return n.createElement(n.Fragment,null,n.createElement("h3",{className:i()("text-2xl font-semibold tracking-tight sm:text-3xl",l.titleClass)},t),a&&n.createElement("p",{className:i()("mt-3 text-lg",l.subTitleClass)},a))};var c=a(48066),m=a(1220);const o={"1-1":{wrapper:"lg:grid-cols-2",first:"",second:""},"1-2":{wrapper:"lg:grid-cols-3",first:"col-span-1",second:"col-span-2"},"2-1":{wrapper:"lg:grid-cols-3",first:"col-span-2",second:"col-span-1"}},d=e=>{let{title:t,subTitle:a,image:l,imagePosition:r="right",showPatternOnSmallScreen:d=!1,className:p,layout:u="1-1",children:g}=e;const{globalThemeSettings:b}=(0,n.useContext)(c.D),f="right"===r?"":"lg:col-start-2",w="right"===r?"":"lg:col-start-1";return n.createElement("div",{className:i()(p,o[u].wrapper,"relative lg:grid lg:grid-cols-2 lg:grid-flow-row-dense lg:gap-8 lg:items-center")},n.createElement("div",{className:i()("relative",f,o[u].first)},n.createElement(s,{title:t,subTitle:a}),g),n.createElement("div",{className:i()("mt-10 -mx-4 relative lg:mt-0",w,o[u].second),"aria-hidden":"true"},d&&(0,m.U)(b.mainPattern,{width:784,height:404,position:"bottom",fadeDirection:"top",className:"z-0 absolute left-1/2 transform -translate-x-1/2 lg:hidden text-gray-900 opacity-10"}),n.createElement("div",{className:"z-10"},l)))}},97364:function(e,t,a){a.d(t,{A:function(){return r}});var n=a(96540),l=a(32532),i=a(20912);const r=()=>n.createElement(i.L,{json:{thumbnailUrl:"https://i.vimeocdn.com/video/518857937-666d471f509997cac79b102999cb2c082f66b4d0c68e142e445c8efe78a1b5c7-d?f=webp",embedUrl:"https://player.vimeo.com/video/126253549?h=e79685b768",name:"dynamic lighting effects for 2d games - painting a normal map",description:"Use SpriteIlluminator to add structure and volume to your graphics. Create and edit normal maps for your 2d game's light effects.",height:1080,width:1920,videoQuality:"HD",uploadDate:"2015-04-28T08:56:39-04:00",dateModified:"2024-05-27T09:26:35-04:00",duration:"PT00H01M00S",keywords:["normal maps","2d lighting","2d light","game development","gamedev","unity3d","cocos2d","phaser","unity"],thumbnail:{"@type":"ImageObject",url:"https://i.vimeocdn.com/video/518857937-666d471f509997cac79b102999cb2c082f66b4d0c68e142e445c8efe78a1b5c7-d?f=webp",width:1280,height:720}},placeholderImage:n.createElement(l.S,{src:"./placeholder-images/spriteilluminator-normalmap-painting.png",alt:"dynamic lighting effects for 2d games - painting a normal map",formats:["auto","webp","avif"],__imageData:a(59569)})})}}]);