AS3 clearing FlxText

Question

I'm fairly new to AS3 and I am creating a text-based game and I am having difficulties clearing just the text from the screen. I am using FlxText and FlxButtons. When I use clear() it removes everything. Here is what it looks like(Sorry if this is more than I should have put I'm in a rush and the code-work is probably bad too.):

public function DragonState() 
  {
   
   FlxG.mouse.show();
   menuButton = new FlxButton(240, 220, "Menu", menu);
   add(menuButton);
   swordButton = new FlxButton(0, 220, "Slash", sword);
   add(swordButton)
   shieldButton = new FlxButton(80, 220, "Sheild Bash", shield);
   add(shieldButton)
   bowButton = new FlxButton(160, 220, "Shoot", bow);
   add(bowButton)
   
  }
  private function menu():void
  {
   FlxG.mouse.hide();
   FlxG.switchState(new MenuState);
  }
  public function sword():void 
  {
   
   playerAttack = Math.floor(Math.random() * (2 - 0 +2) * 7);
   dragonAttack = Math.floor(Math.random() * (1 - 0 + 1) * 7);
   add(new FlxText(0, 0, 320, "The Dragon hit you for " + String(dragonAttack)));
   add(new FlxText(0, 10, 320, "You hit the Dragon for " + String(playerAttack)));
   updateHealth()
  }
  public function shield():void
  {
   playerAttack = Math.floor(Math.random() * (2 - 0 +2) * 2);
   dragonAttack = Math.floor(Math.random() * (1 - 0 + 1) * 2);
   add(new FlxText(0, 0, 320, "The Dragon hit you for " + String(dragonAttack)));
   add(new FlxText(0, 10, 320, "You hit the Dragon for " + String(playerAttack)));
   updateHealth()
  }
  public function bow():void
  {
   playerAttack = Math.floor(Math.random() * (2 - 0 + 2) * 4);
   dragonAttack = Math.floor(Math.random() * (2 - 0 + 2) * 4);
   add(new FlxText(0, 0, 320, "The Dragon hit you for " + String(dragonAttack)));
   add(new FlxText(0, 10, 320, "You hit the Dragon for " + String(playerAttack)));
   updateHealth()
  }
  public function updateHealth():void
  {
   dragonHealth = dragonHealth - playerAttack
   playerHealth = playerHealth - dragonAttack
   add(new FlxText(0, 20, 320, "The Dragon has " + String(dragonHealth) + " health left."));
   add(new FlxText(0, 30, 320, "You have " + String(playerHealth) + " health left."));
   
   if (dragonHealth <= 0) {
    add(new FlxText(0,0,320,"Good Job"));
   }else if (playerHealth<=0) {
    add(new FlxText(0,0,320,"Oh No!"));
   } else {
    add(new FlxText(0,0,320,"What will you do?")); 
   }
  }

Do you want to set the text within each FlxText field to be blank? or are you attempting to remove the FlxText fields from the State? — C. Parcell, Sep 30 '14 at 15:15

score 1 · Answer 1 · answered Oct 01 '14 at 12:50

When using Flixel, it is a good practice to instantiate your elements in the state's create() method instead of using the class constructor. It will improve performance by saving memory and avoiding extra garbage collector runs.

It's also a good idea to have a reference/property to any element you are rendering in the screen, just like you are doing with your buttons. That way you can access them in any method of the state, which is useful to clearing texts, for instance.

Following that practice, you should have a property for each text you want in the screen:

class DragonState {
     // Properties for buttons
      private var menuButton :FlxButton;
      private var swordButton :FlxButton;
      private var shieldButton :FlxButton;

      // Properties for texts
      private var enemyAttack :FlxText;
      private var enemyHealth :FlxText;
      private var playerAttack :FlxText;
      private var playerHealth :FlxText;


