Phaser change sprite rotation to the direction its going in

Question

I have this sprite group

this.photons = this.physics.add.group({
      key: "photon",
      repeat: 11,
      setXY: { x: 50, y: 50, stepX: 32 },
    });

    this.photons.children.iterate(function (child) {
      child.body.bounce.set(1);
      child.setVelocity(Phaser.Math.Between(300, 500),20);
      child.body.collideWorldBounds = true;
    });

Edit: the children are colliding with each other by this.physics.add.collider(this.photons, this.photons);

Edit: Camera Code

const cursors = this.input.keyboard.createCursorKeys();

    const controlConfig = {
      camera: this.cameras.main,
      left: cursors.left,
      right: cursors.right,
      up: cursors.up,
      down: cursors.down,
      acceleration: 0.06,
      drag: 0.0005,
      maxSpeed: 1.0,
    };

    this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl(
      controlConfig
    );

How can I make every child face the direction of their vector, changing every collision?

winner_joiner · Accepted Answer · 2023-06-12T14:42:44.593

It depends on what they should be colliding on. if only the world bound, you would have to:

set the property onWorldBounds on the photons

 this.photons.children.iterate(function (child) {
     ...
     child.body.onWorldBounds = true;
 });

setup a world event listener with: this.physics.world.on('worldbounds', ...), in the callback you can change the rotation of the sprite
link to the documentation

Update:
You can use vector-calculation to calculate the rotation

document.body.style = 'margin:0;';

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 183,
    physics: {
        default: 'arcade',
        arcade: {            
            gravity: { y: 0 },
        }
    },
    scene: { create }
}; 

function create () {
    this.add.text(10,10, 'DEMO TEXT')
        .setScale(1.5)
        .setOrigin(0)
        .setStyle({fontStyle: 'bold', fontFamily: 'Arial'});

    let graphics  = this.make.graphics();
    graphics.fillStyle(0xffffff);
    graphics.fillTriangle(0, 0, 10, 5, 0, 10);
    graphics.generateTexture('img', 10, 10);
    
    this.photons = this.physics.add.group({
      key: "img",
      repeat: 2,
      setXY: { x: 50, y: 50, stepX: 32 },
    });

    this.photons.children.iterate(function (child) {
      child.body.bounce.set(1);
      child.setVelocity(Phaser.Math.Between(0, 100),30);
      let initialAngle = (new Phaser.Math.Vector2(child.body.velocity)).angle();
      child.setRotation(initialAngle);
      child.body.collideWorldBounds = true;
      child.body.onWorldBounds = true;
    });
    
    this.physics.world.on('worldbounds', (photon) => {
        let newAngle = (new Phaser.Math.Vector2(photon.velocity)).angle();
        photon.gameObject.setRotation(newAngle);
    });
    
    this.physics.add.collider(this.photons, this.photons, (p1, p2) => {
        let newAngle = (new Phaser.Math.Vector2(p1.body.velocity)).angle();
        p1.setRotation(newAngle);
        newAngle = (new Phaser.Math.Vector2(p2.body.velocity)).angle();
        p2.setRotation(newAngle);
    });
}

new Phaser.Game(config);

<script src="//cdn.jsdelivr.net/npm/phaser/dist/phaser.min.js"></script>

1. I don't understand what on child.body.onWorldBounds really changed? 2. This.physics.world.on() stops camera movement, and if placed before the camera movement code, no sprites generate. — Vatsa Pandey, Jun 12 '23 at 13:27
If code stops working thats a error in the code. check the browser console, which error is thrown? — winner_joiner, Jun 12 '23 at 13:33
I fixed the listener, but i'm still not sure how to get all collisions or how to get the angle of the velocity. — Vatsa Pandey, Jun 12 '23 at 13:54
I updated my answer, with an example how to rotate the sprite. — winner_joiner, Jun 12 '23 at 14:24
Thanks. I've accepted the answer, but also, is there anyway to detect all collisions for the child, instead of just worldbounds? — Vatsa Pandey, Jun 12 '23 at 14:31
I updated my answer, you just need to use `this.physics.add.collider(this.photons, this.photons, ...);`, with a callback-function, where you reset the rotation. — winner_joiner, Jun 12 '23 at 14:43

Phaser change sprite rotation to the direction its going in

1 Answers1