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