3 Replies Latest reply on Mar 19, 2010 11:00 AM by DigitalArchitectCanada

    Drag and Drop hitTest, Dressing a Model Game.

    BigdaddyVELTRI Level 1

      I need to create a game where you drag and drop clothing onto a body that snaps into place then when the body is fully clothed you click a button to see if the clothing you selected is correct. There will be 4 different areas of clothing with 3 options for each area, one for each area is correct. Does anyone have any advice on how to achieve this? In either actionScript 2 or 3.

        • 1. Re: Drag and Drop hitTest, Dressing a Model Game.
          DigitalArchitectCanada Level 3

          Yeah just create a movieclip that has a sqare in it say 30 X 30 and place multiple instances of them wherever you need clothes to "snap" onto the body. Then as you drag clothes around on the stage you can just run a hit test against these "nodes" and snap the clothes onto their position. Just make the nodes have an alpha of 0.  This should get you started.

           

          Create a basic pants graphic, put it on the stage and give it an instance name of pants.

           

          Draw a square and turn it into a movieclip. Give it an instance name of pantsNode.

           

          On the timeline for this frame (or if you're experience enough, in your document class) put this code:

           

          var currentClothing:MovieClip;

           

          pants.addEventListener(MouseEvent.MOUSE_DOWN, beginDragClothing);
          pants.addEventListener(MouseEvent.MOUSE_UP, endDragClothing);
          pants.targetNode = pantsNode;
          pants.nodeBounds = new Rectangle(pantsNode.x, pantsNode.y, pantsNode.width, pantsNode.height);

           

          function beginDragClothing(e:MouseEvent):void
          {
              currentClothing = e.currentTarget as MovieClip;
             
              stage.addEventListener(MouseEvent.MOUSE_MOVE, dragClothing);
              currentClothing.startDrag();
          }

           

          function dragClothing(e:MouseEvent):void
          {
              if(currentClothing.hitTestObject(currentClothing.targetNode) && mouseX > currentClothing.nodeBounds.left && mouseX < currentClothing.nodeBounds.right && mouseY > currentClothing.nodeBounds.top && mouseY < currentClothing.nodeBounds.bottom){
                  //The currentTarget has hit it's acceptable node
                  currentClothing.x = currentClothing.targetNode.x;
                  currentClothing.y = currentClothing.targetNode.y;
                  currentClothing.stopDrag();
                 
                  stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragClothing);
              }
             
              e.updateAfterEvent();
          }

           

          function endDragClothing(e:MouseEvent):void
          {
              stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragClothing);
              currentClothing.stopDrag();
          }

           

          You should be able to easily adapt that to whatever you want to do. Hope that helps and if it does please kindly mark the question as answered. Thanks,

           

          Jesse

          • 2. Re: Drag and Drop hitTest, Dressing a Model Game.
            BigdaddyVELTRI Level 1

            Thanks Jesse, This works really well for snapping the movieclips into postion. If the pants are snapped into postion, Is there a way to have the movieclip "pants" go back to its default position if another pair of pants is clicked on?

            • 3. Re: Drag and Drop hitTest, Dressing a Model Game.
              DigitalArchitectCanada Level 3

              This should do it (untested though!)

               

              Not the greatest code on earth but it will get the job done.

              var currentClothing:MovieClip;



              pants.addEventListener(MouseEvent.MOUSE_DOWN, beginDragClothing);
              pants.addEventListener(MouseEvent.MOUSE_UP, endDragClothing);
              pants.targetNode = pantsNode;
              pants.nodeBounds = new Rectangle(pantsNode.x, pantsNode.y, pantsNode.width, pantsNode.height);
              pantsNode.currentClothing = undefined;


              function beginDragClothing(e:MouseEvent):void
              {
                  currentClothing = e.currentTarget as MovieClip;
                
                  stage.addEventListener(MouseEvent.MOUSE_MOVE, dragClothing);
                  currentClothing.startDrag();
              }



              function dragClothing(e:MouseEvent):void
              {
                  if(currentClothing.hitTestObject(currentClothing.targetNode) && mouseX > currentClothing.nodeBounds.left && mouseX < currentClothing.nodeBounds.right && mouseY > currentClothing.nodeBounds.top && mouseY < currentClothing.nodeBounds.bottom){
                      //The currentTarget has hit it's acceptable node
                      currentClothing.x = currentClothing.targetNode.x;
                      currentClothing.y = currentClothing.targetNode.y;
                      currentClothing.stopDrag();
                    
                     //Check and see if something has been applied to the target node already. For example pantsNode.currentClothingObject
                    if(currentTarget.targetNode.currentClothingObject != undefined){
                      //There is already clothing on this node. Send that clothing somewhere else
                      currentTarget.targetNode.currentClothingObject.x = 0;
                      currentTarget.targetNode.currentClothingObject.y = 0;
                    }
                   
                    currentTarget.targetNode.currentClothingObject = currentClothing;
                    stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragClothing);
                 
                
                  e.updateAfterEvent();
              }



              function endDragClothing(e:MouseEvent):void
              {
                  stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragClothing);
                  currentClothing.stopDrag();
              }