Jump to content

Are graphics and sprites to be kept separate?


Recommended Posts

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)


  • 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!


Link to comment
Share on other sites

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. 

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.

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.


  • Recently Browsing   0 members

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