Perfect pixel-art with specular and bump lighting in unity

Here’s how I do the lightning and pixel-art textures for MegaSphere.

I assume you have a general idea of how unity and photoshop work. If not, its pretty easy to figure out, let’s go!

First, create your object base texture

In photoshop, start new document and create your object.

I suggest to go with a sprite sheet right away for your objects, instead of putting objects into separate files. Less files means less hassle with file import settings, maps, materials, performance optimisations. Make it pretty big (I start at 256x256 pixels), and you can adjust it later.

This is the base texture of our future object. I use a slightly modified metal barrel from MegaSphere as an example. I used restricted palette here, with some shading, but how your sprites will look is up to you. I feel some shading and depth in texture map itself add to the look of sprites in game.

I assume you already started a 2D project. Save your main texture PSD into your unity project. Find or create “Assets” folder, save it there or start organising like a grown-up and create a ‘Sprites/Objects’ folder.

In a new separate file, create the depth map for your object

This file is the data that tells the shader how to light your sprite.

Create a new document with exact same size as base texture file (don’t forget to resize it too, if base texture changes).

To make a depth map you need to think about your object in 3d. Pixels that are further from the ‘viewer’ are darker. Those closer to ‘viewer’ are brighter. There’s no color, just grayscale and transparency. Here’s how my barrel depth map looks:

Barrel is a cylinder so middle is closer, sides are further. Basically a horizontal gradient: black to white to black. I added 1px horizontal ridges, mirroring those in texture itself. The triangle window would be the insides, so its black.

Position depth map texture for your object in exactly the same spot as base texture.

I use “File/Place linked…” feature to put base texture PSD in to a layer above all and switch it on and off as I create depth or luminosity maps. It’s great that unity supports PSD files natively.

Save your new depth map texture PSD to same folder as main texture.

Adjust maps’ import settings

Lets set proper settings for our sprites so they look the best in our scene.

Find main texture in “Project” palette and select main texture PSD.

In the inspector:

1. Adjust texture type to be Sprite (2D and UI).
2. Set sprite mode to be “Multiple” if you’re creating a sprite sheet.
3. Set “Pixels per unit” to 16. This is the size of individual pixels of sprite as measured in unity’s coordinates. Most of my tiles are 1x1 in size and 16x16 in pixels.
4. Turn off “Generate mip maps”.
5. Set “Filter mode” to “Point”. This turns off any filtering and antialiasing on this texture.
6. Set “Format” to “Truecolor“ for best color reproduction.
6b. Adjust “Max Size“ accordingly. If you select smaller size than your PSD, you’ll get resize artefacts on your sprites.
7. Click “Apply”.

When importing new textures remember to adjust all of these the same way.

As for depth map texture:
1. Adjust “Texture type” to “Normal map”.
2. Check “Create from grayscale” checkbox.
3. Adjust “Filtering” to “Sharp”.
4. I set my “Bumpiness” slider to around 0.1, but you can play around later to see how it affects the sprite’s look.
5. “Wrap mode” to “Clamp”
6. Set “Filter mode” to “Point”.
7. Set “Format” to “Truecolor“.
8. Click “Apply”.

Create the sprite map.

Drag around your sprite, name it, click “Apply”.

Create your new sprite in the scene.

Drag the sprite from “Project” palette right into “Scene”.

This will create a new GameObject in your scene and add a Sprite Renderer to it with correct sprite. Material will be “Sprites-Default”, which doesn’t support lighting. Lets create our own!

Create the material

Add a new material to project (“Create/Material”), name it something meaningful. You will probably share this material across a few sprites in future.
Select “Transparent/Bumped Specular” as a shader. Drag your base texture to “Base (RGB)..” slot and depth map to “Normalmap” slot.

Apply material to your object by dragging it from “Project” palette right over the gameobject in “Hierarchy”. Or select it from gameobject’s “Sprite Renderer” component, by clicking little circle next to the material box:

Clone your gameobject a few times, offsetting by X coordinate and add a light (in “Hierarchy” click Create/Light/Point Light) . Should look something like this:

Kinda-sorta, right? Problem is that our light source is at the same Z coordinate as our sprites. So let’s fix it by moving the light so it sits between barrels and the camera. Using inspector, set Z coordinate to -2 in light’s Transform tab: