Pixi.JS: Why can't I add a Circle as a child of a Container?

Question

I'm a Pixi.js newbie. I want to have a player that's running around the screen, and composed of a few graphics primitives, like a circle and text.

I successfully created a Container and a Text, and added the Text as a child. But when I try to add Circle as a child, I get an error:

error TypeError: Cannot set property '_parentID' of undefined
    at e.addChild (Container.ts:145)
    at s (brython.min.js:1)
    at build_player_avatar40 (eval at e.loop (brython.min.js:1), <anonymous>:4330:71)
    at pixi_setup39 (eval at e.loop (brython.min.js:1), <anonymous>:4241:113)
    at brython.min.js:1
    at t.value (mini-signals.js:93)
    at e._onComplete (Loader.js:623)
    at Loader.js:662
    at s (async.js:33)
    at e.t.use (SpritesheetLoader.ts:37)

Does anyone have a clue what's wrong?

Answer 1

You cannot add a PIXI.Circle as a child object, because it doesn't inherit from PIXI.DisplayObject. The correct solution would be to create a PIXI.Graphics object (which is a display object) and use the drawCircle() function to draw a circle into the graphics object. PIXI.Graphics is used to build displayable objects out of graphical primitives like rectangles, polygons and lines.

Cheers!