Mask objects

jbernabeu

Is there a way to apply mask effect to objects like in Flash??

If it is a way, Masking support more than 1 transparence bit?

Thanks in advance

Shilo

Hello,

I know of two ways to create masking.

You can create a Sparrow filter that uses a shader to mask a single texture with a single masking texture.
You can use SPRenderTextures for realtime masking on multiple objects, not just images.

I have done both methods, and I wasn't 100% successful on either of them. With the masking filter, I had issues with relative sizing and offsetting. With the render texture masking, I had stretching issues. They are definitely possible though.

There is an amazing SPRenderTexture masking extension for Starling (not Sparrow) called PixelMask. I was so amazed with it that I tried creating my own port of PixelMask to Sparrow. This is when I ran into the stretching issue. If you would like to give it a try, you can find it here: SHPixelMaskSpriteDemo. I believe the stretching only happens when you set "animated" to "YES".

Maybe if Daniel ever has free time, he can help get it working. 😉

jbernabeu

Thanks Shilo,

I have being trying it and it works good enough for me.

Daniel

I've started work on an official port of that class. Looking good so far — I'll post the code here when everything works.

Shilo

Great news! I speak for everyone when I say thank you for all you have done!

Daniel

W00t, I think I succeeded!

The extension is ready, you guys can try it out here:
https://github.com/Gamua/Sparrow-Extension-Masked-Sprite

I haven't yet created the Wiki page for it, but you should find all necessary information in the README file.

Let me know how it works for you! I made some enhancements compared to the Starling version, so it should work more reliably.

Shilo, please try if your scale problems are gone with this version. I think it shouldn't be an issue an longer!

Shilo

Thank you again. This will come in very handy for me and my associate. I will test the scaling, but I agree that you most-likely fixed it.

One small typo with the read-me "Sample Code".

The following:

sprite.mask = movie;

Should be:

sprite.mask = mask;

Also, one feature I would like, is to toggle on/off the constant rendering to boost performance when the mask is static (AKA an "animated" property). That will be an easy change though. 🙂

Daniel

Ah, thanks for the heads-up on the sample code! I've fixed that right away.

Yes, I'll add such a feature! I just wanted to get a little feedback on the basic version first. 🙂

Shilo

I just tried my SHPixelMaskSprite extension with Sparrow 2.1 RC, and the stretching issue is gone. It's a shame that I won't know what was causing the problem.

I will try Daniel's SXMaskedSprite with the demo.

Shilo

I just tested SXMaskedSprite on my demo project. There was no stretching issues, as expected. But there was a major problem with performance and possibly memory usage.

Results when testing my extension, SHPixelMaskSprite:

iPad 2: 60 fps
iPad Air: 60 fps

Results when testing SXMaskedSprite:

iPad 2: 45 fps
iPad Air: 31 fps

I also received three levels of memory warnings on iPad Air while testing SXMaskedSprite demo with a small amount of apps open, but I didn't look into the memory issue for more details.

The frame rate issue concerns me the most. 31 fps on iPad Air is quite bad with such a small demo. The memory issue might be a problem also.

Could someone also give it a try and report the results?

@Daniel
If you could have a quick look, I would be very grateful. I think I did a straight port of Starling's PixelMask extension, but it might not be complete due to the previous stretching issue that road-blocked me. For now, i'll use my extension to salvage performance, but I do hope we can get an updated version of SXMaskedSprite. 🙂

Download links:
SHPixelMaskSprite Demo: http://shilocity.net/sparrow/extensions/SHPixelMaskSpriteDemo.zip
SXMaskedSprite Demo: http://shilocity.net/sparrow/extensions/SXMaskedSpriteDemo.zip

Daniel

Thanks for the heads-up, Shilo, and for providing the sample project!

I found out the reason for the problem: my version of the mask extension uses the object size as the base for the internally used textures; the original version uses the mask object.

And since you add a 1000x1000 quad to your masked object, you end up creating two 4096x4096 pixel textures! (The scale factor on an iPad Air is "4").

If you'd done it the other way round — using a huge mask on a small object — the result would have been the other way round: the new extension would have come out faster. 😉

Ideally, it would work in both situations, of course. I'll have another look at it!

Daniel

