Detect overlap of point and Shape

[Dinoman44]

Hey guys,

I'm making a simple game where circles are created and you have to click on them to get rid of them. I've got the code for creating them and that works ok, and I add them all to an array when they are created.

However, I'm not sure how to detect whether the point where you click is on a shape or not. Here's the code, I have a "??????" where I don't know how to do it

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

package 

{

          import flash.display.MovieClip;

          import flash.display.Shape;

          import flash.events.Event;

          import flash.events.MouseEvent;

          import fl.transitions.Tween;

          import fl.transitions.easing.*;

          import fl.transitions.TweenEvent;

          import flash.utils.Timer;

          import flash.events.TimerEvent;

          import flash.geom.Point;

          import flash.display.DisplayObject;

               public class Main extends MovieClip

               {

                              var coolDown:Timer;

                              var circleArray:Array;

                         public function Main()

                         {

                                        stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseClick);

                                        coolDown = new Timer (1000, 1);

                                        coolDown.addEventListener(TimerEvent.TIMER_COMPLETE, timeDone);

                                        coolDown.start();

                                        circleArray = new Array();

                         }

                        function timeDone (e:TimerEvent):void

                         {

                                        var theX:Number = (Math.round((Math.random()*450)+50));

                                        var theY:Number = (Math.round((Math.random()*450)+50));

                                        var circle:Shape = new Shape();

                                        circle.graphics.beginFill((Math.random() * 0xFFFFFF), 1.0);

                                        circle.graphics.drawCircle(0, 0, ((Math.round(Math.random() * 40)) + 20));

                                        circle.graphics.endFill();

                                        circle.x = theX;

                                        circle.y = theY;

                                        stage.addChild(circle);

                                        circleArray.push(circle);

                                        var xTween:Tween = new Tween(circle, "scaleX", Bounce.easeOut, 0, 1, 0.5, true);

                                        var yTween:Tween = new Tween(circle, "scaleY", Bounce.easeOut, 0, 1, 0.5, true);

                                        coolDown.addEventListener(TimerEvent.TIMER_COMPLETE, timeDone);

                                        coolDown.start();

                         }

                        function mouseClick (event:MouseEvent):void

                         {

            var themouseX:Number = new Number(mouseX);

                                        var themouseY:Number = new Number(mouseY);

                                        var mousePoint:Point = new Point(themouseX, themouseY);

            var i = new int();

                                        for each (var circle in circleArray)

                                   {

            ???????

                                   }

    }

          }

}

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

All that code seems to be working so far, I just don't know how to detect whether you are clicking on one of the circles in the array or not.

[Ned Murphy]

One way to approach this would be to add each circle to a MovieClip that you also create dynamically, and then add a MouseEvent.CLICK listener to the movieclip.  That will give you a definitive way of determining that one has been clicked and the event handlker function can take care of the processing to get rid of it.

[Chipleh]

Here's a few amendments to your code that might get you closer to where you want to be:

