Оптимизация HTML5 холста - PullRequest
       4

Оптимизация HTML5 холста

6 голосов
/ 07 октября 2011

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

У меня логический цикл настроен так:

vs.logicloop = function(){
    vs.Gameloop();
    //do the updating of object scripts
    if(vs.windowActive){
        var l = vs.scenegraph.length;
        var i = 0;
        while(i < l){
            vs.scenegraph[i].logicScript();
            i++;
        }
    }
    //restart loop
    setTimeout(vs.logicloop, 1000/(vs.fps+10));
};

и цикл рисования следующим образом:

vs.drawloop = function(){
    //clear the screen
    vsd.clr();
    //goes through everything in the scene
    //graph and draws it and runs each object's
    //personal draw code
    if(vs.windowActive){
        var l = vs.scenegraph.length;
        var i = 0;
        while(i < l){
            vs.ctx.save();
            vs.scenegraph[i].update();
            vs.scenegraph[i].draw();
            vs.scenegraph[i].drawScript();
            vs.ctx.restore();
            i++;
        }
    }
    //restart loop
    setTimeout(vs.drawloop, 1000/vs.fps);
};

Я использую setTimeout, потому что я слышал, что setInterval вызовет перекрытие циклов, если оно еще не закончено. Могу ли я сделать какие-либо оптимизации, чтобы действительно набрать скорость? Особенно оптимизирует игровые циклы.

Я слышал, что некоторые движки javascript выводят тысячи объектов на экран одновременно. Я не могу себе представить, как они это делают, в большинстве своем мои могут получить до 100 объектов на экране на очень старом компьютере и около 700 на компьютере с достаточным запасом. И это без большого количества игрового кода, работающего в фоновом режиме, и прежде чем я решил, как сделать пиксельное обнаружение столкновений и физику.

Мой процесс - рисовать цвет фона fillRect поверх холста в каждом цикле рисования, затем перебирать все объекты и рисовать их код рисования. Также он не пытается рисовать объекты вне поля зрения.

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

Большое спасибо

Ответы [ 4 ]

15 голосов
/ 07 октября 2011
  • если вы используете плавающие значения для координат спрайта, попробуйте преобразовать их в целые числа.это будет стоить вам потери субпиксельного рендеринга, но вы получите большую скорость.
  • не используйте изображения с нечетной шириной.Всегда используйте ширину как степень 2.
  • . В некоторых случаях это сложно реализовать, но если ваша игра подходит, не очищайте экран и не перерисовывайте все каждый кадр.вместо этого нарисуйте измененные части.
  • Если вам нужно очистить холст, не рисуйте пустой прямоугольник.попробуйте установить ширину / высоту холста снова с тем же размером.это должно сбрасывать пиксели быстрее, чем рисование прямоугольника.

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

13 голосов
/ 07 октября 2011

О боже, я мог бы написать вам полный сонет, если вы разместите весь свой код.Вот краткое изложение:

Прочитайте ответ эмира.Все они хороши, кроме последнего, который очень зависит от ситуации.Установка canvas.width = canvas.width для очистки холста может быть быстрее в некоторых браузерах, но это также забирает все состояние холста (то есть последнее заполнение набора и шрифт), что может замедлить процесс, потому что установка этих свойств на самом деле мучительно медленна.

Прочитайте мои статьи о производительности Canvas: http://simonsarris.com/blog/tag/performance

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

Возьмите Высокопроизводительный JavaScript от Zakas и прочитайте его.

Не используйте save () иrestore (), как вы находитесь в указанном коде, если вы не должны .Они просто замедляют процесс.

Для таймера см. http://paulirish.com/2011/requestanimationframe-for-smart-animating/

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

Многие проблемы с производительностью связаны со смертью от тысячи крошечных порезов.Например:

        vs.scenegraph[i].update();
        vs.scenegraph[i].draw();
        vs.scenegraph[i].drawScript();

To

        var scene = vs.scenegraph[i];
        scene.update();
        scene.draw();
        scene.drawScript();

Поможет минута сумма.Сколько у вас есть возможностей для мелочей, я не знаю - нам нужно было бы увидеть намного больше кода.

7 голосов
/ 20 июля 2012

Я слышал, что setInterval приведет к перекрытию циклов, если они еще не завершены.

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

0 голосов
/ 07 февраля 2012

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

Как общее прочтение игровых циклов, я бы порекомендовал это: http://www.koonsolo.com/news/dewitters-gameloop/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...