Phaser.js how to rotate the objects of a group?

[black_c]

 

I create a group of objects and load a layer from Tiled.

this.saws = this.game.add.group();
this.saws.enableBody = true;
this.map.createFromObjects('saws', 4, 'saw', 0, true, false, this.saws);

In update function, I set the rotation angle and I want the saw to rotate around its axis.

this.saws.angle += 1;

 

But a group of objects starts positioning relative to the origin and the saw starts to spin around (0, 0) and around its axis. How to make it stay in its original place?

 

I just wanted to draw a level in Tiled, and assign certain behaviors to individual groups of objects: the saws rotate, the platforms move, etc.

Demo

[samid737]

If you create a group, the group itself will also have a world transform, thats the reason why it will rotate about the group its position. You could iterate trough each saw and rotate them individually:

this.saws.forEach(function(saw){saw.angle+=1});

An alternative is to try to add a tween animation that rotates objects and add it to each saw. Here is an example of both situations you can adjust in the script:

The example assumes that you do not want to rotate the bodies (it would be a bit pointless for the saw).

[black_c]

Thanks, another question: why when jumping on the platform the player moves with her, how to fix it?

var t = this.add.tween(this.platforms);
t.to({ x: 150 }, 1500, Phaser.Easing.Linear.None, true, 0, -1, true);

//in update function

game.physics.arcade.collide(this.player, this.platforms, this.platformSep, null, this);

if (this.player.locked) {
  if (this.player.body.right < this.player.lockedTo.body.x || this.player.body.x > this.player.lockedTo.body.right) {
  this.player.locked = false;
  this.player.lockedTo = null;
    } else {
      this.player.x += this.player.lockedTo.deltaX;
      this.player.y += this.player.lockedTo.deltaY;
    }
}

platformSep: function(player, platforms) {
  if (!this.player.locked) {
    this.player.locked = true;
    this.player.lockedTo = platforms;
    platforms.playerLocked = true;
    this.player.body.velocity.x = 0;
   }
}

 

[samid737]

The reason why that is happening is you are setting your velocity to zero when you are on the platform, but the platform also has 0 velocity. This is because your tween is directly adjusting the x, without considering physics. Then you are jumping and you both have zero velocity so it goes perfectly up. If the platform did have velocity then it would not behave this way. 

Here is an example of how it would look like if you tween the platform its velocity:

An alternative is let the player his x equal to the platform its x value when it is on the platform, but that would make him stick to the platform, so thats not really nice.