Jump to content

PIXI.Graphics and PIXI.Sprite behave differently when scaling


caymanbruce
 Share

Recommended Posts

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

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...