PIXI.Graphics and PIXI.Sprite behave differently when scaling

[caymanbruce]

I make some PIXI.Graphics objects and put it on my stage, which contains a TilingSprite as background, then I scale my background and my Graphics objects. They look nice because they all scale to the same point. Then I put the PIXI.Graphics in Sprites and add the sprites onto my stage, scale them again. This time only the background scales. Sprites don't scale with the background. What happens? The Graphics and Sprites objects are at the same position. But they behave differently during scaling. I hope I use the right way to create sprites.

My code:

const array = new Array(COUNT);

for (let i = 0; i < COUNT; i++) {
		const x = randomInt(50, 100);
		const y = randomInt(50, 100);

		array[i] = new Graphics();
		array[i].beginFill(0xD48CFA);
		array[i].lineStyle(0);
		array[i].drawCircle(x, y, 10);
		array[i].endFill();

		stage.addChild(array[i]);
}

for (let i = 0; i < COUNT; i++) {
		const x = randomInt(50, 100);
		const y = randomInt(50, 100);

		const g = new Graphics();
		g.beginFill(0xD48CFA);
		g.lineStyle(0);
		g.drawCircle(10, 10, 10);
		g.endFill();

		const rt = RenderTexture.create(g.width, g.height);
		renderer.render(g, rt);

		array[i] = Sprite.from(rt);
		array[i].anchor.set(0.5);
		array[i].position.set(x, y);

		stage.addChild(array[i]);
}

 

[caymanbruce]

OK now I know why. I just need to place another container to hold my array of sprites and scale that container along with background. This is fun when working with PIXI.js.