Are graphics and sprites to be kept separate?

[MattN]

Hi folks, 

I'm currently trying to make a ball bounce around the screen. I've done this before in C++/SFML, bog-standard html canvas and in ThreeJs, so now it's Pixi's turn!

What I'd usually do:

• Make a circle object
• Fill it with an image; it's fitted, so it'll resize as the circle does
• Do the maths to make the circle move and bounce around

The problem is, I'm struggling to understand how to pull it together in Pixi:

• I can make a sprite which takes on the size of the image
• This can be scaled, and have its width and height set
• I can make a PIXI.Graphics in the shape of a circle, or I can make a PIXI.Circle (which is what I expect I need)

BUT:

• I cannot fill the graphics/circle with the sprite, making the image fit the circle

It seems like the image and the circle object are to be kept separate, which seems a bit alien to me. How can I garuantee the graphics/cirlce object matches the shape of the image exactly, and visa versa? 

I've seen this, https://codepen.io/ccorder2/pen/NyvygQ but that doesn't cover the image part. 

What am I missing here? Help appreciated, thanks all!

 

[ivan.popelyshev]

You can fill circle with texture, its usual Adobe Flash stuff - beginBitmapFill. In pixi its beginTextureFill() , and you have to use same matrix offset as in Flash. Same function exists in most of 2d libs with Graphics objects.

PIXI.Circle is just a shape class with a few fields, it doesnt even render.

There are several ways to do circle with image, there is anti-aliased one, there are more effective one. If you want just one circle - just use Graphics beginTextureFill.

As for how to bounce it - you have to understand that there's coordinate for Graphics itself, and for shapes inside - you have to modify "graphics.position.x" or "graphics.x", not refill graphics each time shape changes coord. Shape coords have to be local.