Gradients aren't bending properly with bones

[ZV1LLE]

This is an issue I've had for quite a long while now and I still don't know how to fix it. Here are some examples of what I'm talking about:

This is the arm at a normal resting position


And this is the arm when I rotate it, as you can see the gradient doesn't bend properly and all the white is separated from the yellow. Plus at the elbow the gradient is kind of circle shaped as well

Even previewing/rendering it still gives the same result. I don't really know what the problem is here so if anyone could help me out it would be much appreciated . Thanks in advance!

[Greenlaw]

Hi,

Busy today, so just a quick response: the circle means you're using Smooth Joint.

Smooth Joint works well for isolating the bend between two joints inside a small circular area, but it doesn't work so well when there's a texture (like a gradient) inside that region. You can get away with it for some textures, so it's worth a try. For example, I used Smooth Joint for the Puss-In-Book episode of Puss-In-Boots, and it worked great for that rig. More often, though, it won't look so good with textured shapes, and it's mainly used for shapes or images with solid areas and outlines.

I'm curious: how does your character look in a render? (Ctrl+R.) The Working Area's display preview is not a 100% accurate representation of what will happen when you render, and in a few situations, it's not even close. When in doubt, do a Ctrl+R to check. Ctrl+R is always much closer to what the final quality render will look like. I suspect this is happening here because the effect with Smooth Joint should still look better than what we see now in the Working Area screencap posted above.

[Greenlaw]

It's hard to tell because the colors are so light, but it also looks like the upper and lower sections may be canceling each other out. This can happen when you overlap a shape on itself. If this is what's happening, you need to split the shape at the elbow so it can overlap without producing the error.

The vector drawing tutorial I uploaded a couple of months ago explains this effect more deeply.

[ZV1LLE]

Thanks for responding Greenlaw! as I stated in the post tho I did do a render but it still looked quite the same. But now I know it has to do with the smooth joint I used.

Splitting the elbow just isnt an option because then the outline is gonna look weird and the gradient may not look natural so my only option is the video your talking about.

Could you provide me a direct link to the video with the timestamp where you mentioned the effect (if it isnt about the elbow) or is there another solution to my gradient problem?

Thanks

[ZV1LLE]

I was also wondering if maybe using an image texture of this gradient would fix the issue?

[Greenlaw]

You're right, splitting the arm into two shapes does complicate the gradient placement. It's possible, but maybe not ideal.

An image might make it easier to since it's more direct. You can use Create Mesh Layer if the edge quality isn't smooth enough.

Tip: try Hayasidist's Bake 2 PNG tool. This tool should be able to render your existing arm layer to a 2X PNG image layer.

If you render the layer manually to create the arm element, be sure to render at a higher resolution so the pixels don't tear or look aliased during animation.

Or, you can import a gradient image and add it to the vector art. You can use the layer as a mask, or apply the texture as a Image Texture Effect. Both techniques have pros and cons, so you might want to try both.

[ZV1LLE]

Oh yeah, those options could work! I'll try them out and give you some updates on what happened.

[ZV1LLE]

You can use Create Mesh Layer if the edge quality isn't smooth enough.

Where can I find this option? I'm trying to use the image texture but it just isn't giving me the exact look for the arm despite how many times I edit the svg to that exact color

And I don't wanna go through that whole process of having to mask the image (but I'll still use it as a last resort)

[ZV1LLE]

Here's a video example of what I'm talking about:
https://drive.google.com/file/d/1oGkf3k ... p=sharing

And heres an image of the armtexture I'm using:


As you can see, its flipping the image texture upside down instead of the way it was supposed to be on the image. The Image texture does fix the problem with my gradient bending problem, but its not giving me the arm texture I'm trying to get (it needs to be something similar to that of the left arm, the left arm will also be using an image texture too when I get the problems with this one fixed)

[Greenlaw]

I'll take a closer look today, but one thing I noticed right away is that I don't see the widget for the gradient. Could it located be off-camera? If so, it needs to be moved to where the arm is and adjusted to fit.

Another option is the use Color Points. This lets you emit a gradient from the points in the drawing. So, if you made the shoulder and elbow points yellow, and the wrist points white, you should get a nice gradient from the elbow to the wrist.

[ZV1LLE]

but one thing I noticed right away is that I don't see the widget for the gradient

If your talking about the pop-up window for selecting a file, I actually paused my recording during that selection. If not then I'm not sure what you mean.

I've tried using colour points before but I was never really sure how to edit/change them since it never really was able to fix the problem. Maybe you can give me a tutorial on how exactly it works and how I can change it?

[Greenlaw]

I meant the widget that controls the gradient's position, range and orientation. I might have misread what I saw this morning, but it's supposed to be visible when you select the shape. It looks like this...



Select the shape, and make sure the widget is positioned over the shape with the handle pointing in the desired direction.

[Greenlaw]

I wasn't sure if what I described worked, so I tried it.



The box above is split in two at the elbow, and I made two shapes for it: one for the upper 'arm' and one for the lower. Each shape has a Gradient effect applied. To make the gradient look continuous between the two shapes, I positioned the two widgets to run across the split in the elbow. Because I can see both widgets at the same time, it was easy to align them.

BTW, I split this into two shapes so they can overlap. Otherwise, this step isn't necessary.

For binding, I'm just using regular Flexi-bind, and it seems to work okay. I'm not sure what would happen if I used Smooth Joint.

So, the gradient effect should work okay. It does tear a little when I overlap the shapes. I think a bitmap gradient should work okay too, just a little differently. I'm not sure if one is better than the other, so you'll have to test that.

I'll post an example for setting up Colored Points in just a sec.

[Greenlaw]

Colored Points might be a bust in this case...



When I applied the Colored Points, I had to dial down the color strength in the elbow points to get the gradient to look like the Gradient Effect version. But when I rendered it, the CP gradient did not render that way.

I should mention that I have very little experience using Colored Points, so I might be doing this wrong.

[ZV1LLE]

I meant the widget that controls the gradient's position, range and orientation

There was a node like that this entire time!? this is even a similar node to another Vector tool I use (InkScape) to make the art before importing it to Moho. I have to check this out, will give you an update on what happens. Thanks!