5
\$\begingroup\$

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?

\$\endgroup\$
  • 1
    \$\begingroup\$ 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. \$\endgroup\$ – Nic Hartley Nov 6 '15 at 12:07
1
\$\begingroup\$

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

\$\endgroup\$
0
\$\begingroup\$

Try using this. It draw a bar, fill it up, and then drain it. (You will probably have to change some things so that it works with easeljs):

/* Get the canvas element */
	var c = document.getElementById('canvas');

/* Get the canvas' context */
	var ctx = c.getContext('2d');

/* Variables used for bar fill */
	var total = 100,
		hatched = 100;


window.onload = function() {
	/* Fill Rectangle*/
	ctx.fillStyle = "#FF0000";
	ctx.fillRect(0,0,c.width,c.height);
  var id = setInterval(dec,700);
}

function inc () {
	hatched = 100;
}

function dec () {
	hatched -= 4;
	/* Perc (or percentage) takes the answer from hatched/total... */
	var perc = hatched / total;
	/* ... and filled takes perc and multiplies it by canvas.width (700px in this case) */
	var filled = perc * c.width;
	
	ctx.clearRect(0,0,c.width,c.height);

	/* Fill Rectangle*/
	ctx.fillStyle = "#FF0000";
	ctx.fillRect(0,0,filled,c.height);

	if (hatched <= 0) {
		hatched = 0;
	}
}
<!DOCTYPE html>
<html>
<head>
	<title>Progress bar example</title>
</head>
<body>
<!-- Use Canvas to draw bar. -->
<canvas id="canvas" width="1920px" height="5px" style="border: 2px solid black">
	<p>Your computer doesn't support the canvas tag</p>
</canvas><br>
<br>

<!-- Buttons to increase and decrease values -->
<button type="button" onclick="inc();">Fill Up</button>

<script type="text/javascript" src="test.js"></script>
</body>
</html>

Hopefully this helps. I think using requestAnimationFrame would actually be much more useful.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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