CreateJS /EaselJS Странная производительность с определенными размерами

В настоящее время я занимаюсь разработкой игры, в которой используется большая мозаичная карта, которую можно перетаскивать и быстро перемещать вместе с вашим персонажем.

Я создал простую версию проблемы Пример JSFiddle

Каждая плитка имеет форму и кэшируется . Все фигуры находятся внутри контейнера , контейнер перемещается в зависимости от положения камеры.

Я заметил странные падения кадров в секунду при определенных уровнях масштабирования. Масштаб просто регулирует размер фигур.

Если вы отрегулируете масштаб, вы поймете, что я имею в виду.

Chrome

zoom 1 = хороший кадр /с
зум 3 = плохие кадры в секунду
зум 5 = хороший кадр

В чем причина этой проблемы с частотой кадров?

Обратите внимание, я также разместил это на форуме сообщества createjs.
Вопрос сообщества

Вот код в примере с jsfiddle

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();
}
7 голосов | спросил Bodman 6 FebruaryEurope/MoscowbWed, 06 Feb 2013 10:41:41 +0400000000amWed, 06 Feb 2013 10:41:41 +040013 2013, 10:41:41

2 ответа


0

решаемые .

Я решил проблему, перебрав каждую фигуру на галочке и применив visible = false; если он выходит за пределы Обновленный исправленный пример

//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;
        }

    }

}
ответил Bodman 7 FebruaryEurope/MoscowbThu, 07 Feb 2013 01:05:51 +0400000000amThu, 07 Feb 2013 01:05:51 +040013 2013, 01:05:51
0

Что я заметил , так это то, что если квадрат кэширования меньше определенного размера, частота кадров падает, поэтому я и сделал:

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

И я немного поигрался с этим 77, сначала я думал, что область кэширования должна быть в степени 2, но в zoom:3, adding 77 приводит к размеру кэширования 364x364px и любому размеру выше, который также хорошо работает для zoom:3, поэтому я не знаю почему, но размер прямоугольника кэширования как-то приводит к падению частоты кадров .


И есть еще одна опечатка (на эту проблему не влияет):

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

Это увеличило частоту кадров примерно на 2-3 кадра в секунду

ответил olsn 7 FebruaryEurope/MoscowbThu, 07 Feb 2013 04:18:37 +0400000000amThu, 07 Feb 2013 04:18:37 +040013 2013, 04:18:37

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132