Оптимизация html5 canvas игры

Прямо сейчас у меня есть два игровых цикла в игре, которую я делаю. Цикл draw, который перебирает массив объектов на экране, и логический цикл, который выполняет игровую логику. Логический цикл работает примерно на 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 на холсте каждый цикл draw, затем прохожусь по всем объектам и рисую их код draw. Также он не пытается рисовать объекты вне поля зрения.

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

Thanks A Lot

6
задан Isaiah 7 October 2011 в 01:00
поделиться