• Showcase
  • 2D Toon Cel Shading and Outlines - Link Fan Art

ToddRivers shader : Sprite Shaders for Unity
It would have been useful. Supports light ramps (for sharp-edged /cel shading and even halfway options), and alpha-cutoff/hard edges with depth writing for your outlines.

And kinda standard these days as a low-performance-cost antialiasing solution, you should use a bit of FXAA.
Here's a free Unity Asset store thing that has it https://www.assetstore.unity3d.com/en/#!/content/3590

It's all in the execution though. The results look great.

What did you use for outlines?

Related Discussions
...

Thanks for the feedback!

I tried out those shaders before but I think I had some problems with z fighting on my sprites. Looking back on it it was probably because I was using an older spine runtime for Unity with an older project and I don't think I had the option of adjusting the z spacing on the spine animation. Or maybe I just didn't know how. Whatever the problem was it was definitely my fault! I'll try out those shaders again later and I'll post my results.

edit: I think I may have had problems with normal maps in the past instead. Gonna do some digging and see if I can get them to work.

I think I used SMAA or FXAA (I can't remember which one) and it definitely does help clean up some of the outline jagginess on the art. I think it still might look a little jaggy in places because the sprite edges might not be perfect.

I used edge detection on the camera to get the outlines. It comes with the Unity standard asset image effects. The other effects were all from the cinematic image effects suite: https://www.assetstore.unity3d.com/en/#!/content/51515


I finally figured out what I was doing wrong with those sprite shaders (or at least part of the problem). I couldn't get my lighting or normals to behave as I wanted them to. Using a circular texture ramp instead of a horizontal ramp seems to have fixed it. I think I'd have to redesign some elements of the art to make better use of the shaders but they are pretty great too. The ability to write to depth and use sobel depth edge detection for premuliplied alpha i cool! I need to play around with it a bit more though.

18일 후

This is an amazing google doc, I just finished reading it and is amazing. Thanks for all the info is going to be very helpful!!!!, also one thing I wanted to ask if maybe you know. How can I use the standard asset of unity for sprites but at the same time have the additive effects that I use in Spine for some lights in the Spine animation?, if you use the Spine Skeleton shader you have the additive effect on slots, but don't know how to still being able to use that and the additive effect.
Thanks again! and amazing tutorial

Aghhh thanks for the positive feedback. I think you'd have to have the effects use a different spine skeleton that uses the spine premultiplied-alpha shader and just layer them on top of the character.

Or depending upon how complex your effects are you could just import and animate the sprites in unity itself and give them a material with the particles-additive shader. I don't think there's anyway to get additive lighting working using the alpha cutout material using the one spine skeleton.

I'll try put together some notes on it if I get some free time.

I've also realised that using spine flip doesn't work for the shader I suggested using above.To get it to render correctly you have to use a double sided material which renders normals on both sides of a mesh. The toony colours shader has a shader generator tool which I used to test this and it worked but it wasn't the exact same shader and I lost some of the soft lighting.

Todd River's sprite shader's can render both sides of a mesh too which is really cool. They are a really feature complete shader set. Sprite Shaders for Unity

The other solution is to scale in x to flip the character but I don't know if that would break other things. I'm going to do some further research and will append my notes with the solutions I've found on this at some point too.

한 달 후

oh, man. This is awesome! Thanks for the workflow breakdown :rofl:

9일 후

WOOOOOO! Messing in mind trying to express how cool is it! Thank you so much for you work with breakdown!

7일 후

Hello! I'm glad you like the breakdown! It was a really fun and interesting style to create.

I added some extra notes to the slides that discusses flipping your character correctly by turning off backface culling using the Toony Shader set. I also added some more notes on the image effects and how to use them.

I originally made some incorrect assumptions about deferred rendering too. The toony shader set renders in forward so its probably best to stick with the forward rendering path. To get the HDR camera working you then have to turn of MSAA in the quality settings but once that's done everything pretty much looks the same in this style.

Also if I've made any other errors or incorrect assumptions please point them out! I'd appreciate it!

한 달 후

That looks amazing! Thank you for documentation, it was really helpful.

13일 후

I've re-read your slides and they're so amazing! Thanks again! haha 🙂

alcyongames wrote

I've re-read your slides and they're so amazing! Thanks again! haha 🙂

No problem! I've learned recently that the way I approached the stack of post processing effects is not very efficient. Unity have an 'Uber' shader set in the works that is really promising though from an artist's perspective. It works a little differently though.

It can be downloaded here:
https://github.com/Unity-Technologies/PostProcessing

This video explains how to use it: Unite 2016 - What's New with Unity's Image Effects and Post Processing Stack - YouTube

The colour grading is a little more complicated though. The shadows, midtone and highlights have been replaced with lift, gamma and gain. (These are the standard terms in colour grading for film).

I've also been doing some more research in trying to get better outlines on spine characters in Unity.I want to be able to change the colour and thickness of the outlines. A programmer friend came up with a really crazy idea that I'm hoping to try out soon. I need to convince him to write me a special shader but if we get it to work we'll probably share it around it.

16일 후

Great work, the effect is outstanding. I read your presentation, thanks for sharing the knowledge!