Home‎ > ‎

Moving Objects (Grab, mouseMove, Intersect)

Drag and Drop Games


A. Moving Objects (Grab, mouseMove, Intersect commands) 
The next step to creating your game or app is to enable the objects to move. You can have the player of your game do that by "Drag and Drop" motions using the mouse or using the keys on a keyboard (the cursor keys). We are going to do both.

Examples:

            

  ====>  


                   



1. Moving Objects with the Grab command
    The "Grab" command grabs the object that the cursor is over when you hold the mouse button down.         e.g.   
                 grab <object>

        examples:

                grab button "box"
                grab image "spider"
                grab graphic "circle"

        e.g.
                 on mouseDown
                      grab button "ball"
                 end mouseDown

        a shortcut:
  
                grab me     -  this is commonly used when you have this code on the object

                    To use it, add the following code to the script of the object:

                         on mouseDown
                               grab me
                          end mouseDown


2. Moving Objects with the mouseMove command (another way)
You can also move an object using the mouseMove message and the mouseLoc of the cursor. These are automatic LiveCode functions

    To use it, add the following code to the script of the object:

        on mouseMove

           if the mouse is down then  

                set  the loc of me to  the mouseLoc

           end if

      end mouseMove



3. Looking for matches using the intersect command

    To see if it was dropped on the correct answer, we use the "Intersect" command. It checks if 2 objects intersect.
     It looks like this:

            intersect ( <object 1> , <object 2> ) 
        or
             intersect ( <object 1> , <object 2> , threshold )    -    where threshold is a number from 1 to 255 or "pixels", etc. 
                                                                              See the Dictionary in LiveCode to see a more detailed explanation and examples.
    e.g. 
            intersect (button "box" , button "red box")
            intersect (button "box" , image "spider" )
            intersect (button "box" , button "red" , 255 )

Most of the time we use the intersect command in an "if" statement because if it does intersect, then we want to do something. In our case, if the button "box" (which is red) intersects with the button "red" (our red box) then we want to pop up a dialog box that says "Good Job", then move it back to its original position

    To use it, add the following code to the script of the object:

           on mouseUp
                   if intersect(button "box" , button "Red" ) then
                          answer "Correct, Good Job"
                    end if
            end mouseUp


B. Sample - Moving the objects with the mouse - "Drag and Drop"
Examples of these type games are usually educational games where you match the objects. Here are some Samples
 
Let's start by creating a simple game where you are to match colors. We create 3 boxes; red, yellow and orange. We have a number of choices in creating those boxes. They can be graphic objects, images or buttons. Usually, it is best to use the buttons because you can the skin those buttons with almost any picture giving you a wide range of choices. Then instead of just being colored boxes, you could skin them with fruit (apples, bananas and oranges), people, words, letters or other images.

    1. Our First Educational Game - Match The Colors

    A.  Dragging 
        Let's start by making a simple game where the user has to drag a colored box to its matching color using the mouse.

First we start a new MainStack and drag 4 buttons over to it. Three buttons will be named "Red", "Green", and "Blue" and fill them with those colors. The 4th button will be named "box" and be colored red. Code will be added to enable it to be moved (drag and dropped). The screen should look like this:

                                 

            The user will try to drag the box to its matching color using the mouse.  The code to be added to drag the box (button "box") is:

                on mouseDown
                       grab me
                end mouseDown

   B.  and Dropping
        It only grabs the object as long as the mouse button is held down. Then when the user takes the finger off the mouse, the object is dropped.

When the mouse button is released (mouseUp) we want to have the code will check where it was dropped. If it is over the "Red" box, the user will see a "Correct" message. If it is dropped anywhere else, it will be returned to its starting position (197, 160  - We used the Property Inspector to see what those numbers were. ("Property Inspector", "Size and Position"), Under Location - we see the coordinates 197 and 160



        Here us the rest of the code we need to add to our button "box":

             on mouseUp
                   if intersect(button "Box" , button "Red", "pixels" ) then
                          answer "Correct, Good Job"
                    end if
                    move button "Box" to  197,160            
              end mouseUp
       
        If we want to leave the button there, and not move it back, we can do it this way

              on mouseUp
                   if intersect(button "Box" , button "Red", "pixels" ) then
                          answer "Correct, Good Job"
                   else
                           move button "Box" to  197,160            
                   end if
              end mouseUp

        We can also use the "set" command to change the location of the button. It is faster than the "move" command

             on mouseUp
                   if intersect(button "Box" , button "Red", "pixels" ) then
                          answer "Correct, Good Job"
                   else
                          set the loc of button "box" to 197,160
                   end if
              end mouseUp

        Here is what you should see:

         
                         

        Click here to see pictures of doing the above: - Creating the buttons and adding the code

        That's it. You can add more special effects, sounds (cheering, booing, etc), or do other things when the user gets it right (change the background, go to another card/another level, change colors, etc). Use your imagination. 

        You can look ahead and read more about the Intersect Command here

What do you do when the "Player" collides with another object?
  • You can send it back to the beginning to start over:
                if intersect( <object1> , <object2> ) then
                       set the loc of <object1>  to 50, 50
                end if
 
                (where you substitute the type and name of the objects that are involved)

            for example:

             if intersect( button "myBox" , image "spider" ) then
                 set the loc of button "myBox" to 50,50                      // this moves it instantly
             end if

            or the same code in another way...

             if intersect( button "myBox" , image "spider" ) then
                 move button "myBox" to 50,50                                // this moves it slower
             end if

                note: I just put 50,50 as an example. 

                    To find the location for the start of your object:
                        click on the "Browse" tool and move your player (object1) to where you want it to start.
                        open up its PI (Property Inspector), click on "Size and Position', and see what its location is
                        use those numbers in the commands above. In the example below, the location is 197,160

                                 

  • You can send it back to the beginning to start over slowly with effects:
            This will make the background of the card (screen) yellow while it slowly (in 4 secs) moves the box back to the start. It will also show a message that says "Back to the Beginning You Go" while it is moving.
Then when it is done moving, it will set the background back to white and take away the message.

 if intersect (button "box" , button "red" ) then
      set the backgroundcolor of the card "mycard" to "yellow"
      show field "back_you_go" 
      move the button "box" to 50,50 in 4 secs
      hide field "back_you_go" 
      set the backgroundcolor of the card "mycard" to "white"
 end if
  • You can go to another card. When your player matches it successfully, you can automatically go to another card (the next level). 

                     if intersect( button "myBox" , button "red" ) then
                         go to card "card2"
                     end if    

  • You can play some sounds (cheers, boos, or other sound effects. When your player touches that object, you can play a sound track (it has to be a "wav" file. e.g. "cheers.wav").  Add the file by clicking - "File", "Import as control", "Audio file"  

    •                 if intersect( button "myBox" , button "end" ) then
                         play "cheers.wav"
                    end if    

    You can do many more things to make your game interesting, fun, challenging or more difficult.  There is no limit to your imagination Have objects pop-up at random places that the player has to avoid. Have objects walking around or chasing the player. Be creative. Get ideas as you look at other pages on this website

Comments