Moving Objects in Grid

Getting Started Newbie Questions
#1

Hey guys, sorry if this is a newb question for most, I’m just trying to wrap my head around the concept.

Say you have a  5x5 grid of squares 100x100, each with event listeners for tap events. You make one of the squares disappear by removeSelf or isVisible. Each square can move into the empty space, so as long as its adjacent to it, so when a square moves, it leaves an empty space which can be taken by other square. The point is, you would use transition.to to move the squares, not the .alpha property.

How would you calculate the x and y for the empty space in order to transition the other pieces? Would it be a matter of saving current x and y before the tapped square is moved (tap function called), or is more like using math to calculate the position by using x and y after the square has moved? Or maybe something else entirely? I’m just trying to figure it out on my own, that’s why I didn’t post any code. Just want to make sure I understand the concept or how you would do it in Corona and try to come up with the code myself.

Appreciate any comments. Thanks!

#2

Sounds like you’re trying to build a Puzzle8 or MatchX game.

I would not rely on the squares’ own x and y coordinates. You’re right about moving pieces with transition.to(), but you also want a lock while that is happening. So, in the onStart() and onComplete() you would set a scene-wide variable to true and then back to false, so that no other squares can be moved at the same time - assuming my assumptions about your intentions are correct.

Now, working out where to slide existing pieces to should be relatively easy. (Famous last words. And yes, I’ve tried building this myself and gone right round the houses.) Any time you want to hide a piece, when the tap event which causes it to be removed is received, simply record that square’s x and y somewhere. The other option is to have a permanently invisible square (or just a simple display group with nothing in it - my favourite trick!) which gets immediately moved to that location and then you just moved any other square to the invisible group’s location. No maths necessary.

Remember, the x and y values used to move display objects with transition.to() are not relative; You are simply telling the transition function what the final location should be. If you haven’t made a note of that location when a removed square is removed, you’re just making it hard for yourself.

If, however, you really do have a good reason for removing a square and needing to calculate the removal location later, without an actual square to base it on, the solution is this: Calculate a table full of x,y positions which *should* have squares in them. Then, loop through all the squares on the board (a simple 1 to group.numChildren will do) and remove any x,y positions from your calculated table which *do* have a square at that position. Anything left in the table is the position on screen of a missing square.

#3

Great stuff horace, thanks a lot for your input. In reality, I want to remove a piece at the very beginning of the scene, and no other pieces will be removed, since existing pieces will be moving to take that space.

I actually think having a display group with nothing on it is a great idea. You can move that group to the previous tile’s x and y and have pieces move into that space using that group as reference, haven’t thought of that before.

I will try at as soon as I can, thanks a lot for the help!

#4

So, it’s a Puzzle8 game :wink:

I heartily recommend that approach… There is literally no maths involved and it’s incredibly easy to work out motion.

One tip - when a tile is tapped, make sure it can be moved by checking it is vertically or horizontally inline with the blank piece and that it is exactly one tile’s width away from the blank. If not, you’ll have tiles moving to the blank spot which are on the other side of the board (unless that’s what you want.)

Also, have a flag set to true when the transition starts and then set to false at the end (onStart() and onComplete() events of the transition.to() function.) Use that to prevent other moves happening at the same time.

#5

Great info horace, appreciate your help. Since the tiles have margins calculated into the for loop for the grid, i would imagine there is some minor corrections when checking for align horizontal and vertical, say something like tile.width + margin*2 or something like that, but your comments have definitely pointed me in the right direction. As of right now. I’m not entirely sure what you mean by other side of the board, but as soon as  I get home ill have a go at it.

Will also make sure to include the flags, that’s something I missed before.

Thanks again for all of your comments!

#6

Sounds like you’re trying to build a Puzzle8 or MatchX game.

I would not rely on the squares’ own x and y coordinates. You’re right about moving pieces with transition.to(), but you also want a lock while that is happening. So, in the onStart() and onComplete() you would set a scene-wide variable to true and then back to false, so that no other squares can be moved at the same time - assuming my assumptions about your intentions are correct.

Now, working out where to slide existing pieces to should be relatively easy. (Famous last words. And yes, I’ve tried building this myself and gone right round the houses.) Any time you want to hide a piece, when the tap event which causes it to be removed is received, simply record that square’s x and y somewhere. The other option is to have a permanently invisible square (or just a simple display group with nothing in it - my favourite trick!) which gets immediately moved to that location and then you just moved any other square to the invisible group’s location. No maths necessary.

Remember, the x and y values used to move display objects with transition.to() are not relative; You are simply telling the transition function what the final location should be. If you haven’t made a note of that location when a removed square is removed, you’re just making it hard for yourself.

If, however, you really do have a good reason for removing a square and needing to calculate the removal location later, without an actual square to base it on, the solution is this: Calculate a table full of x,y positions which *should* have squares in them. Then, loop through all the squares on the board (a simple 1 to group.numChildren will do) and remove any x,y positions from your calculated table which *do* have a square at that position. Anything left in the table is the position on screen of a missing square.

#7

Great stuff horace, thanks a lot for your input. In reality, I want to remove a piece at the very beginning of the scene, and no other pieces will be removed, since existing pieces will be moving to take that space.

I actually think having a display group with nothing on it is a great idea. You can move that group to the previous tile’s x and y and have pieces move into that space using that group as reference, haven’t thought of that before.

I will try at as soon as I can, thanks a lot for the help!

#8

So, it’s a Puzzle8 game :wink:

I heartily recommend that approach… There is literally no maths involved and it’s incredibly easy to work out motion.

One tip - when a tile is tapped, make sure it can be moved by checking it is vertically or horizontally inline with the blank piece and that it is exactly one tile’s width away from the blank. If not, you’ll have tiles moving to the blank spot which are on the other side of the board (unless that’s what you want.)

Also, have a flag set to true when the transition starts and then set to false at the end (onStart() and onComplete() events of the transition.to() function.) Use that to prevent other moves happening at the same time.

#9

Great info horace, appreciate your help. Since the tiles have margins calculated into the for loop for the grid, i would imagine there is some minor corrections when checking for align horizontal and vertical, say something like tile.width + margin*2 or something like that, but your comments have definitely pointed me in the right direction. As of right now. I’m not entirely sure what you mean by other side of the board, but as soon as  I get home ill have a go at it.

Will also make sure to include the flags, that’s something I missed before.

Thanks again for all of your comments!