CreateJS / EaselJS Strange Performance with Dimensions

Question

I'm currently developing a game, it uses a large memory card that you can drag and drop, and quickly moves with your character.

I created a simple version of the problem. JSFiddle example

Each tile is shaped and cached . All shapes fall inside the container. , the container moves depending on the position of the camera.

I notice strange drops in fps at certain zoom levels. The scale simply adjusts the size of the shapes.

If you zoom in, you will see what I mean.

Chrome

zoom 1 = good fps
zoom 3 = bad fps
zoom 5 = good fps

What will be the cause of this frame rate problem?

Note. I also posted this on the createjs community forum.
Community Question

Here is the code in jsfiddle example

HTML

<canvas id="mainCanvas" width="500" height="500"></canvas> <span id="fps-container"><span id="fps">Loading</span> FPS</span> 

Js

 /* This is a very simple version of a larger app/game i am creating uses a large map that is drawn in sectors (createjs shapes) I have not figured out the best way to cache, because if i cache all at once, its a lot of overhead. My main issue is the zoom levels, the zoom simply adjusts the sectorsize. The problem with this is that there seems to be a wierd performance problem at certain zoom levels. To test this out, adjust the camera zoom property. I do not recommend anything more that 6. */ //Generic Settings var Settings = { block_size: 50, rows: 50, cols: 50 } //Create Camera var Camera = { /* HERE IS THE ZOOM PROBLEM Chrome zoom : 1 = good fps zoom : 2 - 4 = bad fps zoom : 5 - 6 = good fps again ... wtf Safari Zoom: 7 = Good fps */ x: 0, y: 0, zoom:1 } //Create Short Alias var Stage = createjs.Stage; var Ticker = createjs.Ticker; var Container = createjs.Container; var Graphics = createjs.Graphics; var Shape = createjs.Shape; //Full Screen Canvas var canvas = document.getElementById("mainCanvas"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; //Create Stage var mainStage = new Stage(canvas); mainStage.snameToPixelsEnabled = true; mainStage.autoClear = true; //Start Ticker Ticker.addListener(this); Ticker.useRAF = true; Ticker.setFPS(30); //Create Container; var mainContainer = new Container(); mainContainer.snapToPixel = true; //Add Container to Stage mainStage.addChild(mainContainer); //Create Lots of Shapes var size = Settings.block_size * Camera.zoom; //For the purpose of demonstration, I am only creating a square //My actual app has much more complex drawings var graphics = new Graphics(); graphics.setStrokeStyle(1 * Camera.zoom, "round"); graphics.beginFill(Graphics.getRGB(230,230,230,0.5)); graphics.beginStroke(null); graphics.rect(-10, -10, size+10, size+10); var cols = Settings.cols; var rows = Settings.rows; for (var x = 0; x < cols; x++) { for (var y = 0; y < rows; y++) { var shape = new Shape(graphics); shape.x = x * size; shape.y = y * size; //Cache the shape, (the offset is to prevent the cache from chopping off complex shapes) var cache_offset = 10 * Camera.zoom; shape.cache(-cache_offset,-cache_offset, size + cache_offset, size + cache_offset); //Add shape to container mainContainer.addChild(shape); } } //Make map draggable var lastX,lastY; mainStage.onMouseDown = function(evt){ lastX = evt.stageX; lastY = evt.stageY; } mainStage.onMouseMove = function(evt){ if(lastX && lastY){ var stageX = evt.stageX; var stageY = evt.stageY; var diffX = lastX - stageX; var diffY = lastY - stageY; lastX = stageX; lastY = stageY; Camera.x += diffX / Camera.zoom; Camera.y += diffY / Camera.zoom; } } mainStage.onMouseUp = function(evt){ lastX = null; lastY = null; } //Update the container position based on camera position and zoom updatePosition = function(){ mainContainer.x = -Camera.x * Camera.zoom; mainContainer.y = -Camera.y * Camera.zoom; } tick = function(){ updatePosition(); mainStage.update(); var fps = document.getElementById('fps'); fps.innerHTML = Ticker.getMeasuredFPS(); } 

Answer 1

solvable .

I solved the problem by quoting each shape by tick and applying visible = false; if it goes beyond the updated fixed example

 //Update the container position based on camera position and zoom updatePosition = function () { var floor = Math.floor; var min_x = 0 + Camera.x * Camera.zoom - size; var min_y = 0 + Camera.y * Camera.zoom - size; var max_x = Screen.width + Camera.x * Camera.zoom + size var max_y = Screen.height + Camera.y * Camera.zoom + size; mainContainer.x = -Camera.x * Camera.zoom; mainContainer.y = -Camera.y * Camera.zoom; var shape_count = mainContainer.getNumChildren() - 1; for (var i = 0; i <= shape_count; i++) { var shape = mainContainer.getChildAt(i); if(shape.x < min_x || shape.x > max_x){ shape.visible = false; } else if(shape.y < min_y || shape.y > max_y){ shape.visible = false; } else { shape.visible = true; } } } 

Answer 2

What I noticed is that if the cache size is less than a certain size, the frame rate drops, so I did:

 var cache_offset = 10 * Camera.zoom; => var cache_offset = 10 * Camera.zoom + 77; 

And I played with this 77 a bit, my initial thought was that the caching area should be 2, but in zoom:3 , adding 77 turns out the caching size is 364x364px and any size higher, which works fine for zoom:3 , so I don’t know why, but the size of the cache rectangle somehow reduces the frame rate .

---

And there is one typo (actually does not affect this problem):

 mainStage.snameToPixelsEnabled = true; => mainStage.snapToPixelEnabled = true; 

This led to an increase in frame rate of about 2-3 frames per second