Draggable chain reaction

Examples
1

Hi All,

This is my first example in this community.

Can someone help me optimize this without the update method usage and only in side create method.

https://codepen.io/satya4satyanm/pen/KKVZPGW

Currently I am using tweens which I feel is eating up CPU usage.

Thank you in advance

2

Hello, just having fun with this and tweens…
not sure it works the same timing but here is my bet (only create with no update) if it helps:

this.draggable1 = this.add.circle(250, 80, 8, 0xff6699);
	
this.followers = [];
for(var i = 0; i < 10; i++) {
  this.followers.push(this.add.circle(this.draggable1.x, this.draggable1.y + (i+1) * 30, 8, 0xfabc99));
  this.followers[i].i = i;
}
	
this.draggable1.setInteractive({ draggable: true })
  .on('drag', function(pointer, dragX, dragY){

    this.scene.tweens.add({
      targets: this.scene.followers,
      x: dragX,
      delay: (t) => t * 100,
      duration: 100,
      ease: 'Linear'
    });

    this.scene.tweens.add({
      targets: this.scene.followers,
      y: (e) => dragY + (e.i + 1) * 30,
      delay: (t) => t * 100,
      duration: 100,
      ease: 'Linear'
    });

    this.setPosition(dragX, dragY);
})
3

Hi Darko,
This is a great attempt. :+1: :100:
Very elegant code. I was playing with your code to make it more smoother.
But seems I am missing something.
The first follower is little lagging and others are okay.
Is there a way we can make it smoother and more elastic.

Thanks

4

Hi, sorry, not sure what you mean… maybe try different chained duration?

duration: (t) => 100 * (t + 1),

It was not a perfect copy of your example, just a simplified approach avoiding update.
Of course you can just play with the values to adapt it, mostly delay and duration for that.
I hope it helps :slight_smile:

5

Playing with the code. :yum: