removeAllChildren is not working in createjs

Question

I'm trying to change the bitmap image in createjs and want to remove all children in a container when reset button is clicked. But removeAllChildren is not working in me.

function drawPhoneImage() {
  stage = new createjs.Stage('canvas');
  container = new createjs.Container();

  phone = new createjs.Bitmap(phoneImg);
  phone.x = 268;
  phone.y = 64;

  stage.addChild(container);
  container.addChild(phone);
  stage.update();

  phone.addEventListener("click", function() {
    console.log('phone clicked');
    createjs.Ticker.addEventListener("tick", movePhoneImage);
  });
}

function movePhoneImage(event) {
  phone.x -=10;

  if(phone.x <  156) { 
    phone.x =156;
    showPhoneSnap();
  }
  stage.update(event);
}

Then after clicking the phone object, I'll need to replace it with another bitmap(which works):

function showPhoneSnap() {
  snap = new createjs.Bitmap(snapImg);
  snap.x = 156;
  snap.y = 64;

  container.removeAllChildren();
  container.addChild(snap);
  stage.update();
}

At first, removeAllChildren is working in the first child of the container, but when i tried resetting the stage after adding another bitmap in the container..removeAllChildren() is not working.

function resetStage() {
  container.removeAllChildren();
  stage.update();
}

I'm having a hard time solving this issue, thanks for anyone who can help.

How is resetStage() being called? Are there any errors logged during the call? — olsn
$('#reset').click(function() { resetStage(); }); There's no error showing. — abelski
One presumption was, that the scope was maybe wrong, but in that case, it would raise an error of stage and container being undefined. — olsn

sebastian.derossi sebastian.derossi · Accepted Answer · 2014-01-20T23:45:39

Make sure that "snapImg" is an image that is loaded.

snap = new createjs.Bitmap(snapImg);

The issue is that you are not updating the stage when the image is loaded.

var image = new Image();
image.src = "path";
image.onload = showPhoneSnap;
function showPhoneSnap() {
    //This will ensure that the image is ready.
    var bmp = new createjs.Bitmap(this);
    ...
    stage.update();
}

removeAllChildren is not working in createjs

1 Answers