Hi,
I am yet to make any tutorials etc on these forums or youtube but will surely do so if even 1 person makes a request. I will just type out the steps I took here but will make a brief tutorial with screenshots and perhaps a video if it will help you.
Workflow is something like this:
Export character from Spine with your required preferences (I'm exported to Unity).
Make sure you export your texture with all of your assets oriented in the same way you initially drew your character before exporting to Spine (I use photoshop to create my character and use the "LayersToPng" extension mentioned in the Spine tutorial vidoes)
Just like you suggested, I take the texture exported from Spine of the separate parts of my character/asset (all facing in correct direction), open Sprite Illuminator and drag the texture file into their.
The texture should appear in the Left hand panel called "Sprites".
Still in Sprite Illuminator; In the bottom left panel called "Display Modes", click Normal Map.
I then usually start by clicking on the "Bevel" tool in the right hand panel under "Effects".
Select the options that give you a nice smooth rounded shape (smooth transitions from one normal colour to another). This is your "base form" for your normal map.
At this point you can check the basic bevel normal map right in sprite illuminator. In the bottom left panel "Display Modes" click "Lit Texture".
You can drag and drop the light icon (White circle with a black sun icon) to move the light source around. In the left panel there is a new contextual panel called "Global Light" where you can adjust the settings of the light. You should now see the simple smooth bevel effecting your texture.
Click "Lit Surface" in the "Display Modes" panel. This gives you the normal map set to a grey texture with the same alpha cut-outs as your sprite texture. I find this handy for visualising the forms as I start to "carve" details into the normal map. If you've ever used Z-Brush or made anything with clay, this will feel comfortable to you.
Now for the serious stuff. We have our base normal map to start painting the details into. Click on "Normal Map" in "Display Modes" panel again.
In the Normal Map screen, in the right sidebar under "Brushes & Tools"; Select the Angle tool. You'll see a new panel appear called "Angle brush". You can adjust brush size, opacity (will let you blend one form to another but I keep this to 100% otherwise things get messy) and hardness. Hardness I will usually change up depending on if I want to make a hard edged form change or soft. I recommend keeping it to 100% to begin with as you can use the "Smoothen" brush later. The most important part is the "Sphere" with the normal map colours on it. This represents which direction a colour you'll paint represents. This is a great tool to enable you to correctly visualise how your painted colours will effect the form. This will take a bit of getting used to and seems slow and tedious at first but after a while, it'll become almost instinctual.
Now you simply click and drag over the sphere to and let go to select your desired angle. You will now paint that colour normal representing the angle as shown in the sphere onto your desired part of your texture.
I carve the main shapes in with hard edges first going back and forth between the "Lit Surface", "Lit texture" and Normal views as I paint to check the angles I'm painting look good when the texture is lit.
Once you are happy with your main hard edge forms you can select the "Smoothen" brush in the "Brush & Tools" panel in the right sidebar while inside the "Normal Map" view.
The smoothen brush has a few settings in the right sidebar when selected. Once you have settings you like, you can paint along the edges to blend the normals at either side of that edge together to soften the transition.
I rinse and repeat going between the angle brush with a hard edge to add more details and use the smoothen brush afterwards to smooth out edges. It's just a case of trial and error now with this approach to figure out how to achieve the effect you are looking for.
Once you have finished with your normal map, in the top bar of Sprite Illuminator, click "Export Normals".
Drop the exported normal map texture into your unity assets folder in the same place you put your assets for your Spine character.
Now you can use the normal map texture when setting up your character with Todd Rivers lighting shaders. Play around with adding lights to your scene and add a diffuse ramp to the Shader panel in Unity (the todd rivers shader panel) to get varying types of toon/cell shading effects. If you're not sure about making a diffuse ramp image, just google it and you'll see it's a simple png file with squares of colour going from black to white. This defines how many steps of colour there are to blend the lit areas of your character with the shadow areas (a diffuse map with a black square and white square will give you flat 2-tone shading like most anime and cartoons. The black square must be on the right hand side and white on the left. Any other shades of grey between the black and white must go in the middle with the darker tones to the left and light ones to the right. This is so the shader code interprets tones to the left of the image as shadow and tones to the right as light).
That's all I did to make normal maps for my character. I'm still working on the process as I make more characters for my game so I'm sure it's not the most optimal workflow perhaps but it is the workflow I like as it gives me the most control and helpful tools while still allowing me to have the hand drawn feel I like as an artist (I program too so I get to play around with my workflow to find something that benefits both the art production process and development process of putting assets into the game and applying various effects to the art assets).
Let me know how you get on with this very basic step by step list. I will use this list to make a post of my process with screen shots and gifs and eventually I'll make a video tutorial using one my newly designed characters and show the process going from concept to static asset in Photoshop, into Spine to animate, creating the normal map with Sprite Illuminator and then into Unity using Todd Rivers shader pack. I think the community could do with an up to date tutorial on the full process and I can include some fixes to issues I encountered along the way.
This obviously assumes you have a paid version of Spine, Sprite Illuminator trial or full version, graphics editing package like Photoshop and a version of Unity 5.3+.
I hope this helps somewhat!
Thanks for asking about this. Made me analyse the workflow a bit more and will give me a gentle push to putting out a tutorial on the subject sooner rather than later.
Kind Regards,
Matt
