[AS3]Erase parts of big Movie Clip

[flashmxboy]

Hi

I thougt about having a character use a eraser to erase the ground movieclip. Like in the old 2D worms where you can use a drill to dig into the ground.
Is this possible with AS3??
Would it be best to use bitmaps??

Thanks:D

[flyingmonkey456]

use a mask. the code is MaskingMC.setMask(MaskedMC)
i might have that reversed, if it doesn't work that way try it the other way. this will show only the part of the masked mc that the masking mc covers.

EDIT: that's as2, my bad. for as3, use MaskedMC.mask = MaskingMC

[flashmxboy]

If a mc is masked, will hitTest still trace hits when hitting the invisible part?

[bluemagica]

use bitmapData if you need something usable like destructible terrain, masking will only create a visual illusion!

[flyingmonkey456]

If a mc is masked, will hitTest still trace hits when hitting the invisible part?

one thing first, you have to have the background on on top of the dirt. then you mask the background so it shows like it's behind the dirt. the way you do the masking is to draw the masking mc as you dig. i'm not sure about the code on this, but i'm sure you can find a tutorial. and yes, it will still detect a hittest. you have to do a pointtest with the masking mc if you want it to know when it's in the tunnel.

[flyingmonkey456]

If a mc is masked, will hitTest still trace hits when hitting the invisible part?

it's not like you'll just fall and land in the dirt if you try to jump in a hole. if you code it right, it's just as good as if there really were a hole there and a lot easier :)

[flashmxboy]

Can i use masks to show everything thats NOT masked??

[bluemagica]

why the heck are you avoiding the bitmapData method which is so much simpler and powerful.... well i guess my suggetion is pointless, but since i already started... here read this:
http://www.mitomane.com/?p=128

[flyingmonkey456]

Can i use masks to show everything thats NOT masked??

you could probably script your own mask that could do that, but (again) i'm not sure how to do it :)

here's a tutorial:
http://www.kirupa.com/developer/actionscript/scriptable_masks.htm

[flashmxboy]

Well... if i have to script my own mask to do it, then i would rather go for bitmapData. (BEcause that tutorial on scripting masks was not AS3) That bitmap link looked like exactly what i need...


Thanks:D

[flashmxboy]

What would be simplest??

Using bitmapData or scripting own mask??

[flyingmonkey456]

What would be simplest??

Using bitmapData or scripting own mask??

you don't have to script your own mask, just put the background in the foreground and mask it where you've dug at. i'll make you a quick fla, one sec.

[flashmxboy]

you don't have to script your own mask, just put the background in the foreground and mask it where you've dug at. i'll make you a quick fla, one sec.

Ok..i thought i had to script a custom mask to do this.:P

[flyingmonkey456]

ugh... i don't use as3... how do i have enterframe and load events?

[flashmxboy]

For enter frame:
addEventListener(Event.ENTER_FRAME, functionToRun);

Dosent know about load thought..

I think all code on the first frame will run when the swf loads

[DfKimera]

Event listeners. There are two good tutorials I've found:
http://edutechwiki.unige.ch/en/ActionScript_3_event_handling_tutorial
http://www.communitymx.com/content/article.cfm?cid=76FDB

[flyingmonkey456]

alright, screw the demonstration. as3 is too different from as2 :)
all you have to do it make sure the background in front of the dirt. then draw a trail behind the digger and use that trail as a mask for the background. only the part of the background that is covered by the trail will be shown giving the appearance of a hole. i'm sure there is a tutorial somewhere on drawing shapes and filling them in with code, i know it's possible because i've seen it done in a lot of games. i hope this explains how to do it well enough :)

[bluemagica]

well, if you want to show it to him, you can just make it in as2, converting it isn't hard, but atleast a demo file would be better than plain words!

[flyingmonkey456]

alright, i made the fla but it's 600 kb over. i have to e-mail it to you. what's your e-mail address? it's in as2, btw.

[bluemagica]

err, it isn't for me, right? the demo is for the poster, so upload it at some place like mediafire.com , and upload the swf at someplace like megaswf.com, then post the links here so that we all can see it, including the thread starter! And I am asking to upload the swf separately, so that we can see what you made without downloading the fla, if not needed!

[flyingmonkey456]

err, it isn't for me, right? the demo is for the poster, so upload it at some place like mediafire.com , and upload the swf at someplace like megaswf.com, then post the links here so that we all can see it, including the thread starter! And I am asking to upload the swf separately, so that we can see what you made without downloading the fla, if not needed!

alright, whatever....
here's the .fla:
http://www.mediafire.com/?sharekey=b67ae4ad18da430c0dec85adfe0a530ae04e75f6 e8ebb871
and the .swf:
http://spamtheweb.com/ul/upload/050709/61444_MaskDemo.php

use the arrow keys to move the mask around
oh, and i was tlking to flashmxboy, not you (-:

[bluemagica]

err ok.... and how exactly is a movable mask related to something like "dynamic erasing" or "destructible terrain", like flashmxboy wanted?

[flyingmonkey456]

err ok.... and how exactly is a movable mask related to something like "dynamic erasing" or "destructible terrain", like flashmxboy wanted?

have you not read my posts? you draw an object as he's moving and use that as the mask. i'm using that as an example of how to use a mask to make it appear like you're seeing an object that is behind something. i don't know the code for dynamic drawing.

[TOdorus]

Sooh, when are you two getting married? :P

The whole mask Idea works for the view part, but not the model. I'm yet to hear of a way how you could use this to do collision detection. By using masks the mc behind it doesn't change content, so you'd be hittesting against the same shape. If I'm wrong please correct me. I've never used the mask and hittest methods myself, so I might be missing a detail.

I do think BitmapData is the way to go in this case, as it is so easy to manipulate. Just copypixel a transparent circle the size of your explosion and the pixels are modified. Not only what you see onscreen, but also in the actual data. This way you can use pixelbased collision detection to update the characters and objects in the game.

Another way would be to use an array which stores the height of terrain every x positions, for a more scorched earth kind of feel (can't believe that beauty is on youtube (http://www.youtube.com/watch?v=nDw_mpjKlpg)). This however makes it impossible to tunnel, as all terrain needs to be at the bottom.

[flyingmonkey456]

Sooh, when are you two getting married? :P

The whole mask Idea works for the view part, but not the model. I'm yet to hear of a way how you could use this to do collision detection. By using masks the mc behind it doesn't change content, so you'd be hittesting against the same shape. If I'm wrong please correct me. I've never used the mask and hittest methods myself, so I might be missing a detail.

I do think BitmapData is the way to go in this case, as it is so easy to manipulate. Just copypixel a transparent circle the size of your explosion and the pixels are modified. Not only what you see onscreen, but also in the actual data. This way you can use pixelbased collision detection to update the characters and objects in the game.

Another way would be to use an array which stores the height of terrain every x positions, for a more scorched earth kind of feel (can't believe that beauty is on youtube (http://www.youtube.com/watch?v=nDw_mpjKlpg)). This however makes it impossible to tunnel, as all terrain needs to be at the bottom.

he doesn't need explosions, it's digging. and you can pointtest the mask, also. you just say "if character pointtest mask and if character pointtest ground, then character is not on the ground. another way would be the CDK, which can use colors to distinguish objects from one another :)

[flashmxboy]

Sooh, when are you two getting married?
HA ha:P


I do think BitmapData is the way to go in this case
I also think so, but i have heard that bitmaps cant be bigger than 2880 X 2880 pixels. (I dont know if this applies to flash cs4 however. I use CS4). And my ground MC is wider than 2880 pixels:(


By using masks the mc behind it doesn't change content, so you'd be hittesting against the same shape

Actually not...

Look at these pics. This is using regular hitTestPoint for the ground.

Origial ground:
http://nettvei.com/originalGround.JPG
Masking the ground:
http://nettvei.com/masking.JPG
Masked ground:
http://nettvei.com/maskedGround.JPG

But i still cant tink of how masks can help me erasing the ground MC...

Anyway thaks to all of you so far:D

[flyingmonkey456]

But i still cant tink of how masks can help me erasing the ground MC...

Anyway thaks to all of you so far:D

you're not erasing the ground, you're showing the background. in the .fla i gave you a link to, the tree was in front of the black. only the part of the tree that the mask was on top of was being shown so it looked like the tree was behind it and you were using a flashlight or something.

btw, you're using active camera and cdk? you should have no problems, then :)
also, if you want to us bitmap data you can easily break up the bitmap into several smaller ones. it would require more code, but it would mostly be copying and pasting from the first one.

[flashmxboy]

btw, you're using active camera and cdk? .
I use AS3 Vcam and a mix of cdk and hitTest:P

you're not erasing the ground, you're showing the background. in the .fla i gave you a link to, the tree was in front of the black. only the part of the tree that the mask was on top of was being shown so it looked like the tree was behind it and you were using a flashlight or something.
Then i have to show more of the background as the player digs right? Then i have to erase or add to the masking MC anyway??

[flyingmonkey456]

I use AS3 Vcam and a mix of cdk and hitTest:P

Then i have to show more of the background as the player digs right? Then i have to erase or add to the masking MC anyway??

adding to an mc is a lot easier than really erasing it. there's a way to draw lines connecting points somehow, but i'm not sure. omg, i know how to do it. make an empty mc and draw really thick lines behind your dude in that mc. here's a page on drawing lines with as, hope this will work for what you want :)
http://www.actionscript.org/resources/articles/730/1/Drawing-lines-with-AS2/Page1.html

[flashmxboy]

I still cant understand how i could do this:h:
If i want to show the whole ground through a mask, then the masking mc must be as big as the ground right? And if i want to show less of the ground i have to remove from the masking mc?

Confused:wt:

[flyingmonkey456]

I still cant understand how i could do this:h:
If i want to show the whole ground through a mask, then the masking mc must be as big as the ground right? And if i want to show less of the ground i have to remove from the masking mc?

Confused:wt:

alright, you still don't get it. you are not masking the ground. the mask and the ground have nothing to do with each other. whatever is supposed to appear to be behind the ground is masked. download the .swf i linked to and take a look at it. that should help a lot.

[flashmxboy]

Ok im choosing the bitmapData method. It seems like the most dynamic since my game will let users draw leves.
However i have no experience with bitmaps. How can i make a big MC into a bitmap??
If i use BitmapData.draw(ground); only 1/3 of the ground shows up...
Any help?

[flashmxboy]

Another strange thing...
When i use this code:
var bmpD:BitmapData = new BitmapData(2880, 2880);
var bitmap:Bitmap = new Bitmap(bmpD);
bmpD.draw(ball);
addChild(bitmap);
bitmap.x = 100;
bitmap.y = 100;
this is the result...
http://nettvei.com/bitmapError.JPG

Strange... Anyone knows why??

[flyingmonkey456]

Ok im choosing the bitmapData method. It seems like the most dynamic since my game will let users draw leves.
However i have no experience with bitmaps. How can i make a big MC into a bitmap??
If i use BitmapData.draw(ground); only 1/3 of the ground shows up...
Any help?

i've never really used bitmap data for anything big, so i'm not exactly sure how it works. i would think that you have the ground located outside of the boundaries of the bitmap and the parts that are outside aren't showing. on the circle in your second post, about the only way that could happen is if there's something covering it or it's outside of the area that it can be seen in. is there a way to set the circle's position inside of the bitmap? if there is, try setting it to somewhere in the middle. sorry if i'm wrong on any of this, i don't really use bitmap data very often.

[TOdorus]

I also think so, but i have heard that bitmaps cant be bigger than 2880 X 2880 pixels. (I dont know if this applies to flash cs4 however. I use CS4). And my ground MC is wider than 2880 pixels:(

Thats Flash 9: a bitmap cannot have a dimension bigger then 2880 pixels. In Flash10 you can't have a bitmap with more then 2880X2880 pixels. For example your bitmap could be 3000x500 with no problem, as 3000x500 <= 2880x2880.



Actually not...

Look at these pics. This is using regular hitTestPoint for the ground.

Hittest really has come far. I stand corrected.


adding to an mc is a lot easier than really erasing it. there's a way to draw lines connecting points somehow, but i'm not sure. omg, i know how to do it. make an empty mc and draw really thick lines behind your dude in that mc. here's a page on drawing lines with as, hope this will work for what you want :)
http://www.actionscript.org/resources/articles/730/1/Drawing-lines-with-AS2/Page1.html

When I read that I was thinking about how Flash would store those lines. If there were a lot of lines because of a lot of digging, wouldn't that slow a computer down, because there would be more and more vectors to render? You could ofcourse devise something that only draws the minimal lines that are needed for the mask, but I think that will be heavy too, as it needs to loop through the existing lines. I don't know if the vectors will add up that fast, but I hate an unscalable solution.

About bitmapdata's:

A bitmapdata does not have a negative dimension, so if you paste something in there left or up of the origin it's gone. I'm geussing your ball movieclip has it's reference point (origin) in the centre.

I've never used bitmapbased collision detection myself, but there are some good explainations on the web.

http://www.8bitrocket.com/newsdisplay.aspx?newspage=6421
http://www.gskinner.com/blog/archives/2005/08/flash_8_shape_b.html

[flashmxboy]

Thats Flash 9: a bitmap cannot have a dimension bigger then 2880 pixels. In Flash10 you can't have a bitmap with more then 2880X2880 pixels. For example your bitmap could be 3000x500 with no problem, as 3000x5000 <= 2880x2880.

So in flash 9 you cant have a bitmap with the dimensions 3000x500 but you can in flash 10 right?


A bitmapdata does not have a negative dimension, so if you paste something in there left or up of the origin it's gone. I'm geussing your ball movieclip has it's reference point (origin) in the centre.
Thanks for saying this. When i set the registration point in the upper left corner it works like a charm:D :
http://nettvei.com/bitmapWorks.JPG


I've never used bitmapbased collision detection myself
Neither have i. But i guess i could use the CDK for bitmap Collision although its a little CPU heavy:P

[flyingmonkey456]

Thanks for saying this. When i set the registration point in the upper left corner it works like a charm:D

oh come on, i just said that :)

personally, i would be using masking. if you draw circles instead of lines it would get rid of any overlapping parts, i believe. bitmap data is more limited in some ways, but has more options in others. it really depends on the situation. good luck on your game, post the .swf when it's finished :)

[flashmxboy]

oh come on, i just said that :)

You did?? Thanks to you too then:D

And thanks to all of you who helped me:D

[bluemagica]

Ok since you are down to bitmaps, let me clear somethings up....
1) the px limit is on the "bitmap", not the "bitmapData".....even if someone views your game fullscreen, do you think they will have a resolution of more than 2880x2880? Just load your image, and on the bitmap, which is obviously smaller, use copypixels to draw only the part that you want to show in view, (In the copyPixels change the Point to do this scrolling!)

2) Now you can get the erasing part from the example I linked to earlier! But remember to have a temporary bitmapData and keep updating it with the erased content, otherwise you might lose that info when you scroll back!

3) yeh bitmap based hitTest is great and all, but while you are using cdk, why bother? Just addChild your bitmap inside a blank sprite or shape, and hitTest with that, it will be easier and better with cdk around!



