an array of text objects in pixiJS

[courtneyvigo]

I want to create 5 possible animations text instances that cycle through every time an action happens (like a button press for example). I am thinking this needs to be an array that increases the x position with a for loop (i++). What is the syntax for an array of text objects that can be cycled through with a for loop? Thanks in advance. Im new at pixi

this is what I have so far:

//Aliases: this is shorthand
var Container = PIXI.Container,
  autoDetectRenderer = PIXI.autoDetectRenderer,
  loader = PIXI.loader,
  resources = PIXI.loader.resources,
  Sprite = PIXI.Sprite;

//Create a Pixi stage and renderer and add the 
//renderer.view to the DOM
var interactive = true;
var stage = new Container(interactive),
  renderer = autoDetectRenderer(500, 500, {
    antialias: false,
    transparent: false,
    resolution: 1
  });
document.body.appendChild(renderer.view);


var btbTexture = PIXI.Texture.fromImage('https://res.cloudinary.com/dubyisimd/image/upload/v1481228417/buttonplaceholder_iit0dp.png');
var btn = new PIXI.Sprite(btbTexture);
btn.scale.x = 0.5;
btn.scale.y = 0.5;
btn.anchor.x = 0.5;
btn.anchor.y = 0.5;
btn.position.x = 55;
btn.position.y = 475;
btn.interactive = true;
btn.on('mousedown', () => console.log('mousedown'));
stage.addChild(btn);



//load an image and run the `setup` function when it's done
loader
//add images by:
//.add("images/beerCup_logo.png")
  .add("https://res.cloudinary.com/dubyisimd/image/upload/v1481228417/buttonplaceholder_iit0dp.png")
  //creates a progress statement that will check to see if assets are loading
  .on("progress", loadProgressHandler)
  .load(ScrollingText, addButton);
//.load();

//this function will check to see if all assets are loading to the stage. loader 
function loadProgressHandler(loader, resource) {
  //Display the file `url` currently being loaded
  console.log("loading: " + resource.url);

  //Display the precentage of files currently loaded
  console.log("progress: " + loader.progress + "%");

  //If you gave your files names as the first argument 
  //of the `add` method, you can access them like this
  //console.log("loading: " + resource.name); 
}
//button:
function addButton() {

  button = new sprite(resources["https://res.cloudinary.com/dubyisimd/image/upload/v1481228417/buttonplaceholder_iit0dp.png"].texture);
  stage.addChild(button);

  button.x = 15;
  button.y = 15;

}

//text scroll:
function ScrollingText() {

  //Im thinking this is where the array of 5 possible text positions should be


  text = new PIXI.Text('This is a pixi text', {
    fontFamily: 'Oswald',
    fontSize: 24,
    fill: 0xff1010,
    align: 'center'
  });

  stage.addChild(text);

  text.x = 500;
  text.y = 0;

  gameLoop();
}

function gameLoop() {
  requestAnimationFrame(gameLoop);

  text.x -= 1;

  renderer.render(stage);
}

 

[courtneyvigo]

in addition to this, I should add that the text instance should be created on the spot and destroyed as well so it ideally should be like this:

1. user hits button
2. a new text box is spawned and moves across the screen
3. user hits button again immediately and a new instance right underneath is created an animated across the screen
4. this continues until the fifth position is reached
5. once they are all off screen, they are destroyed to keep processing down