      override public function create():void {
          // instantiate buttons
          FlxG.mouse.show();
          menuButton = new FlxButton(240, 220, "Menu", menu);
          add(menuButton);
          swordButton = new FlxButton(0, 220, "Slash", sword);
          add(swordButton);
          shieldButton = new FlxButton(80, 220, "Sheild Bash", shield);
          add(shieldButton);
          bowButton = new FlxButton(160, 220, "Shoot", bow);
          add(bowButton);

          // instantiate texts (they are empty by default)
          enemyAttack = new FlxText(0, 0, 320);
          enemyHealth = new FlxText(0, 20, 320,);
          playerAttack = new FlxText(0, 10, 320);
          playerHealth = new FlxText(0, 30, 320);

          add(enemyAttack);
          add(enemyHealth);
          add(playerAttack);
          add(playerHealth);
      }


      public function sword():void {
          playerAttack = Math.floor(Math.random() * (2 - 0 +2) * 7);
          dragonAttack = Math.floor(Math.random() * (1 - 0 + 1) * 7);

          // Change the content of texts
          enemyAttack.text = "The Dragon hit you for " + String(dragonAttack);
          playerAttack.text = "You hit the Dragon for " + String(playerAttack);
          updateHealth()
      }

      public function updateHealth():void {
          dragonHealth = dragonHealth - playerAttack
          playerHealth = playerHealth - dragonAttack
          enemyHealth.text = "The Dragon has " + String(dragonHealth) + " health left.";
          playerHealth.text = "You have " + String(playerHealth) + " health left.";

          // (...)
     }

      public function clearTexts():void {
          enemyAttack.text = "";
          playerAttack.text = "";
          enemyHealth.text = "";
          playerHealth.text = "";
     }
}

If you want to hide all texts, you could add them to a FlxGroup and hide that group. Hiding a group will hide everything contained in the group. It can be implemented as:

class DragonState {
      // (...)

      // Properties for texts
      private var enemyAttack :FlxText;
      private var enemyHealth :FlxText;
      private var playerAttack :FlxText;
      private var playerHealth :FlxText;

      // Group containing all texts
      private var texts :FlxGroup;

      override public function create():void {
          // (...)

          // create the texts group
          texts = new FlxGroup();

          // instantiate texts (they are empty by default)
          enemyAttack = new FlxText(0, 0, 320);
          enemyHealth = new FlxText(0, 20, 320,);
          playerAttack = new FlxText(0, 10, 320);
          playerHealth = new FlxText(0, 30, 320);

          // add all texts to the group
          texts.add(enemyAttack);
          texts.add(enemyHealth);
          texts.add(playerAttack);
          texts.add(playerHealth);

          // Add the group to the state
          add(texts);
      }


      public function sword():void {
          // (...)

          // Change the content of texts
          enemyAttack.text = "The Dragon hit you for " + String(dragonAttack);
          playerAttack.text = "You hit the Dragon for " + String(playerAttack);
          updateHealth();
      }

      public function updateHealth():void {
          // (...)
          enemyHealth.text = "The Dragon has " + String(dragonHealth) + " health left.";
          playerHealth.text = "You have " + String(playerHealth) + " health left.";
          // (...)
     }

     public function hideTexts():void {
          texts.visible = false;
     }

     public function showTexts():void {
          texts.visible = true;
     }
}

score 0 · Answer 2 · answered Sep 30 '14 at 15:32

First you want to keep track of the FlxText objects you are adding to your State object. You can either hold each as a separate variable or grouped within an Array at the class level.

var flxTextObjs:Array;

As you add the FlxText objects you should hold a reference to them.

Ex:

var fTxt = add(new FlxText(0, 0, 320, "The Dragon hit you for " + String(dragonAttack)));
flxTextObjs.push(fTxt);

Now that you can reference those objects you can call remove() rather than clear().

for(var x:int; x < flxTextObjs.length; x ++){
    remove(flxTextObjs[x]);
}

This is a sloppy example, but you should get the idea from it, I hope.

AS3 clearing FlxText

2 Answers2