I want to keep the location of the container constant and change the scale value of the container, but when I change the scale value, the location of the container changes. What should I do for this ?
import { Scene } from 'phaser';
export class Game extends Scene
{
constructor ()
{
super('Game');
}
create() {
this.createSportItems();
}
createSportItems() {
this.sportItemsContainer = this.add.container();
const basketball = this.add.image(50, 84, 'basketball');
basketball.setScale(0.6);
basketball.originalScale = 0.6;
basketball.originalX = 50;
basketball.originalY = 84;
this.sportItemsContainer.add(basketball);
const football = this.add.image(150, 84, 'football');
football.setScale(0.6);
football.originalScale = 0.6;
football.originalX = 150;
football.originalY = 84;
this.sportItemsContainer.add(football);
const tennis = this.add.image(100, 180, 'tennis');
tennis.setScale(0.6);
tennis.originalScale = 0.6;
tennis.originalX = 100;
tennis.originalY = 180;
this.sportItemsContainer.add(tennis);
this.sportItemsContainer.originalScale = 1;
this.sportItemsContainer.originalX = 0;
this.sportItemsContainer.originalY = 0;
this.scaleAllItems(2);
}
scaleAllItems(scale) {
this.sportItemsContainer.list.forEach(item => {
item.setScale(item.originalScale * scale);
item.x = item.originalX * scale;
item.y = item.originalY * scale;
});
}
}