Re: [Flashcoders] jigsaw puzzle piece algorithm
Hello Danny, Thanks alot.. this can't be any clearer :D, workin on it now :)) thanks again, Guntur N. Sarwohadi ___ Flashcoders@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders Brought to you by Fig Leaf Software Premier Authorized Adobe Consulting and Training http://www.figleaf.com http://training.figleaf.com
RE: [Flashcoders] jigsaw puzzle piece algorithm
> Hello Danny, > > So for every piece generated, i'll create as much piece and group > objects in > each piece and group array beyond the piece MC object scope, > right? But how > does moving all pieces simultaneously be done in pseudocode? How would you > tell an object to start drag?.. I mean, since only MCs have the startDrag > method, then it will need to delegate to group object, or do you have a > better way doing this? Yes: don't use the inbuilt drag method, do it with code (following is email script and may contain errors!): function myStartDrag() { startX = _parent._xmouse startY = _parent._ymouse myX = this._x myY = this._y drag = true } function myStopDrag() { drag = false } function onEnterFrame() { if (drag) { this._x = _parent._xmouse - startX + myX this._y = _parent._ymouse - startY + myY } } By the way - on thinking further, I'd not even bother with piece objects (they're just simple movieclips) but only use groups. A group knows all its neighbours and if any of them are in a group that's in the same relative position to its starting point, it joins them together. Then its new list of neighbours is all the neighbours of the two groups except those that are in the group. eg: group 1 has pieces C and D and neighbours A,B,E,F group 2 has pieces E and G and neighbours B,H,C,I piece C in group 1 is a neighbour of group 2 so the two can join together. When joined, they have pieces C,D,E,G and neighbours A, B, F, H, I Don't know if that is very clear! Danny ___ Flashcoders@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders Brought to you by Fig Leaf Software Premier Authorized Adobe Consulting and Training http://www.figleaf.com http://training.figleaf.com
Re: [Flashcoders] jigsaw puzzle piece algorithm
Hello Danny, So for every piece generated, i'll create as much piece and group objects in each piece and group array beyond the piece MC object scope, right? But how does moving all pieces simultaneously be done in pseudocode? How would you tell an object to start drag?.. I mean, since only MCs have the startDrag method, then it will need to delegate to group object, or do you have a better way doing this? Much thanks, Guntur N. Sarwohadi ___ Flashcoders@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders Brought to you by Fig Leaf Software Premier Authorized Adobe Consulting and Training http://www.figleaf.com http://training.figleaf.com
RE: [Flashcoders] jigsaw puzzle piece algorithm
> Hi Danny, > > Thanks for the reply.. I'm not quite sure to what you mean, but doesn't it > sound similar to my current approach? Rather than using arrays, you > suggested objects. Please correct me if I'm wrong. Hi, Guntur, I've been on holiday, but in case it's helpful, a little clarification: >From my original post: >Without going into your post in detail, I think this is the source of your problem. For each group, you're better off making a single object which contains all the elements in it, then making A.group a reference to that object. Start with N such groups, one for each piece. Then, when you connect two pieces, you merge their groups into a single object. Now, each time the user drags a piece, update the whole group (including the piece clicked on) with a single command. The point of this is to keep the groups and the pieces as separate things. Here's a pseudocode explanation: start with an array of n Piece objects and an array of n Group objects. - Each piece knows its neighbours and belongs to exactly one group, to which it has a reference. - Each group knows which pieces it contains. - Initially, each group contains one piece when a piece is clicked, tell its group to start dragging (and bring all its pieces to the top) when dragging a group, move all its pieces simultaneously (so the 'drag' method is part of the Group object, not the Piece object) when a group is released, check if any of its pieces can be linked to one of its neighbours that is not in the group. If so: - set group1 to the group of the first piece - set group2 to the group of the second piece - add all the elements of group2 to group1 - set the group of each element of group2 to group1 - delete group2 - if at this stage there is only one group left, the puzzle is complete NB: with a little ingenuity, checking if two groups can be linked should be possible to do in a single test, rather than looping through all pieces in them. I'd do it by noting the offset of each group from its correct position, then checking how similar these values are in the two groups. Is that clearer? Danny ___ Flashcoders@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders Brought to you by Fig Leaf Software Premier Authorized Adobe Consulting and Training http://www.figleaf.com http://training.figleaf.com
Re: [Flashcoders] jigsaw puzzle piece algorithm
ps whether you do this through a naming convention as you mentioned, or through storing a row and column property for each piece doesnt really matter i guess. On 8/3/06, Hans Wichman <[EMAIL PROTECTED]> wrote: Hi Gunther, imagine the puzzle in its correct configuration: ABCD EFGH I see this as the grid Now if i tell you A, B and E are in a group, you automatically know B is the right neighbour of A, since they can only be in the same group if they connect, and they will only connect if they are in the correct configuration. greetz Hans On 7/31/06, Guntur N. Sarwohadi <[EMAIL PROTECTED]> wrote: > > Hi Hans, > > Hmm.. ok.. i think i see what you and Danny are talking about. yes, i > think > and hope that will solve the problem.. > > You dont need to explicitly define a's neighbours, since its a grid, so > you > > know how to find it's direct neighbour if necessary. > > > But if i don't define neighbours, how would i tell a piece to stick at a > > certain piece on a certain side?.. except I'm using a certain naming > convention (like you said, grids) which automatically tells where this > piece > should stick at.. is this approach is what you mean? > > big thanks guys, > > Guntur N. Sarwohadi > ___ > Flashcoders@chattyfig.figleaf.com > To change your subscription options or search the archive: > http://chattyfig.figleaf.com/mailman/listinfo/flashcoders > > Brought to you by Fig Leaf Software > Premier Authorized Adobe Consulting and Training > http://www.figleaf.com > http://training.figleaf.com > ___ Flashcoders@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders Brought to you by Fig Leaf Software Premier Authorized Adobe Consulting and Training http://www.figleaf.com http://training.figleaf.com
Re: [Flashcoders] jigsaw puzzle piece algorithm
Hi Gunther, imagine the puzzle in its correct configuration: ABCD EFGH I see this as the grid Now if i tell you A, B and E are in a group, you automatically know B is the right neighbour of A, since they can only be in the same group if they connect, and they will only connect if they are in the correct configuration. greetz Hans On 7/31/06, Guntur N. Sarwohadi <[EMAIL PROTECTED]> wrote: Hi Hans, Hmm.. ok.. i think i see what you and Danny are talking about. yes, i think and hope that will solve the problem.. You dont need to explicitly define a's neighbours, since its a grid, so you > know how to find it's direct neighbour if necessary. But if i don't define neighbours, how would i tell a piece to stick at a certain piece on a certain side?.. except I'm using a certain naming convention (like you said, grids) which automatically tells where this piece should stick at.. is this approach is what you mean? big thanks guys, Guntur N. Sarwohadi ___ Flashcoders@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders Brought to you by Fig Leaf Software Premier Authorized Adobe Consulting and Training http://www.figleaf.com http://training.figleaf.com ___ Flashcoders@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders Brought to you by Fig Leaf Software Premier Authorized Adobe Consulting and Training http://www.figleaf.com http://training.figleaf.com
Re: [Flashcoders] jigsaw puzzle piece algorithm
Hi Hans, Hmm.. ok.. i think i see what you and Danny are talking about. yes, i think and hope that will solve the problem.. You dont need to explicitly define a's neighbours, since its a grid, so you know how to find it's direct neighbour if necessary. But if i don't define neighbours, how would i tell a piece to stick at a certain piece on a certain side?.. except I'm using a certain naming convention (like you said, grids) which automatically tells where this piece should stick at.. is this approach is what you mean? big thanks guys, Guntur N. Sarwohadi ___ Flashcoders@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders Brought to you by Fig Leaf Software Premier Authorized Adobe Consulting and Training http://www.figleaf.com http://training.figleaf.com
Re: [Flashcoders] jigsaw puzzle piece algorithm
Hi, no i dont think its the same. Reading your story it sounds like every piece has a set of neighbours, with a maximum of fours neighbours. Taking your example: Initially each piece group property is an empty array, but for a group something like: A B C D a.group = [a,b,c,d] and b.group = [a,b,c,d] and c.group = [a,b,c,d] etc for : ABCD EF a.group would be = [a,b,c,d,e,f] You dont need to explicitly define a's neighbours, since its a grid, so you know how to find it's direct neighbour if necessary. greetz Hans On 7/28/06, Guntur N. Sarwohadi <[EMAIL PROTECTED]> wrote: Hi Danny, Thanks for the reply.. I'm not quite sure to what you mean, but doesn't it sound similar to my current approach? Rather than using arrays, you suggested objects. Please correct me if I'm wrong. Cheers, Guntur N. Sarwohadi ___ Flashcoders@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders Brought to you by Fig Leaf Software Premier Authorized Adobe Consulting and Training http://www.figleaf.com http://training.figleaf.com ___ Flashcoders@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders Brought to you by Fig Leaf Software Premier Authorized Adobe Consulting and Training http://www.figleaf.com http://training.figleaf.com
Re: [Flashcoders] jigsaw puzzle piece algorithm
Hi Danny, Thanks for the reply.. I'm not quite sure to what you mean, but doesn't it sound similar to my current approach? Rather than using arrays, you suggested objects. Please correct me if I'm wrong. Cheers, Guntur N. Sarwohadi ___ Flashcoders@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders Brought to you by Fig Leaf Software Premier Authorized Adobe Consulting and Training http://www.figleaf.com http://training.figleaf.com
RE: [Flashcoders] jigsaw puzzle piece algorithm
> Initially each piece group property is an empty array, but for a group > something like: > > A B C > D > > then, A.group is an array of (B, C, D). B.group is an array of (A, C, D), > etc.. Without going into your post in detail, I think this is the source of your problem. For each group, you're better off making a single object which contains all the elements in it, then making A.group a reference to that object. Start with N such groups, one for each piece. Then, when you connect two pieces, you merge their groups into a single object. Now, each time the user drags a piece, update the whole group (including the piece clicked on) with a single command. Another advantage of this approach is that it makes it easy to do other group-level operations like depth-sorting, and of course the puzzle is solved when there is only one group! Danny ___ Flashcoders@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders Brought to you by Fig Leaf Software Premier Authorized Adobe Consulting and Training http://www.figleaf.com http://training.figleaf.com
Re: [Flashcoders] jigsaw puzzle piece algorithm
Hi Hans, Sorry for the long reply on this subject,.. my previous mail got rejected at hadn't notice it till now.. o_O I think your algorithm is about how to search for puzzle pieces, but what I'm looking for is how to tell pieces in the same group to move together.. Here's what I have: For each piece, before randomly positioning them, I register every piece by their location: north, south, east and west. So every piece has 4 properties containing at most 1 MC name. I also added a group property (array class) which will register pieces (mc names) as groups when combined together. Here's a simple diagram of a 3x3 puzzle just to make it easy to explain things: A B C D E F G H I So, for piece A, A.east is B, A.south is D. In B, B.west is A, B.east is C, B.south is E, etc.. Initially each piece group property is an empty array, but for a group something like: A B C D then, A.group is an array of (B, C, D). B.group is an array of (A, C, D), etc.. I've tried several attempts for piece movement... but none meets my expectation let me explain my case with an example,.. say we have a group something like A B D E and we're moving piece E First attempt, I iterate array members of E.group and calculate the distance between each piece from piece E. On mouseMove, I update the distance for every array member of E.group from the piece E current coordinate. This is the easy way to move group members all at once, but having them stick to each other is another thing since I get every piece displacing on every movement. It seems like they're not updating as fast as the mouse move.. Second attempt, similar to the previous attempt but now I calculate the delta of E and update the delta for each array member of E.group. Each piece in E.group moves but displaces too, probably the same issue as the first attempt.. Third attempt, I use the north, east, south, west (N-E-W-S) property in every piece. So on mouseMove I iterate each array member of E.group and tell them to update position by E as parameter. I provided an updating method for each piece class to see if either their north, east, south or west property is the moving MC (in this case, E). Then it updates their coordinates by placing themselves from the moving MC (if north, then E._y + E._height). This sticks the pieces real good, but somehow piece E sometimes slips off and you can see a minor gap. But the problem with this attempt is that it's hard to tell pieces not related directly with E to move as well. Like piece A. So the forth attempt, instead of telling group members to update by E, I'm telling E to update it's own N-E-W-S MC and let it 'spread the word' besides the source (tell B to update it's own N-E-W-S.. tell D to update it's own N-E-W-S, etc... but not return it back to E). This is a better way to tell every piece to move by E, but flash spits out an error about endless looping and that's because A is being called by both B and D. The hard part is, I can't tell which should A listen to. now, i think i'm doing this the wrong way somewhere.. any ideas, anyone? thanks, Guntur N. Sarwohadi On 7/15/06, Hans Wichman < [EMAIL PROTECTED]> wrote: > > Hi, > great nice to hear, it's all starting to work now. With respect to the > moving, are you moving the pieces to round _x, _y values, not sure, but > this > might have something to do with it. I remember building a panorama with > hotspots area's that had to move along with the panorama, and I had the > same > problem, the area's slowly moved away from where they should be. I > rounded > all the delta x's and y's and the problem went away. > > With respect to the other problem, I think (but I haven't yet so sorry > if > this isnt the way to go!) I wouldn't use a ref and neighbour ref search, > but > actually define groups. > After moving a piece, it can match on four sides. The matches could be > groups themselves or single pieces. You could take the first match, and > either join the new piece to an already existing group, or start a new > group > between the matching piece on the moved piece. > You could make it more complex, for example, when the moved piece > matches on > both the left and right side, that you combine all those matches into > one > group, however that isn't strictly necessary, since if you use only the > first match, you simply need to move it after the first grouping and it > will > group again. > This still leaves a lot of questions to be answered though, but still > the > principle would be to update groups. > I'm not sure which solution would be better, they both have something to > say > for them i think. > > ANYWAYZ: with respect to A*, it would be something like: > > - build a childlist for all children not already in the list > > in pseudo: > var piecesToFind = new Array(); > var piecesToIterate = [masterPiece]; > > while (piecesToIterate.length > 0) { >var currentNode = piecesToIterate.shift(); >piecesToFind.push (currentNode); >for each matchingPiece in
Re: [Flashcoders] jigsaw puzzle piece algorithm
Hi, great nice to hear, it's all starting to work now. With respect to the moving, are you moving the pieces to round _x, _y values, not sure, but this might have something to do with it. I remember building a panorama with hotspots area's that had to move along with the panorama, and I had the same problem, the area's slowly moved away from where they should be. I rounded all the delta x's and y's and the problem went away. With respect to the other problem, I think (but I haven't yet so sorry if this isnt the way to go!) I wouldn't use a ref and neighbour ref search, but actually define groups. After moving a piece, it can match on four sides. The matches could be groups themselves or single pieces. You could take the first match, and either join the new piece to an already existing group, or start a new group between the matching piece on the moved piece. You could make it more complex, for example, when the moved piece matches on both the left and right side, that you combine all those matches into one group, however that isn't strictly necessary, since if you use only the first match, you simply need to move it after the first grouping and it will group again. This still leaves a lot of questions to be answered though, but still the principle would be to update groups. I'm not sure which solution would be better, they both have something to say for them i think. ANYWAYZ: with respect to A*, it would be something like: - build a childlist for all children not already in the list in pseudo: var piecesToFind = new Array(); var piecesToIterate = [masterPiece]; while (piecesToIterate.length > 0) { var currentNode = piecesToIterate.shift(); piecesToFind.push (currentNode); for each matchingPiece in currentNode { if (piecesToFind.contains(matchingPiece) { piecesToIterate.push (matchingPiece); } } } Does that make any sense? (i hope its right:)) greetz Hans On 7/13/06, Guntur N. Sarwohadi <[EMAIL PROTECTED]> wrote: Hello Hans, I would like to thank you in advanced for helping me this far.. I currently have the jigsaw drawing algorithm in hand, yay! It's looks nicer now :D.. and it does 'blend' when it sticks to other pieces tightly. One good thing is that I use the bevel filter and I thought it wont looked blended since you have that filter around, but somehow it did otherwise and looked pretty nice.. some 'fake' blending effect hehehe.. I've modified the group movement code and now it's moving corresponding to the relation to the 'master' piece (piece the user move).. moving with distance (not piece relation) was pretty buggy coz it (pieces in the group) displaces as the mouse slightly moves away from the master piece. But currently, with the new implementation, it still displaces.. the displacements occur only to the master piece and it seems like because it moves a little faster than the others which make it slightly not sticking with the rest of the group. Very minor bug but still annoying. Broadcast / dispatching isn't the right term for what I did in code, btw.. coz in pseudo all i did was: piece.onMouseMove = function() { for(i = 0; i < piece.group.length; i++) { piece.group[i].updatePosition(this); } } group is an array located in each piece mc.. and since it's an array of pieces, then this piece has the 'updatePosition' methode as well.. sumthin like piece.updatePosition = function(ref) { //get the relation to ref, whether it's in the north, south, west or east of it //match the _x and _y property by ref by relation //search for other pieces connected to ref if this piece isn't related directly to ref } Now, this is where my latest problem spawns in.. searching for pieces connected to ref is pretty damn hard.. it reminds me with A* algorithm, which i'm not familiar of.. currently i iterate the methode if a piece can't find a hierarchy connection to ref / master piece, and it comes that only 2 layer 'descendants' follow the master movement.. For example, in a 3 x 3 puzzle, if i move the center (piece_2_2), i would get all pieces move together. But for, say, the top left piece (piece_1_1), would only bring piece_1_2, piece_1_3, piece_2_1, piece_3_1 and piece_2_2. the rest would be left behind.. any idea for this problem? thx Guntur N. Sarwohadi On 7/11/06, Hans Wichman <[EMAIL PROTECTED]> wrote: > > Hi, > does it displace until you stop moving, or displace and screws it up > completely? > It sounds like either one of the updates you broadcast are not coming > through, or the updates are based on the wrong offsets. I assume that if > you > move a group of 3, the 2 that should be moved automatically ARE displaced > by > the same amount? > Just a shot in the dark here, but when you broadcast to the group, do you > skip the source of the event? > For example, normally in a group of 2, when you move one, you could > either: > 1) move the one you moved and dispatch an event to the other > 2) create an event and dispatch to the group > 3) move the one you moved
Re: [Flashcoders] jigsaw puzzle piece algorithm
Hello Hans, I would like to thank you in advanced for helping me this far.. I currently have the jigsaw drawing algorithm in hand, yay! It's looks nicer now :D.. and it does 'blend' when it sticks to other pieces tightly. One good thing is that I use the bevel filter and I thought it wont looked blended since you have that filter around, but somehow it did otherwise and looked pretty nice.. some 'fake' blending effect hehehe.. I've modified the group movement code and now it's moving corresponding to the relation to the 'master' piece (piece the user move).. moving with distance (not piece relation) was pretty buggy coz it (pieces in the group) displaces as the mouse slightly moves away from the master piece. But currently, with the new implementation, it still displaces.. the displacements occur only to the master piece and it seems like because it moves a little faster than the others which make it slightly not sticking with the rest of the group. Very minor bug but still annoying. Broadcast / dispatching isn't the right term for what I did in code, btw.. coz in pseudo all i did was: piece.onMouseMove = function() { for(i = 0; i < piece.group.length; i++) { piece.group[i].updatePosition(this); } } group is an array located in each piece mc.. and since it's an array of pieces, then this piece has the 'updatePosition' methode as well.. sumthin like piece.updatePosition = function(ref) { //get the relation to ref, whether it's in the north, south, west or east of it //match the _x and _y property by ref by relation //search for other pieces connected to ref if this piece isn't related directly to ref } Now, this is where my latest problem spawns in.. searching for pieces connected to ref is pretty damn hard.. it reminds me with A* algorithm, which i'm not familiar of.. currently i iterate the methode if a piece can't find a hierarchy connection to ref / master piece, and it comes that only 2 layer 'descendants' follow the master movement.. For example, in a 3 x 3 puzzle, if i move the center (piece_2_2), i would get all pieces move together. But for, say, the top left piece (piece_1_1), would only bring piece_1_2, piece_1_3, piece_2_1, piece_3_1 and piece_2_2. the rest would be left behind.. any idea for this problem? thx Guntur N. Sarwohadi On 7/11/06, Hans Wichman <[EMAIL PROTECTED]> wrote: Hi, does it displace until you stop moving, or displace and screws it up completely? It sounds like either one of the updates you broadcast are not coming through, or the updates are based on the wrong offsets. I assume that if you move a group of 3, the 2 that should be moved automatically ARE displaced by the same amount? Just a shot in the dark here, but when you broadcast to the group, do you skip the source of the event? For example, normally in a group of 2, when you move one, you could either: 1) move the one you moved and dispatch an event to the other 2) create an event and dispatch to the group 3) move the one you moved and dispatch an event to the whole group the 3rd option clearly is invalid, since one piece would be moved twice. And with respect to the somefrogs.com, i had the same impression you had now "how do they do that" a few weeks ago, and now i know: one step at a time:). Once you have the mask, and the movement correct, you are 80% there;) good luck! JC On 7/11/06, Guntur N. Sarwohadi <[EMAIL PROTECTED]> wrote: > > Hi Hans, > > Hmm.. I'm not sure what was I thinking when I was writing about > onEnterFrame, coz like you describe earlier, I didn't use any onEnterFrame > either.. gosh, this what happens when you don't have enough coffee with > you > after 2 days of no sleep :p.. well, anyway, in onMouseMove, I broadcast to > piece group members to move as well, with the current piece as reference. > Currently I calculated the distance prior broadcast and as the current > piece > moves, the piece group members would move in the same way without getting > off location... but it does.. when you move the mouse fast enough, it > displaces.. > > somefrogs.com... wow! that's so cool.. How you do such a thing?.. it > blends > in and mostly, the pieces dont fall off when you move the mouse fast > enough!... how the...?.. > > anyone got an idea with my problem? > > thx! > [g] > > On 7/11/06, Hans Wichman <[EMAIL PROTECTED]> wrote: > > > > Hi, > > with respect to the combining pieces, why would you use onEnterFrame to > > update the other pieces? > > Of course I dont know the details of your implementation, but it would > > seem > > that if you had puzzle clumps (in want of a better term), meaning groups > > of > > already combined pieces you could either temporarily parent (meaning > > recreating) the whole clump in a parent clip, and move the parent clip > or > > do > > something like: > > > > puzzlePiece.onMouseMove = { > > get self.deltaxy > > if Puzzle.getGroup(self) == null then self.move(deltaxy) > > else Puzzle.getGroup(self).move(deltaxy); > > } > > > > With respect to the
Re: [Flashcoders] jigsaw puzzle piece algorithm
Hi, does it displace until you stop moving, or displace and screws it up completely? It sounds like either one of the updates you broadcast are not coming through, or the updates are based on the wrong offsets. I assume that if you move a group of 3, the 2 that should be moved automatically ARE displaced by the same amount? Just a shot in the dark here, but when you broadcast to the group, do you skip the source of the event? For example, normally in a group of 2, when you move one, you could either: 1) move the one you moved and dispatch an event to the other 2) create an event and dispatch to the group 3) move the one you moved and dispatch an event to the whole group the 3rd option clearly is invalid, since one piece would be moved twice. And with respect to the somefrogs.com, i had the same impression you had now "how do they do that" a few weeks ago, and now i know: one step at a time:). Once you have the mask, and the movement correct, you are 80% there;) good luck! JC On 7/11/06, Guntur N. Sarwohadi <[EMAIL PROTECTED]> wrote: Hi Hans, Hmm.. I'm not sure what was I thinking when I was writing about onEnterFrame, coz like you describe earlier, I didn't use any onEnterFrame either.. gosh, this what happens when you don't have enough coffee with you after 2 days of no sleep :p.. well, anyway, in onMouseMove, I broadcast to piece group members to move as well, with the current piece as reference. Currently I calculated the distance prior broadcast and as the current piece moves, the piece group members would move in the same way without getting off location... but it does.. when you move the mouse fast enough, it displaces.. somefrogs.com... wow! that's so cool.. How you do such a thing?.. it blends in and mostly, the pieces dont fall off when you move the mouse fast enough!... how the...?.. anyone got an idea with my problem? thx! [g] On 7/11/06, Hans Wichman <[EMAIL PROTECTED]> wrote: > > Hi, > with respect to the combining pieces, why would you use onEnterFrame to > update the other pieces? > Of course I dont know the details of your implementation, but it would > seem > that if you had puzzle clumps (in want of a better term), meaning groups > of > already combined pieces you could either temporarily parent (meaning > recreating) the whole clump in a parent clip, and move the parent clip or > do > something like: > > puzzlePiece.onMouseMove = { > get self.deltaxy > if Puzzle.getGroup(self) == null then self.move(deltaxy) > else Puzzle.getGroup(self).move(deltaxy); > } > > With respect to the masking and filling through the drawing api, my > routine > looks like (in pseudo): > canvas.clear() > canvas.beginFill() > drawTop(canvas);drawRight(canvas);drawBottom(canvas);drawLeft(canvas); > canvas.endFill(); > > each draw routine picks up where the first left off, creating a closed > shape > which can be filled as normal. > > However if you had different sides drawn as vectors in flash, and convert > them to a symbol, and put four of them together, you can't do this, since > 4 > symbols together of course dont make a closed 'shape'. > > One other thing though: did you know this one: http://somefrogs.com/ > It might be all you need. It lacks a nice bevelled edge around the pieces, > which would have been easy to add to your drawn shapes, using a > bevelfilter, > but it still is a very nice out of the box reusable puzzle component I > think. > > greetz > Hans > > > On 7/11/06, Hans Wichman <[EMAIL PROTECTED]> wrote: > > > > Hi, > > with respect to the combining pieces, why would you use onEnterFrame to > > update the other pieces? > > Of course I dont know the details of your implementation, but it would > > seem that if you had puzzle clumps (in want of a better term), meaning > > groups of already combined pieces you could either temporarily parent > > (meaning recreating) the whole clump in a parent clip, and move the > parent > > clip or do something like: > > > > puzzlePiece.onMouseMove = { > > get self.deltaxy > > if Puzzle.getGroup(self) == null then self.move(deltaxy) > > else Puzzle.getGroup(self).move(deltaxy); > > } > > > > With respect to the masking and filling through the drawing api, my > > routine looks like (in pseudo): > > canvas.clear() > > canvas.beginFill() > > drawTop(canvas);drawRight(canvas);drawBottom(canvas);drawLeft(canvas); > > canvas.endFill(); > > > > each draw routine picks up where the first left off, creating a closed > > shape which can be filled as normal. > > > > However if you had different sides drawn as vectors in flash, and > convert > > them to a symbol, and put four of them together, you can't do this, > since 4 > > symbols together of course dont make a closed 'shape'. > > > > One other thing though: did you know this one: http://somefrogs.com/ > > It might be all you need. > > > > greetz > > Hans > > > > > > > > On 7/11/06, Guntur N. Sarwohadi <[EMAIL PROTECTED]> wrote: > > > > > > Thanks guys for the reply. Now I have a better understanding
Re: [Flashcoders] jigsaw puzzle piece algorithm
Hi Hans, Hmm.. I'm not sure what was I thinking when I was writing about onEnterFrame, coz like you describe earlier, I didn't use any onEnterFrame either.. gosh, this what happens when you don't have enough coffee with you after 2 days of no sleep :p.. well, anyway, in onMouseMove, I broadcast to piece group members to move as well, with the current piece as reference. Currently I calculated the distance prior broadcast and as the current piece moves, the piece group members would move in the same way without getting off location... but it does.. when you move the mouse fast enough, it displaces.. somefrogs.com... wow! that's so cool.. How you do such a thing?.. it blends in and mostly, the pieces dont fall off when you move the mouse fast enough!... how the...?.. anyone got an idea with my problem? thx! [g] On 7/11/06, Hans Wichman <[EMAIL PROTECTED]> wrote: Hi, with respect to the combining pieces, why would you use onEnterFrame to update the other pieces? Of course I dont know the details of your implementation, but it would seem that if you had puzzle clumps (in want of a better term), meaning groups of already combined pieces you could either temporarily parent (meaning recreating) the whole clump in a parent clip, and move the parent clip or do something like: puzzlePiece.onMouseMove = { get self.deltaxy if Puzzle.getGroup(self) == null then self.move(deltaxy) else Puzzle.getGroup(self).move(deltaxy); } With respect to the masking and filling through the drawing api, my routine looks like (in pseudo): canvas.clear() canvas.beginFill() drawTop(canvas);drawRight(canvas);drawBottom(canvas);drawLeft(canvas); canvas.endFill(); each draw routine picks up where the first left off, creating a closed shape which can be filled as normal. However if you had different sides drawn as vectors in flash, and convert them to a symbol, and put four of them together, you can't do this, since 4 symbols together of course dont make a closed 'shape'. One other thing though: did you know this one: http://somefrogs.com/ It might be all you need. It lacks a nice bevelled edge around the pieces, which would have been easy to add to your drawn shapes, using a bevelfilter, but it still is a very nice out of the box reusable puzzle component I think. greetz Hans On 7/11/06, Hans Wichman <[EMAIL PROTECTED]> wrote: > > Hi, > with respect to the combining pieces, why would you use onEnterFrame to > update the other pieces? > Of course I dont know the details of your implementation, but it would > seem that if you had puzzle clumps (in want of a better term), meaning > groups of already combined pieces you could either temporarily parent > (meaning recreating) the whole clump in a parent clip, and move the parent > clip or do something like: > > puzzlePiece.onMouseMove = { > get self.deltaxy > if Puzzle.getGroup(self) == null then self.move(deltaxy) > else Puzzle.getGroup(self).move(deltaxy); > } > > With respect to the masking and filling through the drawing api, my > routine looks like (in pseudo): > canvas.clear() > canvas.beginFill() > drawTop(canvas);drawRight(canvas);drawBottom(canvas);drawLeft(canvas); > canvas.endFill(); > > each draw routine picks up where the first left off, creating a closed > shape which can be filled as normal. > > However if you had different sides drawn as vectors in flash, and convert > them to a symbol, and put four of them together, you can't do this, since 4 > symbols together of course dont make a closed 'shape'. > > One other thing though: did you know this one: http://somefrogs.com/ > It might be all you need. > > greetz > Hans > > > > On 7/11/06, Guntur N. Sarwohadi <[EMAIL PROTECTED]> wrote: > > > > Thanks guys for the reply. Now I have a better understanding on how to > > achieve the effect. Currently i'm planning to provide vector puzzle > > pieces > > as mask templates first. Once that's done, I would try to start working > > on > > dynamically drawing the puzzle nubs and cutouts.. I like the review Neo > > handed. It explains a lot what Hans described... One question though, > > whether the sides are drawn by code or provided as vectors, how would > > you > > combine 4 of them to make it as a filled masked vector shape using > > drawing > > api? > > > > One other thing, the puzzle I'm doing would allow users to move puzzle > > pieces and combine them by side references (like, piece A is always in > > the > > left of piece B, while D is always below A, for example). Now I've > > manage to > > make each piece move other pieces in one group as a whole (using > > onMouseMove > > for the dragger and onEnterFrame by calculating distance with the > > dragger > > for the 'dragee') but it seems unoptimized and often lags (which shifts > > pieces location) if you move the mouse fast. It would look unsticky. > > Does > > anyone have an idea for a better algorithm? > > > > thx, > > Guntur N. Sarwohadi > > > > PS. Neo, hows the TGB Isometric Add-On doing? :p > > > > On 7/11
Re: [Flashcoders] jigsaw puzzle piece algorithm
Hi, with respect to the combining pieces, why would you use onEnterFrame to update the other pieces? Of course I dont know the details of your implementation, but it would seem that if you had puzzle clumps (in want of a better term), meaning groups of already combined pieces you could either temporarily parent (meaning recreating) the whole clump in a parent clip, and move the parent clip or do something like: puzzlePiece.onMouseMove = { get self.deltaxy if Puzzle.getGroup(self) == null then self.move(deltaxy) else Puzzle.getGroup(self).move(deltaxy); } With respect to the masking and filling through the drawing api, my routine looks like (in pseudo): canvas.clear() canvas.beginFill() drawTop(canvas);drawRight(canvas);drawBottom(canvas);drawLeft(canvas); canvas.endFill(); each draw routine picks up where the first left off, creating a closed shape which can be filled as normal. However if you had different sides drawn as vectors in flash, and convert them to a symbol, and put four of them together, you can't do this, since 4 symbols together of course dont make a closed 'shape'. One other thing though: did you know this one: http://somefrogs.com/ It might be all you need. It lacks a nice bevelled edge around the pieces, which would have been easy to add to your drawn shapes, using a bevelfilter, but it still is a very nice out of the box reusable puzzle component I think. greetz Hans On 7/11/06, Hans Wichman <[EMAIL PROTECTED]> wrote: Hi, with respect to the combining pieces, why would you use onEnterFrame to update the other pieces? Of course I dont know the details of your implementation, but it would seem that if you had puzzle clumps (in want of a better term), meaning groups of already combined pieces you could either temporarily parent (meaning recreating) the whole clump in a parent clip, and move the parent clip or do something like: puzzlePiece.onMouseMove = { get self.deltaxy if Puzzle.getGroup(self) == null then self.move(deltaxy) else Puzzle.getGroup(self).move(deltaxy); } With respect to the masking and filling through the drawing api, my routine looks like (in pseudo): canvas.clear() canvas.beginFill() drawTop(canvas);drawRight(canvas);drawBottom(canvas);drawLeft(canvas); canvas.endFill(); each draw routine picks up where the first left off, creating a closed shape which can be filled as normal. However if you had different sides drawn as vectors in flash, and convert them to a symbol, and put four of them together, you can't do this, since 4 symbols together of course dont make a closed 'shape'. One other thing though: did you know this one: http://somefrogs.com/ It might be all you need. greetz Hans On 7/11/06, Guntur N. Sarwohadi <[EMAIL PROTECTED]> wrote: > > Thanks guys for the reply. Now I have a better understanding on how to > achieve the effect. Currently i'm planning to provide vector puzzle > pieces > as mask templates first. Once that's done, I would try to start working > on > dynamically drawing the puzzle nubs and cutouts.. I like the review Neo > handed. It explains a lot what Hans described... One question though, > whether the sides are drawn by code or provided as vectors, how would > you > combine 4 of them to make it as a filled masked vector shape using > drawing > api? > > One other thing, the puzzle I'm doing would allow users to move puzzle > pieces and combine them by side references (like, piece A is always in > the > left of piece B, while D is always below A, for example). Now I've > manage to > make each piece move other pieces in one group as a whole (using > onMouseMove > for the dragger and onEnterFrame by calculating distance with the > dragger > for the 'dragee') but it seems unoptimized and often lags (which shifts > pieces location) if you move the mouse fast. It would look unsticky. > Does > anyone have an idea for a better algorithm? > > thx, > Guntur N. Sarwohadi > > PS. Neo, hows the TGB Isometric Add-On doing? :p > > On 7/11/06, neo binedell <[EMAIL PROTECTED] > wrote: > > > > Try something like this > > > > http://www.cedesign.com/cefx/reviews/reviews1_avbros.html > > > > ~neo > > > > -Original Message- > > From: [EMAIL PROTECTED] > > [mailto: [EMAIL PROTECTED] On Behalf Of > Guntur N. > > Sarwohadi > > Sent: 06 July 2006 03:15 AM > > To: Flashcoders@chattyfig.figleaf.com > > Subject: [Flashcoders] jigsaw puzzle piece algorithm > > > > I'm working on a puzzle game in flash, much similar to jigsaw puzzles > you > > see in gameHouse or such casual game publisher. I'm having a hard time > > > trying to cut an image to make it as puzzle pieces in AS2. Currently > I'm > > doing it the hard way, cloning bitmapData image, and masking portions > of > > the > > image. Can you cut parts on an image using bitmapData methods? And > does > > anyone know how to create the infamous jigsaw pattern to it as well? > > > > Many thanks, > > Guntur N. Sarwohadi > > ___ > > Flashcoders@chatt
Re: [Flashcoders] jigsaw puzzle piece algorithm
Thanks guys for the reply. Now I have a better understanding on how to achieve the effect. Currently i'm planning to provide vector puzzle pieces as mask templates first. Once that's done, I would try to start working on dynamically drawing the puzzle nubs and cutouts.. I like the review Neo handed. It explains a lot what Hans described... One question though, whether the sides are drawn by code or provided as vectors, how would you combine 4 of them to make it as a filled masked vector shape using drawing api? One other thing, the puzzle I'm doing would allow users to move puzzle pieces and combine them by side references (like, piece A is always in the left of piece B, while D is always below A, for example). Now I've manage to make each piece move other pieces in one group as a whole (using onMouseMove for the dragger and onEnterFrame by calculating distance with the dragger for the 'dragee') but it seems unoptimized and often lags (which shifts pieces location) if you move the mouse fast. It would look unsticky. Does anyone have an idea for a better algorithm? thx, Guntur N. Sarwohadi PS. Neo, hows the TGB Isometric Add-On doing? :p On 7/11/06, neo binedell <[EMAIL PROTECTED]> wrote: Try something like this http://www.cedesign.com/cefx/reviews/reviews1_avbros.html ~neo -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Guntur N. Sarwohadi Sent: 06 July 2006 03:15 AM To: Flashcoders@chattyfig.figleaf.com Subject: [Flashcoders] jigsaw puzzle piece algorithm I'm working on a puzzle game in flash, much similar to jigsaw puzzles you see in gameHouse or such casual game publisher. I'm having a hard time trying to cut an image to make it as puzzle pieces in AS2. Currently I'm doing it the hard way, cloning bitmapData image, and masking portions of the image. Can you cut parts on an image using bitmapData methods? And does anyone know how to create the infamous jigsaw pattern to it as well? Many thanks, Guntur N. Sarwohadi ___ Flashcoders@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders Brought to you by Fig Leaf Software Premier Authorized Adobe Consulting and Training http://www.figleaf.com http://training.figleaf.com ___ Flashcoders@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders Brought to you by Fig Leaf Software Premier Authorized Adobe Consulting and Training http://www.figleaf.com http://training.figleaf.com ___ Flashcoders@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders Brought to you by Fig Leaf Software Premier Authorized Adobe Consulting and Training http://www.figleaf.com http://training.figleaf.com
RE: [Flashcoders] jigsaw puzzle piece algorithm
Try something like this http://www.cedesign.com/cefx/reviews/reviews1_avbros.html ~neo -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Guntur N. Sarwohadi Sent: 06 July 2006 03:15 AM To: Flashcoders@chattyfig.figleaf.com Subject: [Flashcoders] jigsaw puzzle piece algorithm I'm working on a puzzle game in flash, much similar to jigsaw puzzles you see in gameHouse or such casual game publisher. I'm having a hard time trying to cut an image to make it as puzzle pieces in AS2. Currently I'm doing it the hard way, cloning bitmapData image, and masking portions of the image. Can you cut parts on an image using bitmapData methods? And does anyone know how to create the infamous jigsaw pattern to it as well? Many thanks, Guntur N. Sarwohadi ___ Flashcoders@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders Brought to you by Fig Leaf Software Premier Authorized Adobe Consulting and Training http://www.figleaf.com http://training.figleaf.com ___ Flashcoders@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders Brought to you by Fig Leaf Software Premier Authorized Adobe Consulting and Training http://www.figleaf.com http://training.figleaf.com
Re: [Flashcoders] jigsaw puzzle piece algorithm
Hi, i just wrote code to create puzzlepieces on the fly, and while I am not allowed to give out code, I can tell you how I did it. It only answers the 'infamous jigsaw pattern' though, not the bitmap part. -I drew one side using a simpledrawing app written in flash, like mousedown is an anchor point and you click enough times to draw one side of the puzzle piece. Pressing space gave me back the point data. -To actually draw a fluid line through the points, I used the principe of curveTo's with the averaged anchor points -once you have the data to draw one side, you can scale, flip, rotate, move it etc to create nubbins, cutouts, flatsides and on everyside, all the way around until you have a solid puzzle piece, usable as a mask. -you can even use the simpledrawing app to draw a few different sides, to make it more interesting, so you have a sidetype 1 and a sidetype 2 for example, or you could use the basic data you had from step one, and autogenerate variations, by adding some random offset to each point. -create the random puzzle comes down to matches the sidetypes, and inverting the nubbins, cutouts.. Im sorry I can't help you out further, but I hope at least this part was helpfull. greetz Hans On 7/6/06, Adrian Lynch <[EMAIL PROTECTED]> wrote: This was done a while back, but having it uniform doesn't work too well: http://www.halestorm.co.uk/jigsaw/ The innie-outie bit's are done randomly and it looks ok, but I was hoping to find something that would cut it more like a regular jigsaw. Let us know if you find anything. Adrian -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Peter Hall Sent: 06 July 2006 04:09 To: Flashcoders mailing list Subject: Re: [Flashcoders] jigsaw puzzle piece algorithm The optimal way is probably to use copyPixels() for each puzzle piece, setting the alphaBitmapData argument to an image that contains just the puzzle piece shape. That will effectively mask out the shape of the piece, but will perform a lot better than using a vector mask, as it will have modified the image, rather than apply the mask each time the screen area gets redrawn. Jigsaw puzzle pieces are likely quite small as vector graphics, so you might want to keep them as vector assets and then create the alphaBitmapData objects at runtime, as you need them. If you really want to generate the shape pieces dynamically, you could divide the image into rectangles (or randomly varying quadrilaterals, to keep it interesting), then have a selection of nobbly bits you could randomly choose to add or remove from each side of the pieces. Having someone draw these by hand seems like less hassle though - unless you need to create a lot of puzzles... Peter On 7/6/06, Guntur N. Sarwohadi <[EMAIL PROTECTED]> wrote: > I'm working on a puzzle game in flash, much similar to jigsaw puzzles you > see in gameHouse or such casual game publisher. I'm having a hard time > trying to cut an image to make it as puzzle pieces in AS2. Currently I'm > doing it the hard way, cloning bitmapData image, and masking portions of the > image. Can you cut parts on an image using bitmapData methods? And does > anyone know how to create the infamous jigsaw pattern to it as well? > > Many thanks, > Guntur N. Sarwohadi ___ Flashcoders@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders Brought to you by Fig Leaf Software Premier Authorized Adobe Consulting and Training http://www.figleaf.com http://training.figleaf.com ___ Flashcoders@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders Brought to you by Fig Leaf Software Premier Authorized Adobe Consulting and Training http://www.figleaf.com http://training.figleaf.com
RE: [Flashcoders] jigsaw puzzle piece algorithm
This was done a while back, but having it uniform doesn't work too well: http://www.halestorm.co.uk/jigsaw/ The innie-outie bit's are done randomly and it looks ok, but I was hoping to find something that would cut it more like a regular jigsaw. Let us know if you find anything. Adrian -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Peter Hall Sent: 06 July 2006 04:09 To: Flashcoders mailing list Subject: Re: [Flashcoders] jigsaw puzzle piece algorithm The optimal way is probably to use copyPixels() for each puzzle piece, setting the alphaBitmapData argument to an image that contains just the puzzle piece shape. That will effectively mask out the shape of the piece, but will perform a lot better than using a vector mask, as it will have modified the image, rather than apply the mask each time the screen area gets redrawn. Jigsaw puzzle pieces are likely quite small as vector graphics, so you might want to keep them as vector assets and then create the alphaBitmapData objects at runtime, as you need them. If you really want to generate the shape pieces dynamically, you could divide the image into rectangles (or randomly varying quadrilaterals, to keep it interesting), then have a selection of nobbly bits you could randomly choose to add or remove from each side of the pieces. Having someone draw these by hand seems like less hassle though - unless you need to create a lot of puzzles... Peter On 7/6/06, Guntur N. Sarwohadi <[EMAIL PROTECTED]> wrote: > I'm working on a puzzle game in flash, much similar to jigsaw puzzles you > see in gameHouse or such casual game publisher. I'm having a hard time > trying to cut an image to make it as puzzle pieces in AS2. Currently I'm > doing it the hard way, cloning bitmapData image, and masking portions of the > image. Can you cut parts on an image using bitmapData methods? And does > anyone know how to create the infamous jigsaw pattern to it as well? > > Many thanks, > Guntur N. Sarwohadi ___ Flashcoders@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders Brought to you by Fig Leaf Software Premier Authorized Adobe Consulting and Training http://www.figleaf.com http://training.figleaf.com
Re: [Flashcoders] jigsaw puzzle piece algorithm
The optimal way is probably to use copyPixels() for each puzzle piece, setting the alphaBitmapData argument to an image that contains just the puzzle piece shape. That will effectively mask out the shape of the piece, but will perform a lot better than using a vector mask, as it will have modified the image, rather than apply the mask each time the screen area gets redrawn. Jigsaw puzzle pieces are likely quite small as vector graphics, so you might want to keep them as vector assets and then create the alphaBitmapData objects at runtime, as you need them. If you really want to generate the shape pieces dynamically, you could divide the image into rectangles (or randomly varying quadrilaterals, to keep it interesting), then have a selection of nobbly bits you could randomly choose to add or remove from each side of the pieces. Having someone draw these by hand seems like less hassle though - unless you need to create a lot of puzzles... Peter On 7/6/06, Guntur N. Sarwohadi <[EMAIL PROTECTED]> wrote: I'm working on a puzzle game in flash, much similar to jigsaw puzzles you see in gameHouse or such casual game publisher. I'm having a hard time trying to cut an image to make it as puzzle pieces in AS2. Currently I'm doing it the hard way, cloning bitmapData image, and masking portions of the image. Can you cut parts on an image using bitmapData methods? And does anyone know how to create the infamous jigsaw pattern to it as well? Many thanks, Guntur N. Sarwohadi ___ Flashcoders@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders Brought to you by Fig Leaf Software Premier Authorized Adobe Consulting and Training http://www.figleaf.com http://training.figleaf.com