Jump to content

an array of text objects in pixiJS


Recommended Posts

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

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'));

//load an image and run the `setup` function when it's done
//add images by:
  //creates a progress statement that will check to see if assets are loading
  .on("progress", loadProgressHandler)
  .load(ScrollingText, addButton);

//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); 
function addButton() {

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

  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'


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


function gameLoop() {

  text.x -= 1;



Link to comment
Share on other sites

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

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...