Description
Problem Description
I'm experiencing significant performance issues with the Group.get() method in Phaser. The method takes an unusually long time to execute, especially when the group contains a large number of objects. This significantly impacts the performance of my application.
Code Snippets
main.js (Relevant Part)
const seedItems = scene.add.group({
classType: SeedItem,
maxSize: -1,
runChildUpdate: false
});
this.fillItems = (itemClass, itemDataList, cols = 6, itemWidth = 181, itemHeight = 201) => {
const panel = scrollList.getElement('panel');
const line = Math.ceil(itemDataList.length / cols);
itemDataList.forEach((data, index) => {
const row = Math.floor(index / cols);
const col = index % cols;
const x = col * (itemWidth + 20) + 160;
const y = row * (itemHeight + 30) + 110;
let start = performance.now();
const seedItem = seedItems.get();
console.log("cost", performance.now() - start);
if (seedItem) {
seedItem.updateData(x, y, data);
seedItem.setActive(true);
seedItem.setVisible(true);
panel.add(seedItem);
}
});
panel.setSize(GameConfig.Screen.width, (itemHeight + 30) * line + 30);
scrollList.layout();
};SeedItem.js (Simplified and Sanitized)
export default class SeedItem extends Phaser.GameObjects.Container {
constructor(scene, x, y, children) {
super(scene, x, y, children);
// UI elements initialization
this.bg = scene.add.image(0, 0, "item_atlas", "item_bg.png").setInteractive({ useHandCursor: true });
this.icon = scene.add.image(0, 0, "common_atlas", "icon_seed_default.png");
this.levelText = scene.add.text(-70, -95, "", { fontFamily: "Arial", fontSize: "24px", fill: "#ffffff" });
this.countText = scene.add.text(45, 35, "", { fontFamily: "Arial", fontSize: "24px", fill: "#385bb6" });
this.nameText = scene.add.text(0, 85, "", { fontFamily: "Arial", fontSize: "22px", fill: "#fffffb" }).setOrigin(0.5, 0.5);
this.notBuyBg = scene.add.image(0, 0, "item_atlas", "item_not_available.png").setVisible(false);
// Event listeners
this.bg
.on("pointerdown", (pointer) => { /* ... */ })
.on("pointermove", (pointer) => { /* ... */ })
.on("pointerup", (pointer) => { /* ... */ });
}
updateData(x, y, data) {
this.setPosition(x, y);
const { level, count, name, type } = data;
this.levelText.setText(`Lv.${level}`);
this.countText.setText(count);
this.nameText.setText(name);
}
}Steps to Reproduce
- Create a group with
maxSize: -1. - Repeatedly call
group.get()in a loop (e.g., for populating a grid). - Observe the execution time of each
get()call.
Expected Behavior
The get() method should return a pooled object quickly, even for large groups.
Possible Workarounds
- Pre-warm the pool by pre-creating objects.
- Limit the group size if possible.
Could you investigate this issue or suggest optimizations? Thanks!