Jump to content

create.js CPU high load


PiraTa
 Share

Recommended Posts

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? How can I make optimization?


Link to comment
Share on other sites

If I'm right the tween interpolates the scaleX of the square for 9 seconds.

 

The CPU is spending is time on stage.update painting the whole stage 1920 X 5 at each tick.

  1. createjs.Ticker.addEventListener("tick", stage);

 

1 - Option:

 

Depending on your requirements you could increase the delta time you do the stage.update using:


var handler = setInterval(function(){stage.update();}, 1000); (update / second)

 

and remove the handler when not needed.


2 - Option:

 

Reduce canvas width at the same time you tween the square, in teory you are reducing the painting area, and reducing the cost over time for the stage.update();

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...