javascriptgame-developmentphaser-framework

Rotating a container about its center


So, I am trying to make a tetris game. I have created a tetriminoe using a group of tiles that is helped by a container. The container rotates fine, but I am trying to rotate this container by its center. I don't know what point it is rotating around. I have tried using .setOrigin(), but it keeps telling me that .setOrigin() is not a function. Here is the code:

dark_blue_block() {
    const blocks = this.add.container(100, 100);
    let b1 = this.add.sprite(50, 50, "blue_tile").setScale(0.2)
    let b2 = this.add.sprite(100, 50, "blue_tile").setScale(0.2)
    let b3 = this.add.sprite(150,50, "blue_tile").setScale(0.2)
    let b4 = this.add.sprite(150,100, "blue_tile").setScale(0.2)
    blocks.add(b2)
    blocks.add(b1)
    blocks.add(b3)
    blocks.add(b4)
    blocks.y += 30
    blocks.x += 150
    return blocks
}

As you can see, I have defined a function that will create a dark blue block for me. It creates separate titles placed inside a container.

        if (this.allTiles.length == 0) {
            let tile = this.dark_blue_block()
            this.allTiles.push(tile)
            this.curr_tile = tile
        }

I call this function and set the container equal to this.curr_title.

In order to rotate this tile, I call this.curr_tile.angle += 90. Again, it rotates fine, but I want it to rotate about its center. And again, I have no idea what point it is rotating around.

Any help will be greatly appreciated. Thanks in advance.


Solution

  • The phaser search tells me "In Phaser, the rotation of a Container always takes place around its transform point, which is fixed at [0, 0] in local space. This means you cannot change the rotation point of a Container using .setOrigin(), as Containers do not support this method. "

    Can you try this instead -

    dark_blue_block() {
      // Calculate the center of the tetrimino as average of x and y coordinates
      const centerX = (50 + 100 + 150 + 150) / 4;
      const centerY = (50 + 50 + 50 + 100) / 4;
    
      // Create a container at the center point
      const blocks = this.add.container(100 + centerX, 100 + centerY);
    
      // Reposition blocks so they are centered around (0, 0) in the container
      let b1 = this.add.sprite(50 - centerX, 50 - centerY, "blue_tile").setScale(0.2);
      let b2 = this.add.sprite(100 - centerX, 50 - centerY, "blue_tile").setScale(0.2);
      let b3 = this.add.sprite(150 - centerX, 50 - centerY, "blue_tile").setScale(0.2);
      let b4 = this.add.sprite(150 - centerX, 100 - centerY, "blue_tile").setScale(0.2);
    
      blocks.add([b1, b2, b3, b4]); // Add sprites to the container
    
      return blocks;
    }

    Or a bit dryer:

    const calculateCenter = (positions) => ({
      x: positions.reduce((sum, p) => sum + p.x, 0) / positions.length,
      y: positions.reduce((sum, p) => sum + p.y, 0) / positions.length
    });
    
    dark_blue_block() {
      let positions = [
          { x: 50,  y: 50 },
          { x: 100, y: 50 },
          { x: 150, y: 50 },
          { x: 150, y: 100 }
      ];
    
      // Get the center point
      const { x: centerX, y: centerY } = calculateCenter(positions);
    
      // Create the container at its center
      const blocks = this.add.container(100 + centerX, 100 + centerY);
    
      // Adjust each sprite relative to container center
      positions.forEach(pos => {
        let block = this.add.sprite(pos.x - centerX, pos.y - centerY, "blue_tile").setScale(0.2);
        blocks.add(block);
      });
    
      return blocks;
    }