I am thinking of doing a platform game in flash. The approach towards level design I am thinking of is to have each level as an image with either a transparent or solid colour background.
Using regular hittest functions determines if one object has touched another object. In this case this will always return true.
My question is, I want a hitTest function to return true if the player character collides with any non transparent / solid colour on the level.
If I do have a transparent background I will probably have another image as a background that would move a little more than the level image to create a simple parallax effect. If I do this, the hitTest function would need to ignore the background image (I don't think this will be an issue, but still better to specify and be called an idiot than not).
This is an inefficiency method but its the simplest solution:
if (player.hitTestObject(platform) && platform.alpha == 1) {
trace("we landed!!!");
} else {
trace("we fell!!!");
}
Consider using the AS3 Collision Detection Kit as it can detect hits on colours.
Related
I want to mask the png image pattern.png with another image - mask.png, but it doesn't work at all and I can't find the reason. Instead of masking the image, the mask just disappears and the pattern stays the same as it was.
I tried making a MovieClip, drawing e.g. a circle and using that as the mask instead of mask.png and it works just fine. Is it because you can't use loader objects as masks? How do I make it work?
edit: After changing the size of mask.png to be smaller than the pattern, I've realized that it actually does kind of work, but what happens is instead of cutting the pattern into the shape I've drawn in the png file it just cuts it into the shape of the entire file, as in, it counts the rectangular transparent background as well. How can I make it cut out just the shape?
var mask:Loader = new Loader();
mask.load(new URLRequest("mask.png"));
var pattern:Loader = new Loader();
pattern.load(new URLRequest("pattern.png"));
pattern.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
function loadComplete(e:Event):void {
addChild(pattern);
addChild(mask);
pattern.mask = mask;
}
Your code is looks correctly. The mask property of DisplayObject wants DisplayObject too. But try to make few things, to find the trouble:
You have only one listener, to pattern.png. But you must be sure, that mask.png has loaded already too.
Despite that Loader is DisplayObject too - try to get content from loader for mask, and just after that try to use it.
*Ah, and one more thing. You must at first add listener, and only later try to load.
Libgdx.
I have 2 objects: Bucket and drop.
I use Sprite to manipulation on this objects.
How to check overlapse of non-transparent fragment of objects?
I really don't think that there is a function that could handle that.
I use to remove margin that represent the non-transparent of a sprite content
for example if the we put the size of the rectangle that represent the coins like this picture and we ignore the transparent part of the Sprite
good luck !
I've a problem with ROLL_OVER event listener. When I enter the empty area withing the movieclip with mouse cursor, ROLL_OVER event triggers. But I want that event trigger only when mouse cursor is on the colored area.
To Make it more clear: Think about " O " letter, when mouse cursor is between the empty area of O letter (inside of O) , event shouldn't trigger. It should trigger only when mouse curser is on the black area.
How can I implement this?
Thanks
-Ozan
PROBLEM IS SOLVED THANKS TO #Ethan Kennerly
I just want to add a few things to help people have problem same as me. In my situation I tried to make continents glow when my mouse is over them. I used the ROLL_OVER/MOUSE_OVER eventlistener to check if my mouse is over them or not. But with the data given by Ethan Kennerly I produced another way.
In Ethan Kennerly's solution, if your mouse enters the area of continent from a transparent area , it doesn't get blur effect because ROLL_OVER and MOUSE_OVER event listeners only trigger once per enters so I used MOUSE_MOVE event listener on each continent movieclips.
And for this statement:
if (isPixelTransparent(DisplayObject(event.currentTarget), new Point(stage.mouseX, stage.mouseY)) {
return;
}
add whatever is in the "ROLL_OUT or MOUSE_OUT" eventlistener function, add all of them inside this statement. But don't remove ROLL_OUT or MOUSE_OUT functions.
It sounds like the movie clip contains a shape that has transparent pixels. Transparent pixels respond to mouse over and roll over. If you could draw vector graphics that have no shapes with transparent pixels, the mouse would ignore the empty space in the movie clip's bounding box.
Yet it sounds like you need to use transparent pixels and you want the mouse to ignore them, so you could guard, like this:
private function onRollOver(event:MouseEvent):void
{
if (isPixelTransparent(DisplayObject(event.currentTarget), new Point(stage.mouseX, stage.mouseY)) {
return;
}
// respond to roll over.
}
To detect transparency, Miguel Santirso rendered the pixels and translated the coordinate space here: http://sourcecookbook.com/en/recipes/97/check-if-a-pixel-is-transparent-in-a-displayobject (Except line 38 looks on my computer like "rect" got rendered as "ct"). You could optimize that code by only drawing the pixel in question, instead of the whole image, and checking if that pixel value (getPixel32) is 0, instead of calling a hitTest. I would optimize Miguel's code like this:
public static function isPixelTransparent(objectOnStage:DisplayObject, globalPoint:Point):Boolean
{
var local:Point = objectOnStage.globalToLocal(globalPoint);
var matrix:Matrix = new Matrix();
matrix.translate(-local.x, -local.y);
var data:BitmapData = new BitmapData(1, 1, true, 0x00000000);
data.draw(object, matrix);
return 0x00000000 == data.getPixel32(0, 0);
}
By the way, if all your movie clips would have the same hit test shape, you could create a separate transparent shape that listens to the roll over. I use a transparent shape to define a custom hit test shape that is a consistent and simple shape (like a circle) when the image is a more complicate shape (like an X or an O with nothing in the middle). The custom hit test shape is a Sprite with a transparent shape. The sprite listens to the roll over. A separate mouse listener shape is also useful if your movie clip, on later frames, creates new shapes that alter the silhouette of the movie clip.
The easiest solution would be using the Interactive PNG class by Moses.
http://blog.mosessupposes.com/?p=40
Normally the clear areas of a PNG are treated as solid, which can be especially frustrating when dealing with a lot of images that overlap each other because they tend to block mouse interactions on the clips below them.
This utility fixes that so that mouse events don't occur until you
bump against a solid pixel, or a pixel of any transparency value
besides totally clear. InteractivePNG lets you set an alphaTolerance
level to determine what transparency level will register as a hit.
I am trying to understand masks in actionscript..Everything seems to make sense to me but one part of the code
function mouseM(event:MouseEvent):void {
if (mouseclick == 1) {
mask_mc.graphics.beginFill(0x000000);
mask_mc.graphics.drawEllipse(mouseX, mouseY, 70, 60);
mask_mc.graphics.endFill();
}
}
I am not sure how to exactly ask this question but here it goes. why does the mask have "begin fill" with a black color? wouldn't that paint the the image in black (I know it doesn't, it just reveals it)? what is the exact function of beginfill (besides revealing the image lool)? like how does it exactly work? sorry if it sounds ridiculously off.. but that part of the code was really screwing me up in understanding masks
What you are doing is drawing a shape to be used as a mask. In this case, a circle.
It doesn't matter what colour it is as Flash is only interested in the shape of the mask, not the colour.
Once the circle is drawn, Flash checks what part of the circle overlap the object you're masking so that every pixel the circle is not covering will be invisible. I guess it should really be called an anti-mask as the circle dictates which parts of your image wont be masked but it's just become the general convention to call the circle (or whatever shape you use) the mask.
Again, you're just creating a shape to be used as a mask. Setting the colour is just so the object can essentially exist.. because you can't exactly have a transparent circle.
Feel free to change the colour to anything and you'll see it makes no difference, the shape is all that matters.
I'm trying to make a "pan" effect (I'm not sure if this is pan) in flash (as3) where you have an image bigger than the mask where it is displayed (just horizontally). It´s a very simple effect, but I'm having trouble with the tweens.
First, I tried with the tween class. But it ended up a mess with the speed of the tween (the parameter where you set the frames or seconds of the tween). The "begin" parameter is easy, is the x value of the object, no matters where is it. The "end" parameter is easy too, is 0 or the end of the image, depending if you are on the left or right button (the tween begins when you are over those buttons and end with a stopTween when you are out of them or when the tween is over). The problem I'm facing it's the "duration" parameter: I want the same speed in all the tweens, no matters where it begins. Obviously, if I put a static value, if I'm in the middle of the image, the speed reduces to half.
So I'm trying to figure out how to create an algorithm to do this. I first tried something like calculating which percent of the image is the current "x" value:
If I am at 50%, make the tween in 50 frames.
If I am at 90%, make the tween in 10 frames.
If I am at 20%, make the tween in 80 frames.
But I think there should be a way to make it easier. Maybe I'm getting it wrong, and the tween class is not what I need... I'm just trying to make an displacement effect, always at the same speed (although an ease in and out until the speed is reached would be greater).
Any idea or useful link about this? I saw a lot of tutorials but with different behaviour, mostly related with mouse position.
thanks in advance!
You want:
duration = (end - begin) / pixels_per_ms
Why not use the ease property of a tween class? Take a look at http://www.greensock.com
There is a useful example widget you can experiment with on the TweenMax page.
The betterway to Achieve this effect is to measure speed/over/distance this formula will be easier and a lot less code.Doing it this way you wouldnt need any tween library's.
var MaskCenter=100;
var speed=1/10;
var distance=boxdummy.mouseX-MaskCenter;
if(mouseX<250){
box.x-=(distance*speed);
}
if (mouseX>250)
{
box.x -= speed + accel;
}
Something like that!
If you cant work it, let me know i will make up a (fla) file for you