Gradients aren't bending properly with bones

[ZV1LLE]

Update: Your right, this actually is a thing in Moho! I cant believe I never saw it. I think I can make a smart action from and then fix the issue, I'll give you more updates on what happpens

[ZV1LLE]

I tried using the gradient handler with the smart action, and it was a complete disaster. Below is a demonstration of what happened.

[ZV1LLE]

Any suggestions on how I could fix the image texture instead?

[Greenlaw]

Hi,

I'm unsure why you want to use the Smart Bone for the gradient. Normally, you would leave the gradient in place, and let the arm bones bend it when you animate them.

If you go with an Image Texture Effect, it's the same; just let the arm bones bend the texture; there shouldn't be a need to animate the texture in a Smart Bone Action.

The other way is to import the texture as an Image Layer, and you can just bend that with the arm Bones directly, or you can create and apply a Mesh Layer and use the arm bones to bend that. The Mesh Warp is only necessary if the imported Image Layer isn't bending smoothly enough for you. Either way, you'll need to use the arm as a mask for the Image Layer.

The way I did this sort of thing for some of my early DreamWorks animations (All Hail KIng Julien, Puss-In-Boots, etc.,) was with the Image Texture Effect, so it should work. With this approach, a mask isn't necessary because the image is part of the shape's Style.

Hope this helps.

[ZV1LLE]

Well, until you tell me where to find the place to make a mesh layer, an image texture is my best option. But the image texture as I've stated previously is not turning out the way I want it to be and is being backwards instead of in its original direction (the same one that even the window for the image texture shows me).

Is there any way to like to edit the image texture by like turning it around or something else? Because rotating the png file didn't change anything either

[Greenlaw]

Well, until you tell me where to find the place to make a mesh layer, an image texture is my best option.

There are two ways to make a Mesh Warp layer:

1. Use a regular vector layer. In a separate layer, draw an appropriate mesh art that covers the artwork layer. Then in the artwork layer's settings, select the layer you wish to use as a Warp layer. The Warp layer can now be used to deform the art layer. If you're using Bones, bind the Warp layer, not the art layer.

...or...

2. Use Draw > Create Mesh Layer. This creates a special mesh layer that you can edit dynamically. It's pretty cool in action. I know there are videos demonstrating it on the Moho Animation Software channel.

I find Create Mesh works great for photos and other bitmap images. But when I need a very specific mesh, I want to create the mesh manually.

There are unique ways to apply and animate mesh layers, such as Perspective mode. This mode requires a simple quad shape, which is useful for adding depth to artwork. You can find more info about the different ways to use Mesh Warp layers in the manual and examples on YouTube and in the forums.

Note: if you use a Mesh Warp with vector art, the vector art needs the points to support the intended deformation. The result may look bad if there are too few points in the shape or if the points are poorly placed.

But the image texture as I've stated previously is not turning out the way I want it to be and is being backwards instead of in its original direction (the same one that even the window for the image texture shows me).

Is there any way to like to edit the image texture by like turning it around or something else? Because rotating the png file didn't change anything either

Turning the gradient around with the widget should be easy. There are two ways:

1. Invert the gradient by dragging the keys in the Gradient window to opposite ends.

...or...

2. Turn the widget around 180 degrees using the handle.

If that's not what you mean, I think I need to see an example.

Hope this helps.

[ZV1LLE]

This mode requires a simple quad shape, which is useful for adding depth to artwork

I think I'm gonna try out this one.

Edit: looking more at the tutorial I dont really think its gonna work.

Turning the gradient around with the widget should be easy. There are two ways:

I meant the image texture (the png file I'm using to replace the gradient), not the actual gradient. Here's the video of the issue with the image texture again:

https://drive.google.com/file/d/1oGkf3k ... drive_link

[Greenlaw]

It's the same thing. The Image Texture Effect also has a widget to position, scale and rotate the image. For example...



Here's the project file if you'd like to study it:

ArmGrad.zip

The setup is mostly straightforward:
- I made the colors really obvious to show what's going on.
- There are two shapes, each with the same Image Texture applied.
- I used Bind Points for the shoulder and forearm and Flexi-bind for the elbow. (Basically, the same setup from the tutorial.)
- Two Smart Bone Actions for the lower arm bone to correct the elbow bend.

The gradient doesn't quite work when the arm shapes are completely overlapping, but I think this could be adjusted. Also, probably want to disable image tiling; I think disabling this option makes the texture extend rather than repeat, which might solve the overlap issue. Otherwise, scaling the image with the widget might do the trick (You may need to adjust the gradient's range in your paint program). Feel free to experiment with it.

[Greenlaw]

One more tip: When I set up a rig like this, I prefer to pose the arms vertically or horizontally rather than posed at an angle like you have it. It's just a lot easier to align things this way.

The pose might look awkward at frame 0, but it doesn't matter because I'm not rendering frame 0 anyway.

Hope this helps.

[ZV1LLE]

OH, I HAVE to check that out. Tysm!

[Greenlaw]

Sure thing!

Update: I had to update the ArmGrad.zip file a few minutes ago (5:45 PM). I'm not sure it contained the latest version of the file, as seen in the GIF.

[Greenlaw]

I had to check what happened when Don't Repeat was selected, and my guess was incorrect; this option doesn't extend the tile; the image just stops at its edge. So, to fix the overlap issue (if you need to), you might have to follow the second suggestion: adjust the gradient image in a paint program, and scale it up with the Image Texture Widget.

I'd love to see this Effect improved in a future release to feature more tiling and non-tiling options and the ability to constrain the widget's movements (horizontal, vertical, 45-degree increments, etc.)

Or, use an image layer. That might work better...or maybe just differently. But that's a whole other setup.

Moho has many ways to do almost the same thing.

[ZV1LLE]

adjust the gradient image in a paint program, and scale it up with the Image Texture Widget.

I'll be doing just that!

Post I was making before I saw your comment:

It actually works! The image texture does look a bit weird when I move the arm tho like the image going backwards, but I think I can kinda edit the image to add some white at the end. Changing the handle with a smart action causes lots of errors so i dont know how I'm going to fix the image texture going backwards and stuff. Any ideas?

[Greenlaw]

Changing the handle with a smart action causes lots of errors so i dont know how I'm going to fix the image texture going backwards and stuff. Any ideas?

Hi, be careful not to overthink this. As mentioned, animating the gradient inside a Smart Bone action is unnecessary. The arm bones should bend the gradient on their own (It doesn't matter if the gradient is an image or an Effect.)

Animating the widget inside the Smart Bone Action is double-transforming the artwork on the Mainline, potentially making the deformation with bones less predictable.

You can see how this should work in my posted example: when the arm bends, the gradient bends with bones at the elbow. The widget is never animated on the mainline or inside an Action.

Question: are you trying to cover the gap I described when the lower arm shape overlaps the upper arm shape? In that case, offsetting the widget inside the Action would be appropriate, but be careful to move it perfectly horizontally relative to the arm bone. This is why I always rig my arms horizontally or vertically...it makes doing this sort of thing MUCH easier.

Another way to fix this might be to design the texture to cover the region and scale it to cover the area using the Image Texture widget. By scaling, I don't mean animating the scale. Just set it to the appropriate size on frame 0 and leave it. The bones should bend it fine on their own.

[Greenlaw]

I had a little time this morning, so I took another look at what's going on with the overlap...



The rig on the left is the same as before, just a new gradient image to make the deformation more obvious. The upper right rig shows what it looks like using only Bones to bend it. Nothing else is animated here. It's just the two bones bending the gradient.

The bottom right rig has the overlap, and this is the error I mentioned. On closer inspection, this is apparently caused by the lower arm bone deforming the upper arm shape.

So, to solve this, I need to prevent the lower bone from doing that.

I can think of a few approaches, but I won't have time to try them today. But that's what you need to look into: figure out how to minimize the effect of the lower arm bone on the upper arm shape's artwork.

Hope this clue helps you figure this out. Good luck!