Jump to content

Create multiple rectangles of multiple sizes


Petar
 Share

Recommended Posts

I am currently creating a rectangle like so:

Quote

export function Rectangle(width, positionX, positionY) {
  let rectangle;
  rectangle = new PIXI.Graphics();
  rectangle.beginFill(0xFFFF00);
  rectangle.drawRect(0, 0, width, 10);
  rectangle.position.x = positionX;
  rectangle.position.y = positionY;
  return rectangle;
}

const rectangle = new Rectangle(100, 600, 300);
    stage.addChild(rectangle);

What I would like to be able to iterate through an array of objects that each contain width, positionX and positionY values, in order to be able to create / stage one group that contains all rectangles:

Quote

    let rectangle;
    rectanglesToRender.forEach((note, i) => {
      rectangle = new PIXI.Graphics();
      rectangle.beginFill(0xFFFF00);
      rectangle.drawRect(0, 0, rectangle.width, 10);
      rectangle.position.x = rectangle.positionX;
      rectangle.position.y = rectangle.positionY;
      stage.addChild(rectangle);
    });

I also need to be able to move the entire group of rectangles at a steady rate (something I'm already doing with the single rectangle) and I need to be able to do collision detection with each individual rectangle.

Any ideas?

Link to comment
Share on other sites

The following is what I have done to create a group of sprites that I can animate as one:

 

Quote

    const texture = new PIXI.RenderTexture(renderer);
    const rectangle = new Rectangle(1000);
    renderer.render(rectangle, texture)

    const rectangles = new PIXI.DisplayObjectContainer();

    notesToRender.forEach((note, i) => {
      window['rectangle'+i] = new PIXI.Sprite(texture);
      window['rectangle'+i].width = note.width;
      window['rectangle'+i].position.x = note.positionX;
      window['rectangle'+i].position.y = note.positionY;
      window['rectangle'+i].hitArea = new PIXI.Rectangle(0, 0, 1, 400);
      rectangles.addChild(window['rectangle'+i]);
    });

    stage.addChild(rectangles);

I am still working on being able to do collision detection on a given child sprite.

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...