How can I rotate my Phaser container around its center instead of its top-left corner?

Phaser containers don’t have a setOrigin() method because they aren’t images or sprites; they’re simply collections of display objects. The container rotates about its own (0, 0) coordinate (i.e. its top‐left by default), which is why when you change its angle, the rotation appears to be around that point.

To rotate your tetrimino about its center you have two main options:

---

1. Re-center the Container’s Children

Instead of positioning your sprites at arbitrary positions within the container, compute the center of your tetrimino and shift the sprite positions so that the container’s (0, 0) is at the center. For example, if you know the bounding box of your tetrimino (width and height), you can subtract half of that width/height from each sprite’s coordinates and then position the container itself at the desired world location.

Example:

JAVASCRIPTCopied
dark_blue_block() {
    // Create container with (0,0) local coordinate origin.
    const blocks = this.add.container(0, 0);

    // Define positions for the tiles assuming these are their intended positions in the original design.
    let positions = [
        { x: 50,  y: 50 },
        { x: 100, y: 50 },
        { x: 150, y: 50 },
        { x: 150, y: 100 }
    ];
    
    // Assuming overall size of the tetrimino:
    // You can compute these if pieces are always arranged similarly.
    // Here, we hardcode the bounding box for demonstration.
    let boundingWidth = 150;  // adjust as needed
    let boundingHeight = 100; // adjust as needed
    
    // Compute center of the tetrimino
    let centerX = boundingWidth / 2;
    let centerY = boundingHeight / 2;
    
    // Add sprites, shifting their positions so that the container’s origin becomes
    // the center of the tetrimino.
    positions.forEach(pos => {
        let sprite = this.add.sprite(pos.x - centerX, pos.y - centerY, "blue_tile").setScale(0.2);
        blocks.add(sprite);
    });

    // Now, position the container at the desired location in the scene.
    blocks.x = 150 + centerX;
    blocks.y = 100 + centerY + 30;  // including your additional offset
    return blocks;
}

With this approach, when you update this.curr_tile.angle += 90, the container rotates around its center as desired.

---

2. Use a “Pivot” Container

Another method is to create a parent container that acts as a pivot. In this method you:

1. Create an empty parent container that will be positioned at the intended rotation point.
2. Create your tetrimino container (with its original children positions) and position it relative to this pivot container so that the pivot lands at the center of the tetrimino.
3. When you rotate the pivot container, it rotates about its own (0, 0)—which is now the center of the tetrimino.

Example:

JAVASCRIPTCopied
create_dark_blue_block() {
    // Create the actual tetrimino container with unmodified child positions
    const blocks = this.add.container(0, 0);
    
    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([b1, b2, b3, b4]);
    
    // Suppose the center of the tetrimino (bounding box) is:
    let centerX = 150 / 2;
    let centerY = 100 / 2;
    
    // Create a pivot container placed at the desired world coordinates
    let pivot = this.add.container(150 + centerX, 100 + centerY + 30);
    
    // Adjust blocks’ position so that its center aligns with pivot's (0, 0)
    blocks.x = -centerX;
    blocks.y = -centerY;
    
    // Add the blocks container to the pivot container
    pivot.add(blocks);
    
    // Return the pivot container to be used for rotation.
    return pivot;
}

Now, when you do something like:

JAVASCRIPTCopied
this.curr_tile.angle += 90;

you are rotating the pivot container, and the tetrimino will appear to rotate about its center.

---

In Summary

• Why .setOrigin() doesn't work: Containers in Phaser don’t have this method because they don't have an origin in the same way Sprites do.
• Solution: Either re-position the children within the container so that (0, 0) is at the center, or nest your container inside a pivot container positioned at the desired rotation point.

Choose the method that best fits your game structure and how you plan to manage your tetriminos.