Edge Lighting and Normal Maps for 2D Sprites - Unreal Engine 5 Tutorial

when you're making a game with 2D Sprites and animal Engine 5 there are many techniques you can use to polish the look of them today I'm going to show you how you can use normal maps to influence the way lights and shadows influence your Sprites this can help you make players feel like the Sprite is actually a part of the world and make the game more immersive for advanced applications you get the best results by hand painting the normal Maps but we're going to concentrate on edge lighting today which can easily be generated with a script every Sprite has an additional texture slot for the normal map so we just have to add a reference to our normal texture here and make sure we're using a lit Sprite material let's start out by making our custom version of the lid Sprite material to get more control over the shaders first we need to find this material in the content browser make sure that show engine content is checked then go into engine plugins paper 2D content here you should see default lit Sprite material right click and duplicate it I'll call it m underscore custom lit paper material then move this material somewhere into the content folder right click it and create a material instance which will allow us to instantly change parameters on the material let's have a quick look at the material it's actually quite simple and just a mask lit material that applies the textures we pass it at the bottom we can see the notes for the normal texture which will create our Edge lighting we'll have to make adjustments to the material later but for now it's fine go to edit project settings and scroll down to the editor category select paper 2D import here we can change a lot of the important settings regarding Sprites which will improve our workflow when using normal Maps the normal map texture suffix and base map texture suffix will help Unreal Engine automatically detect the normal map for your diffuse texture when you're extracting Sprites so we generally want to add the underscore D suffix to our diffuse textures and the underscore and suffix to our normal textures for the lit default mask material we now want to select Mi underscore custom lit paper material this will now automatically apply our custom material when we create new lid Sprites while we're here look for motion blur and turn it off since this doesn't play well with pixlard also look for anti-aliasing and set it to FXAA since other settings will also cause artifacts with pixel art for this tutorial I'll use these three character sprites by broloff which you can download from the link in description but feel free to just use your own character if you already have one in mind once we've extracted the Sprites we'll need to create a normal map from them there are many different ways you could go about this you'll probably get the best results from hand painting the normal map however that is extremely time consuming and hard to do you can also find some normal map generators online but I haven't found one that really works for me the method I'm using for Edge lighting relies on a Sprite and a free script by Securus a Sprite is one of the best programs out there for creating pixel art and it's available for free if you compile it from Source by yourself there are many tutorials out there on how to do that so I won't cover it here but it's also available for purchase on Steam and through their website that way you can support the developers and save yourself a trouble of compiling it yourself the download link for the edge normal script is in the description below just click on code and download zip installing a script in a Sprite is really simple just click on file scripts and open scripts folder here just drop the Lua file you downloaded then click on rescan scripts folder now the edge normal script should show up here make sure you have your Sprite loaded and then click on this the invert y setting here is very important and goes hand in hand with the flip green Channel setting in Unreal Engine what worked best for me was to keep invert white checked when you click on OK you can see the edge normals for the character now we want to make sure textures have the underscore D suffix for diffuse and underscore and suffix for the normal map now just drag both of your textures into the content browser to import them right click and apply paper to the texture settings on the normal map the filter settings sometimes won't be applied so open it up if you're using pixel art set the filter to nearest to make it Pixel Perfect we can have a look at the flip green Channel setting for some normal Maps you want to set this to true however since we already inverted the Y and a Sprite we want to keep this as false right click the diffuse texture and click on extract Sprites for this Sprite I'll set the extract mode to grid and the cell width and height to 56. click on extract now all of our Sprites are in the content browser double click on one of them to open it up since we use the correct suffixes for a diffuse and normal map the correct textures have been applied our custom material we created and set as the default in the project settings has also been correctly applied in my case the viewport doesn't have a light so the Sprite shows up completely dark when I follow the same steps in a fresh project though the Sprite was being lit up by default I'm not quite sure what causes this to behave differently but either way is fine it works out in case your Sprite is dark on the top left we can click where it says write and set this to perspective you can see that the normal app is applied since we have some darker and lighter areas around the edges to test the lighting you can then drag the Sprite into the scene and set it to a proper scale you can then click here and add a spotlight to the scene drag it around behind the character you can see that we now get proper Edge lighting from our normal map changing the light color makes this even easier to recognize let's now select these five Sprites for the idle animation and create a flipbook for flipbooks our custom material won't be automatically selected so we have to pick it every time we make a new flipbook you could also just create a bunch of flipbooks at first select them all right click asset actions and bulk edit via property Matrix open the content row by pressing Ctrl and space and highlight our custom material then just click on this Arrow icon to apply the currently highlighted item to all the selected flipbooks don't forget to save all when you drag one of the flipbooks into the scene and scale it up you can see that the edge lighting is also working here without any issues however there's actually one issue left that's easy to overlook select the character sprite and hit the delete button hold the ALT key while dragging on the Gizmo of the flipbook to create a copy of it then press e to go into rotate mode and rotate the character on the z-axis by 180 degrees to show the back side you can see that the lighting looks fine on the front side but looks really bad on the back side this starts to become an issue if you want to use these flip books on a moving character that can turn left and right open up the custom material we created at the beginning of the tutorial you can see that the material is two-sided so in theory it should look the same on both sides but as you just saw it doesn't I'm not quite sure why it's that way but I came up with a fix we can use the two-sided Sino to differentiate between the front side and the back side of the Sprite just to demonstrate we can connect this to the base color and Save you can see that the front side of our Sprite is now white and has a value of 1 while the back side is black and has a value of -1 we can use this information to our advantage let's connect this multiply node back to base color hold the L key and left click somewhere to create the lurp node then connect the two-sided sign to the alpha of the lerp a will be the material for the back side and B the material for the front side so for B we can just connect the normal texture again and connect the lurp node to normal we then want to take the normal texture and multiply it connect this to a then hold the three key and click anywhere to create a vector 3. connect this to the multiply node now type in one for red 0 for green and one for blue and then save depending on how your normal map is set up you might have to use -1 for green so try that if zero doesn't work out when we look at our flipbooks in the map now you can see that both the front side and backs that are lit the same way and have proper Edge lighting if you create a paper character blueprint you need to make sure to also set the custom material here on the Sprite and now we have a character with working Edge lighting if you don't know yet how to achieve 3D movement with this Sprite you can check out this video and I want to say thanks to my awesome patrons who support the creation of videos like these

Channel: Cobra Code

Views: 33,777

Keywords: game development, unreal engine, gamedev, ue4, ue5, game dev, paper 2d, unreal engine 2d, unreal engine 2d game, unreal engine sprite, sprite edge lighting, edge lighting, sprite lighting, unreal engine sprite edge lighting, unreal engine normal maps, unreal engine sprite normal maps, sprite normal maps, normal map edge lighting, custom sprite material, unreal engine custom sprite material, unreal engine 5 edge lighting, unreal engine 5 sprite edge lighting

Id: vIBW0j7JDRQ

Length: 9min 51sec (591 seconds)

Published: Wed Dec 21 2022