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.

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.

• javascript
• game-development
• phaser-framework
• phaserjs

• This question is incorrect. In general case, the rotation around the center would place a tetromino into the position breaking the game geometry. Look thoroughly and you will see. Your other mistake is trying to work with dark_blue_block, each shape separately. No, a tetromino should be an abstract structure with the same constructor and different input data. All operations have to be general. For example, it could be an array of block coordinates, plus X and Y shift, defining a non-moving point. Right now, you don't have a working design, you need to rethink it. – Sergey A Kryukov Commented Feb 6 at 16:01
• Why would your rotation is breaking? Rotate a T-shaped tetromino. It's center is in a half-cell position of the grid. If you rotate it around the center, the shape won't be aligned with the grid. – Sergey A Kryukov Commented Feb 6 at 16:03
• Hey Sergey! What I am trying to do is to treat each tetromino as a container of tiles rather than just one tile. This is why I am making functions to create each tetromino itself. What if the player fills a row? I will have to then delete all the 'tites' in that row. If I have each tetromino as an array of tiles, this should, I think, be an easy thing to do rather than treat a tetromino as one object. – Sereen Taleb Commented Feb 6 at 19:20
• Also, to make the tetromino fit with the game grid, I will have each tetromino move 1 block (50 pixels) when the tetromino is moving left or right. And what do you mean by an 'abstract strucutre'? – Sereen Taleb Commented Feb 6 at 19:23

1 Answer 1

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;
}