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
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
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
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
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
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 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 currentNode {
if
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 and dispatch an event
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 masking and filling through the drawing api, my
routine
looks like (in
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
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
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@chattyfig.figleaf.com
To change your subscription options or search the archive:
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/06, neo binedell [EMAIL PROTECTED] wrote:
Try something like this
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 on how
to
achieve the effect. Currently i'm planning to provide vector puzzle
pieces
as mask templates first. Once that's done, I
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
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
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
