How do I move sprites apart to make room?

I am trying to make a system where the user drags a block to a spot between number of blocks in a row.

The other blocks need to move apart to make room for the incoming block.

My capx is sort of working. The problem is that the blocks start of overlap and I cannot figure out how to keep them apart in an elegant manner. I would really appreciate it if someone could take a look and help me get it working.

Here is the capx

https://www.dropbox.com/s/d2lp8ebtnjntg ... .capx?dl=0

czar

I took a very different approach to moving the blocks - but works pretty well. I added a bar under the row of blocks so that we can align the blocks to it. When you start to drag a new block over the bar, all the other blocks get re-positioned effectively making room for the new block (which snaps to its position when you drop it). If you pull a block off the bar, the remaining blocks snap back together. (You could, of course, disable drag and drop for blocks when they are dropped so you can't remove them).

I thought about lerping the blocks to their new positions, but I like the snappiness and simple, clean code.

my capx: http://www.rieperts.com/games/forum/MoveApart.capx

Hey czar and allan,

(edit: derp, I meant to copy the OP's name.)

One approach is to add a second private variable to the Block that smoothes out changes in the index variable. Then use that smoothed value to position the Blocks instead of the actual index.

So in the example I linked below, each block has two private variables, index and indexAnim.

Where index is the block's sequence in the row of blocks,

and indexAnim is a variable updated every tick to glide towards the value currently in index.

So if index changes from 0 to 1, then indexAnim will smoothly transition over several ticks from 0 to 1.

An easy way to set up indexAnim to do this smooth attraction to the value in index is with the following event.

Every tick: Set indexAnim to: lerp( indexAnim , index , 0.1 )

This means that every tick, the indexAnim value will move towards the index value by an amount of 0.1 (10%) of the distance currently between them.

Example capx

Here's a commented example capx.

Array Glide Reorder - v2

Controls

Left-click drag blocks.

Right-click to create new blocks.

Middle click to destroy blocks.

Mousewheel to change cell width.

fisholith

Very nicely done! - and nicely commented too.

One minor bug - you defined glideSpeed, but then didn't use it in the lerps... I put it in, and set it to around 0.8 and then it felt nice and snappy - the way I would want it anyway!

Ah, good catch with the missing glideSpeed, —

I was going to add it in so it would be easy to change the X and Y lerp speed in one place.

Also, sorry if my reply being directed at you seemed strange. I accidentally referred to your name when I started typing up the post, instead of the OP's name. I edited the starting line to include czar.

Though, I did take a look at your example capx, and it was cool.

I like that the reordering is specific to a zone you can drag blocks in and out of, and so ordering is restricted to just that area. It seems like a really practical way to approach a UI element, as I can see how with multiple zones you could drag blocks between them, for things like inventory or card decks.

AllanR and fisholith those are some awesome code examples. I have to go and read up on pickedcount I am not aware of that one.

Thank you very much for your time and effort. I was not getting anywhere fast yesterday and now I have two great examples to learn from and utilise in my program.

Fisholith your commented code is very nice. I haven't stepped through it yet to figure out how it works.

Happy to help.

I also noticed that my final version of the example disappeared somehow.

The image I added is from the final version, but the download link is to an earlier version. I could not find a saved copy of the final version so I rebuilt the last few parts, added in the glideSpeed variable along with quite a bit of commentary on it, and it should now match the posted image, and support deleting blocks with middle-click.

(also edited my first post to use the v2 example)

Array Glide Reorder - v2