Hello again. We made more features to out drag and drop word game. At the moment we're trying to create a method which displays a 'correct' message if the word images are placed into the right box.

Code:

Sprite[] sprites;      

Box[] boxes;

int bx=500;
int by=600;

int s_size=150;
boolean spritesDragging;

int boxX=630;
int boxY=100;

PImage b;
PImage CorrectImg;

void setup()
{
  size(798, 760);
  
  boxes= new Box[7];
  
  sprites = new Sprite[7];
  
  
  for(int i = 0; i < sprites.length; i++)
  {
    sprites[i] = new Sprite(loadImage(i + ".png"),s_size,random(bx), random(by));
    
  }
  
  for(int i =0; i< boxes.length; i++)
  {
    boxY+=80;
    boxes[i] = new Box(boxX, boxY, 130, 25);
  }
}


void draw()
{
    
    b = loadImage("EiffelTower.jpg");
    CorrectImg = loadImage("Correct.jpg");
    background(b);
    boolean bDragging = false;
    
    //rectangle x, y, w , h
    //rect(boxX, boxY, 140, 30);
    
    
      for (int i=0; i <boxes.length; i++)
      {
        boxes[i].Draw();
      }
    
    for (int i = 0; i < sprites.length; i++)
    {
                
		// Check if the user tries to drag it
		sprites[i].Update(spritesDragging);
		// Ah, this one is indeed dragged!
		if (sprites[i].IsDragged())
		{
			// We will remember a dragging is being done
			bDragging = true;
			// And move it to mouse position
			sprites[i].Move();
		}
		// In all case, we redraw the sprite
		
                sprites[i].Draw();
                
                for(int j =0; j < boxes.length; j++)
                {
                 if(sprites[i].x>boxes[j].x)
                  {
                         image(CorrectImg, 78, 490);
                   }
                }
    }
     spritesDragging = bDragging;
    
}




class Sprite
{
  float x;
  float y;
  PImage img;
  float SpriteSize;
  int i;
  private boolean m_bIsHovered, m_bDragged;
  private float m_clickDX, m_clickDY;
  

  Sprite(PImage img, int SpriteSize,float x,float y)
  {
    this.x = x;
    this.y = y;
    this.img = img;
    
    this.SpriteSize=SpriteSize;
    
  }
  
  
  void Update(boolean bAlreadyDragging)
  {
      // Check if mouse is over the sprite
	m_bIsHovered = mouseX > x && mouseX < x + SpriteSize && mouseY > y && mouseY < y + SpriteSize/10;

		if (!bAlreadyDragging && mousePressed && mouseButton == LEFT && m_bIsHovered)
		{
         // We record the state
			m_bDragged = true;
         
			m_clickDX = mouseX - x;
			m_clickDY = mouseY - y;
		}
      // If mouse isn't pressed
		if (!mousePressed)
		{
         // Any possible dragging is stopped
			m_bDragged = false;
		}

                //method for locking image in place
                for(int i =0; i< boxes.length; i++)  
                {
                //method for locking image in place
                  if(x> boxes[i].x && x< (boxes[i].x+boxes[i].w-22) &&y <(boxes[i].y+boxes[i].h-20) && y >boxes[i].y)
                  {
                  m_bDragged = false;
                  
	          }
              }
                  
   }
   
   

	boolean IsDragged()
	{
		return m_bDragged;
	}


    void Move()
    {
		if (m_bDragged)
		{
			x = mouseX - m_clickDX;
			y = mouseY - m_clickDY;
		}
    }
    
    void Draw()
    {
      image(img, x, y);
      
    }
    
  
  
}


class Box
{
  float x;
  float y;
  
  float h;
  float w;
  
  Box(float x,float y, float h, float w)
  {
    this.x = x;
    this.y = y;
    this.h= h;
    this.w= w;
  }
  
   void Draw()
    {
      rect(x,y, h, w);
      
    }
}
 

We added a new method which displays the 'correct' image, but at the moment it displays it when any word image is placed into any place box.

Code:

 for (int i = 0; i < sprites.length; i++)
    {
                
		// Check if the user tries to drag it
		sprites[i].Update(spritesDragging);
		// Ah, this one is indeed dragged!
		if (sprites[i].IsDragged())
		{
			// We will remember a dragging is being done
			bDragging = true;
			// And move it to mouse position
			sprites[i].Move();
		}
		// In all case, we redraw the sprite
		
                sprites[i].Draw();
                
                for(int j =0; j < boxes.length; j++)
                {
                 if(sprites[i].x>boxes[j].x)
                  {
                         image(CorrectImg, 78, 490);
                   }
                }
    }
 

