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?

Improve this question
\$\endgroup\$
1
  • 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\$
    – anon
    Nov 6, 2015 at 12:07

2 Answers 2

Reset to default
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

Improve this answer
\$\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.

Improve this answer
\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .