Moho Forum

I compared how you could animate pixel-based imagery with two types of features in Anime Studio:

• masking - trace each PNG image in a vector layer, put the vector layer behind the PNG image layer, and add it to the mask, but keep invisible, while the bone layer has all its sublayers hidden by masking
• image texture fills - trace each PNG image in a vector layer, remove the PNG image layer, and set the fill of the vector shape to image texture (stretch)

Here's a (crummy) sample movie:

http://www.youtube.com/watch?v=tQL9StdWRWk

As you can see, when the bone warps the head towards the bird's back, a little bit of the white fill color bleeds in, at the back of the head. At least, in the image texture filled version. In the masked version, it doesn't show up.

Mind you, though, they you will need to set an outline for each shape in the masked version, because the outlines in the original bitmap image doesn't line up properly.

Here is the project file: bird.zip

If you put in a fill color that "matches" the general color of the image texture this isn't as much of a problem.

The bleeding of the back ground color inside a texture fill can also be "minimized" by adding a point or two at those spots. This effect is caused by very few points far apart being moved. Also using a full image as the texture can eliminate the problem in long thin areas (it still happens at the "edges" of the images though).

In your bird example if you had a full square image texture the image area around the head wouldn't show the background at all because there would be image there. If you use transparency on the png image around the shape the texture is on you see the background show through.

The stretch setting in the image texture effect is based on the bounding box of all the points of the shape. If you push one point way out it expands the image to reach that size possibly causing the background to show in other areas.

By using a squared or rectangular image texture those areas still have image:

Shape on the left uses a red circle with transparent background for the image texture. Shape on the right uses a square red image with no transparency. The original shape on frame 0 is a circle with a bunch of extra points.


-vern

I did a test the other day and found that my image texture didn't fill the entire shape, only 2/3 of it. Enlarging the texture file's dimensions didn't help.

Any idea?

The key is the bounding box of the mesh. If you do a screen grab or render of the shape on frame 0 the image texture should be the same aspect ratio of the shape. Crop the image so that it encloses the outermost points of the shape no matter how "irregular" the shape. Paint the texture within that area rather than keeping it tight to the actual outlines of the shape.

Set the image texture to "stretch".

What happens is that the original bounding box area of the image texture will always scale to match the bounding box of the shape no matter how much it is distorted.

There are still problems with this when the image overlaps itself using bones and sometimes there will be areas of the background that peek through when the "edges" of the image line up with the "edges" of the shape. In those areas there isn't any "bleed" for the image and if the distortion of the mesh doesn't match the distortion of the image you get gaps. That is when you could fill the shape with a color that "blends" with the image.

-vern

Here's some screenshot to illustrate.



As you see, the texture file roughly meets the bounding rectangle of the shape. I even checked the actual dimensions: the project settings are PAL 16:9, means 1024 x 576 px, and the texture file is 595 x 869 px, clearly large enough.

I get the same effect if I set the texture to "tile" instead of "stretch".

Have you translated the layer?

Translating the layer does not translate the texture fill. the only way to move the points of a vector layer shape "globally" is to use bones or moving the points.

-vern

heyvern wrote:Translating the layer does not translate the texture fill. the only way to move the points of a vector layer shape "globally" is to use bones or moving the points.

Or to put the layer in a group type layer and translate that group type layer.

No, haven't translated anything. It's still all in frame #0.

That's interesting. Layer scaling and translation has a multiplied effect on texture fills.

I would still have to say that masking is more flexible and, perhaps more importantly, predictable.

I originally thought this new feature would work well for hair, but to acheive various directionality, I'd have to rotate the shapes before I sculpt them to fit. It's still easier to rotate several different masked textures. And I have yet to see any impressive bone distortion of the new texture fills. I guess this makes that angle constraint limit that much more important.

slowtiger wrote:Here's some screenshot to illustrate.



As you see, the texture file roughly meets the bounding rectangle of the shape. I even checked the actual dimensions: the project settings are PAL 16:9, means 1024 x 576 px, and the texture file is 595 x 869 px, clearly large enough.

I get the same effect if I set the texture to "tile" instead of "stretch".

I wonder, slowtiger, why is your bone setup as such in the picture? I'd always assumed it easier to just use four verticle bones... Could you share what you know, please?

Please ignore the bones. This file was just a test of the texture fill, that's why I added that many points and bones. There's no sense behind that.

Wild goose chase:

Are you absolutely sure there is no whitespace around the image?

Is it possible you have a "stray point" that is part of shape off somewhere that could be changing the max size of the shape?

It doesn't look like the image isn't filling the shape or getting scaled. It looks like it is being offset somehow. The only time I've seen that is when I've translated the layer (even on frame 0) or there is white space on the image.

What program are you using to create the image? Some programs "add" image area around the image (Adobe Illustrator sometimes exports with the DOCUMENT bounds creating white areas.)

If you could post both the AS and image file I bet I could figure it out.

-vern

I did my own test and the only way I could offset the image like that was to move the layer:



You are absolutely certain there is no layer translation?

-vern

I am, because the image is not imported as an image layer, but as a texture only in that texture dialogue.

And the texture doesn't have white around, I made it in Photoshop.

- Maybe we leave this problem as it is, I don't have time to do further tests right now and am away for the next week . Back after 25.4.

The vector layer might still have some translation. Check just to be sure because I can't find anything else to cause this.

-vern