Best way to deal with a group of sprites and treat them as one?

[cnwerb]

The title is a bit messy but let me explain what I want to do.

I'm building a web gui using pixi, and it allows users to drag and drop items onto the pixi stage (root Container object). Each of these items has a number of components to them, for example, they will have a background, a foreground image, a text label, etc. These components are all separate files in my assets folder. The foreground image, text label will all be rendered in a position relative to their background. In addition, there can be any number of these items on the stage.

What I want to do is be able to manage a group of these components as one single unit. So, for example, if the user were to drag the item around the pixi root container, the background component, the text label component and the foreground image component of the item should all move together in sync.

All of these items should be created together when the user drops onto the pixi root container.

How can I accomplish something like this?

I was thinking of extending the pixi Container class, and in the constructor of the child class, I would add all the pixi sprites to that container using the "this" keyword, and position all the sprites relative within that Container class. Then, I can add that container to the pixi root Container object.

Here's some really rough pseudocode to give you an idea:

//This is pseudocode!
class CustomContainer extends PIXI.Container {

     constructor(){
          super();

          background = PIXI.Sprite.FromImage(path1);
          foreground_image = PIXI.Sprite.FromImage(path2);
          textlabel = new PIXI.textobject;

          this.addChild(background);
          this.addChild(textlabel);
          //Do anything else 
     }

     //other custom functions
}

 

Is this a good way of doing what I want? Is there any other way of doing it? Can you foresee any problems with this?

Thank you

[themoonrat]

That's how I'd do it

[cnwerb]

3 hours ago, themoonrat said:

That's how I'd do it

Thanks themoonrat!