Этот сайт лучше всего просматривать в современном браузере с включённым JavaScript.

Finding the best cartoon line thickness solution

MonsterMaker534

Goal: Finding the best cartoon line thickness solution
Details of Goal: 2 Views of the Same Character
1) Full body (for platformer game)
2) Face View (for dialogue)

Hey all,
I’m not sure if this is the right place to ask, but I was wondering. (And if there is a more appropriate place to ask, I would appreciate it if you could let me know). I have googled and I am a bit stuck.
I have imported a cartoon character with a black cartoon outline drawn as part of it (on the outside of the body parts, and inside (Ex: knee lines)) from Clip Studio -> Photoshop -> Spine -> Unity.
My problem: In the Unity phone simulator, for the character’s full-body view, his/her cartoon outline is too thin/pixelated.
I’ve tried making the outline thicker, but I’ve reached the limit where making the outline thicker would make the “Focusing-on-the-Face View” would look too ugly.
Is there a solution that doesn’t involve 2 Spine skeleton/images for the same character?
Thanks for your help!

MonsterMaker534

Harald

A different way would be to create the outlines at runtime via an outline shader, where you can setup the outline to your desired thickness while re-using the same skeleton asset. Of course, this flexibility comes with some limitations and drawbacks.

You can see a short overview of the outline shaders provided for spine-unity on this older blog post:
Blog: Outline shaders for spine-unity
The spine-unity package comes with an example scene Spine Examples/Other Examples/Outline Shaders that demonstrates usage of these outline shaders. If you are using the Spine URP shaders extension UPM package, there is also an example scene included in the package, see the documentation page for details.

MonsterMaker534

Thank you, @Harald. This is very helpful.

I'm strongly considering outlining each individual image in the skeleton, including its fill color etc., and am having trouble implementing it and was wondering if you might be able to help. I could also open a new thread instead if that makes more sense.

First of all, for getting the outline for each individual image, I looked at the article and the example scene in Unity, which included both versions of the knight (the outline of only the entire knight, and the outline of each individual piece). The project stated that in order to show each individual image's outline, you need to add "Z-Spacing" at the SkeletonRendererComponent, which I don't understand. I looked at the SkeletonRendererComponent script but I couldn't find the "Z-Spacing".

And in the Unity example, (in which one skeleton already has "Z-Spacing"), I tried switching Outline shaders for the already-made Knight to show the inside colors part of the knight drawing while also showing the outline for each individual image, but unfortunately wasn't successful. Is there a specific technique/version of the outline shader that I overlooked?

Also, would drawing a slit/hole in an individual image slot be enough for an outline shader to line it? What about if I want the outline shader to line a custom line in the middle of an image? If I draw a skinny enough slit, would an outline shader filling it give enough of an illusion to fool players?

Thanks for your help!

Harald

MonsterMaker534 написал
I looked at the SkeletonRendererComponent script but I couldn't find the "Z-Spacing".

You can find it in the Advanced foldout:
spine-unity Runtime Documentation: Setting Advanced Parameters

MonsterMaker534 написал
And in the Unity example, (in which one skeleton already has "Z-Spacing"), I tried switching Outline shaders for the already-made Knight to show the inside colors part of the knight drawing while also showing the outline for each individual image, but unfortunately wasn't successful. Is there a specific technique/version of the outline shader that I overlooked?

I just checked, with the current shaders unfortunately this is not possible yet without any modification of the code.
[Edit:] Unfortunately it's more work to create the respective shader variants, and will not work when two attachments share the same depth (which might be hard to control in Spine and lead to a rather unpredictable result). Creating outlines around every single attachment is a rather rare use-case, which is why we are not planning to support it officially, since it adds a lot of shader files.

If you really want to go down that road regardless of the problems involved, we can help you writing a custom shader, mostly combining existing code.

If you need outlines around every single attachment however, we would recommend to add the outline in Photoshop and prepare two atlas versions for different outline style or thickness.

MonsterMaker534 написал
Also, would drawing a slit/hole in an individual image slot be enough for an outline shader to line it? What about if I want the outline shader to line a custom line in the middle of an image? If I draw a skinny enough slit, would an outline shader filling it give enough of an illusion to fool players?

Any transparent pixel (with alpha value below the outline alpha threshold) with surrounding opaque pixels will trigger outline rendering, so it should work without any issue.

MonsterMaker534

Thank you, @Harald.
I apologize for the late response.
I might try your solution regarding 2 different outlines in Photoshop. I was wondering about potentially aligning 2 skeletons of the same character right on top of each other.
—Skeleton 1: Regular Shader
—Skeleton 2: Outline-Only Shader that outlines each individual piece
Would that accomplish my potential goal or would it introduce the following problems?
—Overall Game Lag (too many Spine skeletons at once)
—Lag between the pair of skeletons so the animations won’t line up
—Character only looks nice when viewed at a certain angle (when the 2 skeletons always align in the viewport)
—Etc. Anything I had not thought of

How do others tend to implement cartoon lines regarding my cartoon sizing issue?
I don't need to outline every single image. I just want to ensure that the cartoon line thickness looks fine when both close up to the cartoon character and far away. (This includes cartoon lines that are not on the edges of a character, such as the crease of a joint between limbs as shown here in this Spine Tip: http://esotericsoftware.com/spine-tips#28-moustache-lines) Or do other animators tend to work with bigger-screen games so they do not run into this issue?

Thanks for your help!

Note: Edited by adding details

Harald

Your reply was not late at all, no need to apologize! 🙂

MonsterMaker534 написал
I was wondering about potentially aligning 2 skeletons of the same character right on top of each other.
—Skeleton 1: Regular Shader
—Skeleton 2: Outline-Only Shader that outlines each individual piece
Would that accomplish my potential goal or would it introduce the following problems?

