Как вывести один спрайт три раза с разными Х координатами?

Question

[Иван]

Пишу игру на PixiJS, хочу сделать три сердечка в верхнем левом углу, но не хочу делать три одинаковых спрайта с разными названиями.
Я создал массив с объектами, которые хранят данные для каждого нового сердечка, но я не понимаю как создать новое сердце, используя каждый раз новые данные из объекта при этом каждый раз заимствуя один и тот же спрайт.

// жизни героя
  healthBar = new Container();
  healthBar.position.set(app.stage.width - 20, 20);
  scene.addChild(healthBar);
  //здесь мы указываем путь по которому находится наш спрайт с сердцем
  let health = new Sprite(textureHealth);
  let herosLife = [{
      x: 0,
      y: 20,
      width: 20,
      height: 20
    },
    {
      x: 30,
      y: 20,
      width: 20,
      height: 20
    },
    {
      x: 50,
      y: 20,
      width: 20,
      height: 20
    }
  ];

я пытался просто три раза добавить один и тот же спрайт, просто указывав для каждого элемента массива свои данные, но в PIXI есть особенность, что он в таком случае добавить лишь последний элемент.

// healthBar.addChild(herosLife[0]);
  // healthBar.addChild(herosLife[1]);
  // healthBar.addChild(herosLife[2]);

Comments

[Сергей c0re]

//здесь мы указываем путь по которому находится наш спрайт с сердцем
  let health = new Sprite(textureHealth);
  let herosLife = [{
      x: 0,
      y: 20,
      width: 20,
      height: 20
    },
    {
      x: 30,
      y: 20,
      width: 20,
      height: 20
    },
    {
      x: 50,
      y: 20,
      width: 20,
      height: 20
    }
  ];

как связаны health и heroeslife??
каким образом выводится спрайт??

[Иван]

Сергей, health это можно сказать ссылка на спрайт. просто картинка. в herosLife находятся параметры для отображения health, то есть его Х и У координата, его размеры. спрайт выводится добавлением его в контейнер, который я назвал healthBar, при помощи

healthBar.addChild(то, что мы хотим вывести на экран)

[Сергей c0re]

BenderIsGreat34,

healthBar.addChild(herosLife[0]);

вы добавляете объект

{
x: 0,
y: 20,
width: 20,
height: 20
}

но в нем нет ссылки на сам спрайт, какая связь со спрайтом?

[Иван]

Сергей, до объектов я пробовал создать массив herosLife, в него три раза закинуть спрайт health, а потом добавить три раза массив с нужным индексом спрайта, а потом так же ссылаясь на индекс указать ему его параметры,

но в PIXI есть особенность, что он в таком случае добавить лишь последний элемент

[Сергей c0re]

BenderIsGreat34,

в него три раза закинуть спрайт health

ну так этого нет же, есть только координаты и размеры