8 Replies Latest reply on Aug 3, 2009 12:49 PM by flCoder74

    A feature with collision detection/hittest/overlapping

    SerpentChimera Level 1

      Our project group is working on an application for which I'm supposed to do a feature and I'm pretty sure that it should be done by combining collision detection, hitTest and perhaps also overlapping methods. My problem is lack of skill and knowledge as usual.

       

      We have a designing area, a sort of canvas, in which we drag and drop elements (png-images) from an inventory and they align to grid. Currently user can drag and drop elements on each other and thus there could be 413 similar elements on each other and it looks like there was only one of them. The beforementioned feature should notice when an element is being placed on an existing one and prevents the operation. Perhaps it gives a warning popup or a red cross appears to the corner of the element (like it does when user tries to move it outside the designing area) but that's another story.

       

      I'm currently unaware if the data of elements that are dragged and dropped in the canvas area could be used when creating this detection method which is AFAIK closely related to pixel level collision detection and perhaps the hitTestPoint. The examples I've found contains stuff like BitmapData and I'm worrying if that method can be used with only bmp-images?

       

      So: could the point of hittest method be found only from the data of bmp-images and not from png-images that are not bitmaps? To put it in short the elements dragged and dropped in our canvas area should detect each other and a collision detection method should prevent them to be placed on each other.

       

      This http://www.spoono.com/flash/tutorials/tutorial.php?id=18 is probably the best example how to describe the feature I'm looking for, although it's a flash application and we're using flex as obvious. Of course the methods are actionscript, though(?) As you can see, in that example (hopefully I'm allowed to link it to this forum!) user is immediately informed when the elements he/she is moving are touching each other and that's the main principle of which I'm interested.

       

      Feel free to give hints and examples. I've searched all over the web and found only very few examples that are done with FLEX.

       

      Thanks beforehand

      Janne M.

        • 1. Re: A feature with collision detection/hittest/overlapping
          ATIF FAROOQ Level 3

          hi,

             Between what controls you want to do drag and drop.i am asking this

          becauase . Flex  includes built-in support for the drag-and-drop operation

          for certain controls such as List, Tree, and DataGrid, that automate much of

          the processing required to support drag and drop.

          • 2. Re: A feature with collision detection/hittest/overlapping
            SerpentChimera Level 1

            The drag and drop feature is working perfectly. We have also DataGrid in our application and the elements that are moved in the canvas area are listed in it. The problem lies in detecting the possible collision of elements when moved in the canvas.

            • 3. Re: A feature with collision detection/hittest/overlapping
              ATIF FAROOQ Level 3

              please clear few things . You want to do colision detection between dataGrid

              Item and the canvas

              or datagrid item and the elements in the canvas ? or if not then please

              mention.

              • 4. Re: A feature with collision detection/hittest/overlapping
                SerpentChimera Level 1

                Nothing between the datagrid and canvas. Here, I drew a very simplified example of the application.

                 

                http://chimera.ihme.org/files/collisionexample.JPG

                 

                So, as far as I know, the elements dragged and dropped in the canvas area, also known as whiteboard, should detect each other (some pixel level data of those pictures [assets]?) and the app should react like I wrote in the picture upon.

                 

                Let's forget about the DataGrid because I assume that it isn't related to the feature I'm working on and there are not items in the DataGrid until the elements from the inventory are moved in the canvas area. It works only as a list of the elements that are moved in the area. NOTICE that the elements in the inventory are endless and not solid ones. I mean that when you drag an element and move it towards the canvas another one still remains in the inventory and thus you can add 47823 elements of the same kind.

                 

                One good option is like in the example I linked in the opening post: when the element is dragged and moved on the element that's already placed in the designing area (some parts of the elements hit each other like in my pic) the application immediately informs user about the collision.

                 

                Another option is like this: http://www.flashdevils.com/flafiles/uploads/previews/1.Collisions.swf . The objects simply can not be moved on each other and they literally collide. In that method warning or error-style red mark is unnecessary.

                 

                The greatest difference to those two examples is that in our application the elements are in a sort-of separated inventory and not already in the canvas. I assume that it may turn into a bit problematic but if I manage to create a feature where a red cross (marking an error) appears every time you try to move an object so that some part of it hits another, whether in the inventory or in the canvas area, it might do the trick and meet the requirements we've determined.

                • 5. Re: A feature with collision detection/hittest/overlapping
                  ATIF FAROOQ Level 3

                  i think this example will help you in what you want to do

                   

                   

                  <?xml version="1.0"?>

                  <!-- dragdrop\DandDImage.mxml -->

                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

                   

                      <mx:Script>

                          <![CDATA[

                              //Import classes so you don't have to use full names.

                              import mx.managers.DragManager;

                              import mx.core.DragSource;

                              import mx.events.DragEvent;

                              import flash.events.MouseEvent;

                   

                              // Embed icon image.

                             

                              public var globeImage:Class;

                   

                              // The mouseMove event handler for the Image control

                              // initiates the drag-and-drop operation.

                              private function mouseMoveHandler(event:MouseEvent):void

                              {

                                  var dragInitiator:Image=Image(event.currentTarget);

                                  var ds:DragSource = new DragSource();

                                  ds.addData(dragInitiator, "img");

                   

                                  DragManager.doDrag(dragInitiator, ds, event);

                              }

                   

                              // The dragEnter event handler for the Canvas container

                              // enables dropping.

                              private function dragEnterHandler(event:DragEvent):void {

                                  if (event.dragSource.hasFormat("img"))

                                  {

                                      DragManager.acceptDragDrop(Canvas(event.currentTarget));

                                  }

                              }

                   

                              // The dragDrop event handler for the Canvas container

                              // sets the Image control's position by

                              // "dropping" it in its new location.

                              private function dragDropHandler(event:DragEvent):void {

                                  Image(event.dragInitiator).x =

                                      Canvas(event.currentTarget).mouseX;

                                  Image(event.dragInitiator).y =

                                      Canvas(event.currentTarget).mouseY;

                              }

                          ]]>

                      </mx:Script>

                   

                      <!-- The Canvas is the drag target -->

                      <mx:Canvas id="v1"

                          width="500" height="500"

                          borderStyle="solid"

                          backgroundColor="#DDDDDD"

                          dragEnter="dragEnterHandler(event);"

                          dragDrop="dragDropHandler(event);">

                   

                          <!-- The image is the drag initiator. -->

                          <mx:Image id="myimg"

                              source="@Embed(source='assets/globe.jpg')"

                              mouseMove="mouseMoveHandler(event);"/>

                      </mx:Canvas>

                  </mx:Application

                  • 6. Re: A feature with collision detection/hittest/overlapping
                    SerpentChimera Level 1

                    Unfortunately this piece of code: Embed(source='assets/globe.jpg') is not acceptable. Let's figure out how it must be implemented.

                     

                    Besides your code doesn't include anything related to collision, only to drag and drop which we've managed to work with no problems and is not the issue.

                    • 7. Re: A feature with collision detection/hittest/overlapping
                      DanaPayne Level 1

                      I'm trying to do exactly the same thing, only with having to line up the dropped items on a grid pattern in a Canvas. Let me know if you find an answer and I'll do likewise if I find one.

                       

                      What I've tried so far is using the DataGrid, as others suggested, to take advantage of some of those built-in DandD features but it has other disadvantages to overcome. For example, a dragged object can be rectangular and on a DataGrid would need to then overlap two or more rows rather than make than make the row it is dropped onto taller, so that doesn't work.

                       

                      So now I'm back to the Canvas container and having to build in some collision detection.

                      • 8. Re: A feature with collision detection/hittest/overlapping
                        flCoder74 Level 1

                        Did you ever figure this out? If so, I'm trying to do something similar and would be interested in how you did this. I need to detect the overlapp when the item is dropped, and simply change the width and y value of the overlapping items. Haven't figured out an efficient way to do this with a bunch of children in the canvas, many which will have overlaps and need to have their width and y values modified so they aren't overlapping.