CODEWITHSUNDEEP
createjs
N Joseph
N Joseph

Reputation: 1

Does adding more shapes slow the FPS in createjs

I am adding 37 shapes and is this the right way to add its mousedown and mouseover event handlers. With this 37 shapes the performance are not slower, but it increases with additional 100 shapes.

for(var i = 1;i<37;i++)
{
    Independent_Bet_Shape = new createjs.Shape()
    Independent_Bet_Shape.graphics.beginFill("#FFFFFF").drawRect(0,0,Independent_Bet_Width,Independent_Bet_Height);
    Independent_Bet_Shape.alpha=0.8
    Independent_Bet_Shape.cache(0,0,Independent_Bet_Width,Independent_Bet_Height)

    Independent_Bet_Container.name = "Bet_Container"+i
Independent_Bet_Container.addChild(Independent_Bet_Shape)   
    s_oStage.addChild(Independent_Bet_Container)
    if(i%3 == 0) //Splitting them in column for every 3 bets from bottom to top.
    {               
        Current_Bet_X = Current_Bet_X+Independent_Bet_Width+0.1
        Current_Bet_Y = Start_Bet_Y                     
        for(var j = 0;j<3;j++)
        {
            Independent_Column_Bets_Array[columnCount][j] = j + (last_J + 1) 
        }       
        columnCount +=1     
        last_J = j * columnCount            
    }
}

for(var i = 1;i<37;i++)
{
    Selection_Bet_Container = new createjs.Container();
    Selection_Bet_Container.x = 5//-700
    Selection_Bet_Container.y = 5//-210

    Selection_Bets_Array.push(Selection_Bet_Container)
    Independent_Bets_Array[i].addChild(Selection_Bet_Container)
    Selection_Bet_Container.cache(0,0,Independent_Bet_Width,Independent_Bet_Height)
    Independent_Chips_Array.push(Selection_Bet_Container)
}
for(var i = 1;i<37;i++)
{
    Independent_Bets_Array[i].on("mousedown", Independent_TableBetFun);
    Independent_Bets_Array[i].cursor='pointer'

}

Upvotes: 0

Views: 554

Answers (1)

Lanny
Lanny

Reputation: 11294

Here is a quick overview:

  • The stage has to redraw everything every single frame.
  • The more content you draw each frame, the slower it will go.
  • Graphics and text are not hardware accelerated. This means you are limited to CPU rendering, which is going to be considerably slower than drawing bitmaps.

There are lots of things you can do to get better performance:

  • Cache your shapes. By caching them, they can be rendered using the GPU, which is much faster. Lots of caches is not ideal, but will still run faster than piling up Graphics. See the cache demo.
  • Group things that don't change, and cache that instead. If you are adding things to the stage that don't change, or that change as a group, then caching that will offer huge performance benefits. We use this approach a lot with drawing demos, which draw only new content to the stage, and don't clear the stage.

Check out these examples:

Typically particle systems and other high-performance content will use bitmaps, or even SpriteSheets, which let you show a bunch of different elements with one image, which will give you huge advantages in performance.

If you are able to move to Bitmap or cached content, check out StageGL, which supports most things (some stuff like masks won't work - because they use vectors).

Cheers,

Upvotes: 1

Related Questions