What we want is something like word image number one is equal to box number one, return correct. Which works fine when hard coded like this:
Code:

for(int j =0; j < boxes.length; j++)
                {
                 if(sprites[1].x>boxes[1].x)
                  {
                         image(CorrectImg, 78, 490);
                   }
                }
 

Any suggestions? Thanks again in advance.

You could add properties to your sprite class to store the 'correct target' area - either by passing a reference to a target object, or simply storing appropriate values (e.g. x,y, width, height).  You could then check against this on mouseRelease to determine if the Sprite has been placed correctly.

It was actually your previous post that got me to dig out my old ActionScript drag and drop code and start converting it to Processing.  I posted a demo just the other day.  Not finished yet and really just an exercise to improve my OOP coding, but you might find some of it useful...

The answer is exactly what I said before...

It looks to me like you're checking against every target.  As I said: for each draggable object you need to store the correct target as a property.  You'll see in my BaseDragger class that I have a 'target' property, which is an array of type BaseTarget.  When I instantiate a dragger object a target, or an array of targets, must be passed as parameters to the class constructor:

draggers[i] = new CircleDragger(150 + random(0,width-200), 50 + random(0,height-100), diameter, targets);

My dragger object then contains an array of the target objects it can be placed on.  So when I want to check if it is placed correctly I iterate through this array - not the global array of targets (or boxes in your case) that you're using:

Code:

void mouseIsReleased() {
    for(int i=0; i<target.length; i++) {
      if(target[i].checkTarget(x,y,this)) {
        targetID = i;
        onTarget = true;
      }
    }
  } 

You'll notice that I'm actually calling a method on the target - that way my dragger doesn't have to know what kind of target it's dealing with (circle,rect etc.), but you could just as easily reference your box properties.  So assuming your Sprite contains an array of targets:

Code:

  void mouseIsReleased() {
    for(int i=0; i<target.length; i++) {
        if(x > target[i].x && x < target[i].x+target[i].w){
            if(y > target[i].y && y < target[i].y+target[i].h){
                onTarget = true;   
            }
        }

    }
  } 

You should be calling that as a method of your sprite class so you can reference x and y directly to get the current sprite's location...  Which looking at your code is possibly the other problem you're having.

blindfish wrote on Nov 7^th, 2009, 2:27am:


That more or less answers your question; though I think you will need to make changes in your Sprite class, not your Box class.

OK - some progress...

One piece of advice - tidy up your code as you go along (e.g. make indentation consistent) - it makes it a lot easier to work with and for others to read.

You've added code to the Update method that will stop a Sprite from being dragged if it is placed over any box and from there you call a checkBox method:

Code:

for(int i =0; i< boxes.length; i++){
//method for locking image in place
  if(x> boxes[i].x && x< (boxes[i].x+boxes[i].w-22) &&y <(boxes[i].y+boxes[i].h-20) && y >boxes[i].y) {
    m_bDragged = false;                
    if(boxes[i].checkBox(x,y,this)) {
      boxID = i;
    }
  } 
} 

The checkBox method currently only ever returns false.  You now need to figure out how to return true if it's in the right box...

Though TBH I wouldn't do it that way round:  You've already got a reference to the boxes: boxes[i].  If your Sprite class stored a reference to the 'correct' box you should just be able to check for equality between the two without calling a method on the box to determine if it's the right one.

Note that in my example the box/target method is used to determine if the sprite/dragger is within the bounds of the box; which isn't quite the same thing as determining if it is in the right box...

Thanks very much. That's worked out grand.

OK...  First off: I politely suggested you clean up your code to make it more readable.  That didn't seem to get through, so let's put it this way: if you can't be bothered to make the effort to clean it up, then don't expect people to offer you help...  If nothing else it's good practice and will make it easier for you to work with.

Looking at your code is giving me headaches  

See http://en.wikipedia.org/wiki/Indent_style if you're not sure what I'm talking about.

Second - look at the reference for rect() then tell me what's wrong with your Box's Draw method.  If you fix that you should be able to figure out what the problem is...

Code:

Sprite[] sprites;      

Box[] boxes;

int bx=500;
int by=600;

int s_size=150;
boolean spritesDragging;

int boxX=630;
int boxY=100;

PImage b;
PImage CorrectImg;










void setup()
{
      size(798, 760);
  
     boxes= new Box[7];
  
     sprites = new Sprite[7];
  

  
    for(int i = 0; i < sprites.length; i++)
    {

      sprites[i] = new Sprite(loadImage(i + ".png"),s_size,random(bx),    random(by), i);
    

    }


  
    for(int i =0; i< boxes.length; i++)
   {

       boxY+=80;
       boxes[i] = new Box(boxX, boxY, 130, 25);

   }
 }







void draw()
{
    

      b = loadImage("EiffelTower.jpg");
      CorrectImg = loadImage("Correct.jpg");
     background(b);

      boolean bDragging = false;
    
    //rectangle x, y, w , h
    //rect(boxX, boxY, 140, 30);
    
    
      for (int i=0; i <boxes.length; i++)
      {

          boxes[i].Draw();

      }
    

    for (int i = 0; i < sprites.length; i++)
    {
                
		// Check if the user tries to drag it
		 sprites[i].Update(spritesDragging);
		


	   	  if (sprites[i].IsDragged())
		  {

			  // We will remember a dragging is being done
			  bDragging = true;
			  // And move it to mouse position
			  sprites[i].Move();

		  }

		  // In all case, we redraw the sprite
		

                  sprites[i].Draw();
                

       }

       
       spritesDragging = bDragging;
    

    }








 class Sprite
 {
  
  
     float x;
     float y;
     PImage img;
     float SpriteSize;
     int i;
     private boolean m_bIsHovered, m_bDragged;
     private float m_clickDX, m_clickDY;
  
  
    int boxID;
  



   Sprite(PImage img, int SpriteSize,float x,float y, int boxID)
   {
    
    
         this.x = x;
         this.y = y;
         this.img = img;
         this.boxID = boxID;
          this.SpriteSize=SpriteSize;
     
    
  }
  
  

    void Update(boolean bAlreadyDragging)
    {
    
    
        // Check if mouse is over the sprite
     m_bIsHovered = mouseX > x && mouseX < x + SpriteSize  &&   mouseY > y && mouseY < y + SpriteSize/10;


		if (!bAlreadyDragging  &&   mousePressed  &&    mouseButton    ==   LEFT && m_bIsHovered)
		{
                     // We record the state
			 m_bDragged = true;
                      
			 m_clickDX = mouseX - x;
			 m_clickDY = mouseY - y;
		}




        // If mouse isn't pressed
		 if (!mousePressed)
		{
                 // Any possible dragging is stopped
                   m_bDragged = false;  
                 }
                 
                 


                //method for locking image in place
                for(int i =0; i< boxes.length; i++)
                {
                  
               //method for locking image in place
                 if(x> boxes[i].x && x< (boxes[i].x+boxes[i].w-22) &&y   <(boxes[i].y+boxes[i].h-20) && y >boxes[i].y) 
                {


                  
                     m_bDragged = false;  
                
                     if(i == boxID )
                     {
	  
                      
                           image(CorrectImg, 78, 590);
                      

                     }
                  } 
               } 
  }     
        
  
  
   


	boolean IsDragged()
	{
		return m_bDragged;
	}




    void Move()
    {

		 if (m_bDragged)
		 {
			  x = mouseX - m_clickDX;
		 	  y = mouseY - m_clickDY;
		 }

    }
    
    
    void Draw()
    {
             image(img, x, y);
      
    }
    
  
  
}



    class Box
    {
  
          float x;
          float y;
  

          float h;
          float w;

  
       Box(float x,float y, float h, float w)
      {

               this.x = x;
               this.y = y;
               this.h= h;
              this.w= w;
  }
  

    boolean checkBox(float spriteX, float spriteY, Sprite theSprite) 
    {

         return false;
    
    }
  
 
  
     void Draw()
     {
                 rect(x,y, h, w);
      
      }
 }
 

How does that look now?



The rect() reference is made in the Box.Draw method for the array of boxes. It is called in the draw method.

Code:

      for (int i=0; i <boxes.length; i++)
      {

        boxes[i].Draw();

      }