Draggable chain reaction

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.


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

Thank you in advance

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){

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

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

    this.setPosition(dragX, dragY);

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.


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:

Playing with the code. :yum: