Feature Request: Improve starling.display.Canvas.

[ivan-shaban]

HI, i found issue when used Canvas class. When i draw twice in usual graphics class, places that overlaps became transparent (erase), in starling as i understand that not supported(

[PrimaryFeather]

Hi Ivan,

1) Yes, drawing "holes" is not supported at the moment. The Canvas class is really very simple right now; it will naively draw all the polygons you throw at it, without analyzing any overlapping, etc. Sorry for that!

2) Actually, the output looks correct to me. You've got an empty canvas and draw a rectangle with the size "100x100" to the position "x:100, y:100". The size of the canvas is defined by its contents, wherever that is; and that contents is 100x100.

Personally, I'd expect the same behavior as when I add a quad to a sprite:

var sprite:Sprite = new Sprite();
var quad:Quad = new Quad(100, 100);
quad.x = quad.y = 100;
sprite.addChild(quad);
trace("quad.width:", quad.width); // → 100

You see that both classes act just the same.

2) I'm not entirely sure I understand what you're trying to achieve here? Again, I think Canvas should show behavior that's analog to a sprite; and you can't set an "invisible" size of a sprite, either. Your subclass should do that trick for you though, right?

In any case, I don't think it will make a difference for the mask logic — especially since there are no inverted masks right now in Starling.

[ivan-shaban]

Hi again,

I update header, so my main desire is to have ability to draw "holes", maybe mark it like a backlog feature? Other points perhaps were just a moment eclipses and hadn't sense, so a remove them. You were right about sizes and etc.

[PrimaryFeather]

Thanks for the update! It's definitely planned to make the Canvas class more powerful than it is now. This is one of the things I'd like to tackle after the 2.0 release. I just marked the issue as "Feature", so that it's definitely not forgotten. :smile:

[matej-snivam]

I am also in need of canvas holes, for inverted masks :)

if we could have feature to draw emtpy rectangle or circle on the canvas it would be amazing.

is it hard to do? can you give some tips, while we wait for the work?

[PrimaryFeather]

I haven't made a lot of research on the topic yet, but I think it is rather hard to implement, yes. Think of a quad (2 triangles) and cutting a hole (say, 100 triangles) out of that. Now try to find a new set of triangles that build up that object ...!

If your mask object is rather static, though, another new feature might help: the distance field style. It allows you to draw any black+white shape sharp (anti-aliased!) in almost any scale. You'd just have to prepare the texture beforehand.

Would that work in your case?

[matej-snivam]

my mask objects are rectangles, and I need to invert them so I just want to show what is under the rects I put to a sprite. If you think Distance field Style can help, chip in. I dont quite understand how.

Currently, I think the easiest way is to draw them with BlendMode.ERASE on a filled Render Texture.

I know this by theory, so I will ask for the code help on forum :)

[PrimaryFeather]

Could you tell me a little more about the effect you'd like to achieve? You've got a sprite and want to show everything BUT a rectangle somewhere in the middle of it, right?

For a rectangle, the easiest thing you could do is just use 4 quads to draw the mask area. Add that to a sprite and use that as a mask.

For more complex objects, you could use the TextureMask extension.

... and now that I think of it again ... scrap that distance field style idea. That was nonsense, it won't work for masks. :-/

BlendMode.ERASE would also do the trick, but the other two ideas should be faster, since they don't require the RenderTexture.

[matej-snivam]

I want to do the same thing but with muplitple squares. I already achieved this effect with drawing 4 rects in a canvas, but when you add more rectangles, it gets more complicated.

I will check out TextureMask now.

So basically I want to show only what is under the squares in one sprite, like a movable windows.

[PrimaryFeather]

but when you add more rectangles, it gets more complicated.

Yes, I totally see what you mean.

So basically I want to show only what is under the squares in one sprite, like a movable windows.

With "squares" you mean the holes, right? But I don't see yet why you need an inverted mask for that. Wouldn't this just mean you add a (normal, non-inverted) mask to the sprite (containing the objects you're looking at through the windows) that contains the quads (representing the windows)?

[matej-snivam]

Wow, It is really hot in here so I am little slow :) I want to erase everything under the windows. Sorry :)

[PrimaryFeather]

Aha, okay! Mhm, that's indeed tricky ... you're right, then it's probably not possible to avoid the RenderTexture, in combination with either BlendMode.ERASE OR the TextureMask extension.

[matej-snivam]

Could you please chip in on this post on how to make renderTexture with just simple big quad and than erase the smaller quads on it?

Thank you in advance :)