I'm now using the intersection of object and filter bounds for the mask. That fixes it! The demo now runs with 60fps.

However, I must correct what I said before: your version was actually able to handle both of those situations. 😉

The current way of doing it should be most effective. If you've got a display object that is several thousand pixels wide, and the mask is just a few pixels, then the required texture memory (plus rendering time) will be minimal.

Please let me know if it works for you!

Daniel

I also added it to the wiki now:

http://wiki.sparrow-framework.org/extensions/masked_sprite

Shilo

That sounds awesome! Thank you for the speedy testing and update. I will check it out after I get much needed sleep.

Shilo

I just did a detailed test with my SHPixelMaskSprite, the old SXMaskSprite, and the new SXMaskSprite.

Here are the results:
time = render time for the extension, lower the better
performance = the "time" percentage based on SHPixelMaskSprite's performance, higher the better

SXMaskSprite (old)

iPad 2
fps = 45 fps
time = 0.011344 - 0.030182 (avg: 0.026435)
performance = 13%

iPad Air
fps = 32 fps
time = 0.011113 - 0.029930 (avg: 0.0205215)
performance = 63%

-------------------

SHPixelMaskSprite

iPad 2
fps = 60 fps
time = 0.003263 - 0.003732 (avg: 0.0034975)
performance = 100%

iPad Air
fps = 60 fps
time = 0.012088 - 0.013816 (avg: 0.012952)
performance = 100%

-------------------

SXMaskSprite (new)

iPad 2
fps = 60 fps
time = 0.003189 - 0.003726 (avg: 0.0034575)
performance = 101%

iPad Air
fps = 60 fps
time = 0.001250 - 0.001433 (avg: 0.0013415)
performance = 965%

From the results, the new SXMaskSprite is far more efficient than the old SXMaskSprite. It is also on par with SHPixelMaskSprite for iPad 2, and much more efficient than SHPixelMaskSprite for iPad Air. Nearly 10x's faster 😳 . Call me impressed. Thank you!

Shilo

There is an clipping issue with your new bounds calculation.

It only clips the masked object with "invert" blend mode. "normal" works fine.

So my fix is to calculate the intersection for "normal" only:

SPRectangle *bounds = [self boundsInSpace:self];

if (_blendMode == SXBlendModeMaskNormal)
    bounds = [bounds intersectionWithRectangle:_mask.bounds];

This should work in all situations, right?

Here is the pull request:
https://github.com/Gamua/Sparrow-Extension-Masked-Sprite/pull/1

Daniel

Thanks for the extensive tests, Shilo! I'm happy to see that it's working so fast now! =)

And your fix for the "inverted" mode is exactly what needs to be done. In that mode, there's no way around using the complete object bounds.

Thanks for that! I merged it right away.

Shilo

I also added support for "animated", and created a new button in the demo project to toggle "animated". The button title changes from "Deanimate Mask" to "Animate Mask". I also made a small change to the "Invert Mask" button, it now toggles between that and "Normal Mask" title.

Would you please have a look? It works for the demo, but I am not too sure about the Matrix calculation. That has always been my weak point.

The code in question is here:

SPMatrix *matrix = [SPMatrix matrixWithIdentity];
[matrix copyFromMatrix:_mask.transformationMatrix];

if (_blendMode == SXBlendModeMaskInvert)
{
    SPRectangle *bounds = [self boundsInSpace:self];
    SPRectangle *intersectBounds = [bounds intersectionWithRectangle:_mask.bounds];
    [matrix translateXBy:bounds.x-intersectBounds.x yBy:bounds.y-intersectBounds.y];
}

[support pushStateWithMatrix:matrix alpha:1.0f blendMode:SPBlendModeAuto];
[_canvasImage render:support];
[support popState];

The pull request is here:
https://github.com/Gamua/Sparrow-Extension-Masked-Sprite/pull/2

Also, I would like a method to manually refresh/redraw the mask when animated is off. Would that be something you don't mind being added?

Shilo

Added a "redraw" method and button in the demo project.

I guess it combined all my commits into one pull request:
https://github.com/Gamua/Sparrow-Extension-Masked-Sprite/pull/2

I was trying to do them all separately to allow you to pick and choose.