How to animate rectangle to fixed width in steps with createjs?

Question

I'm trying to create loading bar for my game. I create basic rectangle and added to the stage and caluclated size acording to the number of files so I get fixed width. Everything works, but for every step (frame) it creates another rectangle, how do I get only one object?

this is my code:

function test(file) {

r_width = 500;
r_height = 20;
ratio = r_width / manifest.length;

if (file == 1) {

    new_r_width = 0

    // Draw
    r = new createjs.Shape();
    r_x = (width / 2) - (r_width / 2);
    r_y = (height / 2) - (r_height / 2);

    new_r_width += ratio;

    r.graphics.beginFill("#222").drawRect(r_x, r_y, new_r_width, r_height);
    stage.addChild(r);
} else {

    stage.clear();
    new_r_width += ratio;
    r.graphics.beginFill("#" + file * 100).drawRect(r_x, r_y + file * 20, new_r_width, r_height);
    stage.addChild(r);
}
stage.update();

}

https://space-clicker-c9-zoranf.c9.io/loading/

Answer 1

If you want to redraw the rectangle, you will have to clear the graphics first, and then ensure the stage is updated. In your code it looks like you are clearing the stage, which is automatically handled by the stage.update() unless you manually turn off updateOnTick.

There are some other approaches too. If you just use a rectangle, you can set the scaleX of the shape. Draw your rectangle at 100% of the size you want it at, and then scale it based on the progress (0-1).

r.scaleX = 0.5; // 50%

A new way that is supported (only in the NEXT version of EaselJS, newer than 0.7.1 in GitHub), you can save off the drawRect command, and modify it.

var r = new createjs.Shape();
r.graphics.beginFill("red");
var rectCommand = r.graphics.drawRect(0,0,100,10).command; // returns the command

// Later
rectCommand.w = 50; // Modify the width of the rectangle

Hope that helps!