public class Main extends MovieClip

               {

                              var coolDown:Timer;

                              var circleArray:Array;

                              //Declare var i for use in your  timeDone function

                              var i:int;

//Increment i everytime the function executes

i = i + 1;

//Create a unique name for each circle

circle.name = "circle" + i;

//Push the circle name for later referencing,instead of the object

circleArray.push(circle.name);

var j:int;

  for each (var circle in circleArray)

  {

          j++;

          //Reference the circles that already exist on stage

          var circleToClick:DisplayObject = MovieClip(root).getChildByName("circle" + j);

          //if the circle exists

          if(circleToClick != null)

          {

               //Do this

               trace(circleToClick + " was just clicked");

          }

Haven't tested any of this, but in my mind it works.

Hope that helps,

~Chipleh       

[Dinoman44]

@Ned Murphy

If I add them all to a MovieClip, how can I identify which child in particular is clicked on. At the moment I can can only get all of the circles do disappear when I click on any of the circles, since the container collectively refers to all the circles.

@Chipleh

I tried the code, firstly for some reason i doesn't increase each time the timer function runs, so if I trace the array I get this :

circle1

circle1, circle1

circle1, circle1, circle

circle1, circle1, circle1, circle1

etc.

And secondly nothing happens when I click on the circles. Not getting error messages, just nothing happens

[Dinoman44]

I tried this :

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

package 

{

          import flash.display.MovieClip;

          import flash.display.Shape;

          import flash.events.Event;

          import flash.events.MouseEvent;

          import fl.transitions.Tween;

          import fl.transitions.easing.*;

          import fl.transitions.TweenEvent;

          import flash.utils.Timer;

          import flash.events.TimerEvent;

          import flash.geom.Point;

          import flash.display.DisplayObject;

          public class Main extends MovieClip

          {

                    var circleReady:Boolean = new Boolean;

                    var coolDown:Timer;

                    var circleArray:Array;

                    var circleContainer:MovieClip;

                    var i:int;

                    public function Main()

                    {

                              circleReady = true;

                              coolDown = new Timer (1000, 1);

                              coolDown.addEventListener(TimerEvent.TIMER_COMPLETE, timeDone);

                              coolDown.start();

                              circleArray = new Array();

                              i = new int(0);

                              stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseClick);

                    }

                    function timeDone (e:TimerEvent):void

                    {

                              var theX:Number = (Math.round((Math.random()*450)+50));

                              var theY:Number = (Math.round((Math.random()*450)+50));

                              var circle:Shape = new Shape();

                              circle.graphics.beginFill((Math.random() * 0xFFFFFF), 1.0);

                              circle.graphics.drawCircle(0, 0, ((Math.round(Math.random() * 40)) + 20));

                              circle.graphics.endFill();

                              circle.x = theX;

                              circle.y = theY;

                              i = i + 1;

                              circle.name = "circle" + i;

                              circleArray.push(circle.name);

                              stage.addChild(circle);

                              var xTween:Tween = new Tween(circle, "scaleX", Bounce.easeOut, 0, 1, 0.5, true);

                              var yTween:Tween = new Tween(circle, "scaleY", Bounce.easeOut, 0, 1, 0.5, true);

                              coolDown.addEventListener(TimerEvent.TIMER_COMPLETE, timeDone);

                              coolDown.start();

                    }

                    function mouseClick (event:MouseEvent):void

                    {

                              var j:int;

                              for each (var circle in circleArray)

                              {

                                        j++

                                        var circleToClick:DisplayObject = MovieClip(root).getChildByName("circle" + j);

                                        if(circleToClick != null)

                                        {

                                                  trace(circleToClick + " was just clicked");

                                        }

                              }

                    }

          }

}

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

I get the circles into the array and they are all properly named now (i.e. circle1, circle2, circle3, etc.) But I don't see how this line :

  var circleToClick:DisplayObject = MovieClip(root).getChildByName("circle" + j);

ACTUALLY refers to the circle that's being clicked? How do I refer to the specific circle that's being clicked on?

[Ned Murphy · Accepted solution]

I did not mean to add them all to one movieclipI meant to add each to its own movieclip.  Then you can have the eventlistener assigned to each movieclip and when you click one, the identification is readily determinable.

[Dinoman44]

Oh woops, I gotcha. I got it working now, thanks guys!

[Ned Murphy]

You're welcome

[ASWC]

function mouseClick(event:MouseEvent):void 
{  
var mousePoint:Point = new Point(mouseX, mouseY);  
for (var i:int = 0; i < circleArray.length; i++)   
{
var shape:Shape = circleArray as Shape;
var rect:Rectangle = shape.getBounds(this)
if (rect.containsPoint(mousePoint))
{
//potential hit
var middle:Point = new Point(shape.x, shape.y)
if (Point.distance(middle, mousePoint) < shape.width / 2)
{
//hit confirmed
//that circle is clicked
//do whatever you want here
shape.visible = false;
}
}   
} 
}