current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Sign up ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.
up vote 2 down vote favorite

I'm new in Create.js and I'm trying to make countdown progress bar.

I have this simple code:

var stage = new createjs.Stage("timerCanvas");

stage.canvas.width = document.getElementById('timerProgress').offsetWidth;
stage.canvas.height = document.getElementById('timerProgress').offsetHeight;

var square = new createjs.Shape();
square.graphics.beginFill('red').drawRect(0, 0, stage.canvas.width, stage.canvas.height);


stage.addChild(square);


createjs.Tween.get(square, { loop: false }).to({ scaleX: 0 }, 90000);

createjs.Ticker.timingMode = createjs.Ticker.RAF;
createjs.Ticker.addEventListener("tick", stage);

My canvas width is 1920px and height 5px. My CPU average load is 20%, when this script runs...

I think it is high load, for such simple script. Am I right? If I am, What I'm doing wrong?

share|improve this question
    
I feel like this would be better suited to StackOverflow, but I don't know enough about Create.js to say if a game dev would know more about it. – QPaysTaxes yesterday

1 Answer 1

up vote 0 down vote

I am not familiar with create.js, if I wanted to create a loading bar I would use regular JS, with a canvas or CSS and html. You may want to use:

lC=document.getElementById("load");
lCC=lC.getContext("2d");
lCBackground="rgba(0,0,0,0)";
lCForeground="red";
function load(a){
    lCC.fillStyle=lCForeground;
    lCC.fillRect(0,0,lC.width*a,lC.height);
    lCC.fillStyle=lCBackground;
    lCC.fillRect(lC.width*a,0,lC.width-lC.width*a,lC.height);
}

With

<canvas id="load" width="1920" height="5"></canvas>

Just call load with the percentage as a decimal (.50=50%)

You can use any CSS Color

To un-render the loading bar use:

lCC.clearRect(0,0,lC.width,lC.height);

And will rerender when you call load again.

Note: you can change the color of the loading bar at anytime during the program, and this supports stuff like gradients and images

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.