Generating outlines around every single image can be done in a single shader pass. It will make results worse visually when using two overlaid skeletons (where each shader needs to write to the z buffer) instead of one, because half-transparency and z-write/z-test do not go well together. Applying outlines around every attachment image via shaders comes with the drawback mentioned above that it will not work when two attachments share the same depth (which might be hard to control in Spine and lead to a rather unpredictable result).

MonsterMaker534 написал
How do others tend to implement cartoon lines regarding my cartoon sizing issue?
I don't need to outline every single image. I just want to ensure that the cartoon line thickness looks fine when both close up to the cartoon character and far away.

Could you perhaps show us some screenshots which problem you are facing exactly? Perhaps enabling mipmaps (and adding a mipmap bias) at your atlas texture could help resolve your problem.

In general I assume that users typically either hand-draw or generate their outlines in an image editor / Photoshop. Procedurally adding outlines at runtime mostly makes sense when you want to add a selection outline around a skeleton.

MonsterMaker534

Hi @Harald.
Thank you. That makes sense.
Note: My art/character design is still under construction. Not done with the clothing/shoes/eyes yet.
Here’s a dropbox link to a screenshot of my issue. (https://www.dropbox.com/s/8qw7apwlazlhtoo/Unity-LinesTooPixelated.png?dl=0)

What do you mean by enabling mipmaps/adding a minimap bias? Do you mean:
—Exporting the Spine Skeleton multiple times, each at a different size
—Spine Export Settings (which I could not find “mipmap” in)
—In Unity, when selecting the Spine _atlas item, clicking the button “Set mipmap bias to -0.5” (which did not make a difference)
Thanks for your help.

Harald

MonsterMaker534 написал
Here’s a dropbox link to a screenshot of my issue. (https://www.dropbox.com/s/8qw7apwlazlhtoo/Unity-LinesTooPixelated.png?dl=0)

You are experiencing a texture filtering issue in your linked screenshot.

MonsterMaker534 написал
What do you mean by enabling mipmaps/adding a minimap bias? Do you mean:
—Exporting the Spine Skeleton multiple times, each at a different size
—Spine Export Settings (which I could not find “mipmap” in)
—In Unity, when selecting the Spine _atlas item, clicking the button “Set mipmap bias to -0.5” (which did not make a difference)
Thanks for your help.

By enabling mipmaps at your atlas texture I meant in Unity at your Atlas Texture asset (the Texture, not the AtlasAsset), in the Inspector enable mipmap generation. After that you can also change the mipmap-bias as in your third bullet point:

MonsterMaker534 написал
—In Unity, when selecting the Spine _atlas item, clicking the button “Set mipmap bias to -0.5” (which did not make a difference)

MonsterMaker534

Thank you, @Harald. Your tip gave it a massive improvement. I set the mipmap to -0.5 as the button I found earlier stated.

There are still some jagged lines left and I was wondering what I could do to touch it up. Would that involve researching more on how to change the mipmap to a more specific value or something else? I did some preliminary/light research and found terms such as anisotropic filtering and more and of course, I am willing to do more research if need be.

If I'm starting to stray too much from Spine-specific questions on the Spine forum, I apologize and I can ask in a Unity forum.

Side question: Is my character's photoshop canvas too large?: 2702x5404. I've started to approach Spine's limit for slot sizes (though I know they can be changed in Spine's settings.)

Thanks for your help.

Picture: https://www.dropbox.com/s/xy0mog32qixgkuo/Unity-LinesImproved.png?dl=0

Harald

MonsterMaker534 написал
There are still some jagged lines left and I was wondering what I could do to touch it up. Would that involve researching more on how to change the mipmap to a more specific value or something else? I did some preliminary/light research and found terms such as anisotropic filtering and more and of course

You could try setting the mip bias value to something that fits your need better. BTW: a quick way to change it would be to open the meta file of your textire (texture.png.meta) in a text editor and set the mipBias value there and save the file and switch back to Unity. This way you can quickly try several values since unfortunately there is no Inspector property exposed for that (at least in the Unity versions that I last checked).

We would recommend to also try out some mipmap generation parameters in the Texture Inspector, such as changing MipMap Filtering from Box filter to Kaiser.

MonsterMaker534 написал
I did some preliminary/light research and found terms such as anisotropic filtering and more and of course

Anisotropic filtering will not help in this regard, it's for countering distorted "width vs height" ratio. In your case that won't help. It also has nothing to do with anti-aliasing, which might come to mind since the artifacts look similar.

What would theoretically help is manually setting mipmap images of each level, so that you can specify exactly what you want at each level, as described on this forum thread:
UnityでSpineで出力したアトラスにmipmapを手動で追加する方法はありますか？
Unfortunately that's a lot of work, also some coding involved to apply the mip-level images, since Unity usually generates them for you.

MonsterMaker534 написал
Side question: Is my character's photoshop canvas too large?: 2702x5404. I've started to approach Spine's limit for slot sizes (though I know they can be changed in Spine's settings.)

That's pretty large. In general you should aim to not exceed the 1:1 input:output pixel ratio, otherwise you are wasting resources and have mipmap filtering applied where you don't need it. So e.g. if an attachment of your character is never displayed at more than 1024 pixels of height, you should not make the input attachment image 2048 in height, otherwise you always just use the first generated mipmap level instead of your original drawing.

MonsterMaker534

This is very helpful, @Harald! Thanks so much! I might shrink my drawing, and I'll definitely start trying your mipmap suggestions, though, as you said, I probably won't go down the more extraneous/tedious perfectionist coding path.
Thanks again for your help with this, and happy holidays!

Harald

Thanks for your kind words and wishes, glad it helped! 🙂
We wish you happy holidays as well! 8)