Databases
StackOverflow2013
Postsdbo
POCreateJS / EaselJS Strange Performance with certain size shapes
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCreateJS / EaselJS Strange Performance with certain size shapes
    text
    copied!<p>I am currently developing a game, it uses a large tiled map, that can be dragged around, and moves quickly with your character.</p> <p><strong>I have created a simple version of the problem</strong> <a href="http://jsfiddle.net/Bodman/HvbXA/" rel="noreferrer">JSFiddle Example</a></p> <p>Each tile is a <strong>Shape</strong> and is <strong>cached</strong>. All shapes go inside a <strong>container</strong>, the container is moved based on camera position.</p> <p>I am noticing weird drops in fps at certain zoom levels. The zoom simply adjusts the size of the shapes. </p> <p><strong>If you adjust the zoom you will see what i mean.</strong> </p> <h3>Chrome</h3> <p>zoom 1 = good fps<br> zoom 3 = bad fps<br> zoom 5 = good fps</p> <h2><strong>What would be the reason for this frame rate problem?</strong></h2> <p><strong>Note i have i posted this on the createjs community forum as well.</strong><br> <a href="http://community.createjs.com/discussions/easeljs/853-strange-performance-with-certain-size-shapes" rel="noreferrer">Community Question</a></p> <p>Here is the code in the jsfiddle example</p> <h3>HTML</h3> <pre><code>&lt;canvas id="mainCanvas" width="500" height="500"&gt;&lt;/canvas&gt; &lt;span id="fps-container"&gt;&lt;span id="fps"&gt;Loading&lt;/span&gt; FPS&lt;/span&gt; </code></pre> <h3>JS</h3> <pre><code>/* 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 &lt; cols; x++) { for (var y = 0; y &lt; 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 &amp;&amp; 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(); } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload