Scratch card effect for Graphics? (not with Bitmap)

[Raestloz]

I know that we can create "scratch card effect" with clever use of transparent drawRect, but it only works with BitmapData. Is it possible to do that with the Graphics data? I'm talking about Graphics as in Shape.graphics and Sprite.graphics (a.k.a. the Graphics with which you define beginFill, drawRect, etc)

I'm asking because in my situation the bitmap looks pixelated. Not exactly the best image quality.

[sinious]

Is the graphic you're revealing set to "allow smoothing" in its properties in the library? Bitmaps shouldn't look pixelated unless they're scaled without that option enabled or are in 3D with no antialiasing enabled.

[Guest]

If you want to make a scratch-off game you really need to use Bitmaps. You might be able to do some of it using vector shapes, but I think you'd have problems when you wanted to know if enough of the graphic had been scratched off... with bitmapData you can use a threshold test to know how many pixels are remaining and therefore if enough have been removed.

[Raestloz]

Well, I just want to achieve the scratch card effect. I'm not going to make a scratch card game.

I'm making some kind of Paint function. So I draw lines with Graphics, and I need to erase them with "eraser tool". This "eraser tool" is what I need. I've successfully created it with transparent drawRect (as I mentioned), but it requires Bitmap

There are reasons that I don't want to use Bitmap. Most obviously I don't want to bother with scaling. In my situation, I need to scale the containers (which original sizes can be varied) into uniformed size, and I am not exactly Einstein when it comes to Math formulas (although my logic works just fine). The containers start at 100x100, and you can see what this does when it's upscaled x3

Using graphics instead of Bitmap will save me from the headcahe.

But enough about that. I don't want to use Bitmap, I want to do it with Graphics. Is it possible? I don't mind having to learn some new components or API

[totallyNoobular]

You could always do the drawing and/or scaling with the graphics API's and then use BitmapData.draw() to draw it to a bitmapdata object and do your effects that way. Check out this article, it may help:

http://www.piterwilson.com/personal/2008/05/07/bitmapdata-erasing-in-as3-with-custom-brush-shape/

[Raestloz]

That's what I've been doing, and the reason I'm asking in the first place 😕

[totallyNoobular]

Have you experimented with the mask property at all? Maybe you have a graphic on top that you're drawing to but it is set as a mask to the image below. I don't know if this would work as I haven't always been able to get the mask property to do what I ask it to

[Raestloz]

No, I haven't. But since it's more like Paint and less like "scratch card", I don't think it will work. Mask is basically "you can only see these areas", right? I need to be able to draw over the erased areas, and erase 'em again, and again and again.

[totallyNoobular]

The mask is "show only this area" but you may be able to get creative with your layering and duplicating objects on the fly. However I don't see that being easy if possible. I don't even know how much of that can be done so I wouldn't recommend spending a lot of time on it.

If you are drawing on top of images you load in at runtime and cannot control their resolution, I am not sure of another way. You might just have to live with the bitmaps and the quality you get from smoothing them.