12 Replies Latest reply on Sep 12, 2009 6:38 PM by Shad0wdrag0n

    ending a puzzle game

    Shad0wdrag0n Level 1

      Is there an easy way to make it so a flash movie recognises when several dragable objects have been put into their correct places on the stage? Like a jigsaw puzzle game for example. How can you make it so the movie recognises when all the pieces have been placed into their correct places and then moves onto the next puzzle (or a congratulations message or something)?

        • 1. Re: ending a puzzle game
          kglad Adobe Community Professional & MVP

          each piece that's moved to the correct spot could have a property assigned to true, say correctSpot.  when each piece is dropped in the correct spot, assign its property and then loop through all the pieces to see if any have a false (or undefined) property.

          • 2. Re: ending a puzzle game
            Shad0wdrag0n Level 1

            Sorry, but I'm still fairly new to Flash. I don't suppose you have a link to a tutorial or something that explains how to do this?

            • 3. Re: ending a puzzle game
              kglad Adobe Community Professional & MVP

              can you determine when a piece is dropped onto the correct location and when a piece is dropped onto an incorrect location?

              • 4. Re: ending a puzzle game
                Shad0wdrag0n Level 1

                Right now I'm just using something that looks like this:

                 

                if(object._x>260 && object._x<275 && object._y>50 && object._y<65){
                setProperty("object", _x, "267.9");
                setProperty("object", _y, "57");

                }

                 

                I'm not sure if that's the best way to do it, but it seems to work well enough.

                • 5. Re: ending a puzzle game
                  Rothrock Level 5

                  Oh my! You are using some really old style code there. I would recommend that you update to the easier styles. Unless you are publishing to Flash 5 or earlier I would use the following:

                   

                  someObject._x=268

                  someObject._y=57

                   

                  To my eye that is a lot easier to read. Where are you finding these.

                   

                  There are so many ways to structure and organize something like this and it really all depends upon your goals and design decisions about how it should all work.

                   

                  So as they place these clips do they get immediate feedback as to whether it is in the right spot or not? Or is it just silently evaluated?

                   

                  It looks like you want the piece to snap into place if it is correct, but what if it isn't correct?

                   

                  Are they snapping to some visual guide or is it free form?

                   

                  Your approach seems overly complex and likely to be a nightmare to update and modify -- y'know when a client or somebody says, "That looks great, but I'd liket to move it 10 pixels to the right."

                   

                  This seems to me like a special case of "drag and drop" and generally I approach that through setting up an array of drags and their drops and then using hit testing to see which one I'm touching. Often I give immediate feedback so the user knows that they are on the right track, but sometimes there is a value in having to complete all the steps and then saying, "Okay I'm ready to submit my answer now."

                   

                  They all have slightly different ways of approaching them and it is hard to give exact advice without knowing all the design objectives for the interaction.

                  • 6. Re: ending a puzzle game
                    Shad0wdrag0n Level 1

                    Hrm, I think the tutorials I found may be really, really, old or something. Makes it hard to learn Flash when it's so difficult to tell when a tutorial is really out of date, only works for AS3, or is just the wrong way to do something.

                     

                    I basically want to learn the various components of a drag and drop game, like a jigsaw puzzle, or a "put the objects in the corrent places" puzzle. Things like randomly scattering the pieces, dragging and dropping objects, having objects snap into their correct places, having the movie recognize when all the objects are in their correct positions, etc. I'm not ready to get into the really heavy coding, so I'm looking for something relativelly simple. I also want to be able to use the components in other games, so I'd rather stay away from things that will only work in, for example, jigsaw puzzle games and nothing else. Any suggestions?

                    • 7. Re: ending a puzzle game
                      Rothrock Level 5

                      I'm not trying to discourage you, so please don't feel that it is hopeless. I'm trying to get you set off in better direction.

                       

                      So if you see these things in the an online tutorial, run away (I've put the scary part in bold, the other parts might change):

                       

                      tellTarget("/box/cards")

                      setProperty()

                      on(someEvent)

                      mc2/:car

                      Select the clip and apply the code directly to the instance. (or words to that effect.)

                       

                      These are tutorials that have probably been around since Flash 4 or 5 (something like 2000). Many of these tutorials might have some really cool looks or great ideas, but I don't think there is anything in them that can't be done using newer techniques. And the newer ways are generally easier to read and cleaner to follow. Additionally few here have ever even seen some of these types of codes and the ability of the community to help you when things go wrong is greatly diminished.

                       

                      As for AS3 and AS2, if you don't have much knowledge of either one and if you don't have a very specific need for AS2, then I would recommend starting with AS3 since it is faster, more consistent, and is the future of coding for Flash. Either way here is how you can distinguish tutorials for one or the other:

                       

                      AS2 will have

                      properties with underscores (_alpha,_x, etc.)

                      some events are handled by onPress, onRelease, etc. (this is what you will most often see)

                      other events are handled by someObject.addListener(object)

                      yet others are handled by someObject.addEventListener(event,handler)

                       

                      AS3 will have

                      properties without underscores (alpha, x, etc.)

                      all events will be handled with someObject.addEventListener(event,handler)

                       

                      Looking at any sample code for those two differences should be pretty easy to spot.

                       

                      As for the drag and drop games (as with any type of programming in my experience) making a specific example is much easier. Making something more general that can easily be changed into other variations is more difficult. So the more flexible you want your interactions to be the further from simple you will need to go. Sorry, but that is pretty much how it is.

                       

                      Fortunately drag and drops aren't so terribly difficult.

                       

                      Here is sort of my outline:

                       

                      An array of the drags and their corresponding drops

                      An array of the drops and their corresponding drags

                      An array of the various feedbacks that are needed (correct-more to do, correct-all done, incorrect, wild craziness, etc.)

                       

                      Some code that initializes everything and sets up stuff

                      Code that handles the dragging (recognizing if we are over a drag, etc.)

                      Code that handles when an item has been dropped (evaluating etc.)

                       

                      Inside those bits of code there can be many cases, so when something is dropped it is either on or off a drop target. So then code to handle those choices. If it is on a target it could either be the correct or the incorrect target and code to handle those choices. If it is on the correct target are there more to do or are we all done... and so on. This type of structure is common to all drag and drop type activities.

                       

                      (BTW, in case you haven't guessed, I've been doing a lot of drag and drop type activities since about 2001!)

                       

                      There are slight variations in the general framework. There are activities with immediate feedback (where as each piece is placed the user knows if it is correct or not) and there are delayed feedback types (where the user must put it together and then click a "submit" or "check" button). In either case a mistake can either set you back to the beginning or the correct ones can stay where they are -- depends upon how "mean" you want to be.

                       

                      There are also types where you have one-to-one (matching), one-to-many (labeling), many-to-one (sorting), and maybe many-to-many (I haven't really wrapped my brain around this one yet). Of course there may also be "distracters" either in the drags or the drops. Distracters are elements that aren't part of the solution and are just there to make the choices more difficult. They can be either drags or drops (perhaps both, but not at the same time?)

                       

                      And you can combine them so you can have one to one with immediate feedback or many to one with delayed feedback. I'm not sure if all the combinations make sense, but most of them do.

                       

                      So now that I've probably completely scared you and made it sound like an awful mess....

                       

                      The hardest part here is seeing the forest for the trees. What I mean by that is taking the steps back to see the commonalities and finding a solution that addresses the general problem. So for your original question of how to know when you have ended, I see two general solutions:

                       

                      Either check each piece as it is placed or evaluate all the pieces at once.

                       

                      Step back...

                       

                      How do I know which pieces there are? Make an array...

                       

                      Step back....

                       

                      What needs to go into that array? The names of the pieces and the thing they should touch.

                       

                      And so on. I've typed way too much, so at this point I'll toss it back to you to see if anything resonates and what questions you have. Or is any of this helpful?

                      • 8. Re: ending a puzzle game
                        Shad0wdrag0n Level 1

                        I only have Flash 8 so for now I'm stuck with learning AS2. OK, I guess for now I'd like to finish learning how to make a jigsaw puzzle. Hopefully that'll make it easier to learn how to make other drag and drop games (or maybe there's something easier I should start with?). I've been trying to learn how to use _droptarget to have pieces snap together (I have a thread here called "snapping objects together" and I'm still having problems getting it to work). Can that be used to determine when all the pieces have been snapped into their correct positions? Or will the arrays be used instead of _droptarget? Sorry, I'm just not very familiar with arrays yet (they're on the list of things I want to learn more about). I basically want to learn how to make something like http://www.flashpuzzlezone.com/jigsaw/people/sports/earnhardtjr/ where the pieces snap together and can then be dragged around in groups, and where a finishing message appears once all the pieces are in the correct positions.

                        • 9. Re: ending a puzzle game
                          Rothrock Level 5

                          Okay -- nothing wrong with AS2. All the code I'm going to give you goes on a frame in the main timeline. If you have nested things inside nested things then there will be scope issues that I can't guess at right now. I'm only showing you how to do the easiest version. It can get more complex.

                           

                          I've never made something exactly like that so I can't tell you just off the bat how to do it.

                           

                          There are a couple things I don't like about example. Notice how if you drop a piece close to where it is supposed to go it stays where it is and all the other pieces jump to snap to it. That is kind of awkward.

                           

                          Also you can assemble the entire thing off of the spaces where it came from. I assembled the whole thing on the "empty" red space on the right side. I like that pieces can be snapped together where ever you want, but it is strange that you are done even if the puzzle isn't over on the left...well anyways

                           

                          Since in this case you can't remove a connected piece once it is connected and it doesn't matter where they are connected I can tell that they are just doing a count. There are 35 pieces so when you have connected 34 times you will be done.

                           

                          So let's back up a step there. How do we know when a correct connection has happened?

                           

                          I'm not sure exactly how they set this up, but I would probably name the pieces something like piece0_0 through piece7_5 (seven rows, five columns). So then a given pieceX_Y will need to connect with pieceX_(Y-1), pieceX_(Y+1), piece(X-1)_Y and piece(X+1)_Y. So each time we have a piece dropped we need to check its relationship with those 4 pieces. I would also assign a variable (i,j) to each clip so that it would "know" its row and column.

                           

                          I would do that in my initialize code: Something like this:

                           

                          var home:MovieClip=this;

                          var numRows:Number=7;

                          var numCols:Number=5;

                           

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

                          for(var j=0;j<numRows;j++){

                          var curPiece:Movieclip=home["piece"+i+"_"+j];

                          curPiece.i=i;

                          curPiece.j=j;

                          curPiece.onPress=dragPiece;

                          curPiece.onRelease=curPiece.onReleaseOutside=dropPiece;

                          }

                          }

                           

                          More on those drag and drop functions later. And this is assuming that you made all your pieces and named them by hand. Obviously I would probably do something where you only had to put one thing on the stage and it would automatically duplicate the parent image and dynamically adjust which clip is used as a clipping mask and reposition the artwork, but that....

                           

                          I can't quite tell how they are telling if the piece is in the right place. I zoomed in really close and it doesn't seem that they have to be touching. So I'm guessing that it is based upon distance. We need a distance for close enough and another for too close. And since the pieces are not square we will need different values for vertical and horizontal.

                           

                          But we also need to make sure that the one that is supposed to be on the right, for example, is on the right and not to high and not two low. So here is the code I would probably use (I'm making up the values, they would need to be based on the actual size of the grid used to create the puzzle):

                           

                          var hMax:Number=100;

                          var hMin:Number=80;

                          var hDelta:Number=10;

                           

                          var vMax:Number=80;

                          var vMin:Number=64;

                          var vDelta:Number=8;

                           

                          function dropPiece(){

                           

                          // check for the left clip

                          var leftClip:MovieClip=home["piece"+this.i-1+"_"+this.j]

                          var dx:Number=this._x-leftClip._x;

                          var dy:Number=this._y-leftClip._y;

                          var dist:Number=Math.sqrt(dx*dx+dy*dy);

                           

                          if(dist>hMin && dist<hMax && this._x>leftClip._x && this._y>(leftClip._y-vDelta) && this._y<(leftClip._y+vDelta){

                               // the left clip is further than the minimum distance AND

                               // the left clip is closer than the maximum distance AND

                               // the left clip has an x value that is less than this clip's x (meaning it is to the left) AND

                               // the left clip has a y value that is greater than this clip's y minus a little bit (meaning it isn't to far above this clip) AND

                               // the left clip has a y value that is less than this clip's y plus a little bit (meaning it isn't to far down the page), so therefor

                               // the left clip is where it needs to be to be the left clip!

                          }

                          }

                           

                          And so on for each of the other three that need to be checked.

                           

                          Now I see why they jump the other clips to the clipped that was dropped. In the example if you have say piece0 and piece2 (first row) over their correct spots and you then drop piece1 between them they both jump to connect with the piece you dropped. I would probably find some other solution, but I see why they did that now....

                           

                          Well I've spent more than an hour on this so far...so I'm going to take a break. Let me know what you think....

                          • 10. Re: ending a puzzle game
                            Shad0wdrag0n Level 1

                            Thanks, I'll try taking this apart and see if I can figure out how it all works . Of course now you have me curious, if you wouldn't do it like it is in the example I found, how would you do it? Is your way a lot more complicated, a lot easier, or just different?

                            • 11. Re: ending a puzzle game
                              Rothrock Level 5

                              What I've described so far is what I would do. There are probably a few design ideas I would include, but they are polish that mostly can be applied at the end. For example I don't like the way that they scatter the pieces. And while I like that you can assemble pieces anywhere you find them, I would probably do something else for the end.

                               

                              And the puzzle is the same every time. I would probably try and figure out some dynamic way of chopping up the pieces so it would be a little different each time. That is probably way more complex that what we are talking about here.

                               

                              But that is why I try to make it more general. The basic idea is you have a grid of i,j items. At first I might place the grid by hand, but then I can later make some code to do it automagically. The checking routine doesn't care whether the pieces were created by hand or by code. The initialization part would have to be expanded to create the pieces by code, but the parts that are already there don't care, and so on.

                               

                              It isn't really oop, but it is half a step in that direction for spaghetti code.

                              • 12. Re: ending a puzzle game
                                Shad0wdrag0n Level 1

                                OK, thanks for all the help. I'll see what I can do with the code you've already posted. Once I'm more familiar with that I'll start messing with the fancy extra stuff