Рисование нескольких произвольных строк чрезмерно дорогостоящее EaselJS

Question

Я программирую 2D-игру HTML5 с использованием EaselJS, которая выглядит как симулятор планеты/гравитации, и я решил проследить движение/орбиту планеты с помощью линии, которая следует за каждой планетой, когда она движется. Вот быстрый GIF демонстрация:

Проблема: если я создаю строку в потиковое полотно идет полностью медленно (потому что это жеребьевкой линий на каждом тике, что дорого), так что я переместил дорогой код в setInterval с интервалом 250 мс между циклами, и проблема сохраняется, потому что, когда есть много фигур, она создаст много строк для каждого цикла. Кроме того, если я просто добавлю больше времени между каждым циклом, результат начнет выглядеть ... Minecraft-ish.

Я не имею ни малейшего представления о том, как решить эту проблему, так как все, что я могу думать будет включать в себя создание много линий на каждом цикле. Я попытался использовать кеш, но кеширование этих крошечных подробных строк просто заставило их исчезнуть в конечных кэшированных изображениях, и поскольку проблема заключается не в обновлении строк, а в создании новых, я думаю, что кеширование ничего не сделает для меня.

Вот соответствующий код:

setInterval(function() { 
    allObjs.forEach(function(obj1) { 
     if (typeof obj1.xpast !== "undefined" || typeof obj1.ypast !== "undefined") { 
      var trail = new createjs.Shape(); 
      trail.graphics.s("#fff").ss(1, "round").moveTo(obj1.xpast + .5, obj1.ypast + .5).lineTo(obj1.x + .5, obj1.y + .5); 
      trail.alpha = 0.25; 
      stage.addChild(trail); 
      setTimeout(function() { 
       createjs.Tween.get(trail).to({ 
        alpha: 0 
       }, 1000).call(function() { 
        stage.removeChild(trail); 
       }); 
      }, 10000); 
     } 
     obj1.xpast = obj1.x; 
     obj1.ypast = obj1.y; 
    }); 
}, 750); 

К сожалению, я не могу поставить свой код в JSFiddle в данный момент.

Answer 1

При перерисовке холста каждый кадр (и его очистка отражают изменение содержимого), векторные линии складываются очень быстро. Это связано с тем, что команды Graphics перерисовывают каждый кадр. Векторы на холсте не аппаратно ускоряются, поэтому использование этого подхода будет очень медленным, поскольку вы приближаетесь к множеству строк.

Лучшим подходом является кеширование вектора, а затем только рисование нового. Когда вы кешируете его, новый элемент холста создается за кулисами и используется вместо фактической графики. Это означает, что вы можете сделать это настолько сложным, насколько хотите, без каких-либо изменений в производительности.

• Cache форму на размер вам нужно будет (возможно размер холста?)
• Нарисуйте новую графику для этого кадра
• Update кэш (рисует содержимое графики на существующий кэш)
• Clear графика на следующий раз

Там является примером этого на GitHub:

• http://createjs.com/Demos/EaselJS/Cache_update.html (показывает updateCache в действии)
• http://createjs.com/Demos/EaselJS/CurveTo.html (показан аналогичный подход с использованием стадии без клиринговой)

Надежда это помогает!