https://www.codeandweb.com/component---src-templates-post-template…-phaser-3-index-mdx-a9309585394bff3ff302.js

1"use strict";(self.webpackChunkcodeandweb=self.webpackChunkcodeandweb||[]).push([[9715],{9860:function(e,t,a){a.r(t),a.d(t,{Head:function(){return p},default:function(){return m}});var n=a(28453),r=a(96540);function l(e){const t=Object.assign({h2:"h2",a:"a",span:"span",p:"p",h4:"h4",code:"code",strong:"strong",pre:"pre"},(0,n.R)(),e.components);return r.createElement(r.Fragment,null,r.createElement(t.h2,{id:"light-demo",style:{position:"relative"}},"Light demo",r.createElement(t.a,{href:"#light-demo","aria-label":"light demo permalink",className:"anchor after"},r.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",r.createElement(t.p,null,"This demo shows how you can enhance a 2d sprite with normal maps to\ncreate real time light effects."),"\n",r.createElement("div",{className:"aspect-w-4 aspect-h-3"},r.createElement("iframe",{scrolling:"no",src:"/demos/texturepacker/phaser3-lighting/index.html"})),"\n",r.createElement(t.p,null,"Move your mouse over the demo to change the light position."),"\n",r.createElement(t.h2,{id:"prerequisites",style:{position:"relative"}},"Prerequisites",r.createElement(t.a,{href:"#prerequisites","aria-label":"prerequisites permalink",className:"anchor after"},r.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",r.createElement(t.h4,{id:"you-already-have-normal-maps-for-your-sprites",style:{position:"relative"}},"You already have normal maps for your sprites.",r.createElement(t.a,{href:"#you-already-have-normal-maps-for-your-sprites","aria-label":"you already have normal maps for your sprites permalink",className:"anchor after"},r.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",r.createElement(t.p,null,"To learn how to create normal maps have a look at\n",r.createElement(t.a,{href:"/spriteilluminator/tutorials/normal-map-painting-with-spriteilluminator"},"this tutorial"),".\nFor more details about the ",r.createElement(t.a,{href:"/spriteilluminator"},"SpriteIlluminator")," tool visit its\n",r.createElement(t.a,{href:"/spriteilluminator/documentation"},"documentation page"),"."),"\n",r.createElement(t.h4,{id:"sprite-sheets-require-a-corresponding-normal-map-sheet",style:{position:"relative"}},"Sprite sheets require a corresponding normal map sheet",r.createElement(t.a,{href:"#sprite-sheets-require-a-corresponding-normal-map-sheet","aria-label":"sprite sheets require a corresponding normal map sheet permalink",className:"anchor after"},r.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",r.createElement(t.p,null,"The sprite sheet containing the normal maps must be packed with the same layout\nas the sheet containing the sprite images. ",r.createElement(t.a,{href:"/texturepacker"}

1,"TexturePacker"),"\nhas a dedicated mode to support this.\n",r.createElement(t.a,{href:"/texturepacker/tutorials/packing-normal-map-sprite-sheets"},"This tutorial"),"\ndescribes normal map packing in detail."),"\n",r.createElement(t.h2,{id:"throw-light-on-your-sprite",style:{position:"relative"}},"Throw light on your sprite",r.createElement(t.a,{href:"#throw-light-on-your-sprite","aria-label":"throw light on your sprite permalink",className:"anchor after"},r.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",r.createElement(t.p,null,"To load a sprite image together with its normal map, the file names of the\nimage and its normal map are passed to ",r.createElement(t.code,null,"this.load.image()")," as an array. In the\nfollowing example the normal maps are marked with a ",r.createElement(t.code,null,"_n")," suffix."),"\n",r.createElement(t.p,null,"After loading the images, the sprite can be placed as usual. To enable dynamic\nlighting the corresponding shaders are activated using ",r.createElement(t.code,null,"setPipeline('Light2D')"),".\n",r.createElement(t.strong,null,"Important:")," Light effects require a browser with WebGL support."),"\n",r.createElement(t.pre,null,r.createElement(t.code,{className:"language-js"},"function preload()\n{\n    this.load.image('character', ['assets/character/01.png', 'assets/character/01_n.png']);\n}\n\nfunction create()\n{\n    var character = this.add.sprite(250, 300, 'character');\n    character.setPipeline('Light2D');\n}\n")),"\n",r.createElement(t.p,null,"As we haven't added any light source yet, the scene remains black. Add these to lines\nto the ",r.createElement(t.code,null,"create()")," function to switch on a light:"),"\n",r.createElement(t.pre,null,r.createElement(t.code,{className:"language-js"},"    var light  = this.lights.addLight(500, 250, 200);\n    this.lights.enable().setAmbientColor(0x555555);\n")),"\n",r.createElement(t.p,null,"This adds a point light at position (500,250) with radius 200.\nThe ambient light increases the brightness of all pixels of the scene,\nindependent of the position of the point light."),"\n",r.createElement(t.h2,{id:"how-to-use-sprite-sheets-with-normal-maps",style:{position:"relative"}},"How to use sprite sheets with normal maps",r.createElement(t.a,{href:"#how-to-use-sprite-sheets-with-normal-maps","aria-label":"how to use sprite sheets with normal maps permalink",className:"anchor after"},r.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",r.createElement(t.p,null,"For sprite sheets the normal maps must also be packed on a sheet.\nTexturePacker automatically stores the file names of the textures in the generated JSON file,\na simple call of ",r.createElement(t.code,null,"load.multiatlas()")," loads both and links the normal map sheet to the\nsprite image sheet:"),"\n",r.createElement(t.pre,null,r.createElement(t.code,{className:"language-js"},"function preload()\n{\n    this.load.setPath('assets/');\n    this.load.multiatlas('character_sheet', 'character.json');\n}\n")),"\n",r.createElement(t.p,null,"Adding sprites and animations works as usual, it's just the\n",r.createElement(t.code,null,"setPipeline('Light2D')")," call which is additionally needed to enable lighting:"),"\n",r.createElement(t.pre,null,r.createElement(t.code,{className:"language-js"},"    // add sprite from sheet\n    var character_anim = this.add.sprite(550, 300, 'character_sheet', '01');\n    character_anim.setPipeline('Light2D');\n\n    // play animation\n    var frameNames = this.anims.generateFrameNames('character_sheet', { start: 1, end: 8, zeroPad: 2 });\n    this.anims.create({ key: 'walk', frames: frameNames, frameRate: 10, repeat: -1 });\n    character_anim.anims.play('walk');\n")),"\n",r.createElement(t.h2,{id:"play-around-with-it",style:{position:"relative"}}

1,"Play around with it",r.createElement(t.a,{href:"#play-around-with-it","aria-label":"play around with it permalink",className:"anchor after"},r.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",r.createElement(t.p,null,"To illuminate the sprites from different directions we attach the light\nposition to the mouse pointer:"),"\n",r.createElement(t.pre,null,r.createElement(t.code,null,"    this.input.on('pointermove', function (pointer) {\n        light.x = pointer.x;\n        light.y = pointer.y;\n    });\n")),"\n",r.createElement(t.h2,{id:"finally",style:{position:"relative"}},"Finally",r.createElement(t.a,{href:"#finally","aria-label":"finally permalink",className:"anchor after"},r.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",r.createElement(t.p,null,"That's all for this tutorial. You should now have learned how you use normal maps for dynamic lighting\nand how to use sprite sheets with normal maps."))}var i=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.R)(),e.components);return t?r.createElement(t,e,r.createElement(l,e)):l(e)},s=a(11042),o=a(77891),h=a(74110);function c(e){let{data:t,pageContext:a,children:n}=e;const l=a.pageData,i=t.mdx,s=i.tableOfContents,c=i.frontmatter.noTitleImage?null:i.frontmatter.image;return r.createElement(o.W,null,r.createElement(h.n,{pageData:l,image:c,onPageItems:s.items},n))}function m(e){return r.createElement(c,e,r.createElement(i,e))}const p=e=>{let{pageContext:t}=e;return r.createElement(r.Fragment,null,r.createElement(s.A,{pageData:t.pageData}))}}}]);