@TOdorus: 2880x2880 is greater than 3000x5000 ;)

[TOdorus]

@TOdorus: 2880x2880 is greater than 3000x5000 ;)

I have no idea what you're talking about :angel:

btw what does cdk stand for?

[bluemagica]

cdk is collision detection kit, one of the most amazing and useful libraries I have ever seen!
http://www.coreyoneil.com/Flash/CDK/index.html

[therobot]

Pretty sure you've decided to go with BitmapData instead of an overly-complex series of masks, but I'll add my two cents anyways:

Go with BitmapData.

edit: i'll have to check out that cdk - is it efficient? 8)

[bluemagica]

As far as I have tested its same, if not better than inbuilt hitTests, but considering its uses( actual shape based collision, collision direction, amount of penetration) it is much better!

[flashmxboy]

As far as I have tested its same, if not better than inbuilt hitTests, but considering its uses( actual shape based collision, collision direction, amount of penetration) it is much better!

Its better than hitTest i some cases:D, but i have run into a problem when using the cdk.
In loops it slows down the game very much:(
Have a look at this code:

while (collisionArray.length) {
RY1 -= 3;
Point1.x = RX1;
Point1.y = RY1;
collisionArray = collisionList.checkCollisions();
When i use the CDK i have to update the array in every single loop to avoid crashing the game:(
For this use this is much better:

while (ground.hitTestPoint(RX1,RY1,true)) {
RY1 -= 1;
Point1.x = RX1;
Point1.y = RY1;
}
But i cant use this on bitmaps:(
Is there anything i can do to improve the cdk`s perfromance in loops??

[flyingmonkey456]

Its better than hitTest i some cases:D, but i have run into a problem when using the cdk.
In loops it slows down the game very much:(
Have a look at this code:

while (collisionArray.length) {
RY1 -= 3;
Point1.x = RX1;
Point1.y = RY1;
collisionArray = collisionList.checkCollisions();
When i use the CDK i have to update the array in every single loop to avoid crashing the game:(
For this use this is much better:

while (ground.hitTestPoint(RX1,RY1,true)) {
RY1 -= 1;
Point1.x = RX1;
Point1.y = RY1;
}
But i cant use this on bitmaps:(
Is there anything i can do to improve the cdk`s perfromance in loops??

you could use color based collisions and have the dirt be a very light shade and the background be a very dark shade. or you could make the background a different color, altogether. like crystals or something. you would have to make sure that the background is completely out of the color range, however you do it. i would think that this would be able to run a lot more smoothly than the other way, but i'm not sure.

[bluemagica]

I haven't actually used cdk much, cause I have no need for it yet! But if I remember correctly, collisionList.CheckCollsions(), itself runs in a loop through all the instances on the collision list, so when you put it in a while loop, you are trying to loop a already running loop, which is affecting your performance!

[flashmxboy]

I haven't actually used cdk much, cause I have no need for it yet! But if I remember correctly, collisionList.CheckCollsions(), itself runs in a loop through all the instances on the collision list, so when you put it in a while loop, you are trying to loop a already running loop, which is affecting your performance!

I dont know, but if dont do collisionList.checkCollisions(); in the while loop, it loops forever and crashes the flash player.:\

[mxrider108]

I looked at the CDK but because it still uses hitTest and it doesn't make use of any advanced broadphase (that I could see), I found it to be robust in features but lacking in performance.

[flashmxboy]

I found it to be robust in features but lacking in performance.

Me too. But im forced to use it for all collision detection in my game, because regular hitTest register hits on the transparent pixels in the bitmap :-/ . Is there any way i can remove those transparent pixels and stick with plain old hitTest??

[flashmxboy]

And if i cant remove the transparent pixels, can i separate them from the other pixels??

[bluemagica]

use bitmap.hitTest method, thats pixel perfect

[flashmxboy]

use bitmap.hitTest method, thats pixel perfect
CDK is aslo pixel perfect, but very CPU intensive. Is bitmapData.hitTest more efficient??
Best for would be to remove the transparent pixels from the bitmap and use regular hitTestPoint because i know that works through my whole code. But that isn't possible?? The isn't anything like bitmapData.removePixel() or something??

[TOdorus]

From what I've heard it is more effecient that the movieclip hittest method. Makes sense since a movieclip can contain vectors and a bitmapdata only pixels, so they're quicker to render. It really makes no sense removing pixels. A bitmapdata is a rectangular grid, so you can't remove random pixels from it, as it would lose it's height and width properties, which would make it something else then a bitmapdata (as those need to be rectangular).

[flashmxboy]

Hi again

Sorry but im not very quick at new stuff, and i realy cant understand the documentation for bitmapData.hitTest :-/

So my question is simple.
How can i use bitmapData.hitTest to produce the same result as this code i used before.

if(ground.hitTestPoint(player.x, player.y, true) {
//The actions
}
//ground was a movieclip before. Now its a bitmap. And its BitmapData is simply named bitmapData.
//player was and is still a movieclip

[flashmxboy]

I have been doing a little web search and found a function for bitmapData.hitTest:D
However i still dont understand the stuff with firstPoint secondPoint etc. :-/

Anyway here is the function:
function realHitTest(object:DisplayObject, point:Point):Boolean {
return (object as BitmapData).hitTest(new Point(0,0), 0, object.globalToLocal(point));
}

But if i try to do this:
var playersPoint:Point = new Point(player.x, player.y);
var hit:Boolean = realHitTest(bitmapData, playersPoint);

It throws this error:

1067: Implicit coercion of a value of type flash.display:BitmapData to an unrelated type flash.display: DisplayObject.
I thougt a bitmapData was a DisplayObject:S

Any explanation??

[flyingmonkey456]

hey, i've got a quick question about this, too. does it check the transparent areas of the bitmap? because if it does, it's the same as a normal hittest...

[TOdorus]

I thougt a bitmapData was a DisplayObject:S


but a DisplayObject isn't necessarily a bitmapData



return (object as BitmapData)





hey, i've got a quick question about this, too. does it check the transparent areas of the bitmap? because if it does, it's the same as a normal hittest...




Performs pixel-level hit detection between one bitmap image and a point, rectangle, or other bitmap image. A hit is defined as an overlap of a point or rectangle over an opaque pixel, or two overlapping opaque pixels. No stretching, rotation, or other transformation of either object is considered when the hit test is performed. If an image is an opaque image, it is considered a fully opaque rectangle for this method. Both images must be transparent images to perform pixel-level hit testing that considers transparency. When you are testing two transparent images, the alpha threshold parameters control what alpha channel values, from 0 to 255, are considered opaque.

(...)

secondBitmapPoint parameter. firstAlphaThreshold:uint (http://help.adobe.com/en_US/AS3LCR/Flash_10.0/uint.html) — The smallest alpha channel value that is considered opaque for this hit test
(...)
secondAlphaThreshold:uint (http://help.adobe.com/en_US/AS3LCR/Flash_10.0/uint.html) (default = 1) — The smallest alpha channel value that is considered opaque in the second BitmapData object. Use this parameter only when the value of secondObject is a BitmapData object and both BitmapData objects are transparent.

You'll learn to love the language reference as much as I do flyingmonkey.

[flyingmonkey456]

You'll learn to love the language reference as much as I do flyingmonkey.

thanks, can i get a link to that website?

[bluemagica]

just type "as3 livedocs" on google.

[flashmxboy]

ok so firstPoint:Point is the bitmapData`position? How do i know what that is?? bitmapData.x?
and firstAlphaThreshold:uint is what??
and secondObject:Object is the point of collision??

[bluemagica]

go to the livedocs and scroll to the bottom of the BitmapData page, there are many great usage examples which can explain these terms to you better than I can with a long speech!

[flashmxboy]

Okay i got it...

firstPoint is the x and y values of the bitmap. I couldn`t do bitmap.x because i added the bitmap to a MovieClip. When i add it to the stage i can do bitmap.x and bitmap.y
Thanks to all of you who helped me:D:D