5 Replies Latest reply on May 14, 2009 10:54 AM by Rothrock

    Helpful pointers for designing simple interactive game

    keithwoods

      Hi there,

       

      I'm looking to build a very simple (hopefully!) interactive game.

       

      - A number of balls are situated at the bottom of the stage.

       

      - There are several dropzones which the balls can be placed in.

       

      Slide1.JPG

       

      -Once a dropzone is occupied with a ball, it’s not possible to populate that the dropzone with another ball until the present one has been removed.

       

      -Depending on which balls are present in the dropzones, the balls animate differently.  For instance.....the red ball is placed in a dropzone.  There are currently no other dropzones populated with a ball.

       

      Slide2.JPG

       

      - The blue ball is then placed in a dropzone.

       

      - Once the ball blue is placed in the dropzone, the red balls behaviour changes in reaction to the blue ball being placed in another dropzone.  For example it changes to a darker shade of red.

       

      Slide4.JPG

       

      The yellow ball is then placed in a dropzone and the blue changes, but the red ball remains the same.  This interactions continue, with the states of the balls changing depending on which balls are occupying dropzones.

       

      Slide5.JPG

       


      Could anyone give me any pointers where to start with this project?  I'm guessing the balls need to be movieclips, likewise for the dropzones.

       

      How can I set it up so dropzones can only contain one ball, will I need to set some variable(s)?

       

      How will I chaneg the behaviour of the balls?  Will this be a case of moving to the necessary part of the ball movie clip timeline in reaction to what else is on stage?

       

      Thanks.......

        • 1. Re: Helpful pointers for designing simple interactive game
          kglad Adobe Community Professional & MVP

          yes, everything should be movieclips.  assign drag and drop behaviors to the balls.  use their _droptarget (if this is as2) to determine which dropzone to center the ball in.  assign a variable to track the last ball dropped in a drop target and assign a variable to each drop target that's been used as a drop target.

           

          you can change the color of the previously dropped ball using actionscript alone or in combination with the ball's timeline.

          1 person found this helpful
          • 2. Re: Helpful pointers for designing simple interactive game
            keithwoods Level 1

            Thanks for your reply kglad.

             

            I have alreay done some coding for this, just wanted to make sure I was going in right direction before I got too carried away.

             

            I've created 3 dropzones with 5 different coloured balls.  Here's what I've got so far...

             

            Main Timeline code...

             

            // variable keeping check of status of dropzones i.e. is there a ball in them or not

            var dropZone1Full:Boolean = false;
            var dropZone2Full:Boolean = false;
            var dropZone3Full:Boolean = false;

             

            Code for each ball...

             

            onClipEvent (load) {
            origX = this._x;
            origY = this._y;
            }
            // start draggging ball by holding down mouse button
            onClipEvent (mouseDown) {
              if (this.hitTest(_root._xmouse, _root._ymouse)) {
                this.startDrag();
              }
            }
            // on release of mouse button, decide what to do with ball
            onClipEvent (mouseUp) {
              // peform a hitTest on this ball using the x and y coordinates of the mouse
              if (this.hitTest(_root._xmouse, _root._ymouse)) {
                // disable dragging of ball
                this.stopDrag();
               
                // dropZone1 - perform hitTest on dropZone, if the x and y values match that of
                // the dropzone and the dropzone is not full
                if (_parent.dropZone1.hitTest(this._x,this._y,true) && _parent.dropZone1Full == false) {
                        // then centre the ball in the drop zone
                        this._x = _parent.dropZone1._x;
                        this._y = _parent.dropZone1._y;
                        // and disable the dropzone from holding any more balls
                        _parent.dropZone1Full = true;
                }
                // dropZone2
                else if (_parent.dropZone2.hitTest(this._x,this._y,true) && _parent.dropZone2Full == false) {
                        // then centre the ball in the drop zone
                        this._x = _parent.dropZone2._x;
                        this._y = _parent.dropZone2._y;
                        // and disable the dropzone from holding any more balls
                        _parent.dropZone2Full = true;
                }
                // dropZone3
                else if (_parent.dropZone3.hitTest(this._x,this._y,true) && _parent.dropZone3Full == false) {
                        // then centre the ball in the drop zone
                        this._x = _parent.dropZone3._x;
                        this._y = _parent.dropZone3._y;
                        // and disable the dropzone from holding any more balls
                        _parent.dropZone3Full = true;
                }
                // otherwise return it to its original position
                else {
                  this._x = origX;
                  this._y = origY;
                }
              }
            }

             

            Reply1.jpg

            Now this coding allows me to drag a ball into a dropzone and place it in the centre.  When I drag a new ball on to that particular dropzone with the ball already in it, it returns this new ball back to its position, which is fine.  However, it also returns the ball which was placed in the dropzone back to its original position as well???  That dropzone then becomes locked and I can't place any balls in it???

             

            - How do I get it so the original ball doesn't go back to its original position when a new ball is attempted to be placed in the dropzone?

            - And how do I unlock a dropzone once a ball has been removed from it?

             

             

            Cheers

            • 3. Re: Helpful pointers for designing simple interactive game
              Rothrock Level 5

              Kinda heading in the right direction, but there are some skills you should learn before you try to go much farther.

               

              First you've only got 3 targets (easier and shorter to type than dropzone) and notice how complex your code is getting with all those else statements?

               

              Also you are putting the code directly onto each clip and that means if you make a change to the code you will need to go into each clip. And as you get more balls and more targets that will become more and more cumbersome. I recommend using the dot notation and frame code which will allow you to keep all the code in one place and reuse it over and over. Here is a good blog on the subject.

               

              http://www.quip.net/blog/2006/flash/museum-pieces-on-and-onclipevent

               

              It is great that you have given your items consecutively numbered names that makes this next bit a lot easier. However I suggest you learn to start counting from zero! It is hard for people to do, but it will make things easier down the road. Either way you can start using loops to do repetative things. So for example that bit at the beginning where you say all your targets aren't full you can do this instead:

               

              for(var i=0;i<3;i++){

                var curTargetFull:Boolean=this["dropZone"+i+"Full"]

                curTargetFull=false;

              }

               

              Okay so it is three lines just like you have now, except if you have 10 targets you will only need to change i<10 and you are good to go!

               

              Also I don't think you want the mouseup event. That is registered to all clips when the mouse is released. I think you want the release event so that when you release a specific ball only it is tested. So here is what some of that code might look like.

               

              for(var i=0;i<5;i++)[

                var curBall:MovieClip=this["ball"+i];

                curBall.origX=curBall._x;

                curBall.origY=curBall._y;

                curBall.onPress=ballPress;

                curBall.onRelease=ballRelease;

              }

               

              So assuming you have 5 balls and you have given them names like ball0, ball1, etc. that will look through all of them and set each of their original x and y coordinates and tell them that their onPress and onRelease events should be handled by those function. Neat easy trick, huh?

               

              Next you need to define those functions so let's look at that.

               

              function ballPress(){

                   this.startDrag();

              }

               

              I'm not sure why you have a hit test in your mousedown. I think it is because you were getting all the balls to move or something strange, but that should be a problem here because you are using onPress not onMouseDown. The interesting bit is for the onRelease:

               

              function ballRelease(){

                   stopDrag();

                   var hitFound:Boolean=false;

                   for(var i=0;i<3;i++){

                        var curZone:MovieClip=_parent["dropZone"+i];

                        if(curZone.hitTest(this._x,this._y,true) && _parent["dropZone"+i+"Full"]== false){

                             this._x=curZone._x;

                             this._y=curZone._x;

                             _parent["dropZone"+i+"Full"]=true;

                             hitFound=true;

                             break;

                        }

                   }

                   if(!hitFound){

                        this._x=this.origX;

                        this._y=this.origY;

                   }

              }

               

              Anyways I know this doesn't directly answer your current question. But if you keep using on(event) handlers and putting the code on the clips themselves you are going to have a really hard time experimenting and making this work.

               

              Here is one more idea which I think addresses your current question.

               

              Instead of using a variable like dropZone1Full, just give each movieclip a boolean property like isOccupied and give each ball a property like isOnTarget. Or perhaps occupiedBy and onTarget. Then when you drop a ball on a target you store a reference to the target in the ball's onTarget property and a reference to the ball in the target's occupiedBy property. Then when you want go to a ball and start dragging it you check if it was on a target and if it is you tell the target that we aren't on it anymore. That way the target is free again.

               

              I think the second part of your current question is related to using mouse events and not press and release events.

              1 person found this helpful
              • 4. Re: Helpful pointers for designing simple interactive game
                keithwoods Level 1

                Thanks Rothrock.

                 

                I've taken the things you talked about on board like starting from zero and also keeping names short and simple e.g. changing dropZone to target.

                 

                So this is what I've got now for the coding (it's pretty much the same as what you put in the previous post)...

                 

                All the coding is now on Frame 1 of the main timeline...

                 

                // set all targets' status to empty
                for(var i=0;i<=3;i++){
                  var curTargetFull:Boolean=this["target"+i+"Full"]
                  curTargetFull=false;
                }

                 

                // for each ball, assign x and y coordinates on mouse press and release
                for(var i=0;i<=5;i++){
                  var curBall:MovieClip=this["ball"+i];
                  curBall.origX=curBall._x;
                  curBall.origY=curBall._y;
                  curBall.onPress=ballPress;
                  curBall.onRelease=ballRelease;
                }

                 

                // start dragging the ball

                function ballPress(){
                     this.startDrag();
                }

                 

                // stop dragging the ball

                function ballRelease(){
                     stopDrag();
                     var hitFound:Boolean=false;
                     for(var i=0;i<=3;i++){
                          var curTarget:MovieClip=_parent["target"+i];
                          if(curTarget.hitTest(this._x,this._y,true) && _parent["target"+i+"Full"] == false){
                               this._x=curTarget._x;
                               this._y=curTarget._y;
                               _parent["target"+i+"Full"]=true;
                               hitFound=true;
                                break;
                          }
                          else{
                              this._x=this.origX;
                              this._y=this.origY;
                          }
                     }
                    
                }

                 

                This allows me to pick up the balls, however, when placed over a target and the mouse is released, they don't stay in the target, they snap back to their original position?  Any thoughts?  I've attached the .swf as well.

                 

                Cheers

                • 5. Re: Helpful pointers for designing simple interactive game
                  Rothrock Level 5

                  Well there are probably a couple of reasons that is happening.

                   

                  First is that I've probably not quite got the scope for the hit test working properly. I always have trouble with that and need to fiddle around. Here is a great trick for figuring stuff like that out.

                   

                  Right before the conditional if statement add some traces to see shat is going on:

                   

                  trace("Hitting: "+curTarget.hitTest(this._x,this._y,true)

                  trace("Is it full? "+ _parent["target"+i+"Full"])

                   

                  That will let you see if those parts are working properly.

                   

                  The next thing is that you haven't quite copied what I had laid out. Notice that you have the else condition sending them back to their hit positions. That means that if it doesn't hit the first one then it will go back. You need to move that part out of the loop. Notice that break in there? That says, if we are hitting break out of the loop. We only want to send the ball back to its origin if the loop is done and we haven't found a hit. So that is why I've got that hitFound variable in there as well.

                   

                  Also here is one more unasked for trick. Notice the threes and fives? When you come back to this in three months you won't remember exactly why that loop is a 3 or a 5. Instead create variables at the top and replace the numbers as appropriate.

                   

                  var numBalls:Number=3;

                  var numTargets:Number=5;

                   

                  That will make it much easier later to remember exactly what a loop is looping over and it will make it really easy when you suddenly need 7 targets and 4 balls